Build a Hexo blog, fast, simple and efficient, build a personal blog at zero cost: Hexo + GitHub Pages + Cloudflare Pages complete guide

This article details how to use the Hexo framework to build a personal blog and deploy it toGitHub Pages andCloudflare Pages. The main contents include:

Environment preparation: Install Node.js and Git
Configure Git and GitHub: Set up SSH keys and create a GitHub repository
Initialize Hexo project: Install Hexo and create a new blog
Deploy to GitHub Pages: Configure deployment settings and push static files
Deploy toCloudflare Pages: Connect to GitHub repository and automatically deploy
Basic usage: create new articles, preview locally, publish updates

This tutorial is suitable for those who want to quickly build a personal blog but don't want to spend too much money. By using Hexo, GitHub, and Cloudflare's free services, you can easily create an efficient and concise blog website.

1. Preparation

domain name(Not required, you can also use a free domain name, orGitHub.ioorPages.devAssigned domain name is also OK)
GitHub（must, you need to register a GitHub account)
Cloudflare（Not requiredYou need to register a Cloudflare account so that you can deploy your blog in CF's CDN to accelerate it, but you can also useGitHub.ioAssigned domain name)

2. Software Support

Node（must）
Gitmust）
VSCode（Not required, this is a lightweight code editor that can help you develop a good programming habit)

2.1. Install Node

Open the Node official website and download the Node installation program that matches your system, otherwise there will be installation problems. Download address:https://nodejs.org/en
After downloading, install it. The default directory can be used for the installation.C:/Program Files/nodejs/
After the installation is complete, check whether the installation is successful. Press win + R on the keyboard, enter CMD, and then press Enter to open the CMD window and executenode -vcommand, and if you see the version information, it means the installation is successful.
Modify the npm source. npm downloads various modules. By default, it downloads from the national server, which is slow. It is recommended to configure it to the Huawei Cloud mirror source. Open the CMD window and run the following command: npm config set registry https://mirrors.huaweicloud.com/repository/npm/

2.2. Install Git

Go to the official website to download Git suitable for your current system:https://git-scm.com/downloads
After downloading, you can install Git in a fool-proof manner. It is best to use the default directory for the installation.C:/Program Files/Git
Click Start in the lower left corner of your computer to seeGit CMD,Git Bash,Git GUI.
- Git CMD It is the command style of Windows command line
- Git Bash It is the command style of the Linux system (recommended)
- Git GUIIt is a graphical interface (not recommended for beginners)

3. Configure Git key and connect to Github

Common Git commands

git config -l //View all configurations git config --system --list //View system configuration git config --global --list //View user (global) configuration

3.1. Configure username and email address

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

passgit config -l Check whether the configuration is successful.

3.2. Configure public key to connect to Github

Execute the following command to generate an ssh public key, which is used to connect your computer to Github ssh-keygen -t rsa -C "your email"

hintEnter file in which to save the keydirectCarry onIt is not recommended for beginners to set the key.

Then open the .ssh folder in the user folder under drive C, and you will see the following files

id_rsaPrivate Key
id_rsa.pubPublic Key

Use Notepad to open the public key in the above pictureid_rsa.pub, copy the contents, and then start configuring ssh keys in github>.
Configure SSH KEY to GitHub
Enter GitHub and click on the avatar in the upper right corner to selectsettings, enter the settings page and select SSH and GPG keys, name it whatever you want, fill in the public keyKeyThat column.
To test the connection, enter the following command
```
ssh -T git@github.com
```
The first connection will promptAre you sure you want to continue connecting (yes/no/[fingerprint])?,enteryesYou can

The information about connecting to the account appears, indicating that everything is done and the environment preparation is complete.

3.3. Create a GitHub.io repository

Click+button, selectNew repository, create a<username>.github.iowarehouse.
The format of the repository name must be:<username>.github.io (Note: The prefix must be the user name, which is required for previewing the blog. The warehouse name can be modified later)
Visibility must be selected Public To facilitate the first deployment check problem, click Create repository Just create it

4. Initialize Hexo blog

Create a folder to save the blog source code (the path I chose here isD:/Hexo-Blog), right-click in the folder and selectOpen Git Bash here
existGit BASHEnter the following command to install Hexo
```
npm install -g hexo-cli && hexo -v
```
After installation, enterhexo -vVerify that the installation was successful.
Initialize the Hexo project and install related dependencies.
```
hexo init blog-demo cd blog-demo npm i
```
After initializing the project,blog-demoThe structure is as follows:

node_modules: Dependency packages
Scaffolds: Some templates for generating articles
source: Used to store your articles
themes:theme
.npmignore: Files to be ignored when publishing (can be ignored)
_config.landscape.yml: Theme configuration file
config.yml: Blog configuration file
package.json: Project name, description, version, running and development information

enterhexo cl && hexo sStart a Project
Open the browser and enter the address: http://localhost:4000/. If you see the following effect, it means your blog has been built successfully.

5. Mount your static blog to GitHub Pages

Install hexo-deployer-git
```
npm install hexo-deployer-git --save
```
Revise _config.yml document
The _config.yml file in the blog-demo directory is the configuration file of the entire Hexo framework. You can modify most of the configurations in it. For details, please refer to the official configuration description.
Modify the last line of configuration, change repository to your own GitHub project address, and change the branch tomainRepresents the main branch (note the indentation).
YAML
```
deploy: type: git repository: git@github.com:cmliussss2024/cmliussss2024.github.io.git branch: main
```

After modifying the configuration, run the following command to deploy the code to GitHub (Hexo triple-complex).

// Git BASH terminal hexo clean && hexo generate && hexo deploy // or // VSCODE terminal hexo cl; hexo g; hexo d

hexo clean: Delete the previously generated files. You can usehexo clabbreviation.
hexo generate: Generate static articles, you can usehexo gabbreviation
hexo deploy： To deploy an article, you can usehexo dabbreviation

Note: You may be asked to enter your username and password when deploying.

If it appears Deploy done, it means the deployment is successful.

Wait two minutes and open the browser to visit, then we can see the blog content.

6. Mount your static blog to Cloudflare Pages

exist Workers and Pages Select Pages of Connecting to Git
Then log in to the GitHub account corresponding to your blog repository
ClickSave and deployThen wait for the deployment to complete.
hintSuccess! Your project has been deployed to the following regions: GlobalAfter that, visit the browser: cmliussss2024-github-io.pages.dev, then we can see the blog content.

You can also use your<username>.github.ioThe warehouse is set toPrivatePrivate library
If you have your own domain name, you can bind your own custom domain here.

How to use

Create a new blog post

hexo new This is a new blog post

Then edit it with a text editor_posts/This is a new blog post.mdThe content in is OK, please note that you should useMarkdownFormat writing.
For detailed usage, please refer to https://hexo.io/zh-cn/docs/writing

After editing and saving the article, you can use the following command to generate a local page http://localhost:4000/ for preview

// Git BASH terminal hexo cl && hexo s // or // VSCODE terminal hexo cl; hexo s

After confirmation, use the following command to push the local article to the GitHub repository.

// Git BASH terminal hexo cl && hexo g && hexo d // or // VSCODE terminal hexo cl; hexo g; hexo d

VSCODE terminal reports an error when executing for the first time

Open PowerShell as an administrator and enter the following command

POWERSHELL

Set-ExecutionPolicy RemoteSigned

References

https://hexo.io/zh-cn/
https://www.fomal.cc/posts/e593433d.html
https://docs.anheyu.com/

Acknowledgements

https://github.com/hexojs/hexo

5/5 - (1 vote)

Free Hexo blog, fast, simple and efficient, zero cost to build a personal blog