diff --git a/2023/12/26/My-first-hexo-blog/index.html b/2023/12/26/My-first-hexo-blog/index.html index b864840a..7a22820c 100644 --- a/2023/12/26/My-first-hexo-blog/index.html +++ b/2023/12/26/My-first-hexo-blog/index.html @@ -1 +1 @@ -我的第一篇 Hexo 博客 - Canyue

我的第一篇 Hexo 博客

本文最后更新于 2023年12月28日 15:31

Hexo 部署 Github Pages, Github Actions 自动部署

激动的心 颤抖的手，这是本站第一篇博客。
部署 hexo 的过程中遇到了很多问题，最终还是解决了，这里记录一下。

最终实现的效果，一个项目仓库，main 分支存放源代码，gh-pages 存放生成后的网页代码，github pages 加载 gh-pages 的网页代码。
这样，每当我们 push 代码到 main 分支的时候，github action 会自动构建并将代码发布到 gh-pages 分支，github pages 会自动加载 gh-pages 分支的代码，这样就实现了自动部署。

搭建环境：

linux plasma manjaro
nodejs 20
git 2.43
github 账号配置好 ssh（可以参考我前面教程）
vscode

你需要熟知的技能：git 相关操作

1. 新建 用户名.github.io 仓库

gh-create-repo1.webp

记住这串 仓库的ssh地址 后面要用到
ssh-link.webp

gh-create-repo2.webp

2. 部署你的 ssh 私钥 到仓库变量中

deploy-key1.webp

填入你的私钥
deploy-key2.webp

3. 初始化 hexo 博客目录

找一个空目录 然后执行下面代码，
把 mobeicanyue.github.io 换成你仓库的名字

1
hexo init mobeicanyue.github.io && cd mobeicanyue.github.io

执行结果如下
init-hexo.webp

4. 初始化 git 仓库并提交到 github

1
2
3
git init
git add .
git commit -m "Initial commit"

执行结果如下
init-git.webp

把下面 git@xxx 地址换成你仓库的 ssh 地址

1
2
git remote add origin git@github.com:mobeicanyue/mobeicanyue.github.io.git
git push -u origin master

执行结果如下
git-push.webp

此时我们刷新一下 github 仓库，就可以看到我们的代码已经提交上去了
但是网页第一次构建肯定是失败的（打叉），因为还没配置 github action

github-code.webp

5. 新建 gh-pages 分支并将其设置为 pages 的默认部署分支

点击分支
new-branch1.webp
创建 gh-pages 分支
new-branch2.webp
设置 gh-pages 为 pages 的默认部署分支
set-branch.webp

6. 编写 github actions 代码

  1. 修改 _config.yml 文件的 repo 改成你仓库的 ssh 地址
    config.webp

  2. 在 hexo 博客文件夹的 .github 目录创建 deploy.yml 文件

new-file.webp

下面的代码只需要修改你的用户名和邮箱

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
name: Deploy Hexo
 
on:
  push:
    branches:
      - main
 
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Check Out
        uses: actions/checkout@v4
 
      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: 20
 
      - name: Setup Git
        run: |
          git config --global user.name "用户名"
          git config --global user.email "邮箱"
 
      - name: Setup SSH Key
        run: |
          mkdir -p ~/.ssh
          echo "${{ secrets.KEY }}" > ~/.ssh/id_ed25519
          chmod 600 ~/.ssh/id_ed25519
 
      - name: Install Dependencies
        run: |
          npm install -g hexo-cli
          npm install hexo-deployer-git --save
          npm install
 
      - name: Deploy Hexo
        run: |
          hexo clean
          hexo generate
          hexo deploy

  1. 最后提交代码并推送
    commit-push.webp

7. 访问站点，部署成功！

地址为 https://用户名.github.io

success.webp



后记

hexo 部署 github pages 的教程特别多，但是质量鱼龙混杂或者写得不清晰，也没有我想要的部署到 github 源代码双分支管理。踩了很多坑，终于是写完了这篇教程，希望能帮到你。

#hexo #deploy #github actions #github #github pages
我的第一篇 Hexo 博客
https://blog.ovvv.top/2023/12/26/My-first-hexo-blog/
作者
mobeicanyue
发布于
2023年12月26日 23:18
更新于
2023年12月28日 15:31
许可协议
\ No newline at end of file +我的第一篇 Hexo 博客 - Canyue

我的第一篇 Hexo 博客

本文最后更新于 2023年12月28日 21:35

Hexo 部署 Github Pages, Github Actions 自动部署

激动的心 颤抖的手，这是本站真正意义上的第一篇博客。第零篇是 hexo 生成的 Hello World。

部署 hexo 的过程中遇到了很多问题，最终还是解决了，这里记录一下。

最终实现的效果，一个项目仓库，main 分支存放源代码，gh-pages 存放生成后的网页代码，github pages 加载 gh-pages 的网页代码。
这样，每当我们 push 代码到 main 分支的时候，github action 会自动构建并将代码发布到 gh-pages 分支，github pages 会自动加载 gh-pages 分支的代码，这样就实现了自动部署。

环境：

linux plasma manjaro
nodejs 20
git 2.43
github 账号配置好 ssh（可以参考我前面教程）
vscode

你需要熟知的技能：git 相关操作

1. 新建 用户名.github.io 仓库

gh-create-repo1.webp

记住这串 仓库的ssh地址 后面要用到
ssh-link.webp

创建的仓库名 建议为 用户名.github.io
gh-create-repo2.webp

2. 部署你的 ssh 私钥 到仓库变量中

deploy-key1.webp

填入你的私钥 取名为 KEY，后面要用到
deploy-key2.webp

3. 初始化 hexo 博客目录

找一个空目录 然后执行下面代码，
把 mobeicanyue.github.io 换成你仓库的名字

1
hexo init mobeicanyue.github.io && cd mobeicanyue.github.io

执行结果如下
init-hexo.webp

4. 初始化 git 仓库并提交到 github

1
2
3
git init
git add .
git commit -m "Initial commit"

执行结果如下
init-git.webp

把下面 git@xxx 地址换成你仓库的ssh地址

1
2
git remote add origin git@github.com:mobeicanyue/mobeicanyue.github.io.git
git push -u origin master

执行结果如下
git-push.webp

此时我们刷新一下 github 仓库，就可以看到我们的代码已经提交上去了
但是网页第一次构建肯定是失败的（打叉），因为还没配置 github action

github-code.webp

5. 新建 gh-pages 分支并将其设置为 pages 的默认部署分支

点击分支
new-branch1.webp
创建 gh-pages 分支
new-branch2.webp
设置 gh-pages 为 pages 的默认部署分支
set-branch.webp

6. 编写 github actions 代码

  1. 修改 _config.yml 文件的 repo 改成你仓库的 ssh 地址
    config.webp

  2. 在 hexo 博客文件夹的 .github 目录创建 deploy.yml 文件

new-file.webp

下面的代码需要修改你的用户名和邮箱
还有你对应的 nodejs 版本

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
name: Deploy Hexo
 
on:
  push:
    branches:
      - main
 
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Check Out
        uses: actions/checkout@v4
 
      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: 20
 
      - name: Setup Git
        run: |
          git config --global user.name "用户名"
          git config --global user.email "邮箱"
 
      - name: Setup SSH Key
        run: |
          mkdir -p ~/.ssh
          echo "${{ secrets.KEY }}" > ~/.ssh/id_ed25519
          chmod 600 ~/.ssh/id_ed25519
 
      - name: Install Dependencies
        run: |
          npm install -g hexo-cli
          npm install hexo-deployer-git --save
          npm install
 
      - name: Deploy Hexo
        run: |
          hexo clean
          hexo generate
          hexo deploy

上面的${{ secrets.KEY }} 就是我们前面设置的私钥


  1. 最后提交代码并推送
    commit-push.webp

7. 访问站点，部署成功！

地址为 https://用户名.github.io

success.webp



后记

hexo 部署 github pages 的教程特别多，但是质量鱼龙混杂或者写得不清晰，也没有我想要的部署到 github 源代码双分支管理。踩了很多坑，终于是写完了这篇教程，希望能帮到你。

#hexo #deploy #github actions #github #github pages
我的第一篇 Hexo 博客
https://blog.ovvv.top/2023/12/26/My-first-hexo-blog/
作者
mobeicanyue
发布于
2023年12月26日 23:18
更新于
2023年12月28日 21:35
许可协议
\ No newline at end of file diff --git a/2023/12/27/Configure-blog-domain/index.html b/2023/12/27/Configure-blog-domain/index.html index e50d651d..7102958c 100644 --- a/2023/12/27/Configure-blog-domain/index.html +++ b/2023/12/27/Configure-blog-domain/index.html @@ -1 +1 @@ -博客域名配置 - Canyue

博客域名配置

本文最后更新于 2023年12月28日 15:27

前置条件：已经有一个域名，且跟着前面的文章配置好了 github pages。

1. 在域名服务商处配置域名解析

域名解析，不同的服务商有不同的配置方式。
类型 选择 CNAME，主机记录填写你的域名，比如 example.com，
值填写 用户名.github.io，比如 mobeicanyue.github.io。

domain-record.webp

2. 在 github 仓库中配置域名

进入你的仓库，点击 settings，左边栏，找到 Pages，在 Custom domain 中填写你的域名，比如 example.com，然后点击 Save。

set-domain.webp
等待 dns 检查，很快就好了。
wait-dns.webp
访问你的域名，比如 example.com，就可以看到你的博客了。
blog.webp
此时可以注意到在 gh-pages 分支中多了一个 CNAME 文件，这个文件内容就是我们刚刚配置的域名。
但是按照之前的配置，每次 github action 部署的时候，都会把这个文件给覆盖掉，所以我们后面需要修改一下配置。
CNAME-file.webp

3. 修改 hexo 配置文件

在 hexo 的配置文件 _config.yml 中，找到 url，把 url 改成你的域名，比如 https://example.com。

url.webp

4. 修改 Github Actions 自动部署

由于我们之前那种写法，在 github action 部署到 github pages 的时候，会把 CNAME 文件给覆盖掉，所以我们需要修改一下 github action 配置。

也就是把之前的

1
2
3
4
5
- name: Deploy Hexo
    run: |
        hexo clean
        hexo generate
        hexo deploy

换成

1
2
3
4
5
6
7
8
9
10
11
- name: Build Site
        run: |
          export TZ='Asia/Shanghai'
          npm run clean
          npm run build
- name: Deploy to GitHub Pages
    uses: peaceiris/actions-gh-pages@v3
    with:
        deploy_key: ${{ secrets.KEY }}
        publish_dir: public
        cname: blog.ovvv.top

其中

  • npm run clean 即 hexo clean 清除构造缓存
  • npm run build 即 hexo generate 生成静态文件
  • 不使用 hexo deploy 部署，因为这个命令会把 CNAME 文件给覆盖掉
  • 使用 peaceiris/actions-gh-pages 这个 action 部署，这个 action 在上传静态文件的同时还会自动把 CNAME 文件给加上去。

对比我们第一篇文章中的配置，我们还删除了

1
2
npm install -g hexo-cli
npm install hexo-deployer-git --save

因为我们仓库是 npm 项目，依赖清单里现在已经包含了 hexo 无需再安装。直接npm install npm 就会安装 package.json 里的 hexo。
因为我们不再使用 hexo deploy 部署了，所以 hexo-deployer-git 就用不到了。

更新后整个文件如下：

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

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Check Out
        uses: actions/checkout@v4

      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: 20

      - name: Setup Git
        run: |
          git config --global user.name "mobeicanyue"
          git config --global user.email "${{ secrets.EMAIL }}"

      - name: Setup SSH Key
        run: |
          mkdir -p ~/.ssh
          echo "${{ secrets.KEY }}" > ~/.ssh/id_ed25519
          chmod 600 ~/.ssh/id_ed25519

      - name: Install Dependencies
        run: |
          npm install

      - name: Build Site
        run: |
          export TZ='Asia/Shanghai'
          npm run clean
          npm run build

      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          deploy_key: ${{ secrets.KEY }}
          publish_dir: public
          cname: blog.ovvv.top

推送到 github，等待 github action 自动部署，就可以看到你的博客了。这时就不会出现 CNAME 文件丢失的情况了。

#hexo #github actions #domain
博客域名配置
https://blog.ovvv.top/2023/12/27/Configure-blog-domain/
作者
mobeicanyue
发布于
2023年12月27日 02:31
更新于
2023年12月28日 15:27
许可协议
\ No newline at end of file +博客域名配置 - Canyue

博客域名配置

本文最后更新于 2023年12月28日 21:35

前置条件：已经有一个域名，且跟着前面的文章配置好了 github pages。

1. 在域名服务商处配置域名解析

域名解析，不同的服务商有不同的配置方式。
类型 选择 CNAME，主机记录填写你的域名，比如 example.com，
值填写 用户名.github.io，比如 mobeicanyue.github.io。

domain-record.webp

2. 在 github 仓库中配置域名

进入你的仓库，点击 settings，左边栏，找到 Pages，在 Custom domain 中填写你的域名，比如 example.com，然后点击 Save。

set-domain.webp
等待 dns 检查，很快就好了。
wait-dns.webp
访问你的域名，比如 example.com，就可以看到你的博客了。
blog.webp
此时可以注意到在 gh-pages 分支中多了一个 CNAME 文件，这个文件内容就是我们刚刚配置的域名。

但是按照之前的配置，每次 github action 部署的时候，都会把这个文件给覆盖掉，所以我们后面需要修改一下配置。
CNAME-file.webp

3. 修改 hexo 配置文件

在 hexo 的配置文件 _config.yml 中，找到 url，把 url 改成你的域名，比如 https://example.com。

url.webp

4. 修改 Github Actions 自动部署

由于我们之前那种写法，在 github action 部署到 github pages 的时候，会把 CNAME 文件给覆盖掉，所以我们需要修改一下 github action 配置。

也就是把之前的

1
2
3
4
5
- name: Deploy Hexo
    run: |
        hexo clean
        hexo generate
        hexo deploy

换成

1
2
3
4
5
6
7
8
9
10
11
- name: Build Site
        run: |
          export TZ='Asia/Shanghai'
          npm run clean
          npm run build
- name: Deploy to GitHub Pages
    uses: peaceiris/actions-gh-pages@v3
    with:
        deploy_key: ${{ secrets.KEY }}
        publish_dir: public
        cname: blog.ovvv.top

其中

  • npm run clean 即 hexo clean 清除构造缓存
  • npm run build 即 hexo generate 生成静态文件
  • 不使用 hexo deploy 部署，因为这个命令会把 CNAME 文件给覆盖掉
  • 使用 peaceiris/actions-gh-pages 这个 action 部署，这个 action 在上传静态文件的同时还会自动把 CNAME 文件给加上去。

对比我们第一篇文章中的配置，我们还删除了

1
2
npm install -g hexo-cli
npm install hexo-deployer-git --save

