Preface

For deploying Hexo blogs, there are primarily two methods. One is the most commonly used approach of deploying to a GitHub repository, which is then presented as a website through GitHub Pages. The other involves establishing a Git repository on your personal VPS, deploying to the VPS’s Git repository, and then accessing the static web files by visiting your VPS.

For the former approach, the advantage lies in being completely free (if no custom domain is bound), but there is a three to four-minute update period after each deployment, making it impossible to achieve real-time updates. Additionally, GitHub Pages has certain limitations on both the total file size and individual file sizes that can be uploaded (refer to the official GitHub website for details). The latter approach can overcome all the disadvantages of GitHub Pages, but renting a VPS incurs certain costs, and direct connectivity depends on your VPS’s network routing. You may make a choice between the two based on your specific needs. However, for my personal use, deploying to a VPS is clearly more convenient. Once the Git push is complete, changes to the website are immediately visible, with speeds even faster than $ hexo -s, and there is no need to worry about updated content failing to display after refreshing due to browser caching. Nevertheless, if your goal is to build a blog at zero cost, GitHub Pages remains an excellent option.

In summary, deploying to your own server is still the preferred choice.

Below, I will first introduce the deployment method for GitHub Pages. As for VPS deployment, I’ll write about that next time. After all, why not stretch the content into multiple posts? I’ll document the VPS deployment when I have time (it can be either simple or complex).

Deploying to GitHub Pages

Setting Git Username and Email Address

git config --global user.name "username"
git config --global user.email "useremail"

Replace username and useremail accordingly.

Creating a GitHub Repository

First, you need to register a GitHub account (which is undoubtedly straightforward and requires no elaboration on the registration process). After registration, navigate to the main page and enter the Repositories interface. Click the New button in the upper right corner to create a new repository. The Repository name and Description can be filled in arbitrarily. However, it is important to note that if you do not have a domain name and wish to access your blog, the Repository name must be yourusername.github.io. If you have a domain name, you can fill it in arbitrarily, and domain binding will be configured at a later stage.

Configuring GitHub Repository Access

There are two approaches here: one is to create a key on GitHub, and the other is to create a key locally.

Creating a Key on GitHub

Creating a GitHub Repository Access Token

On the GitHub main page, click your avatar and enter Settings. Then click Developer settings at the bottom of the left sidebar, select Tokens (classic) under Personal access tokens, and then generate new token (classic). Select the permissions you wish to grant (if unsure, you may select all, but in practice, only the permissions for deploying the repository to GitHub Pages are necessary), and set the expiration time. You can set it to never expire, though security considerations should be taken into account. Then copy the personal access token (you can only view it this one time; it will not appear again!). This string is the content that needs to be filled in the APIkey field in the repo.

Modifying the Deploy Configuration

Navigate to your blog project directory and locate the _config.yml file, which is Hexo’s configuration file. Some settings need to be modified to accommodate GitHub Pages:

① Under the deploy field, set type to git, indicating that Git will be used for deployment.

② Set repo to your GitHub repository address in the format https://APIkey@github.com/your user name/your repository name. Please replace according to the requirements!

The APIkey is an indispensable component for accessing your GitHub repository. Fill in your GitHub account name and repository name in your user name and your repository name respectively. Then set branch to master.

deploy:
  type: git
  repo: https://APIkey@github.com/your user name/your repository name
  branch: master

Creating a Key Locally

Creating an SSH Key

ssh-keygen -t rsa -C "your GitHub email"

Do not worry about anything; simply press Enter all the way through. Then navigate to the C:\Users\username\.ssh directory (check “Show hidden items”). If you are using macOS, it will be in the root directory of your system disk. You will also need to show hidden items. Then, open id_rsa.pub with a text editor and copy its contents. On macOS, you can use cat directly.

Adding the SSH Key to GitHub

At this point, return to GitHub and enter Settings:

Select SSH and GPG keys from the left sidebar and click New SSH key:

Choose any Title, then paste the contents of id_rsa.pub into the Key field and click Add SSH key. After saving, you can verify the connection locally: ssh -T git@github.com

Then modify the _config.yml file. Refer to the following template:

deploy:
  type: git
  repo: git@github.com:name/name.github.io.git
  branch: master

This essentially establishes a connection via SSH. The SSH connection address can be viewed directly in the repository under <>Code.

Deploying to GitHub Pages

We need to first install hexo-deployer-git: npm install hexo-deployer-git --save

Then run locally (navigate to the blog root directory):

hexo cl
hexo g
hexo d

The first command clears the previously generated public folder, the second generates the public folder, and the third deploys according to the deploy options in the _config.yml file.

After deployment is complete, you can access your blog via yourusername.github.io (if you do not have a domain name). If you have a domain name, the following section explains how to bind your domain to your GitHub Pages.

Binding Your Domain to GitHub Pages

First, navigate to Cloudflare and add a CNAME record for your domain pointing to yourusername.github.io. Whether to enable CDN is optional. However, it is recommended to enable it (if you do not have a reverse proxy), as it at least allows marginal accessibility.

Additionally, you need to create a CNAME file in the source folder under the hexo directory with your domain name written inside.

Then enter your repository’s settings, configure your Branch in the Build and deployment section, and then enter the domain you resolved above in the Custom domain section. After passing verification, you can click Save. Once completed, you can access your blog using your domain name!