Building a Blog with Hexo

Setting Up the Environment#

centos7

Installing npm#

curl -sL https://rpm.nodesource.com/setup_16.x | sudo bash -
sudo yum install nodejs
node --version
npm --version

Installing git#

yum -y install git

Installing hexo command line#

npm install hexo-cli -g

Deploying the Blog to GitHub#

Create a repo (note the naming format, e.g., 1273732363.github.io)
Configure the _config.yml file

deploy:
  type: 'git'
  repo: 'https://github.com/1273732363/1273732363.github.io.git'
  branch: main

Download the plugin

npm install hexo-deployer-git --save

Clear cache, generate static files, and deploy to GitHub

hexo clean
hexo g
hexo d

The first deployment requires logging into your GitHub account.

Deployment successful

The username must be the same

Check if actions has pages running.

Vercel Custom Domain for Faster Access to GitHub Pages#

Register an account and link it to GitHub.
Add a new project.

Import the GitHub Pages project.

Configure a cname with the provided record value, ==custom host record==.

Change the URL in the hexo configuration file.

Modify Content and Upload to GitHub#

Modify package.json.

Run the debug: deploy.

Issues Encountered#

Network issues, just deploy a few more times.

Deploying to the Server#

1. Install Baota#

Add a site and configure SSL.

2. Setting Up the Git Repository#

Previously, the static files for hexo were pushed to a GitHub repository; now the server also needs a repository to store them.

1. Add a user git#

On the server side.

adduser git   # Add git user

chmod 740 /etc/sudoers  # Change the permissions of the sudoers file to writable by the file owner

vim /etc/sudoers

# Add a line below root ALL=(ALL) ALL

git ALL=(ALL) ALL

chmod 400 /etc/sudoers  # Change its permissions to readable by the file owner

2. Add SSH key for the git user#

This step is to establish a connection between the host and the server, allowing login without a password.

# On the host, open PowerShell, cd to C:\Users\admin\.ssh to generate the key; skip this step if you already have a key.

ssh-keygen -t rsa -C "taitres.cc"

# -t specifies the key type, default is rsa, can be omitted.

# -C is used to identify the comment for this key, any content can be entered.

# -f specifies the filename for storing the key, default is id_rsa.

# On the server side

su git  # Switch to git user

mkdir -p ~/.ssh

touch ~/.ssh/authorized_keys # Create authorized_keys file

chmod 600 ~/.ssh/authorized_keys  # Grant read and write permissions to the authorized_keys file for the file owner

chmod 700 ~/.ssh  # Grant read, write, and execute permissions to the .ssh folder for the folder owner

Copy the public key id_rsa.pub content to /home/git/.ssh/authorized_keys on the server, close the terminal, and use ssh git@server to log back into the server to test if you can log in to the git user without a password. If you encounter a Permission denied issue, you can try the solutions at the end of the article.

3. Create a Git repository#

sudo mkdir /home/git/repos    # Create a new directory, this is the location of the git repository

cd /home/git/repos

sudo git init --bare taiblog.git # Initialize a repository named taiblog

4. Configure hooks for automatic deployment#

Find /home/git/repos/taiblog.git/hooks/post-update.sample and rename it to post-update, change the content to

sudo vim post-update

#!/bin/sh

git --work-tree=/www/wwwroot/taitres.cc --git-dir=/home/git/repos/taiblog.git checkout -f

#!/bin/sh

git --work-tree=/www/wwwroot/blog.burnchi.site --git-dir=/home/git/repos/taiblog.git checkout -f

Then give permissions.

cd taiblog.git/hooks/

sudo chmod +x post-update  # Grant executable permissions

sudo chown -R git:git /home/git/repos/ # Change the repository owner to git

sudo chown -R git:git /www/wwwroot/blog.burnchi.site/ # Change the site folder owner to git

5. Test if the Git repository is available#

# On the host, if you can pull the repository, it means the Git repository is set up successfully git clone git@154.31.162.142:/home/git/repos/taiblog.git

3. Local Configuration and Testing#

1. Local Configuration#

Modify the _config.yml file in the local Hexo blog folder.

deploy:

  type: git

  repo: git@server:/home/git/repos/taiblog.git

  branch: master

2. Testing#

hexo clean  # Clear cache

hexo generate # Generate static pages

hexo deploy  # Deploy the local static page directory to the cloud server

Reasons for Deployment Failure#

Check if the branch in _config is written incorrectly; pay attention to master and main.

Setting Up WebP#

Download libaom-devel.

yum install libaom-devel

Download the binary webp-server-linux-amd64.

Releases

Create a webps directory under /opt.

chmod +x webp-server-linux-amd64
mkdir -p /opt/webps
mv webp-server-linux-amd64 /opt/webps/webp-server
cd /opt/webps
./webp-server -dump-config > config.json

Modify the configuration file.

vim config.json

Configuration explanation.

My configuration.

{
  "HOST": "127.0.0.1",
  "PORT": "3333",
  "QUALITY": "80",
  "IMG_PATH": "/www/wwwroot/blog.burnchi.site",
  "EXHAUST_PATH": "/var/cache/webp",
  "ALLOWED_TYPES": ["jpg","png","jpeg","bmp"],
  "ENABLE_AVIF": false
}

Start the webp service.

./webp-server -dump-systemd > /lib/systemd/system/webp-server.service
systemctl daemon-reload
systemctl enable webp-server.service
systemctl start webp-server.service

Modify the nginx virtual host configuration.

pwd 
/www/server/panel/vhost/nginx  （Modify the path of the nginx configuration file）

vim /www/server/panel/vhost/nginx/blog.burnchi.site.conf

Modify as follows.

...
#    location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
#    {
#        expires      30d;
#        error_log /dev/null;
#        access_log /dev/null;
#    }

