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:

Hexo Blog Overall Process from Local Setup to Deployment

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

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
2
3
4
# For relative path
cd myblog
# For absolute path, if myblog folder is located at /home/user
cd /home/user/myblog

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
2
3
4
5
6
7
# Site
title: Damon IndieHacker # 
subtitle: Damon's Indie Hacker Journey  
description: "Welcome to Damon's journey as an indie hacker, exploring digital nomad life, independent entrepreneurship, product development, and financial investment."  
keywords: 'digital nomad,indie hacker,independent entrepreneurship,product development,investment, ' 
author: Damon
language: en  # Default language

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
    2
    git config --global user.name "Your Default Name"
    git config --global user.email "default@example.com"

  • 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.

(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
2
3
4
5
deploy:
  type: git
  repo: git@github.com:username/username.github.io.git
  branch: main # or use master depending on your default branch settings

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
2
3
4
5
deploy:
  type: git
  repo: <https://github.com/username/username.github.io.git>
  branch: main  # or use master depending on your default branch settings

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
2
3
4
# Option 1:
hexo clean && hexo generate && hexo deploy
# Option 2:
hexo cl;hexo g;hexo d

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# Create new post
hexo new Blog Article Title

# Create new page (standalone page)
hexo new page --path about/me "About"

# Or hexo clean clears static webpage cache
hexo cl

# Or hexo server runs local deployment test
hexo s

# Or hexo generate generates static webpages from source files
hexo g

# Or hexo deploy pushes published content to GitHub Pages
hexo d

# Combined command for quick local preview
hexo cl;hexo s

# Combined command for quick deployment;
hexo cl;hexo g;hexo d

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.

References

https://hexo.io

https://github.com/hexojs/hexo