博客搬迁记

容小狸 Lv2
  2025-04-14 05:32:30 2025-04-14 05:32:30 Created   2025-04-26 16:48:01 2025-04-26 16:48:01 Updated      1.6k Words  7 Mins  

起因

总是觉得自己博客丑得慌，我就寻思给自己换个主题。那既然主题都换了，索性整体博客写作仓库也上传到GitHub，到时候我在任意电脑上都可以写博客，岂不美哉？

过程

1. 初始化新博客

最简单的一步，直接进行一个hexo的安装：

1
npm install hexo-cli -g

顺便初始化个Git仓库：

1
git init

初始化Hexo：

1
hexo init

搞定。

2. 选新主题

想要一个有背景图的主题，好看一点简洁一点的。找啊找啊，我找到了这个：Redefine。好看，戳到我了：

Theme Redefine

就这个了。

来！

1
npm install hexo-theme-redefine@latest

_config.yml：

1
theme: redefine

_config.redefine.yml：

复制这个文件到本地即可。

3. 配置

博客拿过来就是要经过一堆配置的。

博客站点标题：

1
2
3
4
5
6
7
8
9
info:
  # Site title
  title: 容小狸的博客
  # Site subtitle
  subtitle: "When there is a will, there's a way"
  # Author name
  author: 容小狸
  # Site URL
  url: https://blog.rongxiaoli.top

改个颜色：

1
2
3
4
5
6
7
colors:
  #Primary color
  primary: "#14a5c4"
  # Secondary color (TBD)
  secondary:
  # Default theme mode initial value (will be overwritten by prefer-color-scheme)
  default_mode: light # light, dark

我要看阅读进度，没加载完之前用一个灰屏挡住：

1
2
3
4
5
6
7
8
global: 
  # Scroll progress
  scroll_progress:
    bar: true # progress bar
    percentage: true # percentage
  preloader:
    enable: true
    custom_message:

加一点链接：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
home_banner:
  # Home banner social links
  social_links:
    # Whether to enable
    enable: true
    # Social links style
    style: default # default, reverse, center
    # Social links
    links:
      github: 'https://github.com/rong-xiaoli' # your GitHub URL
      instagram: # your Instagram URL
      zhihu:  # your ZhiHu URL
      twitter:  # your twitter URL
      email: 'mailto:hashnoob079@163.com' # your email
      bilibili: 'https://space.bilibili.com/411654866'
      # ...... # you can add more

加一点导引栏，加一点搜索：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
navbar:
  links:
    Home: 
      path: / 
      icon: fa-regular fa-house # can be empty
    Categories:
     path: /categories
     icon: fa-regular fa-folder
    Archives: 
      path: /archives 
      icon: fa-regular fa-archive # can be empty
    About: 
      icon: fa-regular fa-user
      submenus:
        Me: /about
        Github: https://github.com/EvanNotFound/hexo-theme-redefine
        Friends: /friends
  search:
    # Whether to enable
    enable: true
    # Preload search data when the page loads
    preload: true

加一点字数计数器，加一点目录，加一点版权：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
articles:
  word_count:
    enable: true # Whether to enable
    count: true # Whether to display word count
    min2read: true # Whether to display reading time
  toc:
    enable: true # Whether to enable TOC
    max_depth: 3 # TOC depth
    number: true # Whether to add number to TOC automatically
    expand: true # Whether to expand TOC
    init_open: true # Open toc by default
  copyright:
    enable: true # Whether to enable
    default: cc_by_nc_sa # Default license, can be cc_by_nc_sa, cc_by_nd, cc_by_nc, cc_by_sa, cc_by, all_rights_reserved, public_domain

加一点脚注，加一点萌备：

1
2
3
4
footer:
  customize:
    <a href="https://icp.gov.moe/?keyword=20253992" target="_blank">萌ICP备20253992号</a> </br>
    看不见我awa

啊？APlayer为什么不能关闭自动播放？
先交个issue，感觉改起来貌似挺简单的？
自己Fork一个改改看。

群里的佬说，不建议自动播放，因为你永远不知道有没有人会issue问作者为什么不自动播放，前端要always keep it simple and stupid，有道理。

配置完成之后，迁移原博客的内容。还是很简单的，直接复制整个source过来就行了。顺便，博客中有个黑幕遮罩效果（见与Debian的相识相知）

1
npm install hexo-spoiler

4. CI/CD

最痛苦的一节。不过其实很简单。首先先构思我们每次博客上传在做什么重复动作：

  1. 下载环境（由于环境本来在同一设备，所以经常被忽略）
  2. 配置环境（同理，由于环境本来就在同一设备，经常被忽略）
  3. hexo环境清理
  4. hexo生成（就像根据代码编译一样）
  5. hexo部署
  6. 上传博客，博客GitHub Pages自动部署（上传Artifact，自动部署）

