简洁轻便的博客平台: Hexo详解

浅浅的花香味﹌ 2022-07-15 00:02 382阅读 0赞

### 什么是Hexo ###

[Hexo][] 是一个简单地、轻量地、基于Node的一个静态博客框架，可以方便的生成静态网页托管在github和Heroku上，引用Hexo作者 [@tommy351][tommy351] 的话：

快速、简单且功能强大的 Node.js 博客框架。A fast, simple & powerful blog framework, powered by Node.js.

### GitHub Pages是什么？ ###

GitHub Pages 可以被认为是用户编写的、托管在github上的静态网页。由于它的空间免费稳定， 可以用于介绍托管在github上的Project或者搭建网站。有两种形式: Project Site 和 User/Org Site，二者之间的差异可以戳 [GitHub Pages][] 。基于 GP 创建Site是很方便的，这有一个简单的教程： [学习 Github Page 教你分分钟搭建自己的博客][Github Page]

gp 生成的网站的默认域名是 `username.github.io` 或者 `username.github.io/project-name` ，但gp是支持自定义域名的： [Custom Domain Name][] 。购买域名之后，可以和默认的二级域名进行绑定，教程参考： [购买域名、设置DNS][DNS]

更多关于gp的信息，可以戳： [Github Pages Help][]

### Hexo 的安装 ###

由于 Hexo 是基于 [Node][] ，安装前要先安装 Node。我的系统环境：

![mmAfQnJ.png_web][]

安装Hexo，要用全局安装，加-g参数。:

1.  `npm install -g hexo`

查看版本：

![umyy22.png_web][]

查看命令帮助：

![q26F3qZ.png_web][]

1、 `help` ： 查看帮助信息

2、 `init [文件夹名]` ： 创建一个hexo项目，不指定文件夹名，则在当前目录创建

3、 `version` ： 查看hexo的版本

4、 `--config config-path` ：指定配置文件，代替默认的\_config.yml

5、 `--cwd cwd-path` ：自定义当前工作目录

5、 `--debug` ：调试模式，输出所有日志信息

6、 `--safe` ：安全模式，禁用所有的插件和脚本

7、 `--silent` ：无日志输出模式

安装好后，我们就可以使用Hexo创建项目了。

![3mEfai.png_web][]

按照提示，切换到hexo-demo目录，运行 `npm install` 安装依赖，并启动Hexo服务器：

1.  `hexo server`
2.  `//the same as`
3.  `//hexo s`

![mmU7Nb6.png_web][]

