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

星源

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

其中主流程参考知乎：GitHub+Hexo 搭建个人网站详细教程，虽然是老文章，但每一步都非常详细，框架搭建过程存在问题可以看文章的评论区或Hexo官方文档进行补充；
域名在阿里云购买,买的 wangyujie.site 首年6元，这也是唯一的开销，如果愿意使用原网站  ,这一步甚至可以省略；
选用了Next主题，主题优化参考了Next主题官方文档以及知乎：hexo的next主题个性化教程:打造炫酷网站（其中访问量、统计功能教程已过期），可以把网站搭建的花里胡哨；
编写博客使用的Markdown语言通过看菜鸟教程：Markdown 教程非常简单，可以边学边写，使用VScode，安装Markdown Preview Enhanced及markdown image插件；
其他工具有：logo下载：iconfont，Next默认的icon网站（灰色为收费图标）：Font Awesome，图床url链接生成：SM.MS，此外，大多数网站需要用到~~科学上网~~。
Github网站项目地址：Arrowes.github.io
用关键词在谷歌里搜到自己的网页：让Google搜索到自己的博客
网站配置

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

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

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

• 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 %}

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

canvas_nest: true
统计功能

打开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>配置网站超链接颜色

打开 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;
  }
  }搜索功能

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

设置阅读全文

• 在项目根目录下执行 npm install hexo-excerpt --save
  
• 在站点配置文件_config.yml添加:
  

excerpt:                        # 一定要顶格写，注意格式
  depth: 5                        # 他的大小就是全文阅读预览长度设置
  excerpt_excludes: []
  more_excludes: []
  hideWholePostExcerpts: true
# 在主题配置文件中_config.yml里 excerpt_description 改为true添加标签

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

插件

npm install hexo-reference --save 支持Markdown脚注
npm install hexo-wordcount --save 字数统计
Markdown Preview Enhanced markdown预览插件（vs code）
markdown image markdown图片插件（vs code）  
常用Hexo指令

hexo init [folder] 新建一个网站 hexo new "title" 新建一篇文章 hexo clean 清除缓存文件 (db.json) 和已生成的静态文件 (public) hexo g 生成静态文件 hexo s 生成本地预览 <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 教程|

说话狠人

顶