前言

Hexo出自台湾大学生之手,是一款基于node.js的静态博客框架程序,使用方便,编译速度快,几道命令就能拥有一个自己的个人博客,比基于Ruby的Jekyll用起来很舒服。
Hexo相对于Wordpress来说,最大的区别就是一个完全静态,静态博客的特点:

  • 不用配置服务器
  • 不用数据库
  • 访问速度相当快
  • 支持markdown方式书写
  • 没有安全性可言(代码都托管在github或者gitcafe)
  • 更加注重博客内容

我的博客是托管在github pages上的,具体做法可以参考 https://pages.github.com/

环境准备

安装Node.js环境

Node.js官网下载相应平台的最新版本,安装即可。
我用的版本是:

安装Hexo

npm是node package manager的缩写,成功安装node后就可以使用了。

1
2
npm install -g hexo-cli
npm install # 根据package.json安装依赖模块

初始化

1
hexo init <folder>

也可以cd到目标目录,执行hexo init

生成静态页面

cd到你的init目录,执行generate命令,博客静态页面将会生成到目录hexo/public 下

1
hexo generate

本地启动预览模式

执行以下命令,启动本地服务,开启预览模式

1
hexo server

hexo会自动打开浏览器地址为 http://localhost:40000 的地址,一个博客的雏形就可以看到。最好使用现在浏览器,如Chrome、Firefox等,因为有些特性不被古老的浏览器不所支持。

写文章

hexo和jekyll一样,都可以用markdown来写博客,这也是吸引我的原因之一。
执行new命令,hexo会生成指定名称的文章至目录hexo/source/_posts/postName.md

1
hexo new [layout] 'postName' # 新建文章

其中layout是可选参数,默认值是post,具体有哪些值可以到hexo/scaffolds/目录下看,文件名就是layout名称。
其实也可以通过手动的方式在_posts目录下新建文章。

发布

写完第一篇文章就可以发布了,让我们拭目以待吧。在init的目录下执行以下命令,会在hexo根目录生成一个.deploy目录,放置编译后的html文件。

1
hexo delpoy

执行deploy命令之后,hexo的目录结构如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.
├── .deploy
├── node_modules
├── public
├── scaffolds
├── scripts
├── source
| ├── _drafts
| └── _posts
| └── about
| └── 404.html
| └── CNAME
├── themes
├── _config.yml
└── package.json

  • .deploy:执行hexo deploy命令后准备发布的内容
  • node_modules:执行npm install安装的组件
  • public:执行 hexo g命令后,输出的静态html内容
  • scaffolds:脚手架,layout模板文件目录
  • scripts:扩展脚本目录,可以自定义javascript脚本
  • source:文章的源码目录,该目录下的markdown和html均会被hexo处理;404文件、CNAME文件都应该放在这里
    • drafts:草稿
    • posts:要发布的文章
  • themes:主题
  • _config.yml:全局配置文件,大多数设置都在这里
  • package.json:配置文件,说明nodejs依赖

常用命令总结

1
2
3
4
5
6
hexo new "postName" # 新建文章
hexo new page "about" # 新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口(默认端口4000,'ctrl + c'关闭server)
hexo deploy #将.deploy目录部署到GitHub
hexo clean # 有时候配置没有立即生效需要删除cache

如果觉得以上这些命令太长的话,可以使用对应的简写方式:

1
2
3
4
hexo n === hexo new # 新建文章
hexo g === hexo generate # 生成html
hexo s === hexo server # 启动预览
hexo d === hexo deploy # 一键发布

自定义博客

主题

首先要下载主题放在themes目录下,

1
2
cd hexo/themes
git clone remote_themes_url

然后修改配置文件_config.yml 的 theme配置项:

1
2
3
4
5
6
7
8
# Extensions
## Plugins: https://github.com/hexojs/hexo/wiki/Plugins
## Themes: https://github.com/hexojs/hexo/wiki/Themes
theme: jacman
exclude_generator:
Plugins:
- hexo-generator-feed
- hexo-generator-sitemap

配置发布信息

在根目录下_config.yml文件中添加deploy配置项,每次执行hexo d命令后会自动把deploy目录中的内容push到github上。

1
2
3
4
5
6
# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:
type: github
repository: https://github.com/FrankFan/frankfan.github.io.git
branch: master

添加自定义页面

执行以下命令,可以添加一个新页面:

1
hexo new page "about"

该命令会生成hexo/source/about/index.md文件,该文件继承了站点的风格,只需编辑编辑markdown文件即可。
最后不要忘记在theme的配置文件中显示出来:

1
2
3
4
5
##### Menu
menu:
首页: /
归档: /archives
关于: /about

添加统计

hexo默认使用Google Analytics,但是ga经常被墙从而会导致一些没有翻墙工具的用户加载速度过慢,转而使用百度统计。添加统计配置很简单,编辑theme目录下的_config.yml文件,增加配置项:

1
baidu_tongji: true

然后新建文件 theme/jackman/layout/_partial/baidu_tongji.ejs , 内容如下:

1
2
3
4
5
<% if (theme.baidu_tongji){ %>
<script type="text/javascript">
#你的百度统计代码,可以从百度统计官网注册获得
</script>
<% } %>

最后,编辑文件 hexo/themes/jackman/_partial/footer.ejs,在最后添加一行代码:

1
<%- partial('baidu_tongji') %>

添加自定义(微博)挂件

除了hexo默认提供的挂件外,还可有自定义小挂件,比如添加一个微博挂件。
首先在hexo/themes/jackman/layout/_widget/目录下新建一个ejs文件,如weibo.ejs,然后在配置文件hexo/themes/jackman/_config.yml中添加配置:

1
2
3
4
5
#### Widgets
widgets:
- category
- weibo
- rss

微博挂件代码可以从这里获取。

插件

首先安装插件:

1
npm install <plugin-name> --save

然后在hexo根目录下配置文件_config.yml中启用:

1
2
3
Plugins:
- hexo-generator-feed ## RSS插件
- hexo-generator-sitemap

插件的升级与卸载:

1
2
npm update
npm uninstall <plugin-name>

图床

图床问题可参考我之前的这篇文章,完美解决使用markdown书写文章的图片问题。

最后

更新 hexo:

1
npm update -g hexo

更新主题:

1
2
cd themes/theme_name
git pull

感谢

博主携每一颗DOM元素、每一个CSS样式以及每一句Javascript代码感谢以下网友的文章,排名不分先后:

  1. hexo你的博客
  2. 如何搭建一个独立博客——简明Github Pages与Hexo教程
  3. 感谢博客园伴我成长
  4. 感谢Dnspod提供免费域名解析服务,恭喜被企鹅收了
  5. 感谢强大的github提供免费资源托管