这时端口4000被打开了，我们能过浏览器打开地址， [http://localhost:4000/][http_localhost_4000] 或者 [http://0.0.0.0:4000][http_0.0.0.0_4000] 。

![BziIBb2.png_web][]

Hexo的默认界面，Hexo2.4+后采用的默认主题是 [Landscape][]

### Hexo的配置 ###

#### 目录和文件 ####

![yIVFfaZ.png_web][]

1、 `scaffolds` ：模板文件夹，新建文章时，Hexo 会根据 scaffold 来建立文件。Hexo 有三种默认布局： `post` 、 `page` 和 `draft` ，它们分别对应不同的路径。新建文件的默认布局是 `post` ，可以在配置文件中更改布局。用 `draft` 布局生成的文件会被保存到 `source/_drafts` 文件夹。

2、 `source` ：资源文件夹是存放用户资源的地方。

3、 `source/_post` ：文件箱。（低版本的hexo还会存在一个 `_draft` ，这是草稿箱）除 \_posts 文件夹之外，开头命名为 \_ (下划线)的文件/ 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去

4、 `themes` ：主题 文件夹。Hexo 会根据主题来生成静态页面。

5、 `themes/landscape` ：默认的皮肤文件夹

6、 `_config.yml` ：全局的配置文件，每次更改要重启服务。

低版本的Hexo还会生成scripts文件夹，里面用于保存扩展Hexo的脚本文件。

#### 全局配置 ####

可以在 `_config.yml` 中修改：

1.  `# Hexo Configuration`
2.  `## Docs: http://hexo.io/docs/configuration.html`
3.  `## Source: https://github.com/hexojs/hexo/`
4.  ``
5.  `# Site 站点配置`
6.  `title: Hexo-demo #网站标题`
7.  `subtitle: hexo is simple and easy to study #网站副标题`
8.  `description: this is hexo-demo #网栈描述`
9.  `author: pomy #你的名字`
10. `language: zh-CN #网站使用的语言`
11. `timezone: Asia/Shanghai #网站时区`
12. ``
13. `# URL #可以不用配置`
14. `## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'`
15. `url: http://yoursite.com #网址，搜索时会在搜索引擎中显示`
16. `root: / #网站根目录`
17. `permalink: :year/:month/:day/:title/ #永久链接格式`
18. `permalink_defaults: #永久链接中各部分的默认值`
19. ``
20. `# Directory 目录配置`
21. `source_dir: source #资源文件夹，这个文件夹用来存放内容`
22. `public_dir: public #公共文件夹，这个文件夹用于存放生成的站点文件`
23. `tag_dir: tags #标签文件夹`
24. `archive_dir: archives #归档文件夹`
25. `category_dir: categories #分类文件夹`
26. `code_dir: downloads/code #Include code 文件夹`
27. `i18n_dir: :lang #国际化文件夹`
28. `skip_render: #跳过指定文件的渲染，您可使用 glob 来配置路径`
29. ``
30. `# Writing 写作配置`
31. `new_post_name: :title.md # 新文章的文件名称`
32. `default_layout: post #默认布局`
33. `titlecase: false # Transform title into titlecase`
34. `external_link: true # Open external links in new tab`
35. `filename_case: 0 #把文件名称转换为 (1) 小写或 (2) 大写`
36. `render_drafts: false #显示草稿`
37. `post_asset_folder: false #是否启动资源文件夹`
38. `relative_link: false #把链接改为与根目录的相对位址`
39. `future: true`
40. `highlight: #代码块的设置`
41. `enable: true`
42. `line_number: true`
43. `auto_detect: true`
44. `tab_replace:`
45. ``
46. `# Category & Tag 分类 & 标签`
47. `default_category: uncategorized #默认分类`
48. `category_map: #分类别名`
49. `tag_map: #标签别名`
50. ``
51. `# Date / Time format 时间和日期`
52. `## Hexo uses Moment.js to parse and display date`
53. `## You can customize the date format as defined in`
54. `## http://momentjs.com/docs/#/displaying/format/`
55. `date_format: YYYY-MM-DD`
56. `time_format: HH:mm:ss`
57. ``
58. `# Pagination 分页`
59. `## Set per_page to 0 to disable pagination`
60. `per_page: 10 #每页显示的文章量 (0 = 关闭分页功能)`
61. `pagination_dir: page #分页目录`
62. ``
63. `# Extensions 扩展`
64. `## Plugins: http://hexo.io/plugins/ 插件`
65. `## Themes: http://hexo.io/themes/ 主题`
66. `theme: landscape #当前主题名称`
67. ``
68. `# Deployment #部署到github`
69. `## Docs: http://hexo.io/docs/deployment.html`
70. `deploy:`
71. `type:`

一般主题下有一个 `languages` 文件夹，用于对应 `language` 配置项。比如在 ejs 中有：

1.  `<%= __('tags') %>`

`language` 的配置项是 `zh-CN` ，则会在 `languages` 文件夹下找到 `zh-CN.yml` 文件中对应的项来解释。

#### 修改全局配置时，注意缩进，同时注意冒号后面要有一个空格。 ####

#### 主题配置 ####

主题的配置文件在 `/themes/主题文件夹/_config.yml` ，一般包括导航配置(menu)，内容配置(content)，评论插件，图片效果(fancybox)和边栏(sidebar)。

Hexo提高了大量的主题，可以在全局配置文件中更改主题：

1.  `# Extensions 扩展`
2.  `## Plugins: http://hexo.io/plugins/ 插件`
3.  `## Themes: http://hexo.io/themes/ 主题`
4.  `theme: 你的主题名称`

主题的文件目录必须在 themes 目录下。 [Hexo主题更换教程][Hexo 1]

更多Hexo主题戳此： [Hexo Themes][] 。

### 基本使用 ###

写文章通过 `new` 命令新建一篇文章：

1.  `$ hexo new [layout] <title>`
2.  `//same as`
3.  `hexo n`

其中layout是可选参数，默认值为 `post` 。

![EfyiMzf.png_web][]

如果没有设置 `layout` 的话，默认使用 `_config.yml` 中的 `default_layout` 参数代替。如果标题包含空格的话，需用引号括起来。

Hexo提供的layout在 `scaffolds` 目录下，也可以在此目录下自建layout文件。新建的文件则会保存到 `source/_post` 目录下。

![J3qma26.png_web][]

![iyAB3uQ.png_web][]

然后启动服务器，便能看到刚刚发表的文章

![jARzu2m.png_web][]

发表的文章会全部显示，如果文章很长，就只要显示文章的摘要就行了。在需要显示摘要的地方添加如下代码即可：

1.  `以上是摘要`
2.  ``
3.  `以下是余下全文`

![qURZVrR.png_web][]

刷新，就能够看到只显示摘要了，同时会提供 `Read More` 的链接：

![eyUJnuZ.png_web][]

这个文字可以更改，在主题的配置文件( `themes/主题文件夹/_config.yml` )中，找到`Content` ：

1.  `# Content`
2.  `excerpt_link: Read More #可以更改成想要显示的文字`
3.  `fancybox: true`

此外，可以修改文章的参数，打开 `scaffolds/post.md` ，增加类别和描述：

![NRBVzu.png_web][]

再新建一篇文章，就能看到增加了文章参数：

![MBjUfa.png_web][]

`tags` 和 `categories` 有多个，则用数组形式。

部署在部署之前，需要通过命令把所有的文章都做静态化处理，就是生成对应的html, javascript, css，使得所有的文章都是由静态文件组成的：

1.  `hexo generate`
2.  `//same as`
3.  `hexo g`

![bQBvaur.png_web][]

在本地目录下，会生成一个public的目录，里面包括了所有静态化的文件。

生成静态文件之后，如果要发布到github，还需要配置 `deploy` 指令。在全局的配置文件中找到 `deploy` ：

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

然后还要安装 `hexo-deployer-git` ：

1.  `npm install hexo-deployer-git -S`

最后利用hexo指令发布到github：

1.  `hexo d`
2.  `//same as`
3.  `hexo deploy`

![nAvIzqE.png_web][]

在github上便能看到刚刚部署的静态web网站：

![AjEvmq.png_web][]

如果部署的是个人页，新建的仓库必须的 your-user-name.github.io 。

### 总结 ###

Hexo常用命令：

1.  `hexo n == hexo new`
2.  `hexo g == hexo generate`
3.  `hexo s == hexo server`
4.  `hexo d == hexo deploy`

文章使用的repo： [https://github.com/dwqs/dwqs.github.io.git][https_github.com_dwqs_dwqs.github.io.git]

访问地址： [https://dwqs.github.io/][https_dwqs.github.io]

使用的主题： [https://github.com/dwqs/nx][Hexo 1]

[Hexo]: https://hexo.io/
[tommy351]: https://github.com/hexojs/hexo
[GitHub Pages]: https://pages.github.com/
[Github Page]: http://www.ido321.com/78.html
[Custom Domain Name]: https://help.github.com/articles/about-custom-domains-for-github-pages-sites/
[DNS]: http://zipperary.com/2013/05/27/domain-name-and-dns/
[Github Pages Help]: https://help.github.com/categories/github-pages-basics/
[Node]: https://nodejs.org/
[mmAfQnJ.png_web]: http://img0.tuicool.com/mmAfQnJ.png!web
[umyy22.png_web]: http://img1.tuicool.com/umyy22.png!web
[q26F3qZ.png_web]: http://img1.tuicool.com/q26F3qZ.png!web
[3mEfai.png_web]: http://img2.tuicool.com/3mEfai.png!web
[mmU7Nb6.png_web]: http://img1.tuicool.com/mmU7Nb6.png!web
[http_localhost_4000]: http://localhost:4000/
[http_0.0.0.0_4000]: http://0.0.0.0:4000/
[BziIBb2.png_web]: http://img2.tuicool.com/BziIBb2.png!web
[Landscape]: https://github.com/hexojs/hexo-theme-landscape
[yIVFfaZ.png_web]: http://img2.tuicool.com/yIVFfaZ.png!web
[Hexo 1]: https://github.com/dwqs/nx
[Hexo Themes]: https://github.com/hexojs/hexo/wiki/Themes
[EfyiMzf.png_web]: http://img1.tuicool.com/EfyiMzf.png!web
[J3qma26.png_web]: http://img2.tuicool.com/J3qma26.png!web
[iyAB3uQ.png_web]: http://img0.tuicool.com/iyAB3uQ.png!web
[jARzu2m.png_web]: http://img1.tuicool.com/jARzu2m.png!web
[qURZVrR.png_web]: http://img1.tuicool.com/qURZVrR.png!web
[eyUJnuZ.png_web]: http://img2.tuicool.com/eyUJnuZ.png!web
[NRBVzu.png_web]: http://img0.tuicool.com/NRBVzu.png!web
[MBjUfa.png_web]: http://img0.tuicool.com/MBjUfa.png!web
[bQBvaur.png_web]: http://img0.tuicool.com/bQBvaur.png!web
[nAvIzqE.png_web]: http://img1.tuicool.com/nAvIzqE.png!web
[AjEvmq.png_web]: http://img0.tuicool.com/AjEvmq.png!web
[https_github.com_dwqs_dwqs.github.io.git]: https://github.com/dwqs/dwqs.github.io.git
[https_dwqs.github.io]: https://dwqs.github.io/