因为我们仓库是 npm 项目，依赖清单里现在已经包含了 hexo 无需再安装。直接npm install npm 就会安装 package.json 里的 hexo。
因为我们不再使用 hexo deploy 部署了，所以 hexo-deployer-git 就用不到了。

更新后整个文件如下：

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

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Check Out
        uses: actions/checkout@v4

      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: 20

      - name: Setup Git
        run: |
          git config --global user.name "mobeicanyue"
          git config --global user.email "${{ secrets.EMAIL }}"

      - name: Setup SSH Key
        run: |
          mkdir -p ~/.ssh
          echo "${{ secrets.KEY }}" > ~/.ssh/id_ed25519
          chmod 600 ~/.ssh/id_ed25519

      - name: Install Dependencies
        run: |
          npm install

      - name: Build Site
        run: |
          export TZ='Asia/Shanghai'
          npm run clean
          npm run build

      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          deploy_key: ${{ secrets.KEY }}
          publish_dir: public
          cname: blog.ovvv.top

推送到 github，等待 github action 自动部署，就可以看到你的博客了。这时就不会出现 CNAME 文件丢失的情况了。

#hexo #github actions #domain
博客域名配置
https://blog.ovvv.top/2023/12/27/Configure-blog-domain/
作者
mobeicanyue
发布于
2023年12月27日 02:31
更新于
2023年12月28日 21:35
许可协议
\ No newline at end of file diff --git a/2023/12/27/Fix-article-updated-time-on-github-pages/index.html b/2023/12/27/Fix-article-updated-time-on-github-pages/index.html index 503faa1a..ef1afbf6 100644 --- a/2023/12/27/Fix-article-updated-time-on-github-pages/index.html +++ b/2023/12/27/Fix-article-updated-time-on-github-pages/index.html @@ -1 +1 @@ -修复 Github Pages 上的文章更新时间 - Canyue

修复 Github Pages 上的文章更新时间

本文最后更新于 2023年12月28日 15:13

github actions 具体配置请参考前面的文章

1. 问题起因

我开启了 fluid 配置的
fluid-config.webp

但是在部署到 github pages 时，hexo 并不会像我们本地运行那样，显示的是文章的更新时间，而是显示的是部署的时间。 换句话说，你所有文章的更新时间都全部定格在 github actions 最新的部署的那个时间（难绷）。
error-time.webp

我们可以在 front-matter 加入 updated: 更新时间 解决

1
2
3
4
5
title: article title
date: 2023-01-01 00:00:00

# 添加 updated: 更新时间
updated: 2023-01-01 00:00:00

但是很明显，这个需要我们手动去维护时间，这样很麻烦。

我们设想的是，文章的正常 updated 时间，就是文章的 commit 时间。

2. 解决方案

修改 deploy.yml

  1. 指定拉取代码的深度

    1
    2
    3
    uses: actions/checkout@v4
    with:
      fetch-depth: 0

    fetch-depth: 0 指定了拉取代码的深度。在这里，设置为 0 表示完全拉取整个代码历史，而不是仅拉取最新的部分。这样可以获取完整的 Git 历史记录。

  2. 修复文件更新时间
    在 build site 之前添加[1]

    1
    2
    3
    - name: Fix File Updated Date
      run: |
        git ls-files | while read filepath; do touch -d "$(git log -1 --format='@%ct' $filepath)" "$filepath" && echo "Fixed: $filepath"; done

    在这个脚本中，git ls-files 用于列出所有已跟踪的文件，然后通过 while read filepath 遍历每个文件。
    对于每个文件，git log -1 --format=‘@%ct’ $filepath 用于获取该文件的最后一次提交的时间戳（以秒为单位），并使用 touch -d 命令将文件的更新日期设置为相应的时间戳。
    echo “Fixed: $filepath” 用于输出修复过的文件路径。

这样我们就修复了 github pages 的文章更新时间。

  1. 参考竹林里有冰的 github acitons 文件 workflows/deploy.yml ↩
#github-actions #github-pages
修复 Github Pages 上的文章更新时间
https://blog.ovvv.top/2023/12/27/Fix-article-updated-time-on-github-pages/
作者
mobeicanyue
发布于
2023年12月27日 22:47
更新于
2023年12月28日 15:13
许可协议
\ No newline at end of file +修复 Github Pages 上的文章更新时间 - Canyue

修复 Github Pages 上的文章更新时间

本文最后更新于 2023年12月28日 21:35

github actions 具体配置请参考前面的文章

1. 问题起因

我开启了 fluid 配置 updated: true，这样会显示文章的更新时间。
fluid-config.webp

但是在部署到 github pages 时，hexo 并不会像我们本地运行那样，显示的是文章的更新时间，它获取的是部署的时间。 换句话说，你所有文章的更新时间都全部定格在 github actions 最新的部署的那个时间（难绷）。
error-time.webp

我们可以在 front-matter 加入 updated: 更新时间 解决

1
2
3
4
5
title: article title
date: 2023-01-01 00:00:00

# 添加 updated: 更新时间
updated: 2023-01-01 00:00:00

但是很明显，这个需要我们手动去维护时间，这样很麻烦。

我们设想的是，文章的正常 updated 时间，就是文章的 commit 时间。

2. 解决方案

修改 deploy.yml

  1. 指定拉取代码的深度

    1
    2
    3
    uses: actions/checkout@v4
    with:
      fetch-depth: 0

    fetch-depth: 0 指定了拉取代码的深度。在这里，设置为 0 表示完全拉取整个代码历史，而不是仅拉取最新的部分。这样可以获取完整的 Git 历史记录。

  2. 修复文件更新时间
    在 build site 之前添加如下代码 [1]

    1
    2
    3
    - name: Fix File Updated Date
      run: |
        git ls-files | while read filepath; do touch -d "$(git log -1 --format='@%ct' $filepath)" "$filepath" && echo "Fixed: $filepath"; done

    在这个脚本中，git ls-files 用于列出所有已跟踪的文件，然后通过 while read filepath 遍历每个文件。
    对于每个文件，git log -1 --format=‘@%ct’ $filepath 用于获取该文件的最后一次提交的时间戳（以秒为单位），并使用 touch -d 命令将文件的更新日期设置为相应的时间戳。
    echo “Fixed: $filepath” 用于输出修复过的文件路径。

这样我们就修复了 github pages 的文章更新时间。

  1. 参考竹林里有冰的 github acitons 文件 workflows/deploy.yml ↩
#github-actions #github-pages
修复 Github Pages 上的文章更新时间
https://blog.ovvv.top/2023/12/27/Fix-article-updated-time-on-github-pages/
作者
mobeicanyue
发布于
2023年12月27日 22:47
更新于
2023年12月28日 21:35
许可协议
\ No newline at end of file diff --git a/2023/12/27/Fluid-theme-installation/index.html b/2023/12/27/Fluid-theme-installation/index.html new file mode 100644 index 00000000..a8148fa1 --- /dev/null +++ b/2023/12/27/Fluid-theme-installation/index.html @@ -0,0 +1 @@ +Fluid 主题安装 - Canyue

Fluid 主题安装

本文最后更新于 2023年12月28日 21:35

官方文档其实挺详细的了。
记录一下我自己的操作。

1. 安装主题

进入博客目录执行命令：

1
npm install --save hexo-theme-fluid

然后在博客目录下创建 _config.fluid.yml，将主题 _config.yml 内容复制过去。

现在目录下有这三个 yml 文件：
yml-files.webp

可删除 _config.landscape.yml , 它是 hexo 默认的主题文件。

2. 修改 hexo 配置

修改 Hexo 博客目录中的 _config.yml：

1
2
3
theme: fluid

language: zh-CN

3. 创建「关于页」

执行以下命令：

1
hexo new page about

创建成功后修改 /source/about/index.md，添加 layout 属性。

添加后如下

1
2
3
4
5
6
---
title: about
date: 2023-12-26 22:43:21
layout: about
---
这里写关于页的正文，支持 Markdown, HTML

然后不出意外你就可以看到关于页了。
输入

1
hexo clean && hexo g && hexo s -o

后访问 http://localhost:4000/about/ 即可看到效果。

ablout.webp

PS: 可以跟着文档把关于页面的几个 icon 一起改了。

4. 修改主题配置

官方文档
官方文档还算比较完善，耐心看完即可。

5. 修改网站图标

修改网站图标 文档好像没提到，我这里写一下
首先把你的图标放到 /source/images/ 目录下，然后
打开 _config.fluid.yml 找到这个配置：

1
2
3
4
5
6
7
# 用于浏览器标签的图标
# Icon for browser tab
favicon: images/favicon.png

# 用于苹果设备的图标
# Icon for Apple touch
apple_touch_icon: images/favicon.png

将 favicon.png 改为你的图标路径即可。

6. 修改 slogan 为 api 语录

效果如图所示：
api-slogan.webp

在主题配置 _config.fluid.yml 中开启：

1
2
3
4
5
6
7
8
9
10
index:
  slogan:
    enable: true
    text: 这是一条 Slogan
    api:
      enable: true
      url: "https://v1.hitokoto.cn/"
      method: "GET"
      headers: {}
      keys: ['data', 'content']

把 url 改为你想要的 api 地址，keys 改为你想要的字段。具体参数可以看官方文档

7. 修改背景图片 为 api 图片

既然可以改 slogan 为 api 语录，那么背景图片当然也可以改为 api 图片 笑）。

效果如图所示：
api-bg.webp

在主题配置 _config.fluid.yml 中搜索

1
/img/default.png

将其改为你想要的 api 地址即可。
我使用的是 Bing 每日图片
感谢接口提供者！！！

#hexo #deploy #fluid
Fluid 主题安装
https://blog.ovvv.top/2023/12/27/Fluid-theme-installation/
作者
mobeicanyue
发布于
2023年12月27日 02:09
更新于
2023年12月28日 21:35
许可协议
\ No newline at end of file diff --git a/2023/12/27/Modify-theme/index.html b/2023/12/27/Modify-theme/index.html deleted file mode 100644 index 0bde1f75..00000000 --- a/2023/12/27/Modify-theme/index.html +++ /dev/null @@ -1 +0,0 @@ -博客主题改为 Fluid - Canyue

博客主题改为 Fluid

本文最后更新于 2023年12月28日 15:13

官方文档其实挺详细的了。
记录一下我自己的操作。

1. 安装主题

进入博客目录执行命令：

1
npm install --save hexo-theme-fluid

然后在博客目录下创建 _config.fluid.yml，将主题 _config.yml 内容复制过去。

现在目录下有这三个 yml 文件：
yml-files.webp

可删除 _config.landscape.yml , 它是 hexo 默认的主题文件。

2. 修改 hexo 配置

修改 Hexo 博客目录中的 _config.yml：

1
2
3
theme: fluid

language: zh-CN

3. 创建「关于页」

执行以下命令：

1
hexo new page about

创建成功后修改 /source/about/index.md，添加 layout 属性。

添加后如下

1
2
3
4
5
6
---
title: about
date: 2023-12-26 22:43:21
layout: about
---
这里写关于页的正文，支持 Markdown, HTML

然后不出意外你就可以看到关于页了。
输入

1
hexo clean && hexo g && hexo s -o

后访问 http://localhost:4000/about/ 即可看到效果。

ablout.webp

PS: 可以跟着文档把关于页面的几个 icon 一起改了。

4. 修改主题配置

官方文档
官方文档还算比较完善，耐心看完即可。

5. 修改网站图标

修改网站图标 文档好像没提到，我这里写一下
首先把你的图标放到 /source/images/ 目录下，然后
打开 _config.fluid.yml 找到这个配置：

1
2
3
4
5
6
7
# 用于浏览器标签的图标
# Icon for browser tab
favicon: images/favicon.png

# 用于苹果设备的图标
# Icon for Apple touch
apple_touch_icon: images/favicon.png

将 favicon.png 改为你的图标路径即可。

6. 修改 slogan 为 api 语录

效果如图所示：
api-slogan.webp

在主题配置 _config.fluid.yml 中开启：

1
2
3
4
5
6
7
8
9
10
index:
  slogan:
    enable: true
    text: 这是一条 Slogan
    api:
      enable: true
      url: "https://v1.hitokoto.cn/"
      method: "GET"
      headers: {}
      keys: ['data', 'content']

把 url 改为你想要的 api 地址，keys 改为你想要的字段。具体参数可以看官方文档

7. 修改背景图片 为 api 图片

既然可以改 slogan 为 api 语录，那么背景图片当然也可以改为 api 图片 笑）。

效果如图所示：
api-bg.webp

在主题配置 _config.fluid.yml 中搜索

1
/img/default.png

将其改为你想要的 api 地址即可。
我是 Bing 每日图片
感谢接口提供者！！！

#hexo #deploy #fluid
博客主题改为 Fluid
https://blog.ovvv.top/2023/12/27/Modify-theme/
作者
mobeicanyue
发布于
2023年12月27日 02:09
更新于
2023年12月28日 15:13
许可协议
\ No newline at end of file diff --git a/2023/12/27/Use-lxgw-wenkai-in-fluid/index.html b/2023/12/27/Use-lxgw-wenkai-in-fluid/index.html index e02038cd..ddca5ccd 100644 --- a/2023/12/27/Use-lxgw-wenkai-in-fluid/index.html +++ b/2023/12/27/Use-lxgw-wenkai-in-fluid/index.html @@ -1 +1 @@ -在 Fluid 主题中使用霞鹜文楷 - Canyue

在 Fluid 主题中使用霞鹜文楷

本文最后更新于 2023年12月28日 15:13

近来阅读竹林里有冰的博客，发现他的博客字体很好看，想着把他的字体也用到我的博客里，于是就有了这篇文章。

1. 字体介绍

霞鹜文楷字体仓库
霞鹜文楷 我之前其实在手机上用过，不过后面由于装机加上懒得折腾就没有再设置了，但是博客我觉得为了好的阅读体验还是可以换一下的
霞鹜文楷

关于在 web 中使用 霞鹜文楷 请参阅 issue#24

其中 chawyehsu 提供了打包，但是点进去仓库发现已经有半年没更新了。在 issue 的下面我们可以看到 CMBill 提供了一个新的打包，我的就是这个打包。

在 CMBill 的仓库 README 中右键跳转 css 看看内容 style.css.webp

可以发现这个 css 是分了几个不同的字体种类，还有不同的霞鹜文楷变体可供选择
font-css.webp
将 style.css 替换为 @import url 之后的内容（去掉./），就可以直接使用了

我最终选择了 lxgwwenkaigb-bold 这个字体，这个字体阅读起来比较舒服。
我的博客字体文件为
https://cdn.jsdelivr.net/gh/CMBill/lxgw-wenkai-gb-web/fonts/lxgwwenkaigb-bold/result.css

2. 使用方法

如果你恰好也用 hexo 的 fluid 主题，那么恭喜你，替换字体很简单，只需要在主题的配置文件里加上一行 custom_css: https://xxxx代码就可以了，再修改 font_family。参照你的 css 文件前几行显示的 fontFamily:，比如我的是 fontFamily: LXGW WenKai GB。

