Hexo+GitHub个人博客搭建

Posted on | | Visitors:
Words count in article: 1.7k | Reading time ≈ 6

突然心血来潮想搭建一个自己的博客，此前我有在博客园写一些博客的习惯，但看到那些简洁漂亮的个人博客，我也有些心痒想自己搭建一个。今天刚好在B站看到UP主CodeSheep发的一个个人博客搭建指南的视频，于是跟着视频自己也做了一个，虽然视频只有20分钟，但却花了我整整一个下午才勉强算是把博客搭建起来了，我在此记录一下这个过程，以及在中途遇到问题后在网上找到的相应的解决方法，希望对之后想搭建个人博客的小伙伴有所帮助。（以下内容仅针对windows操作系统）

环境准备

需要安装Git、Node.js，通过在命令行输入git --version和 node -v查看是否安装有Git和Node.js以及获得安装的版本号。

同时，为了将博客部署在github上，还需要注册github账号，并将gitbhub账号与本地电脑关联起来。这部分可以参看：廖雪峰-Git教程

博客搭建

使用Hexo框架来搭建我们的个人博客，跟着这个28分钟的视频一步一步来，就可以得到一个最初版本的个人博客啦

手把手教你从0开始搭建自己的个人博客 |无坑版视频教程| hexo

这里总结几个常用的hexo指令：

  • hexo init-- 在当前所在目录新建一个网站
  • hexo new [filename]--创建一个名为filename的md文件，它被放在source/_post文件夹之下，这里的名字可以随便取，等到我们用md编辑器去写内容时，可以在编辑器内修改标题。
  • hexo s--在本地端口预览网站
  • hexo clean--清除缓存文件和已生成的静态文件，这个指令和hexo g配合使用，当我们对hexo的配置进行修改或添加新的文章到博客上时，都可以先hexo clean再hexo g，生成新的静态页面。
  • hexo g--生成静态文件
  • hexo d -- 部署网站，将本地的修改推送到远程

更换主题/配置Hexo

其实按着上面的视频一步步做基本没有什么问题，很快就能够完成，真正耗费我时间的是在显示图片、显示公式等这些上面视频没有提到的地方，这里我把我遇到的问题和在网上找到的解决方法都贴在这里。

显示图片

Markdown显示图片总是一个麻烦的事情，要么将图片保存在本地然后在文章中引用图片的相对路径，要么使用第三方的图床生成外部链接。解决Hexo中显示图片的一个有效方法：hexo+github上传图片到博客

显示公式

通常第一步是修改主题(themes)文件夹中的_config.yml，将里面的mathjax参数设置为true(为了加快渲染速度通常主题是会将这个选项关闭的)。

对于yilia主题，上述修改后只能显示一些简单的公式，复杂的公式还是无法显示出来，这个问题可以参见Hexo构建blog时渲染LaTeX数学公式的问题，通过更换Markdown引擎来解决

对于next主题，打开Mathjax开关后，需要在文章的Front-matter中也打开mathjax开关，参见：Hexo 的 Next 主题中渲染 MathJax 数学公式 (加上mathjax: true)

yilia主题

在视频中up主演示了将我们博客换成yilia主题的过程，我一开始也是在研究这个主题，但出现一个问题，即是它的tag页面和categories页面在配置后都不能显示内容（一片空白），试了网上的办法都不管用，我也不知道问题出在哪儿，文章分类这个功能对我来说不可或缺，所以在折腾几个小时后放弃了这个主题，但在这个过程中还是找到一些比较有价值的内容。

  • Hexo yilia 主题一揽子使用方案 yilia主题在查看所有文章时会出现缺失模块的错误，这里照着它的提示来就OK，包括在执行命令cnpm i hexo-generator-json-content --save时，我遇到了报错：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    F:\myblog>npm i hexo-generator-json-content --save
    npm WARN rm not removing F:\myblog\node_modules\.bin\swig.cmd as it wasn't installed by F:\myblog\node_modules\_swig-templates@2.0.3@swig-templates
    npm WARN rm not removing F:\myblog\node_modules\.bin\swig as it wasn't installed by F:\myblog\node_modules\_swig-templates@2.0.3@swig-templates
    npm ERR! path F:\myblog\node_modules\hexo-deployer-git\node_modules\.bin\swig.cmd
    npm ERR! code EEXIST
    npm ERR! Refusing to delete F:\myblog\node_modules\hexo-deployer-git\node_modules\.bin\swig.cmd: is outside F:\myblog\node_modules\hexo-deployer-git\node_modules\swig-templates and not a link
    npm ERR! File exists: F:\myblog\node_modules\hexo-deployer-git\node_modules\.bin\swig.cmd
    npm ERR! Move it away, and try again.

    npm ERR! A complete log of this run can be found in:
    npm ERR!     C:\Users\xxx\AppData\Roaming\npm-cache\_logs\2019-12-11T06_25_52_957Z-debug.log

    这里就按照报错提示把相应文件移除就OK了。

  • 解决 Hexo 搭建博客显示不出分类、标签问题 这个就是我遇到最头疼的问题了，在yilia主题下没有实现出来，只好作罢，这个解决方法可以参考。

  • Hexo+Github实现相册功能 这个还没有尝试，这种可有可无的等到之后有闲的时候再弄吧

next主题

在yilia主题折腾了许久还是没弄出来分类、标签的设置，只好换到next主题，结果很快就配置好了=_= ，而且页面看起来也更加舒服，像文章目录啥的都比yilia来得好看。记录一些next主题的操作

最后

七零八落地写了一些，毕竟今天花了可以说是一整天的时间在搞这个了，还是很有必要把这些血泪史记在这里，之后博客的内容也会越来越丰富起来。反思起来，我花了很多时间在这些所谓的工具选择上，比如怎么用什么样的编辑器、是用做电子笔记还是就在纸上写笔记等，但无论哪种方式，它们都只是一种承载知识的载体而已，真正有价值的还是学习过程中我们学到的、理解到的知识，花一些时间和精力在学习方法、学习工具上是可以的，但一定不能本末倒置了，算是对自己的一些警勉吧。

您的赞赏将会是我前进的巨大动力