Hexo NexT 部署

本地安装 Hexo,提交代码至 Github,触发 Github Action 生成静态文件 同步至服务器

Hexo 本地部署

根据 Hexo 文档 Hexo 需要 Node.jsgit

环境

  1. Mac 上在终端中使用命令brew install git 安装 Git,使用 git -v 查看版本

  2. 使用brew install node安装 node.js (npm 会同步安装),可以使用 node -vnpm -v 查看版本,根据版本文档 node 14.0.0 以上即可。

  1. 使用npm install -g hexo-cli 安装 Hexo,注意可以使用不同的源 npm install -g hexo-cli --registry https://registry.npm.taobao.org

初始化 Hexo 项目

在合适的文件夹下,初始化 Hexo 项目

  1. 使用 hexo init <项目名> 初始化 Hexo
1
2
3
4
5
6
7
➜  hexoInit hexo init MyBlog
INFO Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
INFO Install dependencies
INFO Start blogging with Hexo!
➜ hexoInit la
total 0
drwxr-xr-x@ 12 shenhongge staff 384B Jan 25 15:57 MyBlog
  1. 使用 cd <项目名> 进入生成的文件夹,ls用来查看项目结构
1
2
3
→ hexoInit cd MyBlog
→ MyBlog 1s
_config.landscape.yml node_modules _config.yml package-lock.json package.json scaffolds source themes
  1. 这个时候可以使用npm install 安装项目所需依赖
  2. 然后可以使用hexo s启动网站了。注意:如果出现端口被占用,可以使用 lsof -i:4000查询占用端口的程序,然后使用sudo kill -9 <PID>结束该程序,或者使用 hexo s -p <port> 指定其他端口运行服务
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
→ MyBLog hexo s
INFO Validating config
INFO Start processing
INFO Hexo is running at http://localhost:4000/ • Press Ctrl+C to stop.
^Z
[2]
+ 83824 suspended hexo s
→ MyBlog 1sof -1:4000
COMMAND PID
USER
FD
node
83824 shenhongge
TYPE
43u IPv6 0x784b81986dadec79
DEVICE SIZE/OFF NODE NAME
OtO TCP *:terabase (LISTEN)
- MyBlog kill -9 83824
[2] + 83824 killed
hexo s
- MyBlog hexo s -p 40001
INFO Validating config
INFO Start processing
INFO Hexo is running at http://localhost:40001/ • Press Ctrl+C to stop.

安装 NexT 主题

目前 NexT 的版本为8.19.0 根据 官方文档 可以使用npm install hexo-theme-next或者git clone https://github.com/next-theme/hexo-theme-next themes/next 安装主题,这里推荐使用npm install hexo-theme-next的方式安装,方便后续的代码提交和自动部署。

1
2
3
4
→ MyBlog npm install hexo-theme-next
added 1 package, and audited 243 packages in 2s
28 packages are looking for funding run 'npm fund' for details
found 0 vulnerabilities

安装后,会发现在themes文件夹下没有 next 主题,而是出现在了node_modules 文件夹下面。

为了使安装的主题应用到 Hexo 上,请修改项目根目录下的_config.yml文件,将theme: landscape 修改为 theme: next

现在即可使用 hexo s启动网站了。

配置主题

在安装完主题后,可以根据官方文档进行个性化配置了:HexoNexT Theme Settings

注意点:

  1. 对于 Hexo5.0 以上版本官方建议使用备用主题配置:
    1. 将 next 主题的配置文件从 MyBlog/node_modules/hexo-theme-next中复制出来并重命名为_config.next.yml即和 Hexo 默认主题landscape类似,如使用cp node_modules/hexo-theme-next/_config.yml _config.next.yml
    2. 如使用 git clone https://github.com/next-theme/hexo-theme-next themes/next 安装主题,将配置文件从MyBlog/themes/next 中复制出来,如使用命令cp themes/next/_config.yml _config.next.yml
  2. _config.yml中关于语言的设置,请务必添加国家代码,否则可能出现乱码:language: zh-CN