1
2
3
4
5
6
7
8
9
# 主题字体配置
font:
  font_size: 17px
  font_family: "LXGW WenKai GB"
  letter_spacing: 0.02em
  code_font_size: 85%

custom_js:
custom_css: https://cdn.jsdelivr.net/gh/CMBill/lxgw-wenkai-gb-web/fonts/lxgwwenkaigb-bold/result.css

3. 效果展示

效果

#hexo #fluid
在 Fluid 主题中使用霞鹜文楷
https://blog.ovvv.top/2023/12/27/Use-lxgw-wenkai-in-fluid/
作者
mobeicanyue
发布于
2023年12月27日 14:58
更新于
2023年12月28日 15:13
许可协议
\ No newline at end of file +在 Fluid 主题中使用霞鹜文楷 - Canyue

在 Fluid 主题中使用霞鹜文楷

本文最后更新于 2023年12月28日 17:59

近来阅读竹林里有冰的博客，发现他的博客字体很好看，想着把他的字体也用到我的博客里，于是就有了这篇文章。

1. 字体介绍

霞鹜文楷字体仓库
霞鹜文楷 我之前其实在手机上用过，不过后面由于装机加上懒得折腾就没有再设置了，但是博客我觉得为了好的阅读体验还是可以换一下的
霞鹜文楷

关于在 web 中使用 霞鹜文楷 请参阅 issue#24

其中 chawyehsu 提供了打包，但是点进去仓库发现已经有半年没更新了。在 issue 的下面我们可以看到 CMBill 提供了一个新的打包，我的就是这个打包。

在 CMBill 的仓库 README 中右键跳转 css 看看内容 style.css.webp

可以发现这个 css 是分了几个不同的字体种类，还有不同的霞鹜文楷变体可供选择
font-css.webp
将 style.css 替换为 @import url 之后的内容（去掉./），就可以直接使用了

我最终选择了 lxgwwenkaigb-bold 这个字体，这个字体阅读起来比较舒服。
我的博客字体文件为
https://cdn.jsdelivr.net/gh/CMBill/lxgw-wenkai-gb-web/fonts/lxgwwenkaigb-bold/result.css

2. 使用方法

如果你恰好也用 hexo 的 fluid 主题，那么恭喜你，替换字体很简单，只需要在主题的配置文件里加上一行 custom_css: https://xxxx代码就可以了，再修改 font_family。参照你的 css 文件前几行显示的 fontFamily:，比如我的是 fontFamily: LXGW WenKai GB。

1
2
3
4
5
6
7
8
9
# 主题字体配置
font:
  font_size: 17px
  font_family: "LXGW WenKai GB"
  letter_spacing: 0.02em
  code_font_size: 85%

custom_js:
custom_css: https://cdn.jsdelivr.net/gh/CMBill/lxgw-wenkai-gb-web/fonts/lxgwwenkaigb-bold/result.css

3. 效果展示

效果

#hexo #fluid
在 Fluid 主题中使用霞鹜文楷
https://blog.ovvv.top/2023/12/27/Use-lxgw-wenkai-in-fluid/
作者
mobeicanyue
发布于
2023年12月27日 14:58
更新于
2023年12月28日 17:59
许可协议
\ No newline at end of file diff --git a/2023/12/28/1panel-Configuration-Tutorial/index.html b/2023/12/28/1panel-Configuration-Tutorial/index.html index 5d5b6c78..3c8d69af 100644 --- a/2023/12/28/1panel-Configuration-Tutorial/index.html +++ b/2023/12/28/1panel-Configuration-Tutorial/index.html @@ -1 +1 @@ -1panel 配置教程 - Canyue

1panel 配置教程

本文最后更新于 2023年12月28日 17:50

本文档为 1panel 配置教程，主要介绍 1panel 的配置及使用。更多信息请参照官网
部署条件：一台能 ssh 登录的服务器，一个域名

最后实现的效果：安装配置 1panel 并配置反向代理，使用域名访问 1panel 面板。

1. 1panel 是什么？

1panel 的官网简介

1panel 的 Github 仓库：https://github.com/1Panel-dev/1Panel

宝塔面板是比较知名的服务器管理面板，但是它不开源，UI 也不好看，登录时甚至还要求绑定宝塔官网账号，否则就无法继续使用面板！

如此种种便促使我们寻找替代品。我的服务器在 11 月份左右过期了，新的服务器不想使用宝塔面板，但是不使用面板操作服务器还是不太方便（比如设置反向代理、申请域名 SSL 证书和管理 docker 应用，面板可视化点击几下就好了，命令行操作起来很折磨人），于是便寻找它的替代品，也就是我们今天的主角 —— 1panel。

1panel 首页

项目还采用的是 vue 编写的前端，算是比较先进的技术栈。后端采用 GO 编写。
项目语言

你可以访问这个连接来体验一下 1panel 的功能：https://demo.1panel.cn

经过一两个月的使用，我觉得现在体验相当稳定，写这篇教程，希望能帮助到大家。

2. 1panel 安装

先确保你的服务器安装了 curl，没有就自行安装。

如果服务器是 debian 系列的系统，执行下面命令安装 curl

1
sudo apt install curl

其他系统请自行搜索安装 curl 的方法。

开始安装 1panel。

  1. ssh 连接到你的服务器，然后执行下面的命令，安装 1panel。

    1
    curl -sSL https://resource.fit2cloud.com/1panel/package/quick_start.sh -o quick_start.sh && sudo bash quick_start.sh

  2. 命令行提示输入安装目录，敲回车 默认即可
    安装目录
    后面命令行会输出一大串安装日志，等待即可。

  3. 命令行提示输入端口号，你可以自定义，也可以用它给你默认的端口号。
    注意 如果你使用的是云服务器，请至安全组开放 输入的端口
    输入信息

如果没有什么报错的话，那么恭喜你，1panel 已经安装成功了。

登陆信息
现在在浏览器访问 命令行输出的 外网地址 就可以登陆 1panel 面板了。
面板用户名和密码也在命令行输出，如上图所示。

登陆界面

如果出现错误很可能是网络连接问题（服务器下载面板资源出错）或者 ssh 连接断开了，重新执行安装命令即可。具体错误信息请自行搜索解决。

3. 安装 openresty 应用

登陆以后我们可以看到 1panel 的界面，如下图所示。
1panel 首页

首页显示的是服务器的基本信息，我们可以看到服务器的内存、cpu、硬盘、负载等信息。
右边显示的是系统信息，我们可以看到系统的发行版本、内核、主机名等信息。

我们点击应用商店，这里有 1panel 社区维护的一些应用，我们可以直接安装使用。
应用商店包括了一些很热门的应用和开源项目 如：AList MySQL Mariadb WordPress Typecho Gitea Jenkins Redis MongoDB PostgreSQL RabbitMQ 等等。都是运行在 docker 容器中的，安装和卸载都很方便。
应用商店

我们安装 openresty 应用。这是一个 nginx 的衍生版本，支持 lua 脚本，我们可以用它来做反向代理。
（不知道为啥没有 nginx，但是这个也挺好用的，没差）
安装了它才能编辑网页、配置反代。
openresty
不要改配置！直接点确定即可。

4. 设置域名解析

域名服务商设置域名解析，将域名解析到服务器的 IP 上。这里应该不用我多教。
域名解析

5. 配置反向代理

点击网页左侧的 网站，然后点击 创建网站，填入域名和端口号，点击确定。
选择反向代理
反向代理

配置好后，就可以使用域名访问 1panel 面板了。

6. 申请域名 SSL 证书

由于我的域名托管在 Cloudflare，域名流量经过他 proxied，不需要手动申请。如果你的域名托管在其他地方，那么你可以使用 1panel 申请 SSL 证书。
留个坑 如果有需要我再补充。

#1panel #server
1panel 配置教程
https://blog.ovvv.top/2023/12/28/1panel-Configuration-Tutorial/
作者
mobeicanyue
发布于
2023年12月28日 15:54
更新于
2023年12月28日 17:50
许可协议
\ No newline at end of file +1panel 配置教程 - Canyue

1panel 配置教程

本文最后更新于 2023年12月28日 21:35

本文档为 1panel 配置教程，主要介绍 1panel 的配置及使用。更多信息请参照官网
部署条件：一台能 ssh 登录的服务器，一个域名

最后实现的效果：安装配置 1panel 并配置反向代理，使用域名访问 1panel 面板。

1. 1panel 是什么？

1panel 的官网简介

1panel 的 Github 仓库：https://github.com/1Panel-dev/1Panel

宝塔面板是比较知名的服务器管理面板，但是它不开源，UI 也不好看，登录时甚至还要求绑定宝塔官网账号，否则就无法继续使用面板！

如此种种便促使我寻找替代品。我的服务器在 11 月份左右过期了，新的服务器不想使用宝塔面板，但是不使用面板操作服务器还是不太方便（比如设置反向代理、申请域名 SSL 证书和管理 docker 应用，面板可视化点击几下就好了，命令行操作起来很折磨人），于是便寻找它的替代品，也就是我们今天的主角 —— 1panel。

1panel 首页

项目还采用的是 vue 编写的前端，算是比较先进的技术栈。后端采用 GO 编写。
项目语言

你可以访问这个连接来体验一下 1panel 的功能：https://demo.1panel.cn

经过一两个月的使用，我觉得现在体验相当稳定，写这篇教程希望能帮助到大家。

2. 1panel 安装

先确保你的服务器安装了 curl，没有就自行安装。

如果服务器是 debian 系列的系统，执行下面命令安装 curl

1
sudo apt install curl

其他系统请自行搜索安装 curl 的方法。

开始安装 1panel。

  1. ssh 连接到你的服务器，然后执行下面的命令，安装 1panel。

    1
    curl -sSL https://resource.fit2cloud.com/1panel/package/quick_start.sh -o quick_start.sh && sudo bash quick_start.sh

  2. 命令行提示输入安装目录，敲回车 默认即可
    安装目录
    后面命令行会输出一大串安装日志，等待即可。

  3. 命令行提示输入端口号，你可以自定义，也可以用它给你默认的端口号。
    注意 如果你使用的是云服务器，请至云服务器提供商的安全组开放 输入的端口。
    账号密码自己设置，但最好不要太简单，不然被人爆破就不好了。
    输入信息

如果没有什么报错的话，那么恭喜你，1panel 已经安装成功了。

登陆信息
现在在浏览器访问 命令行输出的 外网地址 就可以登陆 1panel 面板了。
面板用户名和密码也在命令行输出，如上图所示。

登陆界面

如果出现错误很可能是网络连接问题（服务器下载面板资源出错）或者 ssh 连接断开了，重新执行安装命令即可。具体错误信息请自行搜索解决。

3. 安装 openresty 应用

登陆以后我们可以看到 1panel 的界面，如下图所示。
1panel 首页

首页显示的是服务器的基本信息，我们可以看到服务器的内存、cpu、硬盘、负载等信息。
右边显示的是系统信息，我们可以看到系统的发行版本、内核、主机名等信息。

我们点击应用商店，这里有 1panel 社区维护的一些应用，我们可以直接安装使用。
应用商店包括了一些很热门的应用和开源项目 如：AList MySQL Mariadb WordPress Typecho Gitea Jenkins Redis MongoDB PostgreSQL RabbitMQ 等等。都是运行在 docker 容器中的，安装和卸载都很方便。
应用商店

我们选择安装 openresty。这是一个 nginx 的开源衍生版本，支持 lua 脚本，我们可以用它来做反向代理。
（不知道为啥没有 nginx，但是这个 openresty 也挺好用的，没差）
安装了它才能编辑网页、配置反代。
openresty
不要改配置！直接点确定即可。

4. 设置域名解析

域名服务商设置域名解析，将 域名 解析到服务器的 IP 上。这里应该不用我多教。
域名解析

5. 配置反向代理

点击网页左侧的 网站，然后点击 创建网站，填入域名和端口号，点击确定。
选择反向代理
反向代理

配置好后，就可以使用域名访问 1panel 面板了。

6. 申请域名 SSL 证书

由于我的域名托管在 Cloudflare，域名流量经过他 proxied，不需要手动申请。如果你的域名托管在其他地方，那么你可以使用 1panel 申请 SSL 证书。
留个坑 如果有需要我再补充。

#1panel #server
1panel 配置教程
https://blog.ovvv.top/2023/12/28/1panel-Configuration-Tutorial/
作者
mobeicanyue
发布于
2023年12月28日 15:54
更新于
2023年12月28日 21:35
许可协议
\ No newline at end of file diff --git a/2023/12/28/Build-the-environment/index.html b/2023/12/28/Build-the-environment/index.html new file mode 100644 index 00000000..857cf80f --- /dev/null +++ b/2023/12/28/Build-the-environment/index.html @@ -0,0 +1 @@ +Hexo 环境搭建 - Canyue

Hexo 环境搭建

本文最后更新于 2023年12月28日 21:35

我是 Linux 操作系统 Manjaro 分支，所以文章着重介绍 Linux 下的环境搭建。
Windows 下的环境搭建有不小的差异，但是原理是一样的。

1. 检查 Git 环境

  • Linux 大多数发行版都默认安装了 Git，所以我们只需要检查一下 Git 版本。
    1
    git --version
    输出如下内容。
    1
    git version 2.43.0
  • Windows 下的 安装 Git 可以参考 Git 官网，或者搜索教程。

2. 安装 Node.js 和 npm

npm 的依赖项就是 nodejs。所以安装 npm, nodejs 会一起被安装。

  • Debian 系安装 npm 和 nodejs

    1
    sudo apt install npm

    检验版本

    1
    2
    node -v
    npm -v

  • ArchLinux 系安装 npm 和 nodejs

    1
    sudo pacman -S npm

    检验版本

    1
    2
    node -v
    npm -v

  • Windows 下的 安装 Node.js 和 npm 可以参考 Node.js 官网，或者搜索教程。

    和上面一样，安装完毕后检验版本。

记住上面的 nodejs 的版本号，后面会用到。

3. 安装 Hexo

注：如果是 Windows 系统，需要空白处单击鼠标右键，选择“Git Bash Here”输入以下命令。

Linux 系统直接打开终端输入即可。

1
npm install hexo-cli -g

安装完毕后，输入以下命令检验是否安装成功。

1
hexo -v

如果没有报错而是输出版本号，就说明安装成功了。
反之则根据报错信息进行排查。

Hexo 环境搭建
https://blog.ovvv.top/2023/12/28/Build-the-environment/
作者
mobeicanyue
发布于
2023年12月28日 19:08
更新于
2023年12月28日 21:35
许可协议
\ No newline at end of file diff --git a/2023/12/28/Compress-deploy-code-size/index.html b/2023/12/28/Compress-deploy-code-size/index.html index 8c63cdef..3a1976a1 100644 --- a/2023/12/28/Compress-deploy-code-size/index.html +++ b/2023/12/28/Compress-deploy-code-size/index.html @@ -1 +1 @@ -压缩部署代码大小 - Canyue

压缩部署代码大小

本文最后更新于 2023年12月28日 12:02

