关于我从零开始搭博客这件事儿
关于我从零开始搭博客这件事儿
本文主要讲述了萌新从零搭建博客的一些小细节~
关于起因
其实早在2016年，那时候我还是高中生，就了解到Hexo框架下的精致博客，那是Material主题作者在简书发表的推广简介。那篇文章在我的收藏夹躺到现在。眼看该项目最近一条commit都是九个月前了，我才搭好，感觉像是看了一份糊在墙上的报纸。因为当时我觉得搭博客是一件非常麻烦的事，所以还没尝试就放弃了。最近，看到一位好友的博客，我又心血来潮，才下定决心。这一路下来，发现其实并不难。所以说，有时阻挡我们的不是荆棘，而是退却的心。
关于过程
我完全不懂Web知识，搭博客几乎就是照着别人的教程一步一步下来的。从挑域名到成功deploy大约花了四五小时，虽然是成功了，但是一路都是云里雾里的，完全不懂为什么，只知道Ctrl C + Ctrl V…回头再看，才有了初步的了解。接下来就是一堆配置工作，我这个从未接触过yaml的小白以至于不知道冒号后面要加空格而被坑了好一会儿。生而为人，我很抱歉🥲。
关于Material主题的使用
如何搭建hexo以及如何托管到github（抑或是自己的服务器）我就不赘述了，网上教程及官方文档已经说得很明白了。
Material主题的使用很简单，直接把项目clone到hexo的theme目录下
cd [你的主题目录]
git clone https://github.com/viosey/hexo-theme-material.git
然后修改hexo的_config.yml，找到theme字段，修改为clone下来的文件夹名，名字可以修改。没修改过的话，应该就是hexo-theme-material，以下都以 hexo-theme-material为例
theme: hexo-theme-material
还有一个坑， **需要手动将 hexo-theme-material 文件夹中的 _config.template.yml 复制一份并重命名为 _config.yml**。
如果你的博客是托管在github上，并且使用了自定义域名，请在博客的source目录下新建一个文件，命名为CNAME, 然后在里面写入你的域名。这样github就会自动识别custom domain，而不用你每次都去手动配置。最后：
hexo clean
hexo g
hexo d
就能看到主题部署成功啦！接下来就是按自己喜好配置主题咯！
一些小问题
如何建立一个自我介绍的页面？
先创建一个新页面，如下，该命令会在hexo的source目录下创建一个文件夹(文件夹名可自定义，以下就以intro为例)，这个文件夹和你的_posts是平行且隔离的。
hexo new page "intro"
成功后，intro文件夹下会生成一个index.md,不同于post页面，自定义的页面只能识别index.md并显示，你新建其他md，是不会被显示的（因为index.md会被渲染成index.html）。现在你就可以在index.md里写自己的介绍啦！当然，写完以后，如何在侧边栏添加一个入口呢？首先，打开主题的_config.yml,找到sidebar节点，然后找到sidebar节点下的pages节点,最后在pages节点下添加
关于: #这里的文字会显示在侧边栏，可以自定义
link: "/intro" # 这里是生成的page的目录，即我前面指令里的intro，不能乱改
icon: person #可以自定义图标，图标来自于material.io/icons,无需下载图标，直接填图标名即可
divider: false #是否显示下方分割线
完成后 hexo s，就可以预览效果啦！
如何在博客中使用图片？
使用hexo-asset-image插件：
npm install hexo-asset-image --save
然后在Hexo的_config.yml里配置 （如果不存在就添加进去）：
post_asset_folder: true
这个插件的作用有两个：一是当我们用 hexo new post新建文章的时候，它会自动在这个文章的同级目录下新建一个和文章同名的目录，用于存放资源。这样，我们在Typora中配置图片插入的方式为./${filename}就可以了（别忘了勾选优先使用相对路径），这个操作一下解决了上面那个方案的两个问题。但是问题是，我们之所以会有上面那个方案，是因为主题目录下的img目录渲染的时候会被复制到public目录里，最后部署到远端，而现在这个方式单纯建立一个目录，渲染的时候是会被忽略的。这就是这个模块的第二个作用，帮我们把这个资源目录也复制到public目录下，并且将图片的路径转为web上的绝对路径，现在可算两全了。
头图的特殊处理
对于文章的头图，即文章front matter配置中的thumbnail字段，我们不能像在文章中一样使用./{filename}/xxx.jpg这样的相对路径因为头部的yaml被渲染后是保持不变的，图片的位置不会已经不再是那个相对路径了，而且这个头图会在预览和详细两个页面都显示，所以使用相对路径肯定是不行的，我们只好手动改成绝对路径，格式为/{permalink}/xxx.jpg。
使用MathJax
MathJax可以让我们在markdown中使用并渲染公式。首先打开主题的的_config.yml，配置：
mathjax: https://cdn.bootcss.com/mathjax/2.7.1/latest.js
然后在博客的的front matter中配置math: true即可。
如何建立时光轴、标签云、图库等？
其实建立这些的原理和我上面说的建立“自我介绍”页面时一样的，本质也是建立一个新Page,只不过这个Page里的index.md的layout类型是特定的罢了。具体的方法参考上文以及官方文档。
如何在博客主页添加网易云音乐歌单/歌曲外链播放器？
这是什么呢？看图，或者到我的博客主页底部就能看到这个
那这是怎么是怎么实现的呢？其实主要得益于网易云音乐提供的外链播放器功能，首先登录网页版网易云音乐，登录以后，点击进入一个歌单，如下图
点击图片上指示的生成外链播放器，复制他给的代码就行了，一般像这样：
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=450 src="//music.163.com/outchain/player?type=0&id=135453255&auto=0&height=430"></iframe>
此时，如果你的歌单里包含没有版权的歌曲，网页会提示是无法生成外链播放器。这时看我图示标注的歌单id，把生成的外链中的id参数替换掉就行，即使这样，没有版权的歌曲还是无法播放的，但是聊胜于无嘛。当然，自己建立一个博客专用歌单也是阔以的。这个外链播放器我们可以选择插入到网页中，也可以直接在博客的markdown内插入。
2022年更新
不知何时开始，网易云外链播放器坏掉了，一直弹窗显示无法加载资源。原来以前包含版权保护歌曲的外链已经无法用之前的方式生成了，好像也没有解决办法，那就选一个没有保护歌曲的歌单吧，或者直接用单曲。
拓展模块
hexo-asset-image：帮助我们在博客中更方便地插入图片
hexo-deployer-git：使用
hexo g自动托管到Github平台hexo-post-hide：帮助我们隐藏某些博客，使用方法详见Github主页
hexo-reference：解决脚注渲染问题
本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。
本文链接：http://www.xjunz.top/post/HelloHexo/
