记录一下

本不想对搭建网站的过程做任何记录的，因为就算我做记录，很多年后我也不会去看这些过了时的信息记录。但是由于搭站过程中还是遇到了很多问题，所以还是记录一下吧。

网站是完全基于 Hexo 框架的，在基础部分搭建完成之后，我首先做的第一件事就是换掉了原框架自带的low的掉牙的主题。在寻找新主题的过程中，看了各种各样的主题，有二次元的，有赛博朋克风的，有自带各种炫酷跳转动画的。我想要的不过是简简单单，基础功能完善的主题，于是我就选择了Pisces。简简单单，就像小时候在抽屉里翻出来的那种老相簿，光是看到，就已经回忆感满满了。

字体方面我选择的是 LXGW-WeiKai 的字体，链接在下面有需要的可以直接拿走。用 cdn 引入的好处就是不会导入过多的依赖资源，减少服务器的负载。同时在资源文件下，创建 swig 文件，将cdn文件放在 swig 文件下。然后将主题文件下的 external 字段改为 true，将 family 字段改为 LXGW WenKai Lite，即可完成网站所有的字体样式修改。差点忘记最重要的一点，就是取消注释 custom_file_path.head 并指向 source/_data/head.swig，使 NexT 在渲染时，包含我们自定义的片段。

https://cdn.jsdelivr.net/npm/lxgw-wenkai-lite-webfont@1.0.0/style.css

接着由于我要频繁对网页文件进行修改，所以我不得不一直重新 hexo g&hexo s 来查看当前修改是否满足我的需求。在这种情况下，我找到了利用 Browser-sync 实现热部署来自动监控文件改动并自动刷新网页。
首先是要安装Browser-sync服务

npm install --save-dev browser-sync

然后现在可以有两种解决方式，第一种就是边运行 hexo server -watch 边运行 Browser-sync，也就是要开两个终端。

{
    Browser-sync start \
       --proxy "http://localhost:4000" \让 BrowserSync 作为代理转发请求到 Hexo server，从而保持 Hexo 的全部路由逻辑。
       --files "public/" \监听 public 目录所有文件，只要 Hexo 重新生成，BrowserSync 就触发
        注入/刷新。
       --reload-delay 200 \给 Hexo 一点时间写完文件后再刷新。
       --no-open \ 不自动打开新浏览器窗口。
}

第二种就是直接在 package.json 里添加脚本文件。

{
    "dev": "npm-run-all --parallel \"hexo server --watch\" \"browser-sync start --proxy
  http://localhost:4000 --files public/**/* --no-open\""
}

这样的话，就不用开很多终端，直接 npm run dev 就可以实现热部署了。

接下来又遇到了第二个问题，当我增加一篇新的博客的时候，我的首页内容会被新增的内容给顶上去。这并不是我希望的，我想让我的首页一直保持一种样式和内容，我也并不想去频繁的修改它，所以我决定将首页的内容直接写成静态的 Index 文件，但是当再次新增博客的时候，我发现新增加的博客还是顶掉了我的首页内容。于是通过一段时间排查发现是 Hexo 默认的 hexo-generator-index 会把文章列表写到 public/index.html；当你新增博客后，这个生成器又把首页覆盖成文章列表，原本的 source/index.md 就被顶掉了。查明问题之后就好办了，现在只需要把 _config.yml 的 index_generator.path 改成 posts，让文章列表改生成到 /posts/（而不是根路径）。这样首页就只由 source/index.md（套用 simple 布局）产出的静态文案，新增的文章仍可在 /posts/、/archives/ 等页面浏览。

这样这个网站就已经很完美了，拥有了所有博客网站该有的功能，但是我还是感觉太单一了，于是在资源文件里面自定义了 footer，给网站加上了一个音乐播放器，起初很完美，打开网站触发点击事件，就能听到美妙的音乐了，但是后面发现每触发一次点击事件，网站的音乐都会重头开始，多次实验，我发现是因为当网站触发一次点击事件的时候，整个网站都会重新加载，

pjax: //cdn.jsdelivr.net/gh/theme-next/theme-next-pjax@0/pjax.min.js

然后就是将网站上线部署到服务器的部分了，这部分的解决方案有很多，部署到github也行，腾讯云也好，有很多的选择，大家可以自行决定。

最后的最后就是，感谢你能耐心看完，也许你并不是一个程序员，也许你只是随便看看，看看我的简单而又乏味的生活…
希望你今天的生活变得更美好了一点，希望你能每天都开心！

---