用Hexo + Github来搭建个人博客已经很普遍了, 正好Github action发布, 可以利用持续集成使得部署更加轻松
本文从零开始, 搭建hexo博客并用Github Actions发布到Github Page

工具介绍及安装

  1. Git 版本管理工具, 用于管理写的文章, 并和Github仓库建立连接, 官网安装
  2. node.js 为hexo提供JavaScript环境 官网安装
  3. Github Pages Github 官网提供的一个服务, 将博客部署到它上面, 避免自己购买服务器, 无需安装

hexo和主题安装

hexo 和 hexo 主题的关系: hexo 主题定义了博客的界面布局, 颜色, 脚本等, hexo 将内容渲染交给hexo 主题生成对应的排版

  1. hexo 安装[1]

    npm install hexo-cli -g
  2. 生成默认博客

    hexo init blog
    cd blog
    npm install
  3. 下载主题

    这里以apollo主题为例

    npm install --save hexo-renderer-pug\
    hexo-generator-feed \
    hexo-generator-sitemap \
    hexo-browsersync \
    hexo-generator-archive
    npm i hexo-theme-apollo

    hexo 5.0 支持使用npm安装主题

博客配置

博客的配置主要都在_config.yml

  1. 主题相关配置

    ...
    # 修改主题名称
    theme: apollo

    hexo 5.0 主题的具体配置移到了_config.apollo.yml中
    更多配置说明请查看apollo文档和参考我的配置

  2. 博客url配置

    url: http://blog.xhyh.best
    root: /
    permalink: :category/:urlname/
    new_post_name: :year:month:day-:title.md

    为方便整理, 生成新文章会有时间前缀, 而我们不希望在文章链接中包含时间, 这里使用了urlname, 需要在每篇文章头中添加这个变量

常用命令

  1. hexo clean 清除缓存和生成的public文件夹
  2. hexo g generator 生成public文件
  3. hexo s server 本地预览, 加参数--debug可查看调试信息
  4. hexo d deploy 部署到github

增加category/tag页面

默认并没有category, tag页面, 需要在命令行中输入命令添加

hexo new page category

下一篇将介绍如何使用 Github Actions 部署博客

转载申请

知识共享许可协议

本文知识共享署名 4.0 国际许可协议进行许可,转载时请注明原文链接


  1. Hexo官网: https://hexo.io/ ↩︎