Hexo Blog Building: Setting Up a Local Blog, Deploying to GitHub Pages and Cloudflare Pages
Introduction
This article is part of the Hexo Blog Building Guide series V1.0, mainly introducing the process from local construction of Hexo to deployment on GitHub Pages and Cloudflare Pages. For the entire Hexo Blog Building Guide series, please refer to: Hexo Blog Building Guide: Systematic Solutions and Detailed Construction Process.
Overall Process
- The process is as follows:
Explanation:
- The entire process involves four stages: preparation, building a local blog, deploying to GitHub Pages, and deploying to Cloudflare Pages; three modules: Hexo Local, GitHub, Cloudflare.
Preparation Work
Software Installation
- Download and install Node.js (Download from official website)
- Download and install Git (Download from official website)
Account Registration
- Register a GitHub account
- Register a Cloudflare account
Local Setup of Hexo Blog
Initialize Hexo
- Objective: Install the Hexo Command Line Interface (CLI)
1 | npm install -g hexo-cli |
This command installs the Hexo CLI globally, allowing users to use Hexo commands in any directory. The Hexo CLI provides various functions necessary for creating, generating, and deploying blogs.
- Objective: Initialize a new Hexo blog project.
1 | hexo init myblog |
This command creates a folder named “myblog” in the current directory and generates the basic structure of a new Hexo blog project within it, including necessary files and directories like the _config.yml configuration file and source folder. This step is fundamental for setting up the blog.
- Objective: Enter the newly created blog project directory.
1 | # For relative path |
This command switches the user to the myblog folder for subsequent configuration and management of the project. In this directory, users can execute other Hexo commands to generate and manage blog content.
- Objective: Install required dependencies for the project.
1 | npm install |
Executing this command in the myblog directory will download and install all necessary dependencies based on the list in package.json. These dependencies usually include the core Hexo library and its plugins, ensuring that the blog can run and generate correctly.
Basic Configuration
- Configure website site information
1 | # Site |
Local Preview
- Execute the following command to start a local server and access it at localhost:4000 to preview the Hexo blog for verification.
Deploying to GitHub Pages
Create GitHub Repository
- Repository name format:
username.github.io
, with the prefix being username. - Visibility selection: Public.
Configure Username and Email
Why configure username and email?
- Record commit information: Git records the author’s username and email with each commit. This information is crucial for viewing commit history and helps others understand code provenance and responsibility.
- Permission management: GitHub uses this information to identify committers. If the locally configured email matches that registered with your GitHub account, GitHub will attribute that commit to your corresponding user account, ensuring your contributions are accurately recorded.
- Avoid confusion: If username and email are not configured, Git uses default values (like computer name), which may lead to unclear commit records that are hard to trace.
Global configuration:
1
2git config --global user.name "Your Default Name"
git config --global user.email "default@example.com"- Your Default Name refers to your username.
- default@example.com refers to your email address.
Verify settings:
You can confirm the current repository’s configuration with:
1
git config --list
If your configured username and email display correctly, then configuration is successful.
Configure Hexo Deployment Settings
Two Deployment Configuration Methods: SSH and HTTPS
(1) SSH (Secure Shell)
- Features:
- When using SSH protocol, you need to generate an SSH key pair (public key and private key).
- Add the public key to your GitHub account’s SSH settings for authentication.
- Once configured, pushing code using SSH does not require entering username and password each time.
- Advantages:
- More secure because SSH uses encrypted connections.
- Suitable for users who frequently push code since it eliminates the hassle of entering credentials every time.
(2) HTTPS (Hypertext Transfer Protocol Secure)
- Features:
- When using HTTPS protocol, each time you push code you need to enter your GitHub account’s username and password (or use a personal access token).
- Advantages:
- Relatively simple configuration without needing to manage SSH keys.
- More convenient for users who do not push code frequently.
(3) Comparison of SSH and HTTPS
Feature/Name | SSH | HTTPS |
---|---|---|
Security | High (encrypted connection) | Medium (depends on password or token) |
Configuration Complexity | Higher (requires key generation and management) | Lower (directly uses username and password) |
Push Convenience | High (no need to enter credentials each time) | Lower (credentials needed each time) |
Choosing which method depends on your needs. If you frequently update your blog and want a simplified process, using SSH is recommended; if you update occasionally and prefer not managing keys, HTTPS may be more suitable. Since I frequently update my blog, I opted for SSH; below are specific steps for each method.
SSH Configuration Steps
(1) Preparation — Generate SSH Key
First, generate an SSH key pair (public key and private key) on your local machine.
Open Terminal:
- On Windows, use Git Bash or Windows Terminal.
- On macOS or Linux, open Terminal directly.
- This article is based on macOS operations.
Input command to generate key:
1
ssh-keygen -t rsa -b 4096 -C "your_email@example.com"
t rsa
: Specifies RSA as the key type.b 4096
: Specifies a key length of 4096 bits (more secure).C "your_email@example.com"
: Adds a comment to the key; typically your email.
Follow prompts:
- The system will prompt you to choose a save location; default is
~/.ssh/id_rsa
. If you don’t want to change it, just press Enter. - Next, it will ask if you want to set a passphrase. You can choose to enter one for added security or just press Enter to skip.
- The system will prompt you to choose a save location; default is
(2) Preparation — Add SSH Public Key to GitHub
After generating the key, add the public key to your GitHub account.
Copy public key: Use this command to view and copy public key content:
1
cat ~/.ssh/id_rsa.pub
Go to SSH and GPG keys settings:
- Log into GitHub at GitHub.
- Click on your profile picture in the upper right corner then select “Settings”.
- In the left menu find “SSH and GPG keys” and click on it.
Add new SSH key:
- Click “New SSH key” button.
- Enter a descriptive name in the “Title” field (e.g., “Myblog SSH Key”).
- Key type defaults to Authentication Key.
- Paste the copied public key content into the “Key” field.
- Click “Add SSH key” button to complete adding.
(3) Preparation — Test SSH Connection
To ensure your SSH configuration is correct, test your connection with GitHub using:
1 | ssh -T git@github.com |
If everything is correct, you should see a message similar to:
1 | Hi username! You've successfully authenticated, but GitHub does not provide shell access. |
- Modify
_config.yml
file by adding deployment information:
Open the Hexo project’s _config.yml
file, find or add deploy
section with:
1 | deploy: |
Replace username
with your GitHub username. If using another branch (like master
), adjust accordingly in branch
.
HTTPS Configuration Steps
Open Hexo project’s _config.yml
file, find or add deploy
section with:
1 | deploy: |
Replace username
with your GitHub username. If using another branch (like master
), adjust accordingly in branch
. Using this method requires security verification each time you deploy.
Install Deployment Plugin
Install deployment plugin
1 | npm install hexo-deployer-git --save |
Execute Deployment to GitHub Pages
Execute deployment
1 | Option 1: |
Note: If using HTTPS configuration when prompted for GitHub username and password by the system, enter appropriate information. If two-factor authentication is enabled, use personal access token as password.
Verify Deployment
After deployment completes, visit https://username.github.io
to check if your blog is successfully online.
Deploying to Cloudflare Pages
Why Deploy Cloudflare Pages
The reason for further deploying your Hexo blog from GitHub Pages to Cloudflare Pages mainly lies in aspects such as performance, security, availability, and functionality expansion.
Comparison Item | Cloudflare Pages | GitHub Pages |
---|---|---|
Performance | Global CDN acceleration for fast static resource distribution | Slower loading speed; initial load may have longer response times |
Caching Strategy | Flexible caching strategies optimizing resource loading | Limited caching mechanisms with relatively simple control |
Security | Strong DDoS protection ensuring stable website operation | Limited SSL support; challenges configuring SSL on custom domains |
Security Features | Free SSL/TLS certificates ensuring secure data transmission | Past vulnerabilities related to security |
Automation & CI | Automatic builds & deployments triggered after each commit | Longer build times; less efficient during high-frequency updates |
Automation & CI Features | Preview features facilitating team collaboration & content review | Lacks flexibility with limited build process control |
Additional Features & Analytics Tools | Built-in traffic analytics tools for real-time monitoring of website traffic & performance | Lacks analytics features; relies on third-party services for statistics |
Additional Features & Analytics Tools | Page rules & traffic management providing granular control | Limited support for complex configurations |
Steps for Deploying to Cloudflare Pages
(1) Click Create Project
In Cloudflare dashboard find “Pages” section then click “Create a Project”.
In Create Application-Pages page click Connect to Git.
image.png
(2) Authorize Access to GitHub Repository
Select Import Project from GitHub option and authorize Cloudflare access to your GitHub repository.
(3) Link Hexo Blog Repository
Select previously created hexo’s GitHub repository from list (i.e., username.github.io
).
(4) Configure Build Settings:
- Production Branch: Input
main
(or other branch you are using) - Build Command: Default is empty
- Output Directory: Default is empty
(5) Execute Deployment:
Click “Save and Deploy”.
(6) Deployment Results:
Prompted message indicates success! Your project has been deployed globally.
Verify Deployment
You can access your blog via domain provided by Cloudflare.
Verification can also be done by setting username.github.io
‘s GitHub repository as Private.
Daily Usage
Daily usage of hexo includes commands like creating new pages/posts, previewing content, deploying etc.:
1 | Create new post |
For more details refer to Hexo Documentation Commands.
Conclusion
Although it seems complex at first glance, actual operation goes smoothly. Ultimately you can set up and deploy your own Hexo blog.
Future updates will continue covering topics related to Hexo blogging including domain resolution for Hexo blogs, syncing content between Hexo and Notion, theme configurations for Hexo blogs, multilingual switching etc. Please stay tuned for our series on building Hexo blogs: Hexo Blog Building Guide: Systematic Solutions and Detailed Construction Process.