Coding Poet
0%

Hexo + Git + Page = ?

发表于 更新于 分类于

整理思路，总结问题，剖析原理

Hexo + Git + Page = A Blog

搭建步骤

  1. 安装配置 Hexo 翻看 Hexo文档 按照文档要求，安装 Git Node.js 需要掌握 Git 文档 的一些基本命令和原理 Git 基本原理

  2. 准备GitHub/Gitee 仓库 将建好的 Hexo 工作目录 push 到仓库中 推荐使用一键部署

  3. 打开 GitHub/Gitee 的 Page 功能 这步需要注意：

    1. 建立库的时候最好使用默认用户名建立的方法 GitHub 默认 <UserName>.github.io gitee 默认 UserName 这样的好处是在部署之后，得到的 URL 是默认在根目录下的，如果使用其他的仓库名字，会在根目录后面多一个分级，并且，GitHub 会在 deploy 之后创建一个新的分支，以上十分不方便管理和设置。

      官方其实是推荐将 Hexo 工作目录也 push 到 GitHub 上，然后 page 部署到另一个分支上。

    2. 如果你使用了其他的名字建立库，需要在 Hexo 的 config.xml 中配置 URL 的 root ，不然会导致页面的CSS 加载不出来，因为 CSS 文件的导入路径出错。

    3. Gitee 的好处是，部署速度快，访问稳定，但是每次部署完之后，需要手动更新 page；GitHub 的好处是自动化部署，但是访问可能会被墙。

  4. 自定义主题，调试 Hexo 上述步骤完成就基本可以使用了，为了美化界面，推荐使用第三方主题 NeXT NeXT 快速上手 功能强大，我主要使用 Schemes 和 支持数学公式的 Mathjax NeXT 配置官方文档

浅谈几个原理

  1. Hexo 是一种博客框架，通过 render 解析文章，快速的生成 html 文件，放到 Web 服务器上，便是一个静态网页。

  2. Hexo 一键部署的原理：Hexo 将 public 文件下的内容 push 到 config 中指定的远程仓库，通过远程仓库的 page 服务来完成一个静态资源在 web 服务器上的部署。

  3. For 使用 Git 管理站点目录的用户

    由于 Hexo 的部署默认使用分支 master，所以如果你同时正在使用 Git 管理你的站点目录，你应当注意你的部署分支应当不同于写作分支。 一个好的实践是将站点目录和 Pages 分别存放在两个不同的 Git 仓库中，可以有效避免相互覆盖。 Hexo 在部署你的站点生成的文件时并不会更新你的站点目录。因此你应该手动提交并推送你的写作分支。

    官方的好处是，你可以随时随地，从 GitHub master 分支上 pull 下你的 Hexo 工作目录，修改发布文章之后，在 push 回去，并且 deploy 到其他分支上，更新你的博客。这样你本地就根本不需要保存 Hexo 的工作目录。 在不使用一键部署的时候，通过 Travis CI 在 Hexo 工作目录 push 到 GitHub 的 master 分支的同时解析文章，将生成的 public 文件 push 到 GitHub 的另一个分支上。

总结经验

多看官方文档，官方文档上不是很清楚的地方，可以去按照自己的推测来尝试，整个过程遇到三次问题：

  • 一开始我没有选择使用一键部署，尝试的是官方的 GitHub 配置部署，但是多次尝试都失败了，具体错误原因我并没有去仔细分析，因为我不是很了解前端知识，不理解 Travis CI 的具体作用。
  • 第一次部署完毕之后的页面，没有 CSS 格式，原因是我建库的时候没有使用推荐的 UserName 导致需要重新配置 config 中的 URL 和 ROOT，如果配置不对，会导致 CSS 文件的路径错误，所以页面没有 CSS 样式。
  • 在配置支持数学公式的 Mathjax 时，发现本地调试的数学公式可以显示，但是部署后的无法正确显示，发现是其对应的 js 文件没有导入，一开始排查了很久都没有结果，最后发现 Gitee 部署的页面没显示公式，GitHub 的显示公式，原因是 Gitee 的 page 需要手动更新。

对前端的 Node.js 不是很了解，给我的感觉是类似 Maven 可以管理各种前端的 js 包，还是需要继续学习一些前端的知识。