众所周知，我们在写 HTML CSS 和 JS 文件时文件中会包含许多换行和空格。
然而，这些换行和空格对浏览器而言并不具备实际意义，反而可能降低页面的加载速度，会对页面的渲染性能造成一定影响。比如我们看个
jquery 的源码
可以发现代码密密麻麻没有一点可读性，但是这样的代码浏览器来说加载起来更快，因为浏览器不需要去解析空格和换行符，而是直接读取代码。

因此，为了优化页面性能，我们需要对页面的静态资源进行压缩，包括 CSS、JS 和 HTML 文件等。为了简化这一过程，可使用 Hexo 插件 hexo-minify 进行压缩操作。这样一来，我们可以有效地减少文件大小，提升页面加载速度。

1. 安装 hexo-minify 插件

在你的 Hexo 博客目录下，执行以下命令安装 hexo-minify 插件：

1
npm install hexo-minify --save

2. 配置 hexo-minify 插件

具体用法及参数请查阅官方文档
在 Hexo 博客目录下，找到 _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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
## Hexo-minify Default Config Options
minify:
  preview: false ## 本地预览时是否压缩
  exclude: ['*.min.*']
  js:
    enable: true
    sourceMap:
      enable: false ## 生成 sourceMap
      ## 将 sourceMappingURL 插入压缩后的 js 文件，如果为 false 则需要在浏览器开发者工具中手动添加 sourceMap
      sourceMappingURL: false ## //# sourceMappingURL=xxx.js.map
    ## 详细配置: https://github.com/terser/terser#minify-options
    options: {}
  css:
    enable: true
    ## 详细配置: https://github.com/clean-css/clean-css#compatibility-modes
    options: {}
  html:
    enable: true
    ## 详细配置: https://github.com/kangax/html-minifier#options-quick-reference
    options:
      minifyJS: true # Compressed JavaScript
      minifyCSS: true # CSS Compressed
      removeComments: true # Remove the comments
      collapseWhitespace: true # Delete any extra space
      removeAttributeQuotes: true # Delete attribute quotes
  image:
    enable: true
    svg:
      enable: true
      ## 详细配置: https://github.com/imagemin/imagemin-svgo#imageminsvgooptionsbuffer
      options: {}
    jpg:
      enable: true
      ## 详细配置: https://github.com/imagemin/imagemin-jpegtran#options
      options: {}
    png:
      enable: true
      ## 详细配置: https://github.com/imagemin/imagemin-pngquant#options
      options: {}
    gif:
      enable: true
      ## 详细配置: https://www.npmjs.com/package/imagemin-gifsicle#options
      options: {}
    webp:
      enable: true
      ## 详细配置: https://github.com/imagemin/imagemin-webp#options
      options: {}
  font:
    enable: false
    ## 详细配置: https://github.com/Lete114/fontmin-spider#api
    options: {}

这样我们生成的代码就会被压缩 .
在本地运行博客默认不启用压缩 preview: false

现在我们想看看效果，就设置为 preview: true
再运行

1
hexo clean && hexo g

可以看到 html 确实被压缩了
压缩后

#hexo #deploy
压缩部署代码大小
https://blog.ovvv.top/2023/12/28/Compress-deploy-code-size/
作者
mobeicanyue
发布于
2023年12月28日 02:51
更新于
2023年12月28日 12:02
许可协议
\ No newline at end of file +压缩部署的代码 - Canyue

压缩部署的代码

本文最后更新于 2023年12月28日 21:35

众所周知，我们在写 HTML CSS 和 JS 文件时文件中会包含许多换行和空格。
然而，这些换行和空格对浏览器而言并不具备实际意义，反而可能降低页面的加载速度，会对页面的渲染性能造成一定影响。比如我们看个
jquery 的源码
可以发现代码密密麻麻没有一点可读性，但是这样的代码浏览器来说加载起来更快，因为浏览器不需要去解析空格和换行符，而是直接读取代码。

因此，为了优化页面性能，我们需要对页面的静态资源进行压缩，包括 CSS、JS 和 HTML、图片、字体等。为了简化这一过程，可使用 Hexo 插件 hexo-minify 进行压缩操作。这样一来，我们可以有效地减少文件大小，提升页面加载速度。

1. 安装 hexo-minify 插件

在你的 Hexo 博客目录下，执行以下命令安装 hexo-minify 插件：

1
npm install hexo-minify --save

2. 配置 hexo-minify 插件

具体用法及参数请查阅官方文档
在 Hexo 博客目录下，找到 _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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
## Hexo-minify Default Config Options
minify:
  preview: false ## 本地预览时是否压缩
  exclude: ['*.min.*']
  js:
    enable: true
    sourceMap:
      enable: false ## 生成 sourceMap
      ## 将 sourceMappingURL 插入压缩后的 js 文件，如果为 false 则需要在浏览器开发者工具中手动添加 sourceMap
      sourceMappingURL: false ## //# sourceMappingURL=xxx.js.map
    ## 详细配置: https://github.com/terser/terser#minify-options
    options: {}
  css:
    enable: true
    ## 详细配置: https://github.com/clean-css/clean-css#compatibility-modes
    options: {}
  html:
    enable: true
    ## 详细配置: https://github.com/kangax/html-minifier#options-quick-reference
    options:
      minifyJS: true # Compressed JavaScript
      minifyCSS: true # CSS Compressed
      removeComments: true # Remove the comments
      collapseWhitespace: true # Delete any extra space
      removeAttributeQuotes: true # Delete attribute quotes
  image:
    enable: true
    svg:
      enable: true
      ## 详细配置: https://github.com/imagemin/imagemin-svgo#imageminsvgooptionsbuffer
      options: {}
    jpg:
      enable: true
      ## 详细配置: https://github.com/imagemin/imagemin-jpegtran#options
      options: {}
    png:
      enable: true
      ## 详细配置: https://github.com/imagemin/imagemin-pngquant#options
      options: {}
    gif:
      enable: true
      ## 详细配置: https://www.npmjs.com/package/imagemin-gifsicle#options
      options: {}
    webp:
      enable: true
      ## 详细配置: https://github.com/imagemin/imagemin-webp#options
      options: {}
  font:
    enable: false
    ## 详细配置: https://github.com/Lete114/fontmin-spider#api
    options: {}

这样我们生成的代码就会被压缩 .
在本地运行博客默认不启用压缩 preview: false

现在我们想看看效果，就设置为 preview: true
再运行

1
hexo clean && hexo g

可以看到 html 确实被压缩了
压缩后

#hexo #deploy
压缩部署的代码
https://blog.ovvv.top/2023/12/28/Compress-deploy-code-size/
作者
mobeicanyue
发布于
2023年12月28日 02:51
更新于
2023年12月28日 21:35
许可协议
\ No newline at end of file diff --git a/2023/12/28/Convert-jpg-to-webp/index.html b/2023/12/28/Convert-jpg-to-webp/index.html new file mode 100644 index 00000000..3ac0d5ea --- /dev/null +++ b/2023/12/28/Convert-jpg-to-webp/index.html @@ -0,0 +1 @@ +将 jpg 转换为 webp - Canyue

将 jpg 转换为 webp

本文最后更新于 2023年12月28日 21:35

本文主要介绍如何将 Jpg 转换为 WebP。
为什么要转换为 WebP 呢？因为 WebP 图片通常比 JPEG 图片更小，同时保持相似的视觉质量。也是现代浏览器支持、推荐使用的图片格式之一。

1. 安装 cwebp

Archlinux 系 Linux 安装 cwebp

1
sudo pacman -S libwebp

2. 转换

我编写了一个脚本，可以将当前目录下的所有 jpg 文件转换为 webp 文件。
代码遍历所有文件夹并将图片转换为 WebP 格式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
script_dir=$(dirname "$0")

# 使用 find 命令遍历所有子文件夹中的图片文件
find "$script_dir" -type f \( -iname \*.jpg -o -iname \*.jpeg -o -iname \*.png \) -exec sh -c '
  for file do
    # 获取文件的相对路径和文件名
    relpath=$(dirname "$file")
    filename=$(basename "$file")

    # 使用 cwebp 将图片转换为 WebP 格式并保存到当前目录
    cwebp "$file" -o "${relpath}/${filename%.*}.webp"

    # 删除原始图片文件已注释, 建议先在测试环境中运行一下再放到代码仓库中运行
    # rm "$file"
  done
' sh {} +

可以看到确实图片体积减少很多，但是由于这张图片清晰度有点低，所以压缩后画质当然也不高。
compare.webp

3. 更改博客中的图片链接

vscode 或者别的 ide 批量替换你用到的 markdown 图片链接，将 .jpg 替换为 .webp 即可。
replace.webp

在部署博客之前，记得先在本地测试一下，看看是否有问题。

将 jpg 转换为 webp
https://blog.ovvv.top/2023/12/28/Convert-jpg-to-webp/
作者
mobeicanyue
发布于
2023年12月28日 00:25
更新于
2023年12月28日 21:35
许可协议
\ No newline at end of file diff --git a/2023/12/28/Hexo-Fluid-set-footer/index.html b/2023/12/28/Hexo-Fluid-set-footer/index.html index cd4940ec..0420037c 100644 --- a/2023/12/28/Hexo-Fluid-set-footer/index.html +++ b/2023/12/28/Hexo-Fluid-set-footer/index.html @@ -1 +1 @@ -Hexo Fluid 设置页脚 - Canyue

Hexo Fluid 设置页脚

本文最后更新于 2023年12月28日 12:25

效果图：
set-footer.webp

1. 修改 Fluid 主题配置文件

Fluid 提供了选项来自定义页脚。
打开_config.fluid.yml，找到footer，修改content的值为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
footer:
  content: '
    <div>
      Copyright © 2023<span id="copyrightYear"></span> |
      <a href="https://github.com/mobeicanyue/mobeicanyue.github.io" target="_blank" rel="nofollow noopener">
      <span>mobeicanyue</span></a>    
    </div>

    <div>
      <span id="timeDate">载入天数...</span>
      <span id="times">载入时分秒...</span>
      <script src="/js/duration.js"></script>
    </div>

    Powered by
    <a href="https://hexo.io" target="_blank" rel="nofollow noopener"><span>Hexo</span></a>
    <i class="iconfont icon-love"></i>
    <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"><span>Fluid</span></a>
    '

上面分别是版权信息、运行时间、Hexo 和 Fluid 的链接。
这样子还不行，因为显示的时间是动态的，需要 js 来实现（经过测试好像不能在这写 script 代码，所以外链 js）。


新建文件夹source/js，新建文件duration.js，内容如下：

代码来源于网络，由于找的代码都是大同小异的，不知道原作者是谁，版权归原作者所有。

1
2
3
4
5
6
7
8
9
10
11
12
13
function createtime() {
    var grt= new Date("12/26/2023 22:19:15");// 在此处修改你的建站时间，格式：月/日/年 时:分:秒
    now.setTime(now.getTime()+250);
    days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
    hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);
    if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
    mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}
    seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
    snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}
    document.getElementById("timeDate").innerHTML = "本站已运行 "+dnum+" 天 ";
    document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
}
setInterval("createtime()", 250);
#hexo #fluid
Hexo Fluid 设置页脚
https://blog.ovvv.top/2023/12/28/Hexo-Fluid-set-footer/
作者
mobeicanyue
发布于
2023年12月28日 02:26
更新于
2023年12月28日 12:25
许可协议
\ No newline at end of file +Hexo Fluid 设置页脚 - Canyue

Hexo Fluid 设置页脚

本文最后更新于 2023年12月28日 21:35

效果图：
set-footer.webp

1. 修改 Fluid 主题配置文件

Fluid 提供了选项来自定义页脚。
打开_config.fluid.yml，找到footer，修改content的值为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
footer:
  content: '
    <div>
      Copyright © 2023<span id="copyrightYear"></span> |
      <a href="https://github.com/mobeicanyue/mobeicanyue.github.io" target="_blank" rel="nofollow noopener">
      <span>mobeicanyue</span></a>    
    </div>

    <div>
      <span id="timeDate">载入天数...</span>
      <span id="times">载入时分秒...</span>
      <script src="/js/duration.js"></script>
    </div>

    Powered by
    <a href="https://hexo.io" target="_blank" rel="nofollow noopener"><span>Hexo</span></a>
    <i class="iconfont icon-love"></i>
    <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"><span>Fluid</span></a>
    '

上面分别是版权信息、运行时间、Hexo 和 Fluid 的链接。
这样子还没完，因为要求显示的时间是动态的，需要写 js 来实现（经过测试好像不能在这写 script 代码，所以外链 js）。


新建文件夹source/js，新建文件duration.js，内容如下：

代码来源于网络，由于找的代码都是大同小异的，不知道原作者是谁，版权归原作者所有。

1
2
3
4
5
6
7
8
9
10
11
12
13
function createtime() {
    var grt= new Date("12/26/2023 22:19:15");// 在此处修改你的建站时间，格式：月/日/年 时:分:秒
    now.setTime(now.getTime()+250);
    days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
    hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);
    if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
    mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}
    seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
    snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}
    document.getElementById("timeDate").innerHTML = "本站已运行 "+dnum+" 天 ";
    document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
}
setInterval("createtime()", 250);

重新运行博客，功能即可实现。

#hexo #fluid
Hexo Fluid 设置页脚
https://blog.ovvv.top/2023/12/28/Hexo-Fluid-set-footer/
作者
mobeicanyue
发布于
2023年12月28日 02:26
更新于
2023年12月28日 21:35
许可协议
\ No newline at end of file diff --git a/2023/12/28/Transfer-jpg-to-webp/index.html b/2023/12/28/Transfer-jpg-to-webp/index.html deleted file mode 100644 index 5c4be8e6..00000000 --- a/2023/12/28/Transfer-jpg-to-webp/index.html +++ /dev/null @@ -1 +0,0 @@ -将 jpg 转换为 webp - Canyue

将 jpg 转换为 webp

本文最后更新于 2023年12月28日 03:22

本文主要介绍如何将 Jpg 转换为 WebP。
为什么要转换为 WebP 呢？因为 WebP 图片通常比 JPEG 图片更小，同时保持相似的视觉质量。也是现代浏览器支持、推荐使用的图片格式之一。

1. 安装 cwebp

archlinux 系列的

1
sudo pacman -S libwebp

2. 转换

我编写了一个脚本，可以将当前 images 目录下的所有 jpg 文件转换为 webp 文件。
遍历所有文件夹并将图片转换为 WebP 格式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
script_dir=$(dirname "$0")

# 使用 find 命令遍历所有子文件夹中的图片文件
find "$script_dir" -type f \( -iname \*.jpg -o -iname \*.jpeg -o -iname \*.png \) -exec sh -c '
  for file do
    # 获取文件的相对路径和文件名
    relpath=$(dirname "$file")
    filename=$(basename "$file")

    # 使用 cwebp 将图片转换为 WebP 格式并保存到当前目录
    cwebp "$file" -o "${relpath}/${filename%.*}.webp"

    # 删除原始图片文件已注释, 建议先在测试环境中运行一下再放到代码仓库中运行
    # rm "$file"
  done
