Build a personal blog based on GitHub and Hexo

This article uses a Mac computer to build a personal blog based on GitHub and Hexo. After two or three days, I tried countless times, and stepped on countless pits to build it. I mainly share a little experience with you, and I hope it can be helpful to everyone!

1. Introduction to github blog

GitHub is the world's largest social programming and code hosting website. GitHub can host various git repositories and provide a web interface, but unlike other services like SourceForge or Google Code, GitHub's unique selling point is to branch from another project. simplicity. Here is a rewrite of how to use Github's page function to build a personal blog!

The benefits of using the github pages service to build a blog are:

All are static files with fast access speed;
Free and convenient, you can build a free personal blog without spending a penny, no server or background;
You can bind your own domain name at will. If you don't look carefully, you can't tell that your website is based on github;
The data is absolutely safe, based on the version management of github, you can restore to any historical version;
Blog content can be easily packaged, transferred, and published to other platforms;

2. Preparations

You have a github account , if you don't have one, go to GitHub to register one
Installed node.js , npm, and understand the basics
installed git

3. Environment Construction

1. Install Node.js

Used to generate static pages, go to the official Node.js website , download the latest version, and install it all the way according to the prompts
Node.jsnpm is installed by default
You can also use Homebrewthe command to install. For details, please refer to the installation method of React Native Chinese website

2. Install Git

Used to submit local Hexo content to Github. The downloaded Xcode comes with Git, so I won't go into details here.
If you don't have Xcode, you can refer to the installation method on Hexo's official website .
General version of Git installation , children's shoes that cannot be downloaded, you can go to the Internet to search and download

3. Install Hexo

When both Node.js and Git are installed, Hexo can be officially installed. The terminal executes the following command:

sudo npm install -g hexo

At this point, you will be prompted to enter the administrator password (computer password) to start the installation

4. Build a hexo static blog locally

Create a new folder in the computer, the folder name is arbitrary, such as MyBlog
In a terminal, cd into the folder
The terminal runs git to generate a hexo template, which may be overturned

hexo init

After installing the template, install npm

npm install

Finally, start the hexo server

hexo s

At this point, open the URL http://localhost:4000 in the browser, and you can see the following page:

5. Link your blog to Github

1. Configure SSH key on GitHub

Why configure this? Because you must have your github permission to submit the code, but it is too insecure to use the username and password directly, so we use the ssh key to solve the connection problem between the local and the server.

1.1 First check whether the ssh key exists on the machine

If it exists, go to step 1.3 directly, otherwise go to step 1.2 to generate a new key
Open the terminal and enter, note that ~/.sshthere are no spaces between

cd ~/.ssh

If the prompt: No such file or directory means that you are using git for the first time, or you have not installed the SSh key before

1.2. Generate a new ssh key

Note that you will add your own registered GitHub email address later, open the terminal and enter

ssh-keygen -t rsa -C "邮件地址"

After entering the command, and then press Enter continuously, two files id_rsa and id_rsa.pub will be generated by default in the corresponding path (~/.ssh/id_rsa.pub)
Open 'Finder', choose to enter the folder (shortcut Command+Shift+G), enter ~/.ssh, enter the folder

1.3. Add ssh key to Github

Open the user directory, find the .ssh\id_rsa.pub file, open Notepad and copy the contents, open your github homepage, go to Personal Settings -> SSH and GPG keys -> New SSH key:

Paste the content you just copied into the key, fill in the title and save it

1.4. Test whether the SSH configuration is successful

ssh -T git@github.com

If prompted Are you sure you want to continue connecting (yes/no)?, enter yes, and you'll see:

Hi XXXX! You've successfully authenticated, but GitHub does not provide shell access.

Seeing this message indicates that SSH has been configured successfully!

1.5. Change GitHub username and email

$ git config --global user.name XXXX// 你的github用户名，非昵称
$ git config --global user.email  "[email protected]"// 填写你的github注册邮箱

2. Link to Github

2.1 Create a new XXX.github.io project

Create a project named XXX.github.io on Github, where XXX must be exactly the same as your own github username

