Zihao

Make small but daily progress

0%

简单又好看的博客站免费部署方式 - GithubPages + HEXO

发表于 更新于 分类于 ， ，
本文字数： 6.5k 阅读时长 ≈ 6 分钟

在疫情这两年准备英语留学的事儿，反而少了写作。生活逐渐的回归到正轨，写作是一个好的习惯，还是坚持起来。在整理和收集的过程中，自己会不断的思考，也是在加强和锻炼的过程。所以打开了尘封已久的博客网站，发现博客框架升级了大的版本，产生了一些BUG需要修复。在过去使用markdown进行排版的时候并没有很规范，也在这个过程将278篇文章整理一下。本篇文章记录部署的过程以做后续的查看。最终使用的技能栈为 GithubPages + HEXO + NEXT + VsCode + PicGo。更新为 GitHub 的 action 自动触发的另一个好处是可以在网页上直接进行编辑，会自动编译发布。

下载最新的 node 和 npm 版本

本篇文章更新的时候，node 为 18.12.1，npm 为 8.19.2。网上有很多不同的安装攻略，请按照自己喜欢进行选择。

  1. 官网的链接为 (https://nodejs.org/en/)
  2. 常使用MAC系统，默认是使用命令brew install node。
  3. 但是有多版本的需求，最终使用nvm进行管理多版本。下载最新稳定版本 nvm install --lts，使用最新版本nvm use --lts。

创建 Github 仓库并下载到本地

1
git clone [email protected]:ucfyao/blog.git

使用 hexo 静态博客框架

安装 hexo 脚手架

1
npm install -g hexo-cli

先把blog的.git文件挪移出去，不然初始化会报错。然后使用命令进行初始化。

1
hexo init blog

创建一篇文章进行预览。
因为我之前有很多的文章，直接将source下面的文件，迁移到初始化后新框架即可。

1
hexo n 第一篇文章

生成静态文件：

1
hexo g

启动服务器进行查看：

1
hexo s --debug

常用的hexo命令：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
npm install hexo -g # 安装Hexo
npm update hexo -g # 升级
hexo init # 初始化博客

# 最常用的：
hexo n "第一篇文章" == hexo new "第一篇文章" # 新建文章
hexo g == hexo generate # 生成静态文件
hexo s == hexo server # 启动服务预览
hexo d == hexo deploy # 部署

# 每次写完新文章都可以使用如下命令，启动服务进行预览
hexo clean && hexo g && hexo s

# 以下一般人估计也不咋用：
hexo server # Hexo会监视文件变动并自动更新，无须重启服务器
hexo server -s # 静态模式
hexo server -p 5000 # 更改端口
hexo server -i 192.168.1.1 # 自定义 IP
hexo clean # 清除缓存，若是网页正常情况下可以忽略这条命令

更换主题

我选择的是next主题。官网中还有很多可以选择。使用以下命令将主题下载到themes文件夹中。

1
git clone https://github.com/iissnan/hexo-theme-next themes/next

下载完毕后修改主目录下的主题配置 _config.yml：

1
theme: next

如果主题需要更新，可使用git的方式：

1
2
cd themes/next
git pull

主题优化配置

统计数字

1
npm install hexo-symbols-count-time

在主配置文件中修改：

1
2
3
4
5
6
7
8
9
symbols_count_time:
  # 文章字数统计
  symbols: true
  # 文章阅读时间统计
  time: true
  # 站点总字数统计
  total_symbols: true
  # 站点总阅读时间统计
  total_time: true

在主题配置文件中修改：

1
2
3
4
5
6
7
8
9
10
11
12
symbols_count_time:
  # 是否另起一行
  separated_meta: true
  # 是否显示文章统计的文字描述
  item_text_post: true
  # 是否显示总望着那统计的文字描述
  item_text_total: false
  # 平均字长
  awl: 4
  # 每分钟阅读字数，用于预估文章阅读时间
  wpm: 400

添加站内搜索

安装插件

1
2
npm install hexo-generator-search
npm install hexo-generator-searchdb --save

编辑站点配置文件，添加以下内容

1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

编辑主题配置文件，设置 local_search 为 ture。

SEO 支持

1
2
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save

根目录配置文件添加：

1
2
3
4
5
# SEO
sitemap:
  path: sitemap.xml
baidusitemap:
  path: baidusitemap.xml

主题配置文件修改：

1
baidu_push: true

点击时候出现烟花特效

1
npm install next-theme/hexo-next-fireworks

首页显示缩略内容

这里最新的next7版本修改了新的写法，之前的配置不可用了。

1
2
3
auto_excerpt:
  enable: true
  length: 150

现在只能打开开关，使用在md文件中表头部分添加 description 或者使用 <!-- more -->进行截断。
官方 更推荐使用 <!-- more -->进行截断的方式。那么原来的文章中都需要添加，这就麻烦了。

点击阅读更多进入文章页面，会跳到#more开始，个人感觉是不合理的，所以替换了下面这行：

1
<a class="btn" href="{{ url_for(post.path) }}" rel="contents">

加速

通过在空闲时间预取in-viewport链接来加快后续页面加载速度。

1
npm install --save quicklink

自动加空格

1
npm install pangu --save

修改主题配置文件

1
2
3
4
# Pangu Support
# For more information: https://github.com/vinta/pangu.js
# 神器啊，盘古之白：自动在中文字和半形的英文、数字、符号之间插入空白。
pangu: true

添加rss

1
npm install hexo-generator-feed --save

懒加载

安装插件

1
npm install lozad --save

修改主题配置文件

1
2
# 图片懒加载
lazyload: true

开启 Pjax 加速

Pjax 主要用于加速 Web 页面的切换速度，同时也可以用来解决 Aplayer 音频播发器切换页面后播放出现中断的问题

1
npm install pjax --save

顶部进度条

1
git clone https://github.com/theme-next/theme-next-pace source/lib/pace

编辑主题配置文件：

1
2
3
4
5
6
pace:
  enable: true
  # Themes list:可选样式列表
  # big-counter | bounce | barber-shop | center-atom | center-circle | center-radar | center-simple
  # corner-indicator | fill-left | flat-top | flash | loading-bar | mac-osx | material | minimal
  theme: minimal

阅读进度条

1
2
3
4
5
6
7
8
# Reading progress bar
reading_progress:
  enable: true
  # Available values: top | bottom
  position: top
  color: '#37c6c0'
  height: 3px

标签云

1
2
# 我觉得不好看，就没配了。如有需要可以自行搜一下。
npm install hexo-tag-cloud --save

其他配置

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
# 代码复制
copy_button:
  enable: true

# 打开标签的图标和统计数量
menu_settings:
  icons: true
  badges: true

# 把Github的小图标变成红的
android_chrome_color: "#FF5733"

# 文章底部`#`修改
tag_icon: true

# 访客计数
busuanzi_count:
  enable: true

# 点击图片放大
fancybox: true

# 数学公式
math:
  enable: true

GitHub Actions 自动化部署

在默认的方式中，hexo d 会将 hexo g 生成的静态文件发送到远程的repo，然后通过访问默认的 <username>.github.io就可以进行访问了。但是每次都需要同步两个库就比较麻烦。CICD的方式自动化部署才是程序员的最爱。我们期望的效果是本地仓库直接push，触发 GitHub Actions 自动构建发布。

安装相关插件

1
npm install hexo-devloyer-git --save

添加配置

1
2
3
4
deploy:
  type: git
  repository: https://github.com/xxx/xxx.github.io.git
  branch: main

执行部署

执行完毕后，生成的静态文件应该就会发布到GitHub的仓库中，就可以使用 xxx.github.io 进行访问了。

1
hexo clean && hexo g && hexo d

注意：在部署的时候，如果没有添加过secret key，可能会提示你输出账号密码。我在开发中经常使用的方式是添加secret key 到GitHub中，避免每次输入账号密码比较麻烦。详细步骤可以参考我之前的文章，GitHub 官方文档写的也很详细。

绑定个性域名

  1. 个性的域名有助于更好的被记住。可以在域名代理商处购买一个自己喜欢的域名。比如我的个人博客域名为： yaozihao.com。
  2. 在购买域名后，可以登录后台，将购买的域名添加解析指向到 xxx.github.io。添加三条解析记录，其中两个是GitHub的IP地址。你也可以ping你的 http://xxxx.github.io 的ip地址填入进去，比如：192.30.252.153 。有一个记录类型是CNAME，CNAME的记录值是：xxx.github.io。
  3. 在项目根目录source 下创建文件CNAME，内容为域名：yaozihao.com。

设置自动部署

参考官方推荐的文档。

  1. 在GitHub的项目库xxx.github.io中找到settings。

  2. 使用以下命令创建一对公私钥：ssh-keygen -t rsa -b 4096 -C "$(git config user.email)" -f gh-pages -N ""

  3. 在xxx.github.io 的 setting 页面中找到Security=>Deploy keys将生成的公钥 *.pub 添加。

  4. 在blog的 setting 页面中找到Security=>Secrets=>Actions将生成的私钥添加。名字DEPLOY_KEY要和yml中的一样。

  5. 在项目中建立 .github/workflows/pages.yml，并填入以下内容 (获取到node版本进行替换)：

    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

    name: Pages  # workflow name

    on:
      push: # 触发事件
        branches:
          - main # default branch

    jobs:
      pages: # job1 id
        runs-on: ubuntu-latest # 运行环境为最新版 Ubuntu
        steps:
          - uses: actions/checkout@v2 # step1 获取源码  # 使用 actions/checkout@v1
          - name: Use Node.js 18.x # step2
            uses: actions/setup-node@v2
            with:
              node-version: "18"
          # Caching dependencies to speed up workflows. (GitHub will remove any cache entries that have not been accessed in over 7 days.)
          # 缓存压缩 node_modules，不用每次下载，使用时解压，可以加快工作流的执行过程，超过 7 天没有使用将删除压缩包。
          - name: Cache NPM dependencies
            uses: actions/cache@v2
            with:
              path: node_modules
              key: ${{ runner.OS }}-npm-cache
              restore-keys: |
                ${{ runner.OS }}-npm-cache
          - name: Install Dependencies  # step3 name
            run: npm install # 安装 node modules 相关依赖
          - name: Build
            run: npm run build

          # Deploy hexo blog website.
          - name: Deploy
            id: deploy
            uses: sma11black/[email protected]
            with:
              deploy_key: ${{ secrets.DEPLOY_KEY }}
              user_name: name  # (or delete this input setting to use bot account)
              user_email: email # (or delete this input setting to use bot account)
              commit_msg: ${{ github.event.head_commit.message }}  # (or delete this input setting to use hexo default settings)
          # Use the output from the `deploy` step(use for test action)
          - name: Get the output
            run: |
              echo "${{ steps.deploy.outputs.notify }}"

  6. 然后将项目push上去，就会自动触发github 的 action 功能。

  7. 这里有两点需要注意，github 仓库中现在不能够上传其他库的.git。需要进行忽略或者删除。如果出现执行失败，可以将该文件添加到.gitignore中或者删除。

1
2
themes/next/.git/
source/lib/pace/.git

设置图床

图片默认是放在 image 目录下的，但是访问速度比较感人，每次插入的时候也是很麻烦，可以使用图床解决这个问题。推荐使用 vscode + picgo + github 的免费白嫖图床。

创建图片仓库

在github上创建新的仓库存放图片，仓库必须是public的，否则存储的图片不能正常访问。注意现在默认的主分支都是main。

Vscode 安装并配置插件

查找 picgo 插件进行下载。然后进行vscode配置：官方文档。也可以从官方文档下载客户端。

  1. 配置uploader，选择github。
  2. 20221129150551
  3. 打开MD文件，粘贴一个图片。
  4. mac 使用快捷键 Cmd + Opt + U从剪切板上传图片。
  • 本文作者： Zihao Yao
  • 本文链接： https://yaozihao.com/blog_hexo/
  • 版权声明： 本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！

欢迎关注我的其它发布渠道