【快速开始】你好, Hexo Butterfly (一)
如你所见,我的博客网站现在使用的就是
Hexo
框架 +Butterfly
主题。Hexo
框架非常适合做中小型网站、个人博客等类型的网站快速搭建,而在其众多 主题样式 中,我唯独相中了Butterfly
。考虑到国内开发者不一定全部都擅长使用梯子,此处放出的链接均来自于
Gitee
。
将网址中的gitee
.com 替换为github
.com 即可访问对应的GitHub
页面。
Quick Start 快速开始
准备工作
你需要先安装
Git
和Node.Js
。
具体安装步骤参照安装程序走,在安装Node.js时一定要勾选Add to path
,否则后期操作将变得繁琐。成功安装后,在命令提示符中使用命令
git
和npm
是不能报错的,否则即为安装失败。
安装 Hexo
再然后,就需要安装 Hexo 框架了。
1 | $ npm install hexo-cli -g |
避免踩坑
你首先需要下载并安装 hexo-renderer-pug
hexo-renderer-stylus
这两个包。
运行以下命令安装这两个包。
1 | $ npm install hexo-renderer-pug hexo-renderer-stylus --save |
卸载 可能引起问题的插件
警告:如果有安装的话,请卸载掉如下两个插件 hexo-inject
hexo-neat
,它们会导致主题不能正常运行。
1 | $ npm uninstall hexo-inject hexo-neat |
完成以上步骤之后,就可以开始尽情 Coding 啦。
新建项目
假设我把 D:\ 目录用作博客的源代码目录,那么,新建项目的过程将是这样的:
先使用 cd
命令将工作目录切换到 D:\Blog\ ,然后新建项目。
1 | $ cd D:\ //切换目录 |
由于 Hexo 默认的端口号是:4000
,现在可以访问:http://localhost:4000/
并看到你的博客网站了。
注意:从现在起,
命令行
的工作目录
需要一直保持在项目根目录下。
安装 Butterfly
在上一步中可以看到,Hexo 默认的主题是 landscape [在项目根目录中的 _config.yml
中 100 行左右看到(theme: landscape
)]。
通过以下命令将 ButterFly 主题从 Git 上克隆下来。
1 | $ git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly |
克隆完毕之后,一般可以看到 /Themes/Butterfly/
目录的存在。
在 _config.yml
中 100 行左右修改(theme: butterfly
)。
有关
_config.yml
文件的配置将在之后的博客中叙述。
升级建议
升级完成后,请到
Github
的Releases
界面或者文档七
查看新版的更新内容。里面会标注文件的变更内容(如果有的话),请根据实际情况更新你的配置文件_config.yml
。
本节结语
- 重点:保持 控制台 工作目录位于项目路径下。
- 重点:更新主题版本前先确认新版本内容将砍去哪些内容。