Github 代码提交

  1. 创建Github 仓库 建议设定为私有的,仓库名随自己喜欢

  2. 本地配置 deplay key,可以参考 Github 文档

    1. 生成SSH Key 参考 ssh-keygen -t ed25519 -C "your_email@example.com"
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
→ ssh ssh-keygen -t ed25519 -C "XXXX@XXX.XXX"
Generating public/private ed25519 key pair.
Enter file in which to save the key (/Users/shenhongge/.ssh/id_ed25519): id_ed25519_test
Enter passphrase (empty for no passphrase)
Enter same passphrase again:
Your identification has been saved in id_ed25519_test
Your public key has been saved in id_ed25519_test. pub
The key fingerprint is:
SHA256:LSBF7hzHgSoaBZXeaJB3Niw58p2VsAqF7pT+mDHxkKs XXXX@XXX.XXX
The key's randomart image is:
+--[ED25519 256]--+
id_ed25519_test
lEO
archive
+
-[SHA256]-----+
→ .ssh ls
config id_ed25519_test id_ed25519_test.pub known_hosts known_hosts.old
  1. 生成的密钥为 id_ed25519_test,使用 cat id_ed25519_test.pub 查看公钥
  2. 将公钥添加到仓库中,Settings –> Security –> Deploy keys –> Add new 将公钥复制进去,注意勾选 Allow write access
  3. 由于本地可能存在多个密钥,请使用 ssh config 配置 ssh-agent
    1
    2
    3
    4
    5
    ➜  .ssh vim config
    1 Host test
    2 HostName github.com
    3 User git
    4 IdentityFile ~/.ssh/id_ed25519_test
  4. 将SSH 私钥添加到 ssh-agent,并将密码存储在钥匙串中
    1
    2
    ➜  .ssh ssh-add --apple-use-keychain ~/.ssh/id_ed25519_test
    Identity added: /Users/shenhongge/.ssh/id_ed25519_test (XXXX@XXX.XXX)
  5. 使用ssh -T test 测试
    1
    2
    ➜  .ssh ssh -T test
    Hi Accelerator586/Test! You've successfully authenticated, but GitHub does not provide shell access.
  6. 本地 Git 项目配置
    1. 进入项目根目录 cd MyBlog
    2. 将 Hexo 的 .github删除
      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
      29
      ➜  MyBlog la
      total 312
      drwxr-xr-x@ 3 shenhongge staff 96B Jan 25 15:57 .github
      -rw-r--r--@ 1 shenhongge staff 82B Jan 25 15:57 .gitignore
      -rw-r--r--@ 1 shenhongge staff 0B Jan 25 15:57 _config.landscape.yml
      -rw-r--r--@ 1 shenhongge staff 29K Jan 25 16:40 _config.next.yml
      -rw-r--r--@ 1 shenhongge staff 2.4K Jan 25 15:57 _config.yml
      -rw-r--r--@ 1 shenhongge staff 20K Jan 25 16:11 db.json
      drwxr-xr-x@ 214 shenhongge staff 6.7K Jan 25 16:29 node_modules
      -rw-r--r--@ 1 shenhongge staff 92K Jan 25 16:29 package-lock.json
      -rw-r--r--@ 1 shenhongge staff 654B Jan 25 16:29 package.json
      drwxr-xr-x@ 5 shenhongge staff 160B Jan 25 15:57 scaffolds
      drwxr-xr-x@ 3 shenhongge staff 96B Jan 25 15:57 source
      drwxr-xr-x@ 3 shenhongge staff 96B Jan 25 15:57 themes
      ➜ MyBlog rm -rf .github
      ➜ MyBlog la
      total 312
      -rw-r--r--@ 1 shenhongge staff 82B Jan 25 15:57 .gitignore
      -rw-r--r--@ 1 shenhongge staff 0B Jan 25 15:57 _config.landscape.yml
      -rw-r--r--@ 1 shenhongge staff 29K Jan 25 16:40 _config.next.yml
      -rw-r--r--@ 1 shenhongge staff 2.4K Jan 25 15:57 _config.yml
      -rw-r--r--@ 1 shenhongge staff 20K Jan 25 16:11 db.json
      drwxr-xr-x@ 214 shenhongge staff 6.7K Jan 25 16:29 node_modules
      -rw-r--r--@ 1 shenhongge staff 92K Jan 25 16:29 package-lock.json
      -rw-r--r--@ 1 shenhongge staff 654B Jan 25 16:29 package.json
      drwxr-xr-x@ 5 shenhongge staff 160B Jan 25 15:57 scaffolds
      drwxr-xr-x@ 3 shenhongge staff 96B Jan 25 15:57 source
      drwxr-xr-x@ 3 shenhongge staff 96B Jan 25 15:57 themes
      ➜ MyBlog
    3. 使用 git init 初始化 Git 项目
    4. 配置当前项目 git 用户名和邮箱
    5. 指定远程路径
    6. 拉取远端仓库
    7. 将项目代码添加到 git 项目中
    8. 添加 commit
    9. 提交本地分支到仓库 main 分支
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      ➜  MyBlog git init
      Initialized empty Git repository in hexoInit/MyBlog/.git/
      ➜ MyBlog git:(main) git config user.email "geshenhon@gmail.com"
      ➜ MyBlog git:(main) git config user.name "geshenhong"
      ➜ MyBlog git:(main) ✗ git remote add origin git@test:Accelerator586/Test.git
      ➜ MyBlog git:(main) ✗ git pull
      There is no tracking information for the current branch.
      Please specify which branch you want to merge with.
      See git-pull(1) for details.
      git pull <remote> <branch>
      If you wish to set tracking information for this branch you can do so with:
      git branch --set-upstream-to=origin/<branch> main
      ➜ MyBlog git:(main) git commit -m "hexo init"
      On branch main
      ➜ MyBlog git:(main) git push origin main
      Enumerating objects: 16, done.
      Counting objects: 100% (16/16), done.
      Delta compression using up to 11 threads
      Compressing objects: 100% (10/10), done.
      Writing objects: 100% (16/16), 37.20 KiB | 12.40 MiB/s, done.
      Total 16 (delta 0), reused 0 (delta 0), pack-reused 0
      To test:Accelerator586/Test.git
      * [new branch] main -> main
  7. 此时,可以在 github 上看到已提交的代码。

