记录 hexo 博客搭建过程

发表于 更新于 分类于 ，

记录 hexo 博客搭建过程

一、工作流

（一） 客户端部分

  1. 使用 Visual Studio Code 配合 Markdown Preview Enhanced 插件编写 markdown 文件。
  2. 本地安装 hexo 及 hexo-theme-next 主题 根据 markdown 文件生成静态网页
  3. 通过 git 推送到远程服务器

（二） 服务端部分

  1. 初始化空的 git 仓库 /var/repo/hexo.git
  2. 利用 git 仓库的 hook 自动将客户端推送的文件同步到网站根目录/var/www/hexo
  3. 利用 Caddy 服务器实现公网访问

二、实操

（一）安装并初始化 hexo

先用 npm 安装 hexo

1
sudo npm install hexo-cli -g

为 hexo 新建目录

1
2
3
hexo init ~/HexoBlog
cd ~/HexoBlog
npm install

安装 Next 主题

1
npm install hexo-theme-next --save

（二）配置 hexo

编辑 ~/HexoBlog/_config.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# Site
title: Frank's Blog
subtitle: 'just like a fool'
description: ''
keywords:
author: Frank__Wang
language: zh-CN
timezone: 'Asia/Shanghai'

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://blog.bedrocktree.org/
permalink: :year/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

# ......

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

（三）配置 next 主题

复制出默认配置文件

1
cp ~/HexoBlog/node_modules/hexo-theme-next/_config.yml ~/HexoBlog/_config.next.yml

编辑 ~/HexoBlog/_config.next.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
# Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini

# ......

# Usage: `Key: /link/ || icon`
# Key is the name of menu item. If the translation for this item is available, the translated text will be loaded, otherwise the Key name will be used. Key is case-sensitive.
# Value before `||` delimiter is the target link, value after `||` delimiter is the name of Font Awesome icon.
# External url should start with http:// or https://
menu:
  home: / || fa fa-home
  about: /about/ || fa fa-user
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive
  #schedule: /schedule/ || fa fa-calendar
  #sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat

# Enable / Disable menu icons / item badges.
menu_settings:
  icons: true
  badges: true

# ......

（四）本地预览

先清理 hexo 缓存

1
hexo clean

新建必要的页面

1
2
3
hexo new about
hexo new tags
hexo new categories

再生成静态网页文件

1
hexo generate

开启本地预览服务器

1
hexo server

（五）准备远程服务器

在远程服务器初始化空的 git 仓库及网页目录

1
2
3
mkdir -p /var/repo
mkdir -p /var/www/hexo
git init -b main --bare /var/repo/hexo.git

配置 hook 方便自动化将 push 上来的网页文件同步到 caddy 托管的目录

1
vim /var/repo/hexo.git/hooks/post-receive
1
2
3
4
#!/bin/bash
TARGET="/var/www/hexo"
GIT_DIR="/var/repo/hexo.git"
git --work-tree=$TARGET --git-dir=$GIT_DIR checkout -f

授予其运行权限

1
chmod +x /var/repo/hexo.git/hooks/post-receive

根据 官方教程 安装 caddy 服务器

1
2
3
4
5
6
7
sudo apt install --yes debian-keyring debian-archive-keyring apt-transport-https curl
curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/gpg.key' | sudo gpg --dearmor -o /usr/share/keyrings/caddy-stable-archive-keyring.gpg
curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/debian.deb.txt' | sudo tee /etc/apt/sources.list.d/caddy-stable.list
sudo chmod o+r /usr/share/keyrings/caddy-stable-archive-keyring.gpg
sudo chmod o+r /etc/apt/sources.list.d/caddy-stable.list
sudo apt update
sudo apt install caddy

修改 caddyfile 配置文件

1
vim /etc/caddy/Caddyfile
1
2
3
4
5
blog.bedrocktree.org {
    root * /var/www/hexo
    file_server
    encode zstd gzip
}

开启 caddy

1
2
systemctl enable caddy.service
systemctl start caddy.service

（六）推送至远程服务器

安装 hexo-deployer-git 插件

1
npm install hexo-deployer-git --save

配置 ssh 免密登录

1
2
ssh-keygen -t rsa
ssh-copy-id [email protected]

编辑 ~/HexoBlog/_config.yml

1
2
3
4
5
6
7
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: 'git'
  repo: [email protected]:/var/repo/hexo.git
  branch: main
  message: "update {{ now('YYYY-MM-DD HH:mm:ss') }}"

推送至服务器

1
hexo deploy