Hello,Hexo! Windows平台下搭建自己的个人博客

Motivation

刚进大学就看到很多程序员总结作为技术人应该写技术博客，写博客的诸多益处就不赘述了。

去年(2019年)的某一天，在B站推送里看到了B站UP主CodeSheep的视频更加有了想做博客的冲动，奈何学业繁忙，计划这个寒假做博客的，由于沉迷逛B站看剧无法自拔，一直拖到现在╮(╯▽╰)╭，现在能把博客做起来还是挺开心的o(= ￣▽￣=)ブ

OverView

搭建博客时间：2020.2.28 - 2020.2.29

框架：Hexo

主题：Butterfly

首先参考了CodeSheep的B站视频，但是由于这个视频是使用MACBook开发的，也就是macOS系统，和在Windows下开发还是有点区别，我跟着做的时候踩了很多坑。后面又找了CSDN上的一篇在windows下搭建博客的文章做参考，主题是在知乎上找的。
搭建Hexo花了一天，配主题花了一天。期间遇到的问题也搜集了很多博客，这里向我参考过的所有资料以及视频致谢！

最后贴上相关链接
CodeSheep_Bilibili视频
使用 Github Pages 和 Hexo 搭建自己的独立博客_CSDN

Process

---

0 Hexo？

Hexo是基于node.js制作的一个快速、简洁且高效的博客框架。
Hexo 可以将我们通过Markdown编写的文章生成静态的html页面，可托管在Github page上，不需要额外配置服务器。

1 安装Git，配置ssh密钥

由于之前已经在电脑里配置好Git以及ssh,这一步我直接略过了。

配置Git可参考廖雪峰老师的Git教程

Tips:安装完Git可使用Git bash里敲命令行了，进入某文件目录右键即可点击Git bash，不需要cmd了

2 安装nodejs

需要安装nodejs以及里面的npm工具
（不知为何我配置的时候总是把npm打成nmp ╮(╯▽╰)╭）
Windows：nodejs选择LTS版本

3 安装&初始化 Hexo

3.1 安装Hexo

创建一个文件夹blog，在此文件夹下打开Git bash，使用下面的命令安装Hexo：

Code

npm install -g hexo-cli

我使用了淘宝镜像加速

Code

npm install -g hexo-cli --registry=http://registry.npm.taobao.org

Tips:安装完Git & nodejs & Hexo都可在命令行里查看版本验证是否安装成功

Code

git -version
node -v
npm -v

现在该安装的就已经全部安装完毕

3.2 初始化hexo

在blog文件夹里打开Git bash，使用下面的命令初始化hexo：
hexo init hexo
运行后blog文件夹下会下新建一个文件夹hexo(上面命令里第二个hexo可任取名字)

进入hexo文件夹里打开Git bash，运行以下命令：
npm install

新建完成后，文件夹目录下有:

其中

Code

node_modules: 依赖包
public：存放生成的页面
scaffolds：生成文章的一些模板
source：用来存放文章
themes：主题
_config.yml: 博客的配置文件

在hexo目录下命令行运行：

Code

hexo g
hexo s

打开 localhost:4000 即可看见最初始的Hexo界面:

4 将hexo部署到github page上

登录GitHub.com后看到一个New repository，新建仓库

仓库命名要注意必须创建一个名称为你用户名后面加.github.io的仓库，
只有这样，将来要部署到GitHub page的时候，才会被识别。

也就是仓库名必须是 xxx.github.io 其中xxx就是你注册GitHub的用户名

例如我的github用户名是BelliumTang，则仓库名就是 BelliumTang.github.io

由于之前已经配置过ssh，所以这里不需要再配置，没有配置请记得配置后再进行以下操作。
可参考廖雪峰老师Git教程远程仓库ssh配置

最后就可以将hexo和GitHub关联起来，也就是将hexo生成的文章部署到GitHub上，打开hexo文件夹下配置文件 _config.yml，翻到最后，修改为:(YourGithubName就是你自己的GitHub账户)

Code

deploy:
  type: git
  repo: https://github.com/YourGithubName/YourGithubName.github.io.git
  branch: master

这个时候需要先安装deploy-git ，也就是部署的命令,这样你才能用命令部署到GitHub。

npm install hexo-deployer-git --save

安装deloy-git提示：

踩坑点
1.配置文件 _config.yml 里每个冒号后面都需要有空格，不然会出错
2.下图中的错误： repository 后的地址必须按上文所说的以https开头的git仓库地址,不然也会出错

最后在git bash中运行以下命令：

Code

hexo clean
hexo generate
hexo deploy

其中:
hexo clean清除了你之前生成的缓存。可缩写
hexo generate 顾名思义，生成静态文章，可以用 hexo g缩写
hexo deploy 部署文章，可以用hexo d缩写

注意deploy时可能要你输入username和password。

运行完成后，浏览器中打开 https://YourGithubName.github.io/ 就可以看见你的博客了

5 写自己的文章

接下来你就可以正式开始写文章了。

hexo new name

name可以任取你喜欢的文章名称

然后在source/_post中打开name.md文件，就可以使用Markdown开始编辑了。
当你写完的时候，再运行

Code

hexo clean
hexo g
hexo d

就部署成功了。

6 换主题

Butterfly主题官方文档中有详细步骤，按照步骤来就好了：

注意首次换主题要记得安装pug以及stylus的渲染器

其他的例如：头像、标签等元素的配置按照文档一个一个去对照着去做就可以。

我下面列一个文档里没有提到的：

如图所示如何修改浏览器框中的小图标？

解决方案： 找到Butterfly主题里的配置文件 _config.yml更改favicon

其中img文件夹路径为：

至此就全部完成啦！o(*￣▽￣=)ブ