' sh {} +

可以看到确实图片体积减少很多，但是由于这张图片清晰度有点低，所以压缩后画质当然也不高。
compare.webp

3. 更改博客中的图片链接

vscode 或者别的 ide 批量替换你用到的 markdown 图片链接，将 .jpg 替换为 .webp 即可。
replace.webp

在部署博客之前，记得先在本地测试一下，看看是否有问题。

将 jpg 转换为 webp
https://blog.ovvv.top/2023/12/28/Transfer-jpg-to-webp/
作者
mobeicanyue
发布于
2023年12月28日 00:25
更新于
2023年12月28日 03:22
许可协议
\ No newline at end of file diff --git a/2023/12/28/Tutorial-of-Building-a-blog/index.html b/2023/12/28/Tutorial-of-Building-a-blog/index.html new file mode 100644 index 00000000..aae87359 --- /dev/null +++ b/2023/12/28/Tutorial-of-Building-a-blog/index.html @@ -0,0 +1 @@ +构建博客教程 - Canyue

构建博客教程

本文最后更新于 2023年12月28日 21:35

目录

Hexo Github-Pages 自动部署

Fluid 主题、美化相关

博客性能优化

构建博客教程
https://blog.ovvv.top/2023/12/28/Tutorial-of-Building-a-blog/
作者
mobeicanyue
发布于
2023年12月28日 19:03
更新于
2023年12月28日 21:35
许可协议
\ No newline at end of file diff --git a/archives/2023/12/index.html b/archives/2023/12/index.html index 1a5e0c8b..564cdfa0 100644 --- a/archives/2023/12/index.html +++ b/archives/2023/12/index.html @@ -1 +1 @@ -归档 - Canyue
\ No newline at end of file +归档 - Canyue
\ No newline at end of file diff --git a/archives/2023/12/page/2/index.html b/archives/2023/12/page/2/index.html new file mode 100644 index 00000000..268b7476 --- /dev/null +++ b/archives/2023/12/page/2/index.html @@ -0,0 +1 @@ +归档 - Canyue
\ No newline at end of file diff --git a/archives/2023/index.html b/archives/2023/index.html index 2cd53c7f..3f1c4c5d 100644 --- a/archives/2023/index.html +++ b/archives/2023/index.html @@ -1 +1 @@ -归档 - Canyue
\ No newline at end of file +归档 - Canyue
\ No newline at end of file diff --git a/archives/2023/page/2/index.html b/archives/2023/page/2/index.html new file mode 100644 index 00000000..9b75cca6 --- /dev/null +++ b/archives/2023/page/2/index.html @@ -0,0 +1 @@ +归档 - Canyue
\ No newline at end of file diff --git a/archives/index.html b/archives/index.html index ae0dc070..951be13f 100644 --- a/archives/index.html +++ b/archives/index.html @@ -1 +1 @@ -归档 - Canyue
\ No newline at end of file +归档 - Canyue
\ No newline at end of file diff --git a/archives/page/2/index.html b/archives/page/2/index.html new file mode 100644 index 00000000..625d01d8 --- /dev/null +++ b/archives/page/2/index.html @@ -0,0 +1 @@ +归档 - Canyue
\ No newline at end of file diff --git a/images/Transfer-jpg-to-webp/compare.webp b/images/Convert-jpg-to-webp/compare.webp similarity index 100% rename from images/Transfer-jpg-to-webp/compare.webp rename to images/Convert-jpg-to-webp/compare.webp diff --git a/images/Transfer-jpg-to-webp/replace.webp b/images/Convert-jpg-to-webp/replace.webp similarity index 100% rename from images/Transfer-jpg-to-webp/replace.webp rename to images/Convert-jpg-to-webp/replace.webp diff --git a/images/Modify-theme/about.webp b/images/Fluid-theme-installation/about.webp similarity index 100% rename from images/Modify-theme/about.webp rename to images/Fluid-theme-installation/about.webp diff --git a/images/Modify-theme/api-bg.webp b/images/Fluid-theme-installation/api-bg.webp similarity index 100% rename from images/Modify-theme/api-bg.webp rename to images/Fluid-theme-installation/api-bg.webp diff --git a/images/Modify-theme/api-slogan.webp b/images/Fluid-theme-installation/api-slogan.webp similarity index 100% rename from images/Modify-theme/api-slogan.webp rename to images/Fluid-theme-installation/api-slogan.webp diff --git a/images/Modify-theme/yml-files.webp b/images/Fluid-theme-installation/yml-files.webp similarity index 100% rename from images/Modify-theme/yml-files.webp rename to images/Fluid-theme-installation/yml-files.webp diff --git a/index.html b/index.html index efe5675b..f58d0e9d 100644 --- a/index.html +++ b/index.html @@ -1 +1 @@ -Canyue

压缩部署代码大小

众所周知，我们在写 HTML CSS 和 JS 文件时文件中会包含许多换行和空格。然而，这些换行和空格对浏览器而言并不具备实际意义，反而可能降低页面的加载速度，会对页面的渲染性能造成一定影响。比如我们看个jquery 的源码可以发现代码密密麻麻没有一点可读性，但是这样的代码浏览器来说加载起来更快，因为浏览器不需要去解析空格和换行符，而是直接读取代码。 因此，为了优化页面性能，我们需要对页面的静态资
#hexo #deploy

修复 Github Pages 上的文章更新时间

github actions 具体配置请参考前面的文章 1. 问题起因我开启了 fluid 配置的 但是在部署到 github pages 时，hexo 并不会像我们本地运行那样，显示的是文章的更新时间，而是显示的是部署的时间。 换句话说，你所有文章的更新时间都全部定格在 github actions 最新的部署的那个时间（难绷）。 我们可以在 front-matter 加入 updated:
#github-actions #github-pages

在 Fluid 主题中使用霞鹜文楷

近来阅读竹林里有冰的博客，发现他的博客字体很好看，想着把他的字体也用到我的博客里，于是就有了这篇文章。 1. 字体介绍霞鹜文楷字体仓库霞鹜文楷 我之前其实在手机上用过，不过后面由于装机加上懒得折腾就没有再设置了，但是博客我觉得为了好的阅读体验还是可以换一下的 关于在 web 中使用 霞鹜文楷 请参阅 issue#24 其中 chawyehsu 提供了打包，但是点进去仓库发现已经有半年没更新了。在
#hexo #fluid

我的第一篇 Hexo 博客

Hexo 部署 Github Pages, Github Actions 自动部署激动的心 颤抖的手，这是本站第一篇博客。部署 hexo 的过程中遇到了很多问题，最终还是解决了，这里记录一下。 最终实现的效果，一个项目仓库，main 分支存放源代码，gh-pages 存放生成后的网页代码，github pages 加载 gh-pages 的网页代码。这样，每当我们 push 代码到 main 分
#hexo #deploy #github actions #github #github pages
\ No newline at end of file +Canyue

压缩部署的代码

众所周知，我们在写 HTML CSS 和 JS 文件时文件中会包含许多换行和空格。然而，这些换行和空格对浏览器而言并不具备实际意义，反而可能降低页面的加载速度，会对页面的渲染性能造成一定影响。比如我们看个jquery 的源码可以发现代码密密麻麻没有一点可读性，但是这样的代码浏览器来说加载起来更快，因为浏览器不需要去解析空格和换行符，而是直接读取代码。 因此，为了优化页面性能，我们需要对页面的静态资
#hexo #deploy

修复 Github Pages 上的文章更新时间

github actions 具体配置请参考前面的文章 1. 问题起因我开启了 fluid 配置 updated: true，这样会显示文章的更新时间。 但是在部署到 github pages 时，hexo 并不会像我们本地运行那样，显示的是文章的更新时间，它获取的是部署的时间。 换句话说，你所有文章的更新时间都全部定格在 github actions 最新的部署的那个时间（难绷）。 我们可以
#github-actions #github-pages

在 Fluid 主题中使用霞鹜文楷

近来阅读竹林里有冰的博客，发现他的博客字体很好看，想着把他的字体也用到我的博客里，于是就有了这篇文章。 1. 字体介绍霞鹜文楷字体仓库霞鹜文楷 我之前其实在手机上用过，不过后面由于装机加上懒得折腾就没有再设置了，但是博客我觉得为了好的阅读体验还是可以换一下的 关于在 web 中使用 霞鹜文楷 请参阅 issue#24 其中 chawyehsu 提供了打包，但是点进去仓库发现已经有半年没更新了。在
#hexo #fluid
\ No newline at end of file diff --git a/local-search.xml b/local-search.xml index 6aea28fb..382e9592 100644 --- a/local-search.xml +++ b/local-search.xml @@ -3,12 +3,38 @@ + + Hexo 环境搭建 + + /2023/12/28/Build-the-environment/ + + 我是 Linux 操作系统 Manjaro 分支，所以文章着重介绍 Linux 下的环境搭建。
Windows 下的环境搭建有不小的差异，但是原理是一样的。

1. 检查 Git 环境

2. 安装 Node.js 和 npm

npm 的依赖项就是 nodejs。所以安装 npm, nodejs 会一起被安装。


记住上面的 nodejs 的版本号，后面会用到。

3. 安装 Hexo

注：如果是 Windows 系统，需要空白处单击鼠标右键，选择“Git Bash Here”输入以下命令。

Linux 系统直接打开终端输入即可。

1
npm install hexo-cli -g

安装完毕后，输入以下命令检验是否安装成功。

1
hexo -v

如果没有报错而是输出版本号，就说明安装成功了。
反之则根据报错信息进行排查。

]]> + + + + + + + + + 构建博客教程 + + /2023/12/28/Tutorial-of-Building-a-blog/ + + 目录

Hexo Github-Pages 自动部署

Fluid 主题、美化相关

博客性能优化

]]> + + + + + + + 1panel 配置教程 /2023/12/28/1panel-Configuration-Tutorial/ -

本文档为 1panel 配置教程，主要介绍 1panel 的配置及使用。更多信息请参照官网
部署条件：一台能 ssh 登录的服务器，一个域名

最后实现的效果：安装配置 1panel 并配置反向代理，使用域名访问 1panel 面板。

1. 1panel 是什么？

1panel 的官网简介

1panel 的 Github 仓库：https://github.com/1Panel-dev/1Panel

宝塔面板是比较知名的服务器管理面板，但是它不开源，UI 也不好看，登录时甚至还要求绑定宝塔官网账号，否则就无法继续使用面板！

如此种种便促使我们寻找替代品。我的服务器在 11 月份左右过期了，新的服务器不想使用宝塔面板，但是不使用面板操作服务器还是不太方便（比如设置反向代理、申请域名 SSL 证书和管理 docker 应用，面板可视化点击几下就好了，命令行操作起来很折磨人），于是便寻找它的替代品，也就是我们今天的主角 —— 1panel。

1panel 首页

项目还采用的是 vue 编写的前端，算是比较先进的技术栈。后端采用 GO 编写。
项目语言

你可以访问这个连接来体验一下 1panel 的功能：https://demo.1panel.cn

经过一两个月的使用，我觉得现在体验相当稳定，写这篇教程，希望能帮助到大家。

2. 1panel 安装

先确保你的服务器安装了 curl，没有就自行安装。

如果服务器是 debian 系列的系统，执行下面命令安装 curl

1
sudo apt install curl

其他系统请自行搜索安装 curl 的方法。

开始安装 1panel。

  1. ssh 连接到你的服务器，然后执行下面的命令，安装 1panel。

    1
    curl -sSL https://resource.fit2cloud.com/1panel/package/quick_start.sh -o quick_start.sh && sudo bash quick_start.sh

  2. 命令行提示输入安装目录，敲回车 默认即可
    安装目录
    后面命令行会输出一大串安装日志，等待即可。

  3. 命令行提示输入端口号，你可以自定义，也可以用它给你默认的端口号。
    注意 如果你使用的是云服务器，请至安全组开放 输入的端口
    输入信息

如果没有什么报错的话，那么恭喜你，1panel 已经安装成功了。

登陆信息
现在在浏览器访问 命令行输出的 外网地址 就可以登陆 1panel 面板了。
面板用户名和密码也在命令行输出，如上图所示。

登陆界面

如果出现错误很可能是网络连接问题（服务器下载面板资源出错）或者 ssh 连接断开了，重新执行安装命令即可。具体错误信息请自行搜索解决。

3. 安装 openresty 应用

登陆以后我们可以看到 1panel 的界面，如下图所示。
1panel 首页

首页显示的是服务器的基本信息，我们可以看到服务器的内存、cpu、硬盘、负载等信息。
右边显示的是系统信息，我们可以看到系统的发行版本、内核、主机名等信息。

我们点击应用商店，这里有 1panel 社区维护的一些应用，我们可以直接安装使用。
应用商店包括了一些很热门的应用和开源项目 如：AList MySQL Mariadb WordPress Typecho Gitea Jenkins Redis MongoDB PostgreSQL RabbitMQ 等等。都是运行在 docker 容器中的，安装和卸载都很方便。
应用商店

我们安装 openresty 应用。这是一个 nginx 的衍生版本，支持 lua 脚本，我们可以用它来做反向代理。
（不知道为啥没有 nginx，但是这个也挺好用的，没差）
安装了它才能编辑网页、配置反代。
openresty
不要改配置！直接点确定即可。

4. 设置域名解析

域名服务商设置域名解析，将域名解析到服务器的 IP 上。这里应该不用我多教。
域名解析

5. 配置反向代理

点击网页左侧的 网站，然后点击 创建网站，填入域名和端口号，点击确定。
选择反向代理
反向代理

配置好后，就可以使用域名访问 1panel 面板了。

6. 申请域名 SSL 证书

由于我的域名托管在 Cloudflare，域名流量经过他 proxied，不需要手动申请。如果你的域名托管在其他地方，那么你可以使用 1panel 申请 SSL 证书。
留个坑 如果有需要我再补充。

]]> +

本文档为 1panel 配置教程，主要介绍 1panel 的配置及使用。更多信息请参照官网
部署条件：一台能 ssh 登录的服务器，一个域名

最后实现的效果：安装配置 1panel 并配置反向代理，使用域名访问 1panel 面板。

1. 1panel 是什么？

1panel 的官网简介

1panel 的 Github 仓库：https://github.com/1Panel-dev/1Panel

宝塔面板是比较知名的服务器管理面板，但是它不开源，UI 也不好看，登录时甚至还要求绑定宝塔官网账号，否则就无法继续使用面板！

如此种种便促使我寻找替代品。我的服务器在 11 月份左右过期了，新的服务器不想使用宝塔面板，但是不使用面板操作服务器还是不太方便（比如设置反向代理、申请域名 SSL 证书和管理 docker 应用，面板可视化点击几下就好了，命令行操作起来很折磨人），于是便寻找它的替代品，也就是我们今天的主角 —— 1panel。

1panel 首页

