杂谈

hexo + github pages + hux 主题 博客搭建

"记录生活，记录技术"

Posted by JosonChan on 2020-10-19

感谢 hux 设计了这个主题，同时也感谢 kaijun 和 YenYuHsuan 把它转成了 hexo。

初衷

对于一个程序员来说，学会写博客是非常重要的。一方面是锻炼自己的表达能力，另一方面也方便记录，当下次遇到相同问题的时候能够避免重复踩坑，提高效率。同时记录本身就是对问题的复现，或许写一遍之后对于该问题的理解能够更加透彻。

刚开始使用的是 csdn，虽然说 csdn 容易编写，对新手非常友好，但是后面逐渐发现 csdn 的技术博客鱼龙混杂而且界面也不好看。之后就转到有道云笔记，但是有道云中 md 功能并不完善且每个月的会员还要15块，因此决定自己搭建一个 blog 。在网上看到的方案非常多，就是刚好看到 hexo + github pages 这个方案吧，然后选了一个挺好看的模板，慢慢改吧。希望以后将自己遇到的问题都放在这里。

博客搭建过程

首先我使用的方案是 hexo + github pages。需要的步骤如下：

  • 安装 node.js 和 git
  • 安装 hexo 进行初始化
  • 创建 github 账户并部署博客
  • 选择一个合适的 hexo 主题

安装 node.js 和 git

node.js 直接到官网下载就行，然后一路默认 next 安装即可。

安装完成之后，在命令行输入 node --version 验证安装成功。

node-version

git 也是官网下载就行，只不过需要注意把路径添加到系统变量中。

安装完成后在命令行输入 git--version 验证是否成功。

安装 Hexo 进行初始化

在合适的地方新建一个文件夹，用来存放自己的博客文件，比如我的博客文件都存放在 D:\其他\我的博客 目录下。

然后右键 git bash here, 输入 npm i hexo-cli -g 安装 Hexo。

安装完后输入 hexo-v 验证是否成功。

然后就要初始化我们的网站，输入 hexo init 初始化文件夹，接着输入 npm install安装必备的组件。

然后输入 hexo g 生成静态网页，然后输入 hexo s 打开本地服务器，然后浏览器打开http://localhost:4000/，就可以看到我们的博客了。

github pages 部署

首先注册一个 github 账户，然后新建一个 repo ：

new repo

注意这里的名字一定要和你的 username 一样，也就是说 repo 的名字为 <username>.github.io

生成之后选择设置，点击 choose a theme 选择一个主题之后就变这样：

github-page

点击链接就可以访问了。

之后将本地的 ssh 添加到该 repo （教程：ssh 连接 github），然后打开博客根目录下 _config.yml 文件，这是博客的配置文件，在这里你可以修改与博客相关的各种信息。

修改最后一行的配置

deploy:
  type: git
  repository: https://github.com/yourname/yourname.github.io
  branch: master

之后命令行输入 ：

npm i hexo-deployer-git # 安装 hexo 部署拓展
hexo clean # 清空之前生成的
hexo g # 生成静态页面
hexo d # 上传到 github

打开你的 github 主页应该就能看到了。

选择合适的主题

这里我直接选的是 YenYuHsuan 的，建议直接 fork 下来，按照 readme 进行配置就行了。

主题优化

YenYuHsuan 的主题，不知道是不是我电脑的问题，遇到了挺多 bug 的，也作了一些更改，记录如下

调节间距

我发现一些间距有点问题，就是用了google 的网页检查功能，然后修改对应的 styl\css 代码或者是 ejs 代码。实例如下：

margin

这里的 2020 与前面的间距，通过 google 的网页检查功能定位到：

just-margin

在 theme/source/css 中找到 beantech.min.css，修改 margin-bottom 为 40px。（原本为 20px ）

以上只是抛转引玉，如果对博客布局有什么不满意的可以这样改，我还改了 toc 的编号间距，recent posts 的间距，大家可以自行对比一下。

toc 锚点定位问题

toc

这里点击链接的话无法进行定位，聚焦之后发现它的链接 id 为 null ，于是查看作者 toc.ejs 代码发现不是它的锅，是 hexo 的 toc 函数。于是再到 node_module/hexo/lib/plugins/helper/toc.js 查看，发现是返回的 id 有问题。

查阅之后发现原来是 markdown-it 插件的锅，于是安装 markdown-it-named-headings 插件，这个插件是另外一个大佬针对这个 bug 做的一个修复。详细流程见：

toc 取消序号

要把自带的编号去掉的话，可以在 theme/beantech/layout/_partial/toc.ejs 里面添加一个选项：

<%- toc(page.content, { "class": "toc-nav","list_number":false }) %>

部署到 github 上图片不显示

非常奇怪的是，当我部署到 github pages 上的时候，发现竟然图片显示不出来。原来是相对路径的问题。于是跟着这位博友搞定

取消diupus/多说，使用Gitalk

diupus 需要科学上网之后才能使用，多说已经停更了。于是看到有用 Gitalk的，跟着搞了一波效果还行：

添加访站和访客统计

想要添加一下访问的次数。

在footer.ejs 更改代码如下：

<!-- use busuanzi to count the number of visited -->
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<!-- end of uese busuanzi -->
<span id="busuanzi_container_site_pv">
    本站总访问量<span id="busuanzi_value_site_pv"></span>次
</span>
<span class="post-meta-divider">|</span>
<span id="busuanzi_container_site_uv">
    本站访客数<span id="busuanzi_value_site_uv"></span>人次
</span>

hexo 升级大法

在一些时候，我怀疑是不是自己 hexo 或者插件的版本太低，于是可以升级一波，具体方法：

代码块高亮

由于 beanTech 作者使用了 hexo-renderer-markdown-it 这个插件，所以默认自带的 hexo-renderer-markdown 的代码高亮功能就无法使用了，所以添加一下这个功能。

但是按照它的方法，我只能在本地端有反应，上传上去之后，服务端没有反应。查看网页源代码也看到 css,js 被加载了，但就是没有效果。后来想了想，可能是github不支持在线的获取，把对应的 css ,js 文件下载下来放到 theme/source/css 和 theme/source/js 中，更改代码如下：

    <!-- add the highlight -->
    <% if (config.highlightjs) { %>
        <!-- Highlight.js -->
        <!-- <link href="http://cdn.bootcss.com/highlight.js/10.1.0/styles/atom-one-dark.min.css" rel="stylesheet"> -->
        <!-- <script src="http://cdn.bootcss.com/highlight.js/10.1.0/highlight.min.js"></script> -->
        <%- css('css/highlightjs.min.css') %>
        <script src="/js/highlight.min.js"></script>
        <script >hljs.initHighlightingOnLoad();</script>
    <% } %>
    <!-- end of adding the highlight -->

上传之后完美解决。

后记

博客搭建就算告一段落了，搭建过程中让我体会到 HTML/CSS/EJS/JS 的一些用法，感觉还是有趣的，希望之后能够把这个主题的实现看一下，然后自己来改改，想想再怎么优化，加油吧骚年。

FEATURED TAGS
杂谈
FRIENDS