作为一名搬砖工，怎么可能没有一个自己的博客，在网上看见别个的blog多么的酷炫。心想自己也搞一个吧，一来可以将平时积累的经验记录成文档，二来万一以后跳槽也是一个加分项。于是乎在网上搜索了一大圈，五花八门的，有用自己服务器搭建，一听好麻烦，还有购买服务器，再看看自己的荷包（🤦♀️），想想还是先找个免费的吧。这不 Hexo 多合适啊，于是撸起袖子就是干。一路下来发现搭建也是很简单的，现在我就将我搭建的过程记录下来。Hexo 是一个快速、简洁且高效的博客框架，同时也支持 Markdown，简直不能太完美
安装
安装官网脚手架
npm install hexo-cli -g
初始化
使用命令初始化一个基础项目
hexo init blog-demo
用编辑器打开 blog-demo，我们可以看到里面目录结构
目录结构.png
其中：
source 文件夹主要放我们 Markdown 文档，themes 文件夹主要是网站主题相关的，_config.yml 主要是一些配置项
然后我们使用 hexo s（hexo server 的简写，官网有许多命令） 启动项目，打开 http://localhost:4000/ 就能看见网站运行起来了
blog.png
主题修改
最简单的blog就已经好了，但是发现好像风格给自己想象的不一样，不过没有关系，hexo 支持修改主题，官网也有具体说明，当然网上也有很多成熟的主题插件了，你可以下载下来直接使用，比如知乎上就列举了很多，下面我们就使用 next 的主题
安装主题插件
首先我们需要修改根目录下的 _config.yml 文件中的 theme 字段
theme: next
接着我们需要clone一份 next 主题到 theme 文件夹下
git clone https://github.com/next-theme/hexo-theme-next themes/next
这个时候我们再重启一下服务，就会发现界面已经修改了
修改主题配置
尽管主题修改了，但是还是不是很符合自己的预期。别急，next 也支持修改配置，其主要就是修改 next 文件夹下的 _config.yml 文件
- 修改布局
将上下改成左右
布局.png
将菜单栏放在右边
菜单栏.png
我们在修改的过程中，可以使用 hexo s --debug 来支持热更新，避免每次修改都重启服务器
- 修改语言
我们将语言切换成中文，如果配置文件中没有 language 可自行加上
中文.png
但是光修改 next 里面的配置是不行的，还需要修改根目录下 hexo 的配置，同样将语言修改成 language: zh-CN
- 添加友情链接
友情链接.png
- 添加头像
头像.png
- 支持打赏
将你的微信支付宝收款二维码图片放在 source 文件夹下的 images 文件夹下，当然你也可以另起目录，但要主要引用时的路径
打赏.png
注意：如果你的next版本不是最新，可能会当鼠标放上去后，下面的文字在转圈，感觉好晃👀，可以修改一下它的样式。在 source -> css -> _common -> components -> post -> post-reward.styl，修改它的样式就可以了，删除或者注释都可以
支付样式.png
- 添加菜单
我们可以新增一些菜单，需要在根目录下的 source 文件夹下新建对应的文件。比如新增一个“关于我”的菜单，那么我们就需要在 source 文件夹新建一个 about 的文件夹，里面再新建一个 index.md 文件就可以介绍自己了（也可以使用 hexo 命令生成新的页面，eg hexo new page "archives"）；然后再修改菜单配置
菜单.png
- 首页文章篇幅限制
这要看你的 next 版本是多少，在版本 v7.6.0 以前有个字段 auto_excerpt 可以自动截断文章内容作为摘要，但在后面的版本，官方不支持，建议设置 excerpt_description
开启篇幅设置.png
一种方式，你可以在你的文章要截断的地方加上 ``
添加更多.png
另外一种方式给每篇文章写 description，这种方式在详情页面，摘要显示的字体会很小
image.png
当然还有很多其他的配置，你也可以根据自己的需要去修改，这里就不在一一举例了
修改首页配置
我们还可以在首页加上一些简介，修改语言等；这个是修改根目录下的 _config.yml 文件
首页.png
部署
新建仓库
现在博客已经孵化出来了尝鲜版，是时候部署上去体验了；一听部署，是不是就需要服务器与域名啊，完了我啥也没有；没关系，全球最大的同性交友网站 github 就是你最好的选择。首先，你需要有个一个 github 账号（如果没有就申请一个），然后新建一个仓库，这个仓库的名字一定要和你 github 账号相同。比如我的 github 叫 cc616（不是昵称），那么就需要建一个仓库名为 cc616.github.io，这样仓库就建好了。接着你需要修改该仓库的设置
点击设置.png
配置.png
这样你就可以通过 https://cc616.github.io/访问你的网站了
修改配置
仓库建好了，我们需要新加一个包
npm install hexo-deployer-git --save
修改 _config.yml 里面的部署配置
部署.png
这样我们每次新增了文章后，就可以使用命令 hexo d 一键部署到GitHub Pages 上了
遇到的坑
图片显示不出来
你的图片在其他网站都能显示，但是你放在这里就显示失败，可能就需要在文章开头加上
<meta name="referrer" content="no-referrer" />
图片显示问题.png
总结
hexo 搭建博客真的是简单方便，一路下来我也就花了一天不到的时间，接下来就是往里面填充自己累积起来的知识了。其实这篇文章早在两年前就该写了，但是自己觉得这么简单，没有什么好记录。最近重新捡起写博客，才发现自己的搭的blog早已不知道在哪里了，网站上也只有那么两篇文章，说来也惭愧。正好自己重新搭建了，所以就把记录下来了，希望对你有用。不过这个有个缺点就是你需要自己的图床，用七牛云搭建一个也很简单，我曾经也搭建过，改天再写出来吧。如果你嫌麻烦，可以使用网上一些现成的，也可以像我一般把文章写在简书上，既可以提高文章宣传渠道，也可以有图床啦🤦♀️
网友评论