项目还采用的是 vue 编写的前端，算是比较先进的技术栈。后端采用 GO 编写。
项目语言

你可以访问这个连接来体验一下 1panel 的功能：https://demo.1panel.cn

经过一两个月的使用，我觉得现在体验相当稳定，写这篇教程希望能帮助到大家。

2. 1panel 安装

先确保你的服务器安装了 curl，没有就自行安装。

如果服务器是 debian 系列的系统，执行下面命令安装 curl

1
sudo apt install curl

其他系统请自行搜索安装 curl 的方法。

开始安装 1panel。

  1. ssh 连接到你的服务器，然后执行下面的命令，安装 1panel。

    1
    curl -sSL https://resource.fit2cloud.com/1panel/package/quick_start.sh -o quick_start.sh && sudo bash quick_start.sh

  2. 命令行提示输入安装目录，敲回车 默认即可
    安装目录
    后面命令行会输出一大串安装日志，等待即可。

  3. 命令行提示输入端口号，你可以自定义，也可以用它给你默认的端口号。
    注意 如果你使用的是云服务器，请至云服务器提供商的安全组开放 输入的端口。
    账号密码自己设置，但最好不要太简单，不然被人爆破就不好了。
    输入信息

如果没有什么报错的话，那么恭喜你，1panel 已经安装成功了。

登陆信息
现在在浏览器访问 命令行输出的 外网地址 就可以登陆 1panel 面板了。
面板用户名和密码也在命令行输出，如上图所示。

登陆界面

如果出现错误很可能是网络连接问题（服务器下载面板资源出错）或者 ssh 连接断开了，重新执行安装命令即可。具体错误信息请自行搜索解决。

3. 安装 openresty 应用

登陆以后我们可以看到 1panel 的界面，如下图所示。
1panel 首页

首页显示的是服务器的基本信息，我们可以看到服务器的内存、cpu、硬盘、负载等信息。
右边显示的是系统信息，我们可以看到系统的发行版本、内核、主机名等信息。

我们点击应用商店，这里有 1panel 社区维护的一些应用，我们可以直接安装使用。
应用商店包括了一些很热门的应用和开源项目 如：AList MySQL Mariadb WordPress Typecho Gitea Jenkins Redis MongoDB PostgreSQL RabbitMQ 等等。都是运行在 docker 容器中的，安装和卸载都很方便。
应用商店

我们选择安装 openresty。这是一个 nginx 的开源衍生版本，支持 lua 脚本，我们可以用它来做反向代理。
（不知道为啥没有 nginx，但是这个 openresty 也挺好用的，没差）
安装了它才能编辑网页、配置反代。
openresty
不要改配置！直接点确定即可。

4. 设置域名解析

域名服务商设置域名解析，将 域名 解析到服务器的 IP 上。这里应该不用我多教。
域名解析

5. 配置反向代理

点击网页左侧的 网站，然后点击 创建网站，填入域名和端口号，点击确定。
选择反向代理
反向代理

配置好后，就可以使用域名访问 1panel 面板了。

6. 申请域名 SSL 证书

由于我的域名托管在 Cloudflare，域名流量经过他 proxied，不需要手动申请。如果你的域名托管在其他地方，那么你可以使用 1panel 申请 SSL 证书。
留个坑 如果有需要我再补充。

]]> @@ -25,11 +51,11 @@ - 压缩部署代码大小 + 压缩部署的代码 /2023/12/28/Compress-deploy-code-size/ - 众所周知，我们在写 HTML CSS 和 JS 文件时文件中会包含许多换行和空格。
然而，这些换行和空格对浏览器而言并不具备实际意义，反而可能降低页面的加载速度，会对页面的渲染性能造成一定影响。比如我们看个
jquery 的源码
可以发现代码密密麻麻没有一点可读性，但是这样的代码浏览器来说加载起来更快，因为浏览器不需要去解析空格和换行符，而是直接读取代码。

因此，为了优化页面性能，我们需要对页面的静态资源进行压缩，包括 CSS、JS 和 HTML 文件等。为了简化这一过程，可使用 Hexo 插件 hexo-minify 进行压缩操作。这样一来，我们可以有效地减少文件大小，提升页面加载速度。

1. 安装 hexo-minify 插件

在你的 Hexo 博客目录下，执行以下命令安装 hexo-minify 插件：

1
npm install hexo-minify --save

2. 配置 hexo-minify 插件

具体用法及参数请查阅官方文档
在 Hexo 博客目录下，找到 _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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
## Hexo-minify Default Config Options
minify:
  preview: false ## 本地预览时是否压缩
  exclude: ['*.min.*']
  js:
    enable: true
    sourceMap:
      enable: false ## 生成 sourceMap
      ## 将 sourceMappingURL 插入压缩后的 js 文件，如果为 false 则需要在浏览器开发者工具中手动添加 sourceMap
      sourceMappingURL: false ## //# sourceMappingURL=xxx.js.map
    ## 详细配置: https://github.com/terser/terser#minify-options
    options: {}
  css:
    enable: true
    ## 详细配置: https://github.com/clean-css/clean-css#compatibility-modes
    options: {}
  html:
    enable: true
    ## 详细配置: https://github.com/kangax/html-minifier#options-quick-reference
    options:
      minifyJS: true # Compressed JavaScript
      minifyCSS: true # CSS Compressed
      removeComments: true # Remove the comments
      collapseWhitespace: true # Delete any extra space
      removeAttributeQuotes: true # Delete attribute quotes
  image:
    enable: true
    svg:
      enable: true
      ## 详细配置: https://github.com/imagemin/imagemin-svgo#imageminsvgooptionsbuffer
      options: {}
    jpg:
      enable: true
      ## 详细配置: https://github.com/imagemin/imagemin-jpegtran#options
      options: {}
    png:
      enable: true
      ## 详细配置: https://github.com/imagemin/imagemin-pngquant#options
      options: {}
    gif:
      enable: true
      ## 详细配置: https://www.npmjs.com/package/imagemin-gifsicle#options
      options: {}
    webp:
      enable: true
      ## 详细配置: https://github.com/imagemin/imagemin-webp#options
      options: {}
  font:
    enable: false
    ## 详细配置: https://github.com/Lete114/fontmin-spider#api
    options: {}

这样我们生成的代码就会被压缩 .
在本地运行博客默认不启用压缩 preview: false

现在我们想看看效果，就设置为 preview: true
再运行

1
hexo clean && hexo g

可以看到 html 确实被压缩了
压缩后

]]> + 众所周知，我们在写 HTML CSS 和 JS 文件时文件中会包含许多换行和空格。
然而，这些换行和空格对浏览器而言并不具备实际意义，反而可能降低页面的加载速度，会对页面的渲染性能造成一定影响。比如我们看个
jquery 的源码
可以发现代码密密麻麻没有一点可读性，但是这样的代码浏览器来说加载起来更快，因为浏览器不需要去解析空格和换行符，而是直接读取代码。

因此，为了优化页面性能，我们需要对页面的静态资源进行压缩，包括 CSS、JS 和 HTML、图片、字体等。为了简化这一过程，可使用 Hexo 插件 hexo-minify 进行压缩操作。这样一来，我们可以有效地减少文件大小，提升页面加载速度。

1. 安装 hexo-minify 插件

在你的 Hexo 博客目录下，执行以下命令安装 hexo-minify 插件：

1
npm install hexo-minify --save

2. 配置 hexo-minify 插件

具体用法及参数请查阅官方文档
在 Hexo 博客目录下，找到 _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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
## Hexo-minify Default Config Options
minify:
  preview: false ## 本地预览时是否压缩
  exclude: ['*.min.*']
  js:
    enable: true
    sourceMap:
      enable: false ## 生成 sourceMap
      ## 将 sourceMappingURL 插入压缩后的 js 文件，如果为 false 则需要在浏览器开发者工具中手动添加 sourceMap
      sourceMappingURL: false ## //# sourceMappingURL=xxx.js.map
    ## 详细配置: https://github.com/terser/terser#minify-options
    options: {}
  css:
    enable: true
    ## 详细配置: https://github.com/clean-css/clean-css#compatibility-modes
    options: {}
  html:
    enable: true
    ## 详细配置: https://github.com/kangax/html-minifier#options-quick-reference
    options:
      minifyJS: true # Compressed JavaScript
      minifyCSS: true # CSS Compressed
      removeComments: true # Remove the comments
      collapseWhitespace: true # Delete any extra space
      removeAttributeQuotes: true # Delete attribute quotes
  image:
    enable: true
    svg:
      enable: true
      ## 详细配置: https://github.com/imagemin/imagemin-svgo#imageminsvgooptionsbuffer
      options: {}
    jpg:
      enable: true
      ## 详细配置: https://github.com/imagemin/imagemin-jpegtran#options
      options: {}
    png:
      enable: true
      ## 详细配置: https://github.com/imagemin/imagemin-pngquant#options
      options: {}
    gif:
      enable: true
      ## 详细配置: https://www.npmjs.com/package/imagemin-gifsicle#options
      options: {}
    webp:
      enable: true
      ## 详细配置: https://github.com/imagemin/imagemin-webp#options
      options: {}
  font:
    enable: false
    ## 详细配置: https://github.com/Lete114/fontmin-spider#api
    options: {}

这样我们生成的代码就会被压缩 .
在本地运行博客默认不启用压缩 preview: false

现在我们想看看效果，就设置为 preview: true
再运行

1
hexo clean && hexo g

可以看到 html 确实被压缩了
压缩后

]]> @@ -50,7 +76,7 @@ /2023/12/28/Hexo-Fluid-set-footer/ - 效果图：
set-footer.webp

1. 修改 Fluid 主题配置文件

Fluid 提供了选项来自定义页脚。
打开_config.fluid.yml，找到footer，修改content的值为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
footer:
  content: '
    <div>
      Copyright © 2023<span id="copyrightYear"></span> |
      <a href="https://github.com/mobeicanyue/mobeicanyue.github.io" target="_blank" rel="nofollow noopener">
      <span>mobeicanyue</span></a>    
    </div>

    <div>
      <span id="timeDate">载入天数...</span>
      <span id="times">载入时分秒...</span>
      <script src="/js/duration.js"></script>
    </div>

    Powered by
    <a href="https://hexo.io" target="_blank" rel="nofollow noopener"><span>Hexo</span></a>
    <i class="iconfont icon-love"></i>
    <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"><span>Fluid</span></a>
    '

上面分别是版权信息、运行时间、Hexo 和 Fluid 的链接。
这样子还不行，因为显示的时间是动态的，需要 js 来实现（经过测试好像不能在这写 script 代码，所以外链 js）。


新建文件夹source/js，新建文件duration.js，内容如下：

代码来源于网络，由于找的代码都是大同小异的，不知道原作者是谁，版权归原作者所有。

1
2
3
4
5
6
7
8
9
10
11
12
13
function createtime() {
    var grt= new Date("12/26/2023 22:19:15");// 在此处修改你的建站时间，格式：月/日/年 时:分:秒
    now.setTime(now.getTime()+250);
    days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
    hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);
    if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
    mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}
    seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
    snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}
    document.getElementById("timeDate").innerHTML = "本站已运行 "+dnum+" 天 ";
    document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
}
setInterval("createtime()", 250);
]]> + 效果图：
set-footer.webp

1. 修改 Fluid 主题配置文件

Fluid 提供了选项来自定义页脚。
打开_config.fluid.yml，找到footer，修改content的值为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
footer:
  content: '
    <div>
      Copyright © 2023<span id="copyrightYear"></span> |
      <a href="https://github.com/mobeicanyue/mobeicanyue.github.io" target="_blank" rel="nofollow noopener">
      <span>mobeicanyue</span></a>    
    </div>

    <div>
      <span id="timeDate">载入天数...</span>
      <span id="times">载入时分秒...</span>
      <script src="/js/duration.js"></script>
    </div>

    Powered by
    <a href="https://hexo.io" target="_blank" rel="nofollow noopener"><span>Hexo</span></a>
    <i class="iconfont icon-love"></i>
    <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"><span>Fluid</span></a>
    '

上面分别是版权信息、运行时间、Hexo 和 Fluid 的链接。
这样子还没完，因为要求显示的时间是动态的，需要写 js 来实现（经过测试好像不能在这写 script 代码，所以外链 js）。


新建文件夹source/js，新建文件duration.js，内容如下：

代码来源于网络，由于找的代码都是大同小异的，不知道原作者是谁，版权归原作者所有。

1
2
3
4
5
6
7
8
9
10
11
12
13
function createtime() {
    var grt= new Date("12/26/2023 22:19:15");// 在此处修改你的建站时间，格式：月/日/年 时:分:秒
    now.setTime(now.getTime()+250);
    days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
    hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);
    if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
    mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}
    seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
    snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}
    document.getElementById("timeDate").innerHTML = "本站已运行 "+dnum+" 天 ";
    document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
}
setInterval("createtime()", 250);

重新运行博客，功能即可实现。

]]> @@ -68,10 +94,10 @@ 将 jpg 转换为 webp - - /2023/12/28/Transfer-jpg-to-webp/ + + /2023/12/28/Convert-jpg-to-webp/ -

本文主要介绍如何将 Jpg 转换为 WebP。
为什么要转换为 WebP 呢？因为 WebP 图片通常比 JPEG 图片更小，同时保持相似的视觉质量。也是现代浏览器支持、推荐使用的图片格式之一。

1. 安装 cwebp

archlinux 系列的

1
sudo pacman -S libwebp

2. 转换

我编写了一个脚本，可以将当前 images 目录下的所有 jpg 文件转换为 webp 文件。
遍历所有文件夹并将图片转换为 WebP 格式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
script_dir=$(dirname "$0")

# 使用 find 命令遍历所有子文件夹中的图片文件
find "$script_dir" -type f \( -iname \*.jpg -o -iname \*.jpeg -o -iname \*.png \) -exec sh -c '
  for file do
    # 获取文件的相对路径和文件名
    relpath=$(dirname "$file")
    filename=$(basename "$file")

    # 使用 cwebp 将图片转换为 WebP 格式并保存到当前目录
    cwebp "$file" -o "${relpath}/${filename%.*}.webp"

    # 删除原始图片文件已注释, 建议先在测试环境中运行一下再放到代码仓库中运行
    # rm "$file"
  done
' sh {} +

可以看到确实图片体积减少很多，但是由于这张图片清晰度有点低，所以压缩后画质当然也不高。
compare.webp

3. 更改博客中的图片链接

vscode 或者别的 ide 批量替换你用到的 markdown 图片链接，将 .jpg 替换为 .webp 即可。
replace.webp

在部署博客之前，记得先在本地测试一下，看看是否有问题。

]]> +

本文主要介绍如何将 Jpg 转换为 WebP。
为什么要转换为 WebP 呢？因为 WebP 图片通常比 JPEG 图片更小，同时保持相似的视觉质量。也是现代浏览器支持、推荐使用的图片格式之一。

1. 安装 cwebp

Archlinux 系 Linux 安装 cwebp

1
sudo pacman -S libwebp

2. 转换

