《了不起的Markdown》第七章

第七章 我的地盘我做主

  Hexo是一个快速、简洁且高效的博客框架工具。它可以把Markdown文档快速解析成静态页面，并支持各种漂亮的主题。所以我们可以使用熟悉的Markdown来写文章（编辑器可以随便选），然后通过Hexo把文章转换成静态页面，再把这些静态页面托管到GitHub上，然后绑定一个自己喜欢的域名，个人博客就搭建完成了。

7.1 搭建本地写作环境

7.1.1 环境配置

  使用Hexo必需要安装Node.js和Git。

• 安装Hexo

npm install hexo-cli -g

7.1.2 创建项目

• 创建项目的示例代码

# 创建并初始化博客项目
hexo init myblog
# 切换到项目
cd myblog
# 安装依赖
npm install

7.1.3 本地预览

• 生成静态网站，并在本地预览，示例代码

# 生成静态网站
hexo g
# 查看目录结构
tree -L l

打开http://localhost:4000/，查看效果。

7.1.4 新建文章

1. 新建一篇名为test的文章

   hexo new test
   

   注意： 新建文章默认会放到source/_posts/目录下。文件的后缀默认为md，新建时只需指定文件名即可。

2. 查看 test . md

   cat source/_posts/test.md
   

3. 编辑test.md，添加【##我是用来测试的】，可查看效果

4. 打开http://localhost:4000/

7.2 创建GitHub Pages

  GitHub Pages是一个静态网站托管服务工具，很多人使用GitHub Pages来搭建博客，因为它的空间免费而且性能稳定，网上也有很多实践案例，所以这里强烈推荐GitHub Pages。

1. 在GitHub上创建一个仓库。
   打开https://github.com/new，在【Repository name】框中输入[username.github.io]，然后单击【Create repository】创建一个新的仓库。
   注意： username是你的GitHub用户名。
   目前仓库中还没有内容，当我们把静态网站推送到GitHub之后，就可以通过http://bxiaopeng.github.io/来访问网站了。

2. 把Hexo生成的静态网站推送到GitHub上。

• 首先，修改_config.xml

deploy:
  type:git
  repo: https://github.com/XXX/XXX.github.io.git
  branch: master

注意： 在实际应用时，repo的值要改成你自己的仓库地址

• 然后，执行部署命令

# 执行部署命令
hexo d
# 若出现报错，则要安装一个插件hexo-deployer-git
npm install hexo-deployer-git -save
# 再次部署
hexo d

  至此，Hexo生成的静态网站就被推送到了前面在GitHub新建的仓库中。打开http://bxiaopeng.github.io/查看效果。

  注意： 现在博客的访问地址是github.io的子域名，并不是你自己的独立域名。独立域名相当于个人名片，使用独立域名更便于记忆，它的注册申请很简单，这里不再赘述。下面我们以阿里云为例，介绍如何绑定自己的域名。

7.3 绑定自己的域名

7.3.1 添加域名解析

  添加域名解析的操作步骤：登录阿里云→进入【控制台】→进入【域名】→选择【域名列表】→在【全部域名】中单击你的域名→进入域名基本信息页面→单击【域名解析】进入域名解析页面，在域名解析页面添加两条解析记录。在阿里云上添加解析记录后，就要回到本地操作环境中去绑定域名了。

注意： 【记录值】通过在终端执行ping xx.github.io来获得。【记录值】要改成你自己的GitHub Page地址。

7.3.2 绑定独立域名

• 绑定域名的操作步骤：

# 1. 切换到source目录

cd source

# 2. 新建一个CNAME文件

touch CNAME

# 3. 编辑CNAME，添加域名，如：www.XXX.com

# 4. 返回项目根目录

cd ..

# 5. 生成网站

hexo g

# 6. 部署到github

hexo d

等待一段时间后，打开www.XXX.com（所设置的独立域名）就可以正常查看页面了。

7.4 使用NexT主题

  Hexo有很多漂亮的主题，这些主题可以极大地简化操作，增强博客的功能，给我们带来更好的使用体验。

  NexT是一款非常流行的主题，下面以NexT为例，介绍如何安装和使用Hexo主题。其项目地址为https://github.com/theme-next/hexo-theme-next。

7.4.1 安装主题

Hexo安装主题的方式非常简单，只需要将主题文件复制到站点目录的themes目录下，然后修改一下配置文件即可。使用命令行的方式如下。

# 1. 下载代码

git clone https://github.com/theme-next/hexo-theme-next.git
cd theme-next
git tag -l

# 2. 切换到你想要的分支

git checkout tag/v6.0.1

# 3. 打开_config.yml，配置theme：hexo-theme-next

# 4. 本地预览

## 4.1 生成静态网站

hexo g --debug

## 4.2 开启debug模式

hexo s -debug

7.4.2 更新主题

更新主题的命令如下。

cd theme/next

git pull

7.4.3 主题配置

  如果想进一步配置NexT主题，请参考配置文档地址http://theme-next.iissnan.com/getting-started.html。NexT的配置文档全面、清晰且非常容易理解，所有配置只需要照着文档一步一步做就可以了。

