Github pages + Hexo + Next 博客搭建

Posted on

终于开始搭建自己的个人博客，迈出记录的第一步！该博客基于 Github page + Hexo + Next，目前还不完美，逐步优化中。

Github page

Ref: https://mini-pi.github.io/2024/02/28/how-to-make-blog-wedsite/
Ref: https://zhengyujie.github.io/categories/Hexo%E6%A1%86%E6%9E%B6/
Ref: https://www.yuanguohuo.com/2018/05/23/build-hexo-blog/

创建<username>.github.io 仓库

  • New repository -> add Repository name (eg. Username.github.io) -> Create repository

在本地部署 Hexo 环境

  • 安装 Hexo： npm install -g hexo-cli
  • 初始化 Hexo 框架：hexo init blog
  • 进入上条命令所创建的 blog 文件夹中：cd blog
  • 安装 swig：npm i hexo-renderer-swig
  • 安装其他依赖：npm install
  • 启动 Hexo 服务：hexo server
  • 访问默认界面，测试是否安装成功：浏览器访问localhost:4000
  • ref：https://hexo.io/zh-cn/

配置 Next 主题

  • 进入上一步创建的 blog 文件夹中，将 Next 主题相关文件从 github 克隆到 themes 文件夹中
    • 命令：git clone https://github.com/iissnan/hexo-theme-next themes/next
  • 配置 Hexo 的主题参数（在根目录的 _config.yml 文件中），选择使用 Next 主题
    • 修改参数为：theme: next

添加博客内容

  • 将写好的 Markdown 放到 source\_posts 目录
  • 将相应的图片放到 source\images目录
  • 启动 Hexo 服务（如果之前没有关闭，请忽略此步骤）
  • 通过浏览器访问博客主页，可以发现更改已生效

对 Next 主题进行小修改

优化：Next 主题默认首页文章不折叠，但是个人认为这种不美观，所以配置首页文章折叠

  • 在主题配置文件中找到auto_excerpt，这个属性可以设置为自动折叠，比如设置成只显示300个字，这样的后面的内容就会折叠起来，配置如下：

    1
    2
    3
    auto_excerpt:
      enable: true
      length: 300

将生成的静态页面部署到 github 上

具体操作：修改站点配置文件_config.yml的最后部分

1
2
3
4
deploy:
  type: git
  repo: git@github.com:username/username.github.io.git
  branch: master

要先安装 deploy-git，才能用命令部署到 GitHub

1
npm install hexo-deployer-git --save

然后

1
2
3
hexo clean #清除之前生成的东西
hexo generate  #生成静态文章，缩写hexo g
hexo deploy  #部署文章，缩写hexo d

过一会儿就可以在http://yourname.github.io这个网站看到你的博客了！

遇到的问题

Hexo deploy 报错

1
2
3
4
5
6
7
8
9
10
11
error: RPC failed; HTTP 400 curl 22 The requested URL returned error: 400
send-pack: unexpected disconnect while reading sideband packet
Writing objects: 100% (179/179), 4.27 MiB | 4.22 MiB/s, done.
Total 179 (delta 15), reused 0 (delta 0), pack-reused 0
fatal: the remote end hung up unexpectedly
Everything up-to-date
FATAL Something's wrong. Maybe you can find the solution here: https://hexo.io/docs/troubleshooting.html
Error: Spawn failed
    at ChildProcess.<anonymous> (/Users/ella/Documents/Code/ella0110.github.io/blog/node_modules/hexo-deployer-git/node_modules/hexo-util/lib/spawn.js:51:21)
    at ChildProcess.emit (node:events:520:28)
    at ChildProcess._handle.onexit (node:internal/child_process:294:12)
  • 解决方式：Step6 中，repo 从 https 改为 ssh 方式：git@github.com:username/username.github.io.git

图片不加载

  • 解决方式：图片放在source\images文件夹中，按照这种方式引用：/images/pic1。

自定义文章顺序

  • 在 hexo 博客中，文章默认是按照发布日期进行排序。如果想把文章按照自定义顺序进行排序，按照以下方式解决：

  • 解决方式：先卸载 hexo-generator-index，然后安装 hexo-generator-index-pin-top，在 front_matter 里加上 top 属性，top 的值表示这篇文章的权重，权重越大，排序越靠前。

    1
    2
    npm uninstall hexo-generator-index --save
    npm install hexo-generator-index-pin-top --save

中文 Post，侧边目录点击失效无法跳转

  • 控制台报错：post-details.js?v=5.1.4:76 Uncaught TypeError: Cannot read properties of undefined (reading 'top')
    报错文件：post-details.js?v=5.1.4:76
    报错文件路径：/blog/themes/next/source/js/src/post-details.js

  • 解决方式：增加一行代码

    1
    2
    3
    4
    5
    6
    // TOC item animation navigate & prevent #item selector in adress bar.
    $('.post-toc a').on('click', function (e) {
      e.preventDefault();
      var targetSelector = NexT.utils.escapeSelector(this.getAttribute('href'));
      // 添加下面这行代码，重新解析 URL 
      targetSelector =decodeURI(this.getAttribute('href'));