...
location ~* \.(?:jpg|jpeg|gif|png)$ {
    proxy_pass http://127.0.0.1:3333;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_hide_header X-Powered-By;
    proxy_set_header HOST $http_host;
    add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
}

...
}

If it doesn't take effect, it may be due to the incorrect image file extension.

I changed from jpg to png, and it was able to convert to webp.

Setting Up Image Hosting#

==Create a New Repository==

==Token Acquisition==

Click on the GitHub avatar.

Left Developer Tools.

Generate a token in personal access tokens.

==Custom Domain==

Accelerate access to GitHub repository resources with free CDN.

https://www.jsdelivr.com/?docs=gh Free CDN

https://cdn.jsdelivr.net/gh/user/repo@version/file
https://cdn.jsdelivr.net/gh/username/repository

==Configuring PicGo==

Upload images.

Take any screenshot, then.

==Issues with Uploading==

Set up a proxy (requires magic).

It may have been uploaded before; just change the image URL in the md file to make it effective.

Check if the image exists in the GitHub repository.

Rambling Module#

docker run -d --name memos -p 5230:5230 -v ~/.memos/:/var/opt/memos neosmemo/memos:latest

Create a new site.

Set up reverse proxy.

Deployment Command Shortcuts#

Terminal.

npm run dd

Backup#

git status  Check the local file status
git commit -a -m "The theme is almost done"     （-a means add）
git remote -v Check the remote repository (if not, add below)
git remote add origin https://github.com/burnchi/blog.git  （blog is the newly created repository, only need to execute once, no need for later, origin is the repository alias）
git push -u origin main  Push to the remote repository

Restore#

git clone ...blog.git
cd hexo
npm install
hexo s

Beautifying the Blog (butterfly)#

Tag Page#

Go to the root directory of your Hexo blog
Type hexo new page tags
You will find the source/tags/index.md file
Modify this file:
Remember to add type: "tags"

Parameter Explanation
type 【Required】 Page type, must be tags
orderby 【Optional】 Sorting method: random/name/length
order 【Optional】 Sorting order: 1, asc for ascending; -1, desc for descending

Category Page#

Go to the root directory of your Hexo blog

Type hexo new page categories

You will find the source/categories/index.md file

Modify this file:

Remember to add type: "categories"

---
title: Categories
date: 2018-01-05 00:00:00
type: "categories"
---

Modify the theme configuration file.

Home: / || fas fa-home
Archives: /archives/ || fas fa-archive
Tags: /tags/ || fas fa-tags
Categories: /categories/ || fas fa-folder-open
List||fas fa-list:
  Music: /music/ || fas fa-music
  Movie: /movies/ || fas fa-video
Link: /link/ || fas fa-link
About: /about/ || fas fa-heart

To be written in each md file with the top_img attribute.

Article Configuration#

Article Description#

Writing Method Explanation
title 【Required】 Article title
date 【Required】 Article creation date
updated 【Optional】 Article update date
tags 【Optional】 Article tags
categories 【Optional】 Article categories
keywords 【Optional】 Article keywords
description 【Optional】 Article description
top_img 【Optional】 Article top image
cover 【Optional】 Article thumbnail (if top_img is not set, the thumbnail will be displayed at the top of the article page, can be set to false/image address/left blank)
comments 【Optional】 Display article comment module (default true)
toc 【Optional】 Display article TOC (default is set in the toc enable configuration)
toc_number 【Optional】 Display toc_number (default is set in the toc number configuration)
toc_style_simple 【Optional】 Display toc in simple mode
copyright 【Optional】 Display article copyright module (default is set in the post copyright enable configuration)
copyright_author 【Optional】 Article copyright module's author
copyright_author_href 【Optional】 Article copyright module's author link
copyright_url 【Optional】 Article copyright module's link
copyright_info 【Optional】 Article copyright module's copyright statement text
mathjax 【Optional】 Display mathjax (only needs to be configured when mathjax's per_page is set to false, default false)
katex 【Optional】 Display katex (only needs to be configured when katex's per_page is set to false, default false)
aplayer 【Optional】 Load aplayer's js and css on required pages, please refer to the music configuration below
highlight_shrink 【Optional】 Configure whether the code box is expanded (true/false) (default is set in the highlight_shrink configuration)
aside 【Optional】 Display sidebar (default true)

Article Cover#

Theme configuration file.

Add a cover in the md file:

Article Pinning#

Add the attribute sticky:1.

Reposted Articles#

Article Donations#

# Sponsor/reward
reward:
  enable: true
  QR_code:
     - img: /img/wechat.png
       link:
       text: WeChat
     - img: /img/ali.png
       link:
       text: Alipay

Article Directory#

Do not set directory numbers separately.

Add the attribute number: false in md.

Adding Interactivity#

https://butterfly.js.org/posts/4aa8abbe/#tag-hide

Version Control#

See the backup section.

Sidebar#

Theme configuration.

aside:
  enable: true
  hide: false
  button: true
  mobile: true # display on mobile
  position: right # left or right
  display:
    archive: true
    tag: true
    category: true
    ...

Blog Creation Time#

runtimeshow:
  enable: true
  publish_date: 2023/4/7 17:26:00

Writing Articles#

Create a new folder under source/_posts (consider it a category).

When writing an article, first create a category template (mainly change the categories attribute).

Content as follows.

---
title: {{ title }}
date: {{ date }}
tags:
categories: web security
cover: /img/1.jpg
---

Then create an article.

Template: hexo new <layout> <article title> -p <saved directory name>/<filename> 
Example: hexo new webanquan ssrf -p web security/ssrf 
hexo new pages -p web security/ssrf

The saved directory will be created automatically.

The template uses the category template, just change the cover for the article cover, tags can be adjusted as preferred.