2.2 Modify `_config.yml`file configuration

Open the _config.yml configuration file in the local MyBlog folder project
Set the type to git, and repository is the git address of your github.io repository, as shown below
Remember here that a space should be added after each hair, and the vertical direction must be aligned, otherwise an error may be reported

deploy:
  type: git
  repository: https://github.com/CoderTitan/CoderTitan.github.io.git
  branch: master

2.3 Upload the configuration file to GitHub

Open the terminal, cd to the MyBlog folder, the following commands are executed in the MyBlog folder

Execute the generate static page command in the blog folder directory:

hexo generate     或者：hexo g

At this point, if the following error occurs:

ERROR Local hexo not found in ~/blog
ERROR Try runing: 'npm install hexo --save'

Then execute the command:

npm install hexo --save

Then execute the configuration command:

hexo deploy           或者：hexo d

Error 1: If the command hexo deploy still reports an error: unable to connect to git or unable to find git, execute the following command to install hexo-deployer-git:

npm install hexo-deployer-git --save

Error 2: If the command hexo d is executed, the following error is reported:

ERROR Plugin load failed: hexo-server
//或者类似的错误
ERROR Plugin load failed: hexo-renderer-sass

Then execute the response command:

sudo npm install hexo-server
//或者
sudo npm install hexo-renderer-sass

After solving the play error, finally execute

hexo d

A few points to note:
1. The registered email address must be verified, otherwise it will not be successful;
2. The warehouse name must be: username.github.io, which usernameis your user name;
3. The warehouse creation will not take effect immediately, it will take a while, It takes about 10-30 minutes, or longer, mine took half an hour to take effect;
4. After the hexo d command is successfully executed, open the URL in the browser http://XXX.github.io(replace XXX with your username) to see and open http : //localhost:4000the same page

6. Install the theme

The built default theme is really ugly, so here we will replace a good-looking theme first, and you can go to the official theme to choose your favorite theme style
Example topic: Random

Terminal cd to the MyBlog directory and execute the following command:

git clone https://github.com/stiekel/hexo-theme-random.git themes/random

Modify theme: landscape in _config.yml to theme: random, and then re-execute hexo g to regenerate

Terminal cd to the MyBlog directory and execute the following commands (steps for deploying articles each time):

hexo clean           //清除缓存文件 (db.json) 和已生成的静态文件 (public)

hexo g             //生成缓存和静态文件

hexo d             //重新部署到服务器

7. Domain name binding

The domain name used now is the second-level domain name provided by Github XXX.github.io, and it can also be bound as your own personalized domain name.
To buy a domain name, you can go to the official website of GoDaddy. GoDaddyNow there is a Chinese version. Although the country shows Singapore, it does not affect the use. You can also use Alipay to pay.
You can also buy it from Aliwan.com . I bought it from Wanwang. You can do domain name resolution directly on its website.

1. Domain name resolution

If you point the domain name to a domain name to achieve the same access effect as the pointed domain name, you need to add a CNAME record. Log in to Wanwang, click after the domain name you purchased: Analysis, as shown below

After entering the resolution page, click Add Resolution, and add 3 records to your DNS configuration, as shown in the figure below.
Note that the CNAME record added is username.github.io. (Don't forget the latter.), the last point may not be displayed (my not displayed)

2. Set GitHub configuration information

Open your XXX.github.io project address and find the settings page
Scroll to the bottom to find the GitHub Pagesmodule, in Custom domain, enter the domain name you purchased, click Save to save

3. Create a CNAME file

Create a new file in the /MyBlog/themes/landscape/source directory with the name: CNAME file, note that there is no suffix! Write your own domain name directly
CNAMEmust be capitalized

//在终端cd到该目录下, 然后输入命令, 即可创建该文件
touch CNAME

After completing the above steps, cd to the MyBlog directory on the terminal and execute the following command to redeploy:
Finally, wait for about ten minutes, refresh the browser, and try to visit with your own domain name

$ hexo clean

$ hexo g

$ hexo d

At this point, it is finally done, feel it: https://www.titanjun.top