Build a personal blog on Github using the framework Hexo

Hexo+Github [Mac environment] If you have a Github account, we can get started, if not, sign up. Think about it is not difficult, just a mailbox, nothing else is needed.

1. Configure remote and local Github

1.1 Create a repository (Repo) on Github

Log in to the Github website, log in with your account, click + in the upper right corner, select New repository from the pop-up menu, enter the format of yourname.github.io in the text box under the pop-up Repository name , and then select

Public , and finally click the green Create repository to create it successfully.

Log in again, click your avatar in the upper right corner, select Your profile in the pop-up menu, you will find that the "youname.github.io" branch has been created successfully, click it, find Settings on the right, and find Deploy keys at the bottom of the left column, Click Add deploy key , enter your "key" , please refer to the Git key for the solution process of the key, so far the remote warehouse part has been configured.

If you are very interested in git, or have a headache with the command line mode of git, you can read this: Git introductory textbook

⚠️My git repository name is zhaodongchun.github.io, just use your own name.

1.2 Confirm that git and npm have been installed locally

Enter the following two commands in the terminal to confirm that git and npm have been installed. If the computer has not installed these two things, please refer to the official documentation to install: Git introductory textbook + npm Chinese documentation

 git --version
npm --version

2. Configure Hexo

1) Install hexo

First read through the official document hexo automatic deployment website , you don't need to read the content, just flip through it quickly and know that there is this tool here, and call it later when you need it. Then enter the following command in the terminal

 git --version
npm --version

2) Create a local working directory

First log in to github, click your branch yourname.github.io , there is a green button Clone or download on the right, click copy to clipboard to copy your git address, and cd to the terminal where you want to place the site The location, below I cd to the Desktop

 cd ~/Desktop
git clone https://github.com/zhaodongchun/zhaodongchun.github.io.git

3) Initialize your local site

 hexo init yourname.github.io
cd yourname.github.io
npm install hexo-deployer-git --save
hexo generate
hexo server

After typing the above command in the terminal, if Database saved is displayed at the end, it means that the local site has been initialized. You can hold down ctrl in the terminal and click http://localhost:4000/ to view your site. Note that this effect It is the effect of hexo's default template landscape, let's see how to change the template to the Next template.

4) Set up a personal template

There are two things involved here, one is Hexo and the other is Next. Let's go to the Hexo template first, and see what templates are available for us to choose from. If you click on the title name below the template, you will enter the source file address of github , just like creating a local working directory, you can copy its Git address. First take the next template as an example, first locate the Hexo site directory, and enter the following command in the terminal to install

 cd your-hexo-site
git clone https://github.com/iissnan/hexo-theme-next themes/next

After the installation is complete, modify the theme field in the configuration file _config.yml to next and save it, so far we have completed the site configuration. Continue to enter the following command in the terminal to complete the template debugging. If Database saved appears again, it means that the local site has been initialized. You can hold down ctrl in the terminal and click http://localhost:4000/ to view your site.

 hexo server --debug

5) Use Atom Code Articles

Download Atom first. You can directly download and install it from the official website or enter the following commands in the terminal. It doesn’t matter if you are not familiar with Atom, start with the official documentation and gradually build the Atom syntax. Read it online: Flight Manual

Install a command line panel for Atom, press command+， call up the setting panel, locate the install option, search for platformio-ide-terminal in the text box and click install to install the atom package. After the installation is complete, press command+shift+t A terminal will appear below, and the role of this package is to solve the problem of always switching back and forth between atom and terminal.

After completing the above operations, we probably have a concept of packages. Let's continue to install a markdown package, click the penultimate item on the left of Preference under the Atom menu + install , enter markdown , and install several packages in turn

• markdown-scroll-sync
• linter-markdown
• markdown-writer
• markdown-toc
• markdown-pdf
• markdown-preview

Then just toss around for a while to see what functions these several implements. Next, I will often use these packages in the process of writing articles with markdown.

/Desktop/zhaodongchun.github.io/zhaodongchun.github.io , this is my current location, enter ls in the mac terminal to see if you are in the root path, then enter atom . Open all files in atom, and then use the shortcut Press command+shift+t to open the atom terminal, and the mac terminal can be closed. Navigate to the _posts folder under the source folder in the left column. After expansion, there is a hello-world.md file. This file is viewed on the website. to the source file.

It will be very convenient to be familiar with the following shortcut keys

• command+w closes the current tab
• command+shift+m terminal
• ctrl+shift+m preview
• ">" block quote
• "-" task list
• "0." ordered list

Go back and flip through the Next template , set the站点配置文件and主题配置文件, set the language and nickname, basically the blog is fine. After saving, enter the following debugging command in the terminal. If Database saved appears again, it means that the local site has been initialized Done, you can enter http://localhost:4000/ in the browser to view your site.

 hexo server --debug

3. Deploy to Github

Before uploading local files to github remote, we need to tell atom the upload path, first log in to github, enter the branch of zhaodongchun.github.io , click the green clone or download button to copy the path, then enter atom, the root directory on the left There will be a _config.yml file. Let's set this configuration file. First, paste the copied path to the back of the url. Note that it ends at / . Change the back of the root to the warehouse on your github. You can copy and paste it. Note : there should be no less space behind, so that atom will know who to upload to.

• url: https://github.com/konglongyinger/zhaodongchun.github.io/
• root: /zhaodongchun.github.io
• deploy:
• type: git
• repo: https://github.com/konglongyinger/zhaodongchun.github.io.git

After the modification is completed, save it, enter the following command in the atom terminal, and view the upload result on github. If you find that the file has been displayed, you can enter the settings under your branch on github, scroll down to find GitHub Pages , and change the None under source to None . For the master branch , after clicking save, a green prompt Your site is published at https://konglongyinger.github.io/zhaodongchun.github.io/ will appear, and the link behind is your website, now you can click to see Effect.

 hexo deploy

4. Debug the website

• If you modify the article locally every time, you can use the following command to debug the preview

 hexo s --debug

• If you have changed the configuration file, it is best to use the clean command to clear the public directory before uploading to github

 hexo clean

• If you complete the phased tasks, you can upload to github with the following command

 hexo deploy

5. Domain name binding

First of all, you have a domain name. For example, I bought it from Baidu . After you have a domain name, you can take three steps.

1) Configure CNAME

Create a new text document in the source under the hexo folder, and enter the second-level domain name of the domain name we just bought in it. For example, I applied for zhaodongchun.com , just fill zhaodongchun.com , and then save it as CNAME . Pay attention to the capitalized CNAME.

2) Configure the parsing server

Next, go to the background of the domain name service provider to set the domain name resolution, add the CNAME record type, the resolution line is fine by默认, and the record value is zhaodongchun.github.io . After configuration, we re-upload it to github locally.

3) Configure site settings file redirection

Remember the configuration file we set before binding the domain name, we need to reset the url and root after binding the domain name, otherwise the css may be lost, set it back to the default, as follows:

• url: https://zhaodongchun.com
• root: /

4) Ok, so far, re-execute the following command to upload the file to github, enter your domain name in the browser, and you can log in normally.

 hexo clean
hexo g
hexo d