一步步来。

拉取仓库

仓库拉取就是Checkout，GitHub有它的Action，直接用：

1
2
3
4
- name: Checkout
  uses: actions/checkout@v4
  with:
    submodules: true

nodejs缓存

也就是获取并缓存了。

1
2
3
4
5
6
7
8
- name: Cache node modules
  uses: actions/cache@v4
  id: cache
  with:
    path: node_modules
    key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
    restore-keys: |
      ${{ runner.os }}-node-

安装环境

很简单，npm一键搞定。

1
2
3
4
5
6
7
8
9
- name: Install Packages
  run: npm install

- name: Install Dependencies
  if: steps.cache.outputs.cache-hit != 'true'
  run: npm ci

- name: Install hexo
  run: npm install hexo-cli -gpm ci

准备git部署环境

ssh部署。因为GitHub Actions不支持Http连接GitHub自己，所以需要ssh的密钥用以上传。先准备，然后再写Actions：

1
ssh-keygen -t rsa -b 4096 -C "$(git config user.email)" -f gh-pages -N ""

有个问题，就是这个密钥可能没办法输密码。很简单，无密码即可。毕竟ssh密钥目前来说还是挺安全的。

具体步骤可以看这个利用 Github Actions 自动部署 Hexo 博客。

1
2
3
4
5
6
7
8
9
10
11
12
- name: Set up git environment. 
  env:
      HEXO_DEPLOY_PRI: ${{secrets.DEPLOY_KEY}}
      GIT_USERNAME: "UserName123" # your user name. 
      GIT_EMAIL: "user@example.com" # your email. 
  run: |
    mkdir -p ~/.ssh/
    git config --global user.name "$GIT_USERNAME"
    git config --global user.email "GIT_EMAIL"
    echo "$HEXO_DEPLOY_PRI" > ~/.ssh/id_rsa
    chmod 600 ~/.ssh/id_rsa
    ssh-keyscan -t rsa github.com >> ~/.ssh/known_hosts

Hexo 一键部署

Hexo一键部署特别简单，一行命令搞定：

1
2
- name: Hexo gen
  run: hexo g -d

整体的Actions

总结一下，填一下自动部署条件之类，整体的Action就长这样了。这个版本是我第一个可用版本，里面还有一些环境检测用的调试语句：

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
52
53
54
55
56
name: Blog auto build
on: 
  push: 
    branches: 
    - master
  workflow_dispatch:    # Manual trigger building. 
jobs: 
  ActivityUpdate:
    name: Build blog
    runs-on: ubuntu-latest
    steps:
    - name: Checkout
      uses: actions/checkout@v4
      with:
        submodules: true

    - name: Cache node modules
      uses: actions/cache@v4
      id: cache
      with:
        path: node_modules
        key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
        restore-keys: |
          ${{ runner.os }}-node-

    - name: Get npm version
      run: node --version

    - name: Install Packages
      run: npm install

    - name: Install Dependencies
      if: steps.cache.outputs.cache-hit != 'true'
      run: npm ci

    - name: Install hexo
      run: npm install hexo-cli -g

    - name: Test if hexo is available
      run: hexo --version

    - name: Set up git environment. 
      env: 
        HEXO_DEPLOY_PRI: ${{secrets.DEPLOY_KEY}}
        GIT_USERNAME: "UserName123" # your user name. 
        GIT_EMAIL: "user@example.com" # your email. 
      run: |
        mkdir -p ~/.ssh/
        git config --global user.name "$GIT_USERNAME"
        git config --global user.email "GIT_EMAIL"
        echo "$HEXO_DEPLOY_PRI" > ~/.ssh/id_rsa
        chmod 600 ~/.ssh/id_rsa
        ssh-keyscan -t rsa github.com >> ~/.ssh/known_hosts

    - name: Hexo gen
      run: hexo g -d

那很棒了。

总结

其实重点在CI/CD部分的思考。你如何将你平时独自开发的时候习以为常的环境抽离出来，将其表示成可以任意电脑都可以复刻的抽象过程。这就是CI/CD的核心。CI/CD做得好的话，对效率是非常大的提升，以及复用性的提升。比如这个Hexo博客，我对这个博客做的CI/CD的目的就是让我哪儿都可以写博客。

  • Title: 博客搬迁记
  • Author: 容小狸
  • Created at : 2025-04-14 05:32:30
  • Updated at : 2025-04-26 16:48:01
  • Link: https://blog.rongxiaoli.top/2025/04/14/博客搬迁记/
  • License: This work is licensed under CC BY-NC-SA 4.0.
On this page
博客搬迁记
  1. 1. 起因
  2. 2. 过程
    1. 2.1. 1. 初始化新博客
    2. 2.2. 2. 选新主题
    3. 2.3. 3. 配置
    4. 2.4. 4. CI/CD
  3. 3. 总结