Use GitHub to build a personal blog

Copy it From Ruan Yifeng's blog, which is equivalent to making a Bak for excellent blog posts.

Original Website:Http://www.ruanyifeng.com/blog/2012/08/blogging_with_jekyll.html

 

People who like to write blogs will go through three stages.

In the first stage, when I first came into contact with the blog, I felt very fresh. I tried to select a free space for writing.

In the second stage, if you find that the free space is too limited, you can buy your own domain name and space to build an independent blog.

In the third stage, it is too difficult to manage independent blogs. It is best to keep control of independent blogs and allow others to manage them.Article.

Most blog authors stay at the first and second stages, because the third stage is not easy to reach: it is difficult for you to find people who are willing to manage servers for you.

But two years ago, the situation changed.ProgramStaff started to build a blog on the GitHub website. They both have absolute management rights and enjoy the convenience of GitHub-whenever and wherever they are, they can publish new articles by submitting a commit to the host. Even better, this is free of charge. GitHub Provides Unlimited Traffic and provides an ideal access speed throughout the world.

Today, I will demonstrate how to build a blog on GitHub. you can master the pages function of GitHub and the basic usage of Jekyll software. More importantly, you will experience a new idea of building a website.

I. What is GitHub pages?

If you know something about programming, you must have heard of GitHub. Facebook, known as a programmer, has a high popularity and many important projects are hosted on it.

Simply put, it is a version management functionCodeRepository. Each project has a home page listing the source files of the project.

But for a newbie, seeing a lot of source code will only make people dizzy, and do not know where to start. What he hopes to see is a simple and easy-to-understand web page that shows how each step should be done. Therefore, GitHub has designed the pages feature to allow users to customize the project homepage to replace the default source code list.Therefore, GitHub pages can be considered a static webpage written by users and hosted on GitHub.

GitHub provides templates that allow users to generate webpages on the site, but also allow users to write webpages themselves and then upload them. Interestingly, this type of upload is not a simple upload, but will be processed by the Jekyll program.

2. What is Jekyll?

Jekyll is a static site builder that generates static files based on the Web source code.It provides templates, variables, plug-ins, and other functions, so it can be used to compile the entire website.

The whole idea is obvious here. You first write the website source code that complies with the Jekyll specifications locally, then upload it to GitHub, which is generated by GitHub and hosts the entire website.

The benefits of this approach are:

* Free and unlimited traffic.

* Enjoy the version management function of git without worrying about missing articles.

* You only need to use your favorite editor to write articles. You don't have to worry about other things. They are all handled by GitHub.

Its disadvantage is:

* There is a certain technical threshold. You must understand git and web development.

* A static webpage is generated. External services must be used to add dynamic functions. For example, disqus can only be used to add comments.

* It is not suitable for large websites. Because databases are not used, all text files must be traversed every time they run. The larger the website, the longer the generation time.

However, it is one of the best options to build a small or medium-sized blog or project homepage.

3. One instance

Next, let's take an example to demonstrate how to build a blog on GitHub. You can follow this step by step. For ease of understanding, this blog has only the most basic functions.

You must have installed git and have a GitHub account before you build it.

Step 1: Create a project.

Create a directory on your computer as the main directory of the project. We assume that it is named jekyll_demo.

$ Mkdir jekyll_demo

Perform git initialization for this directory.

$ CD jekyll_demo

$ Git init

Then, create a branch GH-pages without a parent node. Because GitHub stipulates that only pages in this branch will generate webpage files.

$ Git checkout -- orphan GH-pages

All the following actions are completed under this branch.

Step 2: Create a configuration file.

Create a text file named _ config. yml under the project root directory. It is the setting file of Jekyll. We enter the following content in it. You can use the default options for other settings. For more information, see the official website.

Baseurl:/jekyll_demo

The directory structure is changed:

/Jekyll_demo
| -- _ Config. yml

Step 3: Create a template file.

Create a _ layouts directory under the project root directory to store template files.

$ Mkdir _ layouts

Create a default.html file as the default template of the blog. Enter the following content in the file.

<! Doctype HTML>