7.4.4 新建页面

  导航栏上的菜单对应的是一个一个页面，但这些默认的内容可能满足不了我们的需求，不过我们可以灵活定制页面。下面就简单介绍一下如何新增及设置导航栏上的页面。

1. 新增导航栏页面

  如果要新增导航栏上的页面，需要在主题配置文件themes/hexo-theme-next/_config.yml中搜索menu，在menu中配置对应的导航栏选项。

• 示例

menu:
  home: / || home
  about: /about || user
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive

与英文对应的中文要在hexo-theme-next/languages/zh-Hans.yml中进行匹配

menu:
  home: 首页
  about: 关于
  tags: 标签
  categories: 分类
  archives: 归档

2. 新建页面

  在默认情况下，在导航栏上分类（categories）、标签（tags）、关于（about）等页面都是没有的。是在项目根目录下创建的。

# 创建分类页面

hexo new page categories

# 创建标签页面

hexo new page tags

# 创建关于页面

hexo new page about

  上述页面会被创建在source/页面/index.md中。

title:
date: 2021-01-01 00:00:00

3.禁用评论

  如果使用了评论，则默认所有页面都会开启评论模块，如果有些页面我们不需要显示评论，该如何禁用呢?只需要将comments设置为false即可。

title:
date: 2021-01-01 00:00:00
comments: false

4.指定页面类型

• type字段用来指定页面类型

title:
date: 2021-01-01 00:00:00
type: "tags"
comments: false

7.5 开始写作吧

  至此，环境搭建好了，主题也配置好了，接下来我们就可以专心写作了。

7.5.1 创建文章并熟悉布局

1.新建一篇文章

• 新建文章的命令

hexo new [布局](文章标题)

例如：

$ hexo new 第1篇文章

$ cat source/_posts/第1篇文章.md

title:
date: 2021-01-01 00:00:00
tags:

  _posts指的是默认布局，“第1篇文章”是文件名和标题。

  小提示： 在默认情况下，文章的文件名是不会带上创建日期的，如果我们想在文件名之前带上创建日期，需要这样设置：打开网站中的config.yml文件，搜索“newpostname”，并将其设置为newpost_name::year-:month-:day-:title.md。

  再新建文章时，就变成了如下所示的格式。

$ hexo new 第2篇文章
INFO Created: myblog/source/_posts/2021-01-01-第2篇文章.md

  布局理解为不同类型的Markdown文件，Hexo支持3种类型的布局。

布局	说明	存放路径
文章	用于发布文章	source/_posts
页面	导航栏上的类目	source
草稿	还未完成的草稿	source/_drafts

2.新建一篇草稿

• 新建一篇草稿的命令

$ hexo new draft 第1篇草稿
INFO Created: myblog/source/_drafts/第1篇草稿.md

• 创建的草稿被存放在了_drafts目录下，

$ cat source/_drafts/第1篇草稿.md

title:第1篇草稿
tags:

注意： 草稿是没有创建日期的。

• 如果草稿写完了，需要用到publish了

$ hexo publish _drafts 第1篇草稿
INFO Publish: myblog/source/_posts/第1篇草稿.md

7.5.2 使用写作模板

  同一类型的文章尽量使用模板，这可以让我们的文章风格保持统一，也能够节省时间。Hexo默认提供了3种写作模板，分别对应了3种布局。这3种模板被存放在了scaffolds（脚手架）目录下。

# 查看这3种写作模板

$ tree scaffolds

# 查看默认的文章模板

$ cat scaffolds/post.md

  使用-包裹的内容叫Front-matter，里面的参数title、date、tags用于指定文件中的变量；使用双括号{{}}包裹的部分是Hexo自动生成的值，如果值为空，则需要我们去填写。

• 修改一下post.md模板

title: {{ title }}
date: {{ date }}
updated: {{ date }}
tags:
categories:
comments: true

  说明： 从上到下依次为title（文章标题）、date（创建日期）、updated（更新日期）、tags（标签）、categories（分类）、comments（是否开启评论，默认为true）。

• 修改完成后，再次新建文章

$ hexo new 第3篇文章
INFO Created: myblog/source/_posts/2021-01-01-第3篇文章.md

• 查看文章，显示Front-matter已经改变

$ cat source/_posts/第3篇文章.md

title: 第3篇文章
comments: true
date: 2021-01-01 00:00:00
updated: 2021-01-01 00:00:00
tags:
categories:

• 一篇文章可能有多个标签和分类

title: 第3篇文章
comments: true
date: 2021-01-01 00:00:00
updated: 2021-01-01 00:00:00
tags:
- 标签1
- 标签2
categories:
- 分类1
- 分类2

  如果没有特别指定，在默认情况下，Hexo使用scaffolds/post.md模板新建文章。

# 想指定某个模板来新建文章
hexo new [模板名](文章名)

7.6 本章小结

  本文向大家介绍了如何使用Hexo+GitHub Page来搭建个人博客。如果从头到尾跟着做了一遍，则已经熟悉了Hexo的整个工作流程，如果想更深入地了解Hexo，请参考官方文档https://hexo.io/zh-cn/docs/。