操作环境：Windows10、Node、Git、ssh

前置准备: <username>github.io 仓库已建立，预计托管博客网址为<username>github.io/blog

先对hexo有个清晰的认识，不至于稀里糊涂的跟着步骤走。

Hexo发布博客流程概览

  1. 搭建hexo环境
  2. hexo new "title" (创建新文章)
  3. 编写md文档
  4. hexo clean
  • 清除缓存文件 (db.json) 和已生成的静态文件 (public)
  1. hexo generate (生成静态文件)
  2. hexo deploy (Hexo 会将 public 目录中的文件和目录推送至 _config.yml 中指定的远端仓库和分支中，并且完全覆盖该分支下的已有内容。)
  3. 本地仓库同步到GitHub (不同步的话，文章源码只会保留在本地，不易管理)

由于 Hexo 的部署默认使用分支 master，所以如果你同时正在使用 Git 管理你的站点目录，你应当注意你的部署分支应当不同于写作分支。

Hexo 在部署你的站点生成的文件时并不会更新你的站点目录。因此你应该手动提交并推送你的写作分支。

一般来说第一步环境搭建只需要在最开始创建博客网站的时候进行，写文的话只需要重复第2-7步就可以了，这种使用方式强烈依赖于本地环境。但是，有时候我们并不只是固定在一台电脑上写文，（比如：一直写文的电脑坏了，需要换新电脑；电脑重装系统等等）这样就需要在另一台电脑上搭建环境，这样非常的麻烦，而且难免会带来一些其它依赖版本兼容问题。所以，可以采用travis-ci持续集成平台来简化发布文章的流程。

简化后的流程如下：

  1. hexo new "title" (创建新文章)
  2. 编写md文档
  3. 本地仓库同步到GitHub
  • push到GitHub上之后，travis-ci会监听分支文件变动，触发发布流程（跟Jenkins 构建流程类似）

下文整体分为两个步骤：

  1. 借助GitHub Pages手动部署。
  2. 增加travis-ci配置，完成自动部署

Hexo

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

文档

  1. npm install -g hexo-cli
  2. cd [workspace]
  3. hexo init <folder:blog>
  4. cd <folder:blog>
  5. npm install
  6. hexo s

Hexo GitHub搭建个人博客 - 图1

网站基础配置修改参考这里

GitHub

  1. 新建仓库：blog （名字自己起）
  2. 本地hexo仓库关联远程GitHub仓库
    将本地仓库推送到远端
  3. 本地仓库一些必要的修改配置 
  1. https://github.com/hexojs/hexo-deployer-git
  • 修改_config.yml配置，如下：
  1. url: https://all-smile.github.io/blog
  2. root: /blog/
  4. # ...
  6. deploy:
  7.   type: 'git'
  8.   repo: git@github.com:all-smile/blog.git
  9.   branch: gh-pages
  • 提交到远程仓库
  1. 创建 gh-pages 分支
    hexo结合GitHub创建个人网站指定的分支名，hexo 内默认设置的分支也是叫这个名字
  1. git checkout -b gh-pages
  2. git push -u origin gh-pages
  1. 远程仓库开启 github pages

Hexo GitHub搭建个人博客 - 图2

手动部署

  1. hexo clean
  2. hexo g
  3. hexo deploy

hexo模板引擎生成静态文件，并推送到gh-pages分支下（替换原先分支下的所有文件）
Hexo GitHub搭建个人博客 - 图3

到这里就已经完成了博客的搭建

需要注意的是：hexo deploy 命令并不会帮助我们同步本地的修改到远程仓库，所以当在本地写完博文之后，要做两件事：一是发布站点，二是同步远程仓库，这样做比较麻烦，下面会讲解如何配置持续集成

查看效果

这里我配置了自定义域名

Hexo GitHub搭建个人博客 - 图4

自动部署travis-ci

由于 GitHub Actions 也可以实现CI/CD，travis-ci 的市场被挤压了，所以他们改变了运营策略，变成收费使用了！我们换用 GitHub Actions

Travis CI 是开源持续集成构建项目，用来持续集成托管在GitHub上的代码。

可以采取分支管理的方式，也可以新建repo，在ci配置上略有不同，这里我采用的是将hexo博客源码托管到独立的repo上

使用 travis ci 后，可以将前面部署的步骤自动化，我们只需要将本地修改的文件推送到 github 仓库，Travis CI 检测到 master 分支代码有变动，会自动执行脚本命令，将 Hexo 项目编译生成静态页面，部署到 gh-pages 分支

  1. 生成GitHub Token
    点击这里，去GitHub创建

如下图

Hexo GitHub搭建个人博客 - 图5

复制生成的 Token ，备用

  1. hexo仓库创建.travis.yml文件
  1. sudo: false
  2. language: node_js
  3. node_js:
  4.   - 10 # use nodejs v10 LTS
  5. cache: npm
  6. branches:
  7.   only:
  8.     - master # build master branch only
  9. script:
  10.   - hexo generate # generate static files
  11. deploy:
  12.   provider: pages
  13.   skip-cleanup: true
  14.   github-token: $GH_TOKEN
  15.   keep-history: true
  16.   on:
  17.     branch: master
  18.   local-dir: public

完整的 job 生命周期(包括三个可选的部署阶段，以及在检出 git 存储库 和更改到存储库目录) 如下：

  • apt addons 可选安装
  • cache components 可选安装
  • before_install
  • install
  • before_script
  • script
  • before_cache (for cleaning up cache) 可选
  • after_success or after_failure
  • before_deploy 可选
  • deploy 可选
  • after_deploy 可选
  • after_script
  1. Travis CI 关联项目仓库
  • 使用 GitHub 账户注册登录 Travis CI
  • 绑定 blog 仓库
  • 给 blog 仓库设置 环境变量
    在 Environment Variables 下新建一个环境变量，Name 为 GH_TOKEN，Value 为刚才你在 GitHub 生成的 Token。确保 DISPLAY VALUE IN BUILD LOG 保持 不被勾选 避免你的 Token 泄漏。点击 Add 保存。
    Hexo GitHub搭建个人博客 - 图6

GitHub Actions

使用Github Action来部署hexo，这样电脑本地就不需要安装npm相关的东西了。另外利用github.dev也可以实现在页面上编辑了。

在线编辑:
Github有提供一个在线编辑的页面，在Repo页面按下按键.就可以打开编辑页面了

Hexo GitHub搭建个人博客 - 图7

每个 action 就是一个独立脚本，因此可以做成代码仓库，使用userName/repoName的语法引用 action。比如，actions/setup-node就表示[github.com/actions/setup-node](https://github.com/actions/setup-node)这个仓库，它代表一个 action，作用是安装 Node.js。事实上，GitHub 官方的 actions 都放在 [github.com/actions](https://github.com/actions) 里面。

Hexo Theme

主题汇总