<HTML>

<Head>

<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>

<Title >{{ page. Title }}</title>

</Head>

<Body>

{Content }}

</Body>

</Html>

Jekyll uses the liquid template language. {page. Title} indicates the article title and {content} indicates the article content. For more template variables, see the official documentation.

The directory structure is changed:

/Jekyll_demo
| -- _ Config. yml
| -- _ Layouts
| -- Default.html

Step 4: Create an article.

Return to the project root directory and create a _ posts directory to store blog articles.

$ Mkdir _ posts

Go to the directory and create the first article. In this document, you must set the file name to 2012-08-25-hello-world.html. (Note: The file name must be in the format of "year-month-day-article title. suffix. If the webpage Code adopts the HTML format, the suffix is HTML; if the markdown format is used, the suffix is MD .)

In this file, enter the following content: (Note that there cannot be spaces at the beginning of the line)

---
Layout: Default
Title: Hello, world
---

<H2 >{{ page. Title }}</H2>

<P> my first article </P>

<P >{{ page. Date | date_to_string }}</P>

The header of each article must have a yaml file header to set metadata. It uses three dashes "---" to mark the start and end, and sets a metadata for each row. "Layout: Default", which uses the default.html file under the _ layoutsdirectory as the template of this document; "title: Hello, world", which indicates that the title of this article is "Hello, world". If this value is not set, by default, the title of the embedded file name is "Hello World ".

Behind the yaml file header is the official content of the article, which can use template variables. {Page. title} is the "Hello, world", {page. date} is the date of the embedded file name (you can also redefine the date variable in the file header), "| date_to_string" indicates to set page. the date variable is converted to a readable format.

The directory structure is changed:

/Jekyll_demo
| -- _ Config. yml
| -- _ Layouts
| -- Default.html
| -- _ Posts
| -- 2012-08-25-hello-world.html

Step 5: create a home page.

If you have an article, you need a home page.

Go back to the root directory, create an index.html file, and enter the following content.

---
Layout: Default
Title: my blog
---

<H2 >{{ page. Title }}</H2>

<P> latest article </P>

<Ul>

{% For post in site. Posts %}

<Li> {post. date | date_to_string }}< a href = "{site. baseurl }{{ post. URL }}" >{{ post. title }}</A> </LI>

{% Endfor %}

</Ul>

Its yaml file header indicates that the Homepage uses the default template and the title is "my blog ". Then, the home page uses {% for post in site. Posts %} to traverse all the posts. Note that the liquid template language specifies that the output content uses two-layer braces, while the simple command uses one-layer braces. {Site. baseurl} is the baseurl variable set in _ config. yml.

The directory structure is changed:

/Jekyll_demo
| -- _ Config. yml
| -- _ Layouts
| -- Default.html
| -- _ Posts
| -- 2012-08-25-hello-world.html
| -- Index.html

Step 6: publish the content.

Now, this simple blog can be published. Add all content to the local git repository first.

$ Git add.

$ Git commit-M "First Post"

Go to the GitHub website and create a library named jekyll_demo on the website. Then, push the local content to the library you just created on GitHub. Note: Replace the username in the following command with your username.

$ Git remote add origin https://github.com/Username/Jekyll_demo.git

$ Git push origin GH-pages

After the upload is successful, wait for about 10 minutes to accessHttp://username.github.com/jekyll_demo/You can see that the blog has been generated (replace username with your username ).

Home page:

Article Page:

Step 7: bind the domain name.

If you do not want to useHttp://username.github.com/jekyll_demo/This domain name can be changed to your own domain name.

The specific method is to create a text file named cname under the root directory of the repo, which is written into the domain name you want to bind, such as example.com or xxx.example.com.

If a top-level domain name is bound, DNS creates a new a record pointing to 204.232.175.78. If you bind a second-level domain name, DNS creates a new cname record pointing to username.github.com (replace username with your username ). In addition, do not forget to change the baseurl in the _ config. yml file to the root directory "/".

At this point, the simplest blog is built. For more information, see the example library of Jekyll founder and other blogs built with Jekyll.

(End)