利用 Hexo&GithubPage 搭建博客

引言

由于某些原因，不得不把原先搭建的 Hexo + Github Page 静态博客仓库删掉，我个人比较喜欢记笔记，加上我比较喜欢原先的博客主题 —— hiker ，所以打算重建原先的博客。在重建的过程中我发现原先我认为主题的 bug 都是我没看 README.md 或者 issues ，当然也发现了该主题现存的一些问题，顺便写下这篇博客记录这些。

创建 Github Page

官方文档写的比较详细，强力推荐！

安装环境

我 PC 端使的系统是 Ubuntu 18.04.5 LTS ， Windows 其实大致都一样（从搭建过程来看 Windows 更加容易点，少了很多莫名奇妙的问题）。

安装 Git

安装 Git

安装 Nodejs

Node.Js官方下载链接

• Windows 用户直接下载安装包，然后一路 next ，当然这边应该有个环境变量的添加，这个需要小伙伴自行百度了；

• Linux 用户（Ubuntu 18.04.5 LTS）登录官网根据自己机器配置下载对应的安装包（个人推荐下载二进制文件，当然你也可以使用源码安装，看个人喜好）。

  • 然后在对应的文件夹下有3个二进制文件 node ， npm ， npx ，需要建立对的软连接或者修改环境变量，前者添加软连接比较方便（/usr/local/nodejs/bin/ 这个为我压缩包解压后的路径）。
  • sudo ln -s /usr/local/nodejs/bin/node /usr/local/bin/node
  • sudo ln -s /usr/local/nodejs/bin/npm /usr/local/bin/npm
  • sudo ln -s /usr/local/nodejs/bin/npx /usr/local/bin/npx
  • node -v， npm -v， npx -v 检验一下。

安装 Hexo

官网有全局安装教程和局部安装教程，我推荐还是直接在项目目录里面进行局部安装会好一些，便于管理。

npx init hexo

部分教程会先安装 npm install hexo ，在我使用局部安装搭建的时候系统提示， hexo 初始化的目录必须为空，所以直接初始化 hexo 站点

本地站点搭建

npx hexo server

或者简写为 npx hexo s ，然后访问 http://localhost:4000/ 就可以看到本地站点服务了。

修改站点配置文件_config.yml

里面参数比较多，主要就是 theme 和 deploy 。我们可以根据 Hexo 官方配置参数说明来修改。

关于博客的主题，我们可以到 Hexo 主题库里面去寻找，然后跳转到对应的 Github 仓库，根据 README 来完成主题的部署。

部署发布

完成上面的 deploy 参数的填写后，我们需要安装一个模块 hexo-deployer-git 。

npm install hexo-deployer-git --save

接下来就是向远端仓库提交编译后静态站点文件。

1. 执行 clean ，清理缓存内容;

npx hexo clean

2. 生成站点静态文件；

npx hexo generate

3. 部署，向远端提交资源；

npx hexo deploy

完成！

hiker主题尚存的问题及解决方法

下面着重解决我使用的主题 hiker 遇到的一些问题，主题的 UI 设计挺棒的，但是由于很长时间没更新了，出现了或多或少的小问题。

不蒜子计数器失效

2022.4.29 更新

themes/hiker/layout/_partial/busuanzi-analytics.ejs

<% if (theme.show_busuanzi_view_counts){ %>
	<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js">
	</script>
<% }%>

替换成

<% if (theme.show_busuanzi_view_counts){ %>
	<script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js">
	</script>
<% }%>

前后翻页的按钮中表示 ”«“ ”»“ 的转义字符显示不正常

2022.2.12 更新

问题详情可以查看这个 issues

索性直接把这个字符删掉了，修改文件 themes/hiker/layout/_partial/article.ejs ，第 31 行

<% var prev_text = "&laquo; " + __('prev');var next_text = __('next') + " &raquo;"%>

替换成

<% var prev_text = __('prev');var next_text = __('next')%>

首页不显示文章摘要下方不显示Tag

2021.6.27 更新

感觉贡献者 pull 了 bug ，至少我这边回滚这部分代码就解决问题了。

修改文件 themes/hiker/layout/_partial/article.ejs ，替换下面两段代码。