服务器配置

配置SSH

同本地SSH配置,主要是创建可以让 Github Action 登录的SSH key

已ubuntu22.04 为例

  1. 修改ssh配置文件,运行 root用户远程登入
1
2
3
4
ubuntu@VM-16-9-ubuntu:~$ vim /etc/ssh/sshd_config
....
PermitRootLogin without-password # 设置允许Root 通过SSH密钥登录
....
  1. 重启ssh服务,使修改生效
1
ubuntu@VM-16-9-ubuntu:~$ sudo systemctl restart ssh

配置Nginx

这里使用 Nginx 作为网站的服务器

  1. 安装Nginx
    1
    2
    sudo apt update
    sudo apt install nginx
  2. 配置代理:在root后面添加 网站页面路径
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    ubuntu@VM-16-9-ubuntu:~$ cd /etc/nginx/sites-enabled/
    ubuntu@VM-16-9-ubuntu:/etc/nginx/sites-enabled$ sudo cp default test.conf
    ubuntu@VM-16-9-ubuntu:/etc/nginx/sites-enabled$ sudo vim test.conf
    server {
    listen 80 default_server;
    listen [::]:80 default_server;
    server_tokens off;
    root /var/www/test;

    # Add index.php to the list if you are using PHP
    index index.html index.htm index.nginx-debian.html;

    server_name XXX.XXX;

    location / {
    # First attempt to serve request as file, then
    # as directory, then fall back to displaying a 404.
    try_files $uri $uri/ =404;
    }
    }
  3. 重启Nginx服务
    1
    ubuntu@VM-16-9-ubuntu:/etc/nginx/sites-enabled$ sudo nginx -s reload

Github Action

  1. 在本地项目根目录新建文件夹.github.github/workflows
    1
    2
    ➜  MyBlog git:(main) mkdir .github
    ➜ MyBlog git:(main) mkdir .github/workflows
  2. 然后在.github/workflows下创建main.yml
    1
    2
    ➜  MyBlog git:(main) cd .github/workflows
    ➜ workflows git:(main) vim main.yml
  3. 粘贴脚本,这里参考了 枫叶的博客
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
name: Deploy Hexo and Publish to Remote Host
on:
push:
branches: [main]
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: 1. 检出分支
uses: actions/checkout@v3

- name: 2. 安装 Node
uses: actions/setup-node@v3
with:
node-version: 20

- name: 3. 安装 Hexo
run: |
export TZ='Asia/Shanghai'
npm install hexo-cli -g

- name: 4. 安装依赖
run: |
npm install

- name: 5. 生成静态文件
run: |
hexo clean
hexo generate

- name: 6. 推送到服务器私有仓库 #没有使用服务器可删除该步骤
uses: easingthemes/ssh-deploy@main
env:
SSH_PRIVATE_KEY: ${{ secrets.SERVER_ACCESS_TOKEN }} #服务器生成的私钥,例如 -----BEGIN RSA PRIVATE KEY-----xxxx-----END RSA PRIVATE KEY-----
ARGS: "-rltgoDzvO --delete" # rsync参数
SOURCE: "public/"
REMOTE_HOST: ${{ secrets.SERVER_HOST }} #服务器ip地址,例如 1.2.3.4
REMOTE_USER: ${{ secrets.SERVER_USER }} #登录用户,例如 root
TARGET: ${{ secrets.SERVER_TARGET }} #服务器目录,例如 /www/blog.aqcoder.cn
EXCLUDE: ".git/"


# 作者: 枫叶
# 链接: https://blog.aqcoder.cn/posts/a24c5846/#%E6%96%B0%E5%BB%BA%E8%85%BE%E8%AE%AF%E4%BA%91%E5%88%B7%E6%96%B0url%E4%BB%A3%E7%A0%81
# 来源: 枫叶
# 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
  1. 在 github上对 Action 进行配置
    image-20240125204250701

  2. 使用 git 命令提交代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    ➜  workflows git:(main) ✗ git add .
    ➜ workflows git:(main) ✗ git commit -m "init action"
    [main 17fd810] init action
    1 file changed, 46 insertions(+)
    create mode 100644 .github/workflows/main.yml
    ➜ workflows git:(main) git push origin main
    Enumerating objects: 6, done.
    Counting objects: 100% (6/6), done.
    Delta compression using up to 11 threads
    Compressing objects: 100% (3/3), done.
    Writing objects: 100% (5/5), 1.21 KiB | 1.21 MiB/s, done.
    Total 5 (delta 1), reused 0 (delta 0), pack-reused 0
    remote: Resolving deltas: 100% (1/1), completed with 1 local object.
    To test:Accelerator586/Test.git
    3459595..17fd810 main -> main
    ➜ workflows git:(main)
  3. 注意,这次提交自动运行 Action。

参考

Hexo

Theme NexT

简化开发

服务器文件同步GitHub Action

服务器文件同步的具体原理

ssh 设置root用户登入

在git clone theme之后,出现的问题

关于Github Action secret 和 variable

关于 Hexo 自动化的参考

关于Hexo 自动化的参考2