Hexo搭建静态博客踩坑日记(二)

前言

Hexo搭建静态博客踩坑日记(一), 我们说到利用Hexo快速搭建静态博客.

这节我们就来说一下主题的问题与主题的基本修改操作.

---

起步

• chrome
• github
• hexo
• git
• node.js

寻找主题

chrome 搜索 github, 接着github全站搜索hexo-theme 相关项目.

为了方便, 这里给出主题地址推荐.

Hexo Star排名靠前的5个主题：

• iissnan/hexo-theme-next, star 15k
• litten/hexo-theme-yilia, star 7.2k
• bolnh/hexo-theme-material, star 3.8k
• ppoffice/hexo-theme-icarus, star 3.3k
• ...
• ...
• 本次以matery作为主题配置
• blinkfox/hexo-theme-matery, star 1.6k

数据由GitHub复制而来，排名请以实际为主

主题下载/配置修改

进入上次提到的hexo初始化目录 blog目录下.

>> cd blog
# 下载主题
>> git clone https://github.com/blinkfox/hexo-theme-matery.git theme/matery
...
...
# 修改配置
>> vim _config.yml # 不熟悉vim操作的 可以用text等文本文件打开修改 theme 对应的主题

...
...
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
# 找到theme:   按a或者i 进入编辑模式, 把主题修改为matery.
# 然后esc退出编辑模式, 按:键, 然后输入wq 回车即可保存退出
theme: matery
...
...

重启应用

# 清除缓存
>> hexo clean
INFO  Deleted database.
INFO  Deleted public folder.
# 构建生成 generate
>> hexo g
...
...
INFO  128 files generated in 186 ms
# 本地查看
>> hexo s
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.
# 发布到github or gitee
>> hexo d

这样就可以看到主题效果啦, 如果出现没有css样式, 推荐检查一下 theme: name 与 theme文件夹下的 主题文件夹名称是否一致.

效果展示: >>my-hexo-blog

后记

到这里应该可以简单的看到主题效果了, 如需个性化主题, 可阅读github下的readme文档(中英文自由看大佬您的选择). 基本操作就是 cnpm install 需要的插件 然后 修改blog下的 _config.yml. 还有就是修改主题文件夹(eg: matery文件夹)下的 _config.yml.

图片会后期根据建议补充, 还请大家有问题多多交流.