我编写了一个脚本，可以将当前目录下的所有 jpg 文件转换为 webp 文件。
代码遍历所有文件夹并将图片转换为 WebP 格式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
script_dir=$(dirname "$0")

# 使用 find 命令遍历所有子文件夹中的图片文件
find "$script_dir" -type f \( -iname \*.jpg -o -iname \*.jpeg -o -iname \*.png \) -exec sh -c '
  for file do
    # 获取文件的相对路径和文件名
    relpath=$(dirname "$file")
    filename=$(basename "$file")

    # 使用 cwebp 将图片转换为 WebP 格式并保存到当前目录
    cwebp "$file" -o "${relpath}/${filename%.*}.webp"

    # 删除原始图片文件已注释, 建议先在测试环境中运行一下再放到代码仓库中运行
    # rm "$file"
  done
' sh {} +

可以看到确实图片体积减少很多，但是由于这张图片清晰度有点低，所以压缩后画质当然也不高。
compare.webp

3. 更改博客中的图片链接

vscode 或者别的 ide 批量替换你用到的 markdown 图片链接，将 .jpg 替换为 .webp 即可。
replace.webp

在部署博客之前，记得先在本地测试一下，看看是否有问题。

]]> @@ -84,7 +110,7 @@ /2023/12/27/Fix-article-updated-time-on-github-pages/ -

github actions 具体配置请参考前面的文章

1. 问题起因

我开启了 fluid 配置的
fluid-config.webp

但是在部署到 github pages 时，hexo 并不会像我们本地运行那样，显示的是文章的更新时间，而是显示的是部署的时间。 换句话说，你所有文章的更新时间都全部定格在 github actions 最新的部署的那个时间（难绷）。
error-time.webp

我们可以在 front-matter 加入 updated: 更新时间 解决

1
2
3
4
5
title: article title
date: 2023-01-01 00:00:00

# 添加 updated: 更新时间
updated: 2023-01-01 00:00:00

但是很明显，这个需要我们手动去维护时间，这样很麻烦。

我们设想的是，文章的正常 updated 时间，就是文章的 commit 时间。

2. 解决方案

修改 deploy.yml

  1. 指定拉取代码的深度

    1
    2
    3
    uses: actions/checkout@v4
    with:
      fetch-depth: 0

    fetch-depth: 0 指定了拉取代码的深度。在这里，设置为 0 表示完全拉取整个代码历史，而不是仅拉取最新的部分。这样可以获取完整的 Git 历史记录。

  2. 修复文件更新时间
    在 build site 之前添加[1]

    1
    2
    3
    - name: Fix File Updated Date
      run: |
        git ls-files | while read filepath; do touch -d "$(git log -1 --format='@%ct' $filepath)" "$filepath" && echo "Fixed: $filepath"; done

    在这个脚本中，git ls-files 用于列出所有已跟踪的文件，然后通过 while read filepath 遍历每个文件。
    对于每个文件，git log -1 --format=‘@%ct’ $filepath 用于获取该文件的最后一次提交的时间戳（以秒为单位），并使用 touch -d 命令将文件的更新日期设置为相应的时间戳。
    echo “Fixed: $filepath” 用于输出修复过的文件路径。

这样我们就修复了 github pages 的文章更新时间。

  1. 参考竹林里有冰的 github acitons 文件 workflows/deploy.yml ↩
]]> +

github actions 具体配置请参考前面的文章

1. 问题起因

我开启了 fluid 配置 updated: true，这样会显示文章的更新时间。
fluid-config.webp

但是在部署到 github pages 时，hexo 并不会像我们本地运行那样，显示的是文章的更新时间，它获取的是部署的时间。 换句话说，你所有文章的更新时间都全部定格在 github actions 最新的部署的那个时间（难绷）。
error-time.webp

我们可以在 front-matter 加入 updated: 更新时间 解决

1
2
3
4
5
title: article title
date: 2023-01-01 00:00:00

# 添加 updated: 更新时间
updated: 2023-01-01 00:00:00

但是很明显，这个需要我们手动去维护时间，这样很麻烦。

我们设想的是，文章的正常 updated 时间，就是文章的 commit 时间。

2. 解决方案

修改 deploy.yml

  1. 指定拉取代码的深度

    1
    2
    3
    uses: actions/checkout@v4
    with:
      fetch-depth: 0

    fetch-depth: 0 指定了拉取代码的深度。在这里，设置为 0 表示完全拉取整个代码历史，而不是仅拉取最新的部分。这样可以获取完整的 Git 历史记录。

  2. 修复文件更新时间
    在 build site 之前添加如下代码 [1]

    1
    2
    3
    - name: Fix File Updated Date
      run: |
        git ls-files | while read filepath; do touch -d "$(git log -1 --format='@%ct' $filepath)" "$filepath" && echo "Fixed: $filepath"; done

    在这个脚本中，git ls-files 用于列出所有已跟踪的文件，然后通过 while read filepath 遍历每个文件。
    对于每个文件，git log -1 --format=‘@%ct’ $filepath 用于获取该文件的最后一次提交的时间戳（以秒为单位），并使用 touch -d 命令将文件的更新日期设置为相应的时间戳。
    echo “Fixed: $filepath” 用于输出修复过的文件路径。

这样我们就修复了 github pages 的文章更新时间。

  1. 参考竹林里有冰的 github acitons 文件 workflows/deploy.yml ↩
]]> @@ -105,7 +131,7 @@ /2023/12/27/Use-lxgw-wenkai-in-fluid/ - 近来阅读竹林里有冰的博客，发现他的博客字体很好看，想着把他的字体也用到我的博客里，于是就有了这篇文章。

1. 字体介绍

霞鹜文楷字体仓库
霞鹜文楷 我之前其实在手机上用过，不过后面由于装机加上懒得折腾就没有再设置了，但是博客我觉得为了好的阅读体验还是可以换一下的
霞鹜文楷

关于在 web 中使用 霞鹜文楷 请参阅 issue#24

其中 chawyehsu 提供了打包，但是点进去仓库发现已经有半年没更新了。在 issue 的下面我们可以看到 CMBill 提供了一个新的打包，我的就是这个打包。

在 CMBill 的仓库 README 中右键跳转 css 看看内容 style.css.webp

可以发现这个 css 是分了几个不同的字体种类，还有不同的霞鹜文楷变体可供选择
font-css.webp
将 style.css 替换为 @import url 之后的内容（去掉./），就可以直接使用了

我最终选择了 lxgwwenkaigb-bold 这个字体，这个字体阅读起来比较舒服。
我的博客字体文件为
https://cdn.jsdelivr.net/gh/CMBill/lxgw-wenkai-gb-web/fonts/lxgwwenkaigb-bold/result.css

2. 使用方法

如果你恰好也用 hexo 的 fluid 主题，那么恭喜你，替换字体很简单，只需要在主题的配置文件里加上一行 custom_css: https://xxxx代码就可以了，再修改 font_family。参照你的 css 文件前几行显示的 fontFamily: ，比如我的是 fontFamily: LXGW WenKai GB。

1
2
3
4
5
6
7
8
9
# 主题字体配置
font:
  font_size: 17px
  font_family: "LXGW WenKai GB"
  letter_spacing: 0.02em
  code_font_size: 85%

custom_js:
custom_css: https://cdn.jsdelivr.net/gh/CMBill/lxgw-wenkai-gb-web/fonts/lxgwwenkaigb-bold/result.css

3. 效果展示

效果

]]> + 近来阅读竹林里有冰的博客，发现他的博客字体很好看，想着把他的字体也用到我的博客里，于是就有了这篇文章。

1. 字体介绍

霞鹜文楷字体仓库
霞鹜文楷 我之前其实在手机上用过，不过后面由于装机加上懒得折腾就没有再设置了，但是博客我觉得为了好的阅读体验还是可以换一下的
霞鹜文楷

关于在 web 中使用 霞鹜文楷 请参阅 issue#24

其中 chawyehsu 提供了打包，但是点进去仓库发现已经有半年没更新了。在 issue 的下面我们可以看到 CMBill 提供了一个新的打包，我的就是这个打包。

在 CMBill 的仓库 README 中右键跳转 css 看看内容 style.css.webp

可以发现这个 css 是分了几个不同的字体种类，还有不同的霞鹜文楷变体可供选择
font-css.webp
将 style.css 替换为 @import url 之后的内容（去掉./），就可以直接使用了

我最终选择了 lxgwwenkaigb-bold 这个字体，这个字体阅读起来比较舒服。
我的博客字体文件为
https://cdn.jsdelivr.net/gh/CMBill/lxgw-wenkai-gb-web/fonts/lxgwwenkaigb-bold/result.css

2. 使用方法

如果你恰好也用 hexo 的 fluid 主题，那么恭喜你，替换字体很简单，只需要在主题的配置文件里加上一行 custom_css: https://xxxx代码就可以了，再修改 font_family。参照你的 css 文件前几行显示的 fontFamily: ，比如我的是 fontFamily: LXGW WenKai GB。

1
2
3
4
5
6
7
8
9
# 主题字体配置
font:
  font_size: 17px
  font_family: "LXGW WenKai GB"
  letter_spacing: 0.02em
  code_font_size: 85%

custom_js:
custom_css: https://cdn.jsdelivr.net/gh/CMBill/lxgw-wenkai-gb-web/fonts/lxgwwenkaigb-bold/result.css

3. 效果展示

效果

]]> @@ -126,7 +152,7 @@ /2023/12/27/Configure-blog-domain/ -

前置条件：已经有一个域名，且跟着前面的文章配置好了 github pages。

1. 在域名服务商处配置域名解析

域名解析，不同的服务商有不同的配置方式。
类型 选择 CNAME，主机记录填写你的域名，比如 example.com，
值填写 用户名.github.io，比如 mobeicanyue.github.io。

domain-record.webp

2. 在 github 仓库中配置域名

进入你的仓库，点击 settings，左边栏，找到 Pages，在 Custom domain 中填写你的域名，比如 example.com，然后点击 Save。

set-domain.webp
等待 dns 检查，很快就好了。
wait-dns.webp
访问你的域名，比如 example.com，就可以看到你的博客了。
blog.webp
此时可以注意到在 gh-pages 分支中多了一个 CNAME 文件，这个文件内容就是我们刚刚配置的域名。
但是按照之前的配置，每次 github action 部署的时候，都会把这个文件给覆盖掉，所以我们后面需要修改一下配置。
CNAME-file.webp

3. 修改 hexo 配置文件

在 hexo 的配置文件 _config.yml 中，找到 url，把 url 改成你的域名，比如 https://example.com。

url.webp

4. 修改 Github Actions 自动部署

由于我们之前那种写法，在 github action 部署到 github pages 的时候，会把 CNAME 文件给覆盖掉，所以我们需要修改一下 github action 配置。

也就是把之前的

1
2
3
4
5
- name: Deploy Hexo
    run: |
        hexo clean
        hexo generate
        hexo deploy

换成

1
2
3
4
5
6
7
8
9
10
11
- name: Build Site
        run: |
          export TZ='Asia/Shanghai'
          npm run clean
          npm run build
- name: Deploy to GitHub Pages
    uses: peaceiris/actions-gh-pages@v3
    with:
        deploy_key: ${{ secrets.KEY }}
        publish_dir: public
        cname: blog.ovvv.top

其中

  • npm run clean 即 hexo clean 清除构造缓存
  • npm run build 即 hexo generate 生成静态文件
  • 不使用 hexo deploy 部署，因为这个命令会把 CNAME 文件给覆盖掉
  • 使用 peaceiris/actions-gh-pages 这个 action 部署，这个 action 在上传静态文件的同时还会自动把 CNAME 文件给加上去。

对比我们第一篇文章中的配置，我们还删除了

1
2
npm install -g hexo-cli
npm install hexo-deployer-git --save

因为我们仓库是 npm 项目，依赖清单里现在已经包含了 hexo 无需再安装。直接npm install npm 就会安装 package.json 里的 hexo。
因为我们不再使用 hexo deploy 部署了，所以 hexo-deployer-git 就用不到了。

更新后整个文件如下：

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

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Check Out
        uses: actions/checkout@v4

      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: 20

      - name: Setup Git
        run: |
          git config --global user.name "mobeicanyue"
          git config --global user.email "${{ secrets.EMAIL }}"

      - name: Setup SSH Key
        run: |
          mkdir -p ~/.ssh
          echo "${{ secrets.KEY }}" > ~/.ssh/id_ed25519
          chmod 600 ~/.ssh/id_ed25519

      - name: Install Dependencies
        run: |
          npm install

      - name: Build Site
        run: |
          export TZ='Asia/Shanghai'
          npm run clean
          npm run build

      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          deploy_key: ${{ secrets.KEY }}
          publish_dir: public
          cname: blog.ovvv.top

推送到 github，等待 github action 自动部署，就可以看到你的博客了。这时就不会出现 CNAME 文件丢失的情况了。

]]> +

前置条件：已经有一个域名，且跟着前面的文章配置好了 github pages。

1. 在域名服务商处配置域名解析

域名解析，不同的服务商有不同的配置方式。
类型 选择 CNAME，主机记录填写你的域名，比如 example.com，
值填写 用户名.github.io，比如 mobeicanyue.github.io。

domain-record.webp

2. 在 github 仓库中配置域名

进入你的仓库，点击 settings，左边栏，找到 Pages，在 Custom domain 中填写你的域名，比如 example.com，然后点击 Save。

set-domain.webp
等待 dns 检查，很快就好了。
wait-dns.webp
访问你的域名，比如 example.com，就可以看到你的博客了。
blog.webp
此时可以注意到在 gh-pages 分支中多了一个 CNAME 文件，这个文件内容就是我们刚刚配置的域名。

但是按照之前的配置，每次 github action 部署的时候，都会把这个文件给覆盖掉，所以我们后面需要修改一下配置。
CNAME-file.webp

3. 修改 hexo 配置文件

在 hexo 的配置文件 _config.yml 中，找到 url，把 url 改成你的域名，比如 https://example.com。

url.webp

4. 修改 Github Actions 自动部署

由于我们之前那种写法，在 github action 部署到 github pages 的时候，会把 CNAME 文件给覆盖掉，所以我们需要修改一下 github action 配置。

也就是把之前的

1
2
3
4
5
- name: Deploy Hexo
    run: |
        hexo clean
        hexo generate
        hexo deploy

换成

1
2
3
4
5
6
7
8
9
10
11
- name: Build Site
        run: |
          export TZ='Asia/Shanghai'
          npm run clean
          npm run build
- name: Deploy to GitHub Pages
    uses: peaceiris/actions-gh-pages@v3
    with:
        deploy_key: ${{ secrets.KEY }}
        publish_dir: public
        cname: blog.ovvv.top

其中

  • npm run clean 即 hexo clean 清除构造缓存
  • npm run build 即 hexo generate 生成静态文件
  • 不使用 hexo deploy 部署，因为这个命令会把 CNAME 文件给覆盖掉
  • 使用 peaceiris/actions-gh-pages 这个 action 部署，这个 action 在上传静态文件的同时还会自动把 CNAME 文件给加上去。

