1 Hexo介绍
Hexo是基于NodeJs
的静态博客框架,简单、轻量,其生成的静态网页可以托管在Github
和Heroku
上。
- 超快速度
- 支持MarkDown
- 一键部署
- 丰富的插件
2 环境准备
2.1 安装node.js
去nodejs官网下载对应系统的安装包,按提示安装。
检验安装成功:1
$ node -v
2.2 安装hexo
1 | npm install -g hexo-cli |
注意:Mac系统,则需要1
sudo npm install -g hexo-cli
3 利用Hexo搭建一个博客
3.1 创建博客目录inertia42.github.io
1 | $ hexo init inertia42.github.io |
3.2 生成静态页面
1 | hexo clean |
g 即generate
3.3 运行
1 | hexo s |
s 即server
然后打开浏览器,输入地址 localhost:4000 即可看到效果
4 发一篇文章试试
4.1 命令方式
1 | hexo new test |
此时会在source/_posts
目录下生成test.md
文件,输入些许内容,然后保存.
生成下,看看效果
1 | hexo clean |
访问 localhost:4000 即可
4.2 直接方式
在 source/_posts/下新建一个.md
文件也可
5 配置
网站的设置大部分都在_config.yml文件中,详细配置可以查看官方文档
下面只列出简单常用配置
- title -> 网站标题
- subtitle -> 网站副标题
- description -> 网站描述
- author -> 您的名字
- language -> 网站使用的语言
坑:进行配置时,需要在冒号:后加一个英文空格
1 | title: Droidlover |
6 换一个好看的主题
Hexo 中有很多主题,可以在官网查看。
这里我推荐hexo-theme-next,下面列举更换主题的一般套路:
6.1 下载主题资源
1 | $ git clone https://github.com/iissnan/hexo-theme-next themes/next |
6.2 应用下载的主题
在网站配置文件_config.yml中,配置theme
1 | theme: next |
next是主题名称,具体的可查看主题的文档
6.3 主题其他配置
可在/theme/{theme}/_config.yml
主题的配置文件下进行主题的配置。
接下来,可以执行万能的调试命令看看效果
1 | hexo clean |
7 部署到Github
7.1 有个github账号xxx
7.2 创建一个xxx.github.io的public仓库
如果您的账户名是inertia42,则需要创建一个inertia42.github.io的public仓库.
7.3 安装 hexo-deployer-git
1 | npm install hexo-deployer-git --save |
7.4 网站配置git
在网站的_config.yml
中配置deploy
1 | deploy: |
branch
为分支,默认为master
,可以不配置repo
为仓库地址,在github上新建仓库后,可复制此地址
7.5 部署
1 | hexo d |
d 即deploy
7.6 部署到Netlify
- 将Hexo源代码上传到Netlify上
- 登录Netlify
- 授权github并选择仓库
- 填写部署相关信息,部署命令填
hexo g
,部署目录为public
- 自动部署
8 贴标签,方便搜索
8.1 两个确认
确认站点配置文件有
1
tag_dir: tags
确认主题配置文件有
1
tags: tags
8.2 新建tags页面
1 | $ hexo new page tags |
此时会在source/
下生成tags/index.md
文件
8.3 修改source/tags/index.md
1 | title: tags |
date 可保持系统生成的时间,
1
2 type: "tags"
comments: false
很重要
8.4 在文章中添加tags
在文章xx.md
中添加:
1 | tags: |
多个Tag可按上面的格式添加。
其文件头部类似:
1 | title: TagEditText |
9 分类,给文章归档
9.1 两个确认
确认站点配置文件打开了
1
category_dir: categories
确认主题配置文件打开了
1
categories: /categories
9.2 新建categories文件
1 | $ hexo new page categories |
此时会在source
目录下生成categories/index.md
文件
9.3 修改categories/index.md
1 | title: categories |
date 可保持系统生成的时间,
1
2 type: "categories"
comments: false
很重要
9.4 在文章中添加categories
在文章xx.md中添加:
1 | categories: |
其文件头部类似:
1 | title: TagEditText |
10 添加评论功能
我使用的是valine提供的评论功能,这个功能已经集成在next主题里了,在主题配置文件中找到一下参数:
1 | valine: |
将其中enable
选项后的参数改为true
,再在appid和appkey中填入在leancloud上申请的值便可以使用valine的评论系统。leancloud的注册可见这里。
修改avatar
选项后的值可以修改自动生成的头像风格,详细参数见官方文档。
修改visitor
选项可以添加阅读量统计功能。