Hello Blog! Hexo+Github零成本搭建自己的个人博客网站_h-blog

第一篇博客用来记录搭建该网站并成功发表这篇博客的流程，使用Hexo静态博客框架，托管于Github，参考了多篇文章¹。

总体流程

其中主流程参考知乎：GitHub+Hexo 搭建个人网站详细教程，虽然是老文章，但每一步都非常详细，框架搭建过程存在问题可以看文章的评论区或Hexo官方文档进行补充；

域名在阿里云购买,买的 wangyujie.site 首年6元，这也是唯一的开销，如果愿意使用原网站 <arrowes.github.io> ,这一步甚至可以省略；

选用了Next主题，主题优化参考了Next主题官方文档以及知乎：hexo的next主题个性化教程:打造炫酷网站（其中访问量、统计功能教程已过期），可以把网站搭建的花里胡哨；

编写博客使用的Markdown语言通过看菜鸟教程：Markdown 教程非常简单，可以边学边写；

其他工具有：logo下载：iconfont，Next默认的icon网站（灰色为收费图标）：Font Awesome，图床url链接生成：SM.MS，此外，大多数网站需要用到科学上网。

Github网站项目地址：Arrowes.github.io

用关键词在谷歌里搜到自己的网页：让Google搜索到自己的博客

网站配置

hexo 添加自定义单静态页面 跳过hexo渲染，以resume为例:

1. 将resume文件夹放进Theme主题文件夹下的/source
2. Hexo-config: skip_render: resume/** （可省略）

添加动态背景，以动态线条为例：

1. themes/next/layout/_layout 在</body>末尾添加如下代码：

   {% if theme.canvas_nest %}
   <script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
   {% endif %}
   1
   2
   3

2. /next/_config.yml,在里面添加如下代码：(可以放在最后面)

   #是否打开动态背景
   canvas_nest: true
   1
   2

统计功能

打开themes\next\layout_partial\footer.swig文件，在文件末尾添加：

<div class="theme-info">
  <div class="powered-by"></div>
  <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
  <span class="post-count">全站共{{ totalcount(site) }}字</span> | 访问量<span id="busuanzi_value_site_pv"></span>次
</div>
1
2
3
4
5

配置网站超链接颜色

打开 Blog\themes\next\source\css\_common\components\post 路径下的post.styl , 并在底部添加如下代码:

a:not(.btn){
  color:; //超链接显示颜色
  border-bottom: none;
  &:hover {
	color: #469FF1;  //鼠标移动上去后超链接颜色
	font-weight: none;
	text-decoration: none;
	}
  }
1
2
3
4
5
6
7
8
9

搜索功能

1. 在项目根目录下运行 npm install hexo-generator-searchdb --save
2. 更改主题配置文件 themes/next/_config.yml，将local_search下的enable从false改为true

设置阅读全文

1. 在项目根目录下执行 npm install hexo-excerpt --save

2. 在站点配置文件_config.yml添加:

   excerpt:			# 一定要顶格写，注意格式
     depth: 5			# 他的大小就是全文阅读预览长度设置
     excerpt_excludes: []
     more_excludes: []
     hideWholePostExcerpts: true
   1
   2
   3
   4
   5

3. 在主题配置文件中_config.yml里 excerpt_description 改为true

添加标签

1. 配置 主题配置文件中删掉tags的注释
2. 文件 新建tags文件 hexo new page "tags"
3. 文章 tags: - XXX

插件

npm install hexo-reference --save 支持Markdown脚注
npm install hexo-wordcount --save 字数统计
Markdown Preview Enhanced markdown预览插件（vs code）

markdown image markdown图片插件（vs code）

Local
E:\Github\Blog\blog\node_modules\hexo-theme-next\source\images\ #Path
/images/ #Reference Path

Github
main #Branch
/images #Path
https://github.com/Arrowes/Arrowes-Blogbackup #Repository
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 #Token
1
2
3
4
5
6
7
8
9

常用Hexo指令

hexo init [folder] 新建一个网站
hexo new "title" 新建一篇文章
hexo clean 清除缓存文件 (db.json) 和已生成的静态文件 (public)
hexo g 生成静态文件
hexo s 生成本地预览 localhost:4000
hexo d 部署网站

hexo clean && hexo g && hexo s 快速预览
hexo clean && hexo g && hexo d 快速部署

Bug

√ 网站底部的图标不显示:Font Awesome部分图标收费
√ 访客数、文章字数没有数据：busuanzi链接过期
部署经常超时 error：spawn failed，参考的方法存疑

总结

熟悉了搭建网站流程，想起本科打电子商务比赛花钱请人做网站，还是本地的静态网站，有点冤种；
对Github的工作流有了一定了解，比一键Download ZIP有所进步；
看了很多人写的教程才完成，花了整整两天，还是有点费时间的，除了瞎折腾，更多的其实是想搭建一个输出的平台，锻炼一下自己的表达、总结能力，改善一下自己学了就忘，忘了就废的情况，希望自己能继续坚持，多写几篇！

---

1. 知乎：GitHub+Hexo 搭建个人网站详细教程
   Hexo官方文档
   Next主题官方文档
   知乎：hexo的next主题个性化教程:打造炫酷网站
   菜鸟教程：Markdown 教程
   个人网站：Arrow的笔记本 ↩︎