对比我们第一篇文章中的配置，我们还删除了

1
2
npm install -g hexo-cli
npm install hexo-deployer-git --save

因为我们仓库是 npm 项目，依赖清单里现在已经包含了 hexo 无需再安装。直接npm install npm 就会安装 package.json 里的 hexo。
因为我们不再使用 hexo deploy 部署了，所以 hexo-deployer-git 就用不到了。

更新后整个文件如下：

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

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Check Out
        uses: actions/checkout@v4

      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: 20

      - name: Setup Git
        run: |
          git config --global user.name "mobeicanyue"
          git config --global user.email "${{ secrets.EMAIL }}"

      - name: Setup SSH Key
        run: |
          mkdir -p ~/.ssh
          echo "${{ secrets.KEY }}" > ~/.ssh/id_ed25519
          chmod 600 ~/.ssh/id_ed25519

      - name: Install Dependencies
        run: |
          npm install

      - name: Build Site
        run: |
          export TZ='Asia/Shanghai'
          npm run clean
          npm run build

      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          deploy_key: ${{ secrets.KEY }}
          publish_dir: public
          cname: blog.ovvv.top

推送到 github，等待 github action 自动部署，就可以看到你的博客了。这时就不会出现 CNAME 文件丢失的情况了。

]]> @@ -145,11 +171,11 @@ - 博客主题改为 Fluid - - /2023/12/27/Modify-theme/ + Fluid 主题安装 + + /2023/12/27/Fluid-theme-installation/ - 官方文档其实挺详细的了。
记录一下我自己的操作。

1. 安装主题

进入博客目录执行命令：

1
npm install --save hexo-theme-fluid

然后在博客目录下创建 _config.fluid.yml，将主题 _config.yml 内容复制过去。

现在目录下有这三个 yml 文件：
yml-files.webp

可删除 _config.landscape.yml , 它是 hexo 默认的主题文件。

2. 修改 hexo 配置

修改 Hexo 博客目录中的 _config.yml：

1
2
3
theme: fluid

language: zh-CN

3. 创建「关于页」

执行以下命令：

1
hexo new page about

创建成功后修改 /source/about/index.md，添加 layout 属性。

添加后如下

1
2
3
4
5
6
---
title: about
date: 2023-12-26 22:43:21
layout: about
---
这里写关于页的正文，支持 Markdown, HTML

然后不出意外你就可以看到关于页了。
输入

1
hexo clean && hexo g && hexo s -o

后访问 http://localhost:4000/about/ 即可看到效果。

ablout.webp

PS: 可以跟着文档把关于页面的几个 icon 一起改了。

4. 修改主题配置

官方文档
官方文档还算比较完善，耐心看完即可。

5. 修改网站图标

修改网站图标 文档好像没提到，我这里写一下
首先把你的图标放到 /source/images/ 目录下，然后
打开 _config.fluid.yml 找到这个配置：

1
2
3
4
5
6
7
# 用于浏览器标签的图标
# Icon for browser tab
favicon: images/favicon.png

# 用于苹果设备的图标
# Icon for Apple touch
apple_touch_icon: images/favicon.png

将 favicon.png 改为你的图标路径即可。

6. 修改 slogan 为 api 语录

效果如图所示：
api-slogan.webp

在主题配置 _config.fluid.yml 中开启：

1
2
3
4
5
6
7
8
9
10
index:
  slogan:
    enable: true
    text: 这是一条 Slogan
    api:
      enable: true
      url: "https://v1.hitokoto.cn/"
      method: "GET"
      headers: {}
      keys: ['data', 'content']

把 url 改为你想要的 api 地址，keys 改为你想要的字段。具体参数可以看官方文档

7. 修改背景图片 为 api 图片

既然可以改 slogan 为 api 语录，那么背景图片当然也可以改为 api 图片 笑）。

效果如图所示：
api-bg.webp

在主题配置 _config.fluid.yml 中搜索

1
/img/default.png

将其改为你想要的 api 地址即可。
我是 Bing 每日图片
感谢接口提供者！！！

]]> + 官方文档其实挺详细的了。
记录一下我自己的操作。

1. 安装主题

进入博客目录执行命令：

1
npm install --save hexo-theme-fluid

然后在博客目录下创建 _config.fluid.yml，将主题 _config.yml 内容复制过去。

现在目录下有这三个 yml 文件：
yml-files.webp

可删除 _config.landscape.yml , 它是 hexo 默认的主题文件。

2. 修改 hexo 配置

修改 Hexo 博客目录中的 _config.yml：

1
2
3
theme: fluid

language: zh-CN

3. 创建「关于页」

执行以下命令：

1
hexo new page about

创建成功后修改 /source/about/index.md，添加 layout 属性。

添加后如下

1
2
3
4
5
6
---
title: about
date: 2023-12-26 22:43:21
layout: about
---
这里写关于页的正文，支持 Markdown, HTML

然后不出意外你就可以看到关于页了。
输入

1
hexo clean && hexo g && hexo s -o

后访问 http://localhost:4000/about/ 即可看到效果。

ablout.webp

PS: 可以跟着文档把关于页面的几个 icon 一起改了。

4. 修改主题配置

官方文档
官方文档还算比较完善，耐心看完即可。

5. 修改网站图标

修改网站图标 文档好像没提到，我这里写一下
首先把你的图标放到 /source/images/ 目录下，然后
打开 _config.fluid.yml 找到这个配置：

1
2
3
4
5
6
7
# 用于浏览器标签的图标
# Icon for browser tab
favicon: images/favicon.png

# 用于苹果设备的图标
# Icon for Apple touch
apple_touch_icon: images/favicon.png

将 favicon.png 改为你的图标路径即可。

6. 修改 slogan 为 api 语录

效果如图所示：
api-slogan.webp

在主题配置 _config.fluid.yml 中开启：

1
2
3
4
5
6
7
8
9
10
index:
  slogan:
    enable: true
    text: 这是一条 Slogan
    api:
      enable: true
      url: "https://v1.hitokoto.cn/"
      method: "GET"
      headers: {}
      keys: ['data', 'content']

把 url 改为你想要的 api 地址，keys 改为你想要的字段。具体参数可以看官方文档

7. 修改背景图片 为 api 图片

既然可以改 slogan 为 api 语录，那么背景图片当然也可以改为 api 图片 笑）。

效果如图所示：
api-bg.webp

在主题配置 _config.fluid.yml 中搜索

1
/img/default.png

将其改为你想要的 api 地址即可。
我使用的是 Bing 每日图片
感谢接口提供者！！！

]]> @@ -172,7 +198,7 @@ /2023/12/26/My-first-hexo-blog/ - Hexo 部署 Github Pages, Github Actions 自动部署

激动的心 颤抖的手，这是本站第一篇博客。
部署 hexo 的过程中遇到了很多问题，最终还是解决了，这里记录一下。

最终实现的效果，一个项目仓库，main 分支存放源代码，gh-pages 存放生成后的网页代码，github pages 加载 gh-pages 的网页代码。
这样，每当我们 push 代码到 main 分支的时候，github action 会自动构建并将代码发布到 gh-pages 分支，github pages 会自动加载 gh-pages 分支的代码，这样就实现了自动部署。

搭建环境：

linux plasma manjaro
nodejs 20
git 2.43
github 账号配置好 ssh（可以参考我前面教程）
vscode

你需要熟知的技能：git 相关操作

1. 新建 用户名.github.io 仓库

gh-create-repo1.webp

记住这串 仓库的ssh地址 后面要用到
ssh-link.webp

gh-create-repo2.webp

2. 部署你的 ssh 私钥 到仓库变量中

deploy-key1.webp

填入你的私钥
deploy-key2.webp

3. 初始化 hexo 博客目录

找一个空目录 然后执行下面代码，
把 mobeicanyue.github.io 换成你仓库的名字

1
hexo init mobeicanyue.github.io && cd mobeicanyue.github.io

执行结果如下
init-hexo.webp

4. 初始化 git 仓库并提交到 github

1
2
3
git init
git add .
git commit -m "Initial commit"

执行结果如下
init-git.webp

把下面 git@xxx 地址换成你仓库的 ssh 地址

1
2
git remote add origin git@github.com:mobeicanyue/mobeicanyue.github.io.git
git push -u origin master

执行结果如下
git-push.webp

此时我们刷新一下 github 仓库，就可以看到我们的代码已经提交上去了
但是网页第一次构建肯定是失败的（打叉），因为还没配置 github action

github-code.webp

5. 新建 gh-pages 分支并将其设置为 pages 的默认部署分支

点击分支
new-branch1.webp
创建 gh-pages 分支
new-branch2.webp
设置 gh-pages 为 pages 的默认部署分支
set-branch.webp

6. 编写 github actions 代码

  1. 修改 _config.yml 文件的 repo 改成你仓库的 ssh 地址
    config.webp

  2. 在 hexo 博客文件夹的 .github 目录创建 deploy.yml 文件

new-file.webp

下面的代码只需要修改你的用户名和邮箱

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
name: Deploy Hexo
 
on:
  push:
    branches:
      - main
 
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Check Out
        uses: actions/checkout@v4
 
      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: 20
 
      - name: Setup Git
        run: |
          git config --global user.name "用户名"
          git config --global user.email "邮箱"
 
      - name: Setup SSH Key
        run: |
          mkdir -p ~/.ssh
          echo "${{ secrets.KEY }}" > ~/.ssh/id_ed25519
          chmod 600 ~/.ssh/id_ed25519
 
      - name: Install Dependencies
        run: |
          npm install -g hexo-cli
          npm install hexo-deployer-git --save
          npm install
 
      - name: Deploy Hexo
        run: |
          hexo clean
          hexo generate
          hexo deploy

  1. 最后提交代码并推送
    commit-push.webp

7. 访问站点，部署成功！

地址为 https://用户名.github.io

success.webp



后记

hexo 部署 github pages 的教程特别多，但是质量鱼龙混杂或者写得不清晰，也没有我想要的部署到 github 源代码双分支管理。踩了很多坑，终于是写完了这篇教程，希望能帮到你。

]]> + Hexo 部署 Github Pages, Github Actions 自动部署

激动的心 颤抖的手，这是本站真正意义上的第一篇博客。第零篇是 hexo 生成的 Hello World。

部署 hexo 的过程中遇到了很多问题，最终还是解决了，这里记录一下。

最终实现的效果，一个项目仓库，main 分支存放源代码，gh-pages 存放生成后的网页代码，github pages 加载 gh-pages 的网页代码。
这样，每当我们 push 代码到 main 分支的时候，github action 会自动构建并将代码发布到 gh-pages 分支，github pages 会自动加载 gh-pages 分支的代码，这样就实现了自动部署。

环境：

linux plasma manjaro
nodejs 20
git 2.43
github 账号配置好 ssh（可以参考我前面教程）
vscode

你需要熟知的技能：git 相关操作

1. 新建 用户名.github.io 仓库

gh-create-repo1.webp

记住这串 仓库的ssh地址 后面要用到
ssh-link.webp

创建的仓库名 建议为 用户名.github.io
gh-create-repo2.webp

2. 部署你的 ssh 私钥 到仓库变量中

deploy-key1.webp

填入你的私钥 取名为 KEY，后面要用到
deploy-key2.webp

3. 初始化 hexo 博客目录

找一个空目录 然后执行下面代码，
把 mobeicanyue.github.io 换成你仓库的名字

1
hexo init mobeicanyue.github.io && cd mobeicanyue.github.io

执行结果如下
init-hexo.webp

4. 初始化 git 仓库并提交到 github

1
2
3
git init
git add .
git commit -m "Initial commit"

执行结果如下
init-git.webp

把下面 git@xxx 地址换成你仓库的ssh地址

1
2
git remote add origin git@github.com:mobeicanyue/mobeicanyue.github.io.git
git push -u origin master

执行结果如下
git-push.webp

此时我们刷新一下 github 仓库，就可以看到我们的代码已经提交上去了
但是网页第一次构建肯定是失败的（打叉），因为还没配置 github action

github-code.webp

5. 新建 gh-pages 分支并将其设置为 pages 的默认部署分支

点击分支
new-branch1.webp
创建 gh-pages 分支
new-branch2.webp
设置 gh-pages 为 pages 的默认部署分支
set-branch.webp

6. 编写 github actions 代码

  1. 修改 _config.yml 文件的 repo 改成你仓库的 ssh 地址
    config.webp

  2. 在 hexo 博客文件夹的 .github 目录创建 deploy.yml 文件

new-file.webp

下面的代码需要修改你的用户名和邮箱
还有你对应的 nodejs 版本

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
name: Deploy Hexo
 
on:
  push:
    branches:
      - main
 
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Check Out
        uses: actions/checkout@v4
 
      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: 20
 
      - name: Setup Git
        run: |
          git config --global user.name "用户名"
          git config --global user.email "邮箱"
 
      - name: Setup SSH Key
        run: |
          mkdir -p ~/.ssh
          echo "${{ secrets.KEY }}" > ~/.ssh/id_ed25519
          chmod 600 ~/.ssh/id_ed25519
 
      - name: Install Dependencies
        run: |
          npm install -g hexo-cli
          npm install hexo-deployer-git --save
          npm install
 
      - name: Deploy Hexo
        run: |
          hexo clean
          hexo generate
          hexo deploy

上面的${{ secrets.KEY }} 就是我们前面设置的私钥


  1. 最后提交代码并推送
    commit-push.webp

7. 访问站点，部署成功！

地址为 https://用户名.github.io

success.webp



后记

hexo 部署 github pages 的教程特别多，但是质量鱼龙混杂或者写得不清晰，也没有我想要的部署到 github 源代码双分支管理。踩了很多坑，终于是写完了这篇教程，希望能帮到你。

]]> diff --git a/page/2/index.html b/page/2/index.html new file mode 100644 index 00000000..24c04acf --- /dev/null +++ b/page/2/index.html @@ -0,0 +1 @@ +Canyue
\ No newline at end of file diff --git a/tags/deploy/index.html b/tags/deploy/index.html index 7a90cfca..770a86fe 100644 --- a/tags/deploy/index.html +++ b/tags/deploy/index.html @@ -1 +1 @@ -标签 - deploy - Canyue
\ No newline at end of file +标签 - deploy - Canyue
\ No newline at end of file diff --git a/tags/fluid/index.html b/tags/fluid/index.html index 7c5f82c0..809149f6 100644 --- a/tags/fluid/index.html +++ b/tags/fluid/index.html @@ -1 +1 @@ -标签 - fluid - Canyue
\ No newline at end of file +标签 - fluid - Canyue
\ No newline at end of file diff --git a/tags/hexo/index.html b/tags/hexo/index.html index 646a61fe..f5a00ed8 100644 --- a/tags/hexo/index.html +++ b/tags/hexo/index.html @@ -1 +1 @@ -标签 - hexo - Canyue
\ No newline at end of file +标签 - hexo - Canyue
\ No newline at end of file