<% if (is_post()){ %>
  <%- partial('post/tag') %>
<% } %>

替换成

<% if (!theme.post_excerpt){ %>
  <%- partial('post/tag') %>
<% } %>

文章太长右侧的TOC无法滚动

2021.6.27 更新

修改路径 themes/hiker/source/css/_partial/article.styl ，原文链接，但还是有小问题。目录无法根据文章级联滚动。

/*  搜索#toc，修改参数，参数都缩进两位 */
#toc
  height: 76%

/*  #toc 后增加以下两个样式, 用于修改滑块、滑条样式 */
#toc::-webkit-scrollbar
  background-color: #ece9e9
  -webkit-border-radius: 2em
  -moz-border-radius: 2em
  border-radius: 2px
  width: 5px

#toc::-webkit-scrollbar-thumb
  border-radius: 4px
  background: rgba(0,0,0,0.3)
  -webkit-box-shadow: inset 0 0 6px RGB(243, 243, 244)

主页文章摘要

2021.6.27 更新

打开自动摘要，Read More 按钮不显示；而且摘要不以 Markdown 形式出现。找了很长时间，最后第一个问题在一篇博文中找到了解决方法 —— 换了新主题hiker。

具体解决方法：
替换文件 themes/hiker/layout/_partial/article.ejs 中下面两段代码

<div class="article-entry" itemprop="articleBody">
  <% if (theme.post_excerpt && index){ %>
    <p class="article-excerpt-content">
      <%- truncate(strip_html(post.content), {length: 250, omission: '...'}) %>
    </p>
    <p class="article-more-link">
      <a href="<%- url_for(post.path) %>#more"><%= __('read_more') %></a>
    </p>
  <% } else { %>
    <%- post.content %>
  <% } %>
</div>

替换成

<div class="article-entry" itemprop="articleBody">
  <% if (post.excerpt && index) { %>
    <%- post.excerpt %>
      <p class="article-more-link">
        <a href="<%- url_for(post.path) %>#more"><%= __('read_more') %></a>
      </p>
    <% if (theme.excerpt_link) { %>
      <p class="article-more-link">
        <a href="<%- config.root %><%- post.path %>#more"><%= theme.excerpt_link %></a>
      </p>
    <% } %>
  <% } else { %>
    <% var br = post.content.indexOf('\n') %>
    <% if(br < 0 || !index) { %>
      <%- post.content %>
    <% } else { %>
      <%- post.content.substring(0, br) %>
      <% if (theme.excerpt_link) { %>
        <p class="article-more-link">
          <a href="<%- config.root %><%- post.path %>#more"><%= theme.excerpt_link %></a>
        </p>
      <% } %>
    <% } %>
  <% } %>
</div>

关闭自动摘要， tag 才会显示出来：

post_excerpt: false

卸载 hexo-auto-excerpt ，不然摘要以文本形式出现。

npm uninstall hexo-auto-excerpt

logo 显示不全

2021.6.26 更新

这边放一个本地调试的链接，在该链接下 http://localhost:4000/archives/ ，出现 logo 显示不全。

在查看到这个 Issues 的时候发现了类似的问题，根据下面的评论发现了 @WayneChang65 向源仓库 pull 过修复类似问题的代码，并且作者在该 commit 的时候合并代码了，根据记录和 Demo 中的源码，只要将 commit 的代码块回滚就完事了。

具体解决方法：
替换文件 /themes/hiker/layout/_partial/head.ejs 中下面一行代码

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

替换成

<link href="//cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">

插件推荐

• 标签云 hexo-tag-cloud
• 永久链接 hexo-abbrlink

遇到的错误

• 在克隆仓库的时候我本地一直报错 server certificate verification failed. CAfile: /etc/ssl/certs/ca-certificates.crt ，找了很多方法，最后还是这个比较有效 git config --global http.sslverify "false" （建议使用完再改回来，对应的文件名 .gitconfig ，一般在根目录下），其他一些解决方法我也放在下方。

参考资料

• 使用Hexo在Github上搭建静态网站-教程一
• 使用Hexo在Github上搭建静态网站-教程二
• server certificate verification failed. CAfile: /etc/ssl/certs/ca-certificates.crt CRLfile: none