Hexo - 10分钟0成本搭建博客系统

发表于 2020-04-07 分类于博客阅读次数：

前言

10分钟、0成本这两个词毫不夸张。对于许多想写博客的小伙伴来说。在哪里写博客一直是一个难题，有的人选择CSDN，有的人选择知乎、有的人选择简书，还有的人选择自己搭建博客系统。

PS：作为一名程序员，当然要用个性化的博客系统才有意思嘛。

所以对比了许多博客系统之后我选择了 Hexo.

想直接看怎么搭建的小伙伴，请跳至「二、开始！」阅读。

一、为什么选择 Hexo

1.1 Hexo 的优势

Hexo 官网对 Hexo 的一句话概括为：

A fast, simple & powerful blog framework

这句话概括了 Hexo 的优点：

快速搭建
简洁、方便
功能强大

在我个人使用 Hexo 的过程中，能够感觉到 Hexo 特别适合个人博客的编写。特别针对是程序员群体，使用 Markdown 标记语言，让写作者无需太关心排版和格式。如果配上 Git 版本管理和 GitHub Pages 的发布。那更是无需充钱，也能更强！

1.2 对比 WordPress

拿我自己的真实使用经历来说，在使用 Hexo 之前，很长时间我一直使用的 WordPress。WordPress就像博客界的老大哥，生态强大，系统强大，支持的东西很多。但正因为这样，使得 WordPress 变得重了起来。在使用时部署成本和管理成本较高。这里我自己总结了一下对比的表格：

项目	WordPress	Hexo
部署成本	高	极低
使用成本	低	中
费用	高	低
学习成本	中	高
管理成本	高	低

注：这里没有列出具体的对比项，仅是综合成了一个项目方便对比。比如 WordPress 部署成本包括：服务器、域名（备案）、数据库、PHP环境、性能要求等。

总结一下，在个人博客的场景：

如果没有一点儿程序基础。建议使用 WordPress.
如果有程序基础，建议使用 Hexo.

1.3 对比其他博客系统

其他的博客系统因为没有使用过，所以不敢妄言。在非静态博客上，WordPress 可以作为代表进行对比（参考上方）。静态博客上，Jekyll 给我个人的感觉各方面都不如 Hexo。

二、开始！

终于开始了~这里可以恰个表，看一下你的操作步骤加起来使用了多久？

2.1 准备工作

以下软件是需要准备的：

nodejs/npm - 官网地址
Git

如果不知道如何安装/使用请百度。
Windows 系统的控制台可以使用 GitBash.

2.2 安装 Hexo

打开 控制台
输入 npm install hexo-cli -g

输入后效果如下：

CD 到你的博客目录。比如我要在桌面创建一个目录，则 CD 到桌面。
输入 hexo init my_blog

这一步可能比较耗时，因为是从网上下载最新的 hexo 博客项目到本地。
执行效果如下：

输入 cd my_blog
输入 npm install
输入 hexo server

执行结果如下：

打开浏览器访问 http://localhost:4000/ 即可看到博客的样子了。

到这里，一个基础的博客系统就搭建完成了。这里使用的是默认主题 landscape.如果你觉得这个主题还 OK 的话，就可以开始你的写作啦。

这里简单介绍一下博客目录：

├── _config.yml 博客配置文件
├── db.json
├── node_modules 
├── package-lock.json
├── package.json
├── scaffolds 模板
│   ├── draft.md 新草稿的模板
│   ├── page.md 新页面的模板
│   └── post.md 新文章的模板
├── source 
│   └── _posts 文章目录
│       └── hello-world.md 自动生成的文章，可删除.
└── themes 主题目录
    └── landscape 默认主题（landscape）
            ├── _config.yml 主题的配置文件

在 Hexo 中，任何的页面、文章，我们都可以用 Markdown 文件来书写。所以在上图中，文章和页面的模板都是.md文件，创建时，都会以模板文件的格式创建。

2.3 写博客

输入 hexo n "第一篇博客"

输入后会在 source/_posts 目录下创建一篇新的第一篇博客.md文件。编辑它就可以开始写作啦。

生成的文件格式如下：

title: 第一篇博客
date: 2020-04-12 17:16:10
tags:
---

我们可以为这篇文章添加分类和标签，格式如下：

title: 第一篇博客
date: 2020-04-12 17:16:10
tags: [标签1,标签2]
categories: 分类名
---

在---之后的就是文章的正文了。文章的内容就写在这里。

关于写作相关的指令，深入的使用方式请参考官方文档链接，在「四、参考资料」中。

关于编辑器的选型：

Visual Studio Code (推荐) 清爽的写作环境，安装 Markdown 插件后支持可视化编辑。

IDEA/WebStorm/… 习惯使用 jetbrains 系列软件的可以使用。同样需要安装 Markdown 插件后支持可视化编辑。

Sublime Text

编辑器选型可以看自己的爱好。用任何文本编辑器都可以。Hexo 也提供可视化博客管理插件。详情可查看：https://github.com/jaredly/hexo-admin

2.4 发布到 Github Pages

Github Pages 是一个由 Github 提供给开源项目的免费静态网页部署服务。只需要你将静态网页文件提交到仓库，按照格式配置，即可使用。
成功部署后的域名为 ***.github.io 参考：https://csgajcr.github.io/
操作步骤如下：

拥有一个 Github 账号
新建一个仓库，仓库名字为 [你的账号名].github.io

比如我的账号名叫 csgajcr 那么我的仓库名称就需要叫 csgajcr.github.io

安装 Hexo git 部署插件

控制台执行命令 npm install hexo-deployer-git --save

注：在 Hexo 中，部署可以直接使用插件来部署，很方便。除了 git 之外也支持其他多种部署方式。请参考：https://hexo.io/docs/one-command-deployment

配置博客配置文件

打开 _config.yml.
将文件最后面 deploy 的配置修改为：

1
2
3

deploy:
- type: git
  repository: git@github.com:csgajcr/csgajcr.github.io.git #

发布

控制台执行命令 hexo clean && hexo d -g
发布成功后，就可以在你的 git 仓库下看到生成的静态文件啦。
此时访问 [你的账号名].github.io 即可查看你的博客了。

如果 Github Pages 未生效，到仓库设置中查看 Github Pages 选项是否正常。
正常的截图如下：

注：这里多说一句，部署的原理是将 hexo clean && hexo d -g 命令生成的文件提交到 Github 仓库（生成的文件在 public 目录下）。所以在排查一些问题的时候，可以查看生成的 public 文件夹下的网页文件是否正常。

三、常用功能

3.1 更换主题

如果你是一个专注写作，不在意博客主题的人，那么也许这里你可以选择跳过。默认的 landscape 主题美观度和支持度上都算不错。
如果你是一个有个性的人，那么你可以花几个小时的时间来选择和配置一款你自己喜欢的主题。
如果你是一个喜欢折腾的人，那么你可以花几天的时间，来定制化你的主题，并为你的主题增添很多独有的色彩。

主题的文件在 themes 目录下：
在一个初始的项目下，里面会自带一个 landscape 的文件夹，这便是主题的文件了。
那么如何更换主题呢？

选择一款你中意的主题，在这里选择。 https://hexo.io/themes/
这里我们随便拿一个举例，比如 A-Ayer 这里点进去，就是预览主题。在预览主题的最下方，会有主题的 `Github` 链接。

当然这是先预览再看主题安装的方式，如果你不想预览，你也可以直接在 Github 上搜索你想使用的主题。

一般来说在主题的 Github 仓库的 README 文件中有相应主题的配置教程。例如 A-Ayer 的主题配置教程如下：

每种不同的主题，安装方式都大致相同，参数配置可能会有所区别。这里就是大家主要花时间需要去折腾的地方了。

3.2 配置文件解析

详细全面的项目配置文件解析请参考「四、参考资料」中 Hexo 博客配置文件详解. https://hexo.io/zh-cn/docs/configuration.html
博客的整体配置文件路径(source/_config.yaml)，下面介绍的栏目都在此配置文件中修改。

网站标题 - title
顾名思义，修改后会影响博客的标题。例如：
1
title: Jcr's Blog
网站描述 - description
修改后会影响博客的描述信息。例如
1
description: 'Jcr - An Android developer '
网站部署链接 - url
部署链接会影响项目资源的生成，请设置自己实际的部署域名。例如：
1
2
url: http://blog.jcr.pub
root: /
其中 root 为博客所部署的 path 信息，如果设置不对，可能会导致网页的部分资源访问不到。

3.3 添加页面

在 Hexo 中，页面也是一个 markdown 文件。我们新建页面和新建文章有一点点区别。
新建页面的命令为：hexo new page [页面名称]。以新建关于页面的操作步骤举例：

执行 hexo new page about

执行成功后控制台会提示：

1	INFO Created: ~/Desktop/my_blog/source/about/index.md

一般的主题都会附带关于页面的配置（即为主题配置文件中包含 about: /about/），所以关于页面的新建就完成啦。

3.4 分类、标签和模板

我们挨个介绍吧。

模板

模板是指的我们新建文章或页面后，自动生成的 MD 文件里的内容。比如你的博客开头都是以某种格式的，就可以去模板里修改，修改后生成的新文章都会根据模板来创建。

分类、标签

文章的分类标签是在文章的信息定义处指定，例如：

title: Typescript学习记录
date: 2020-04-13 19:46:25
categories: javascript
tags: [javascript,前端,Web,typescript]

分类只能指定一个，标签可以多个。通过这种方式设置的标签和分类将会在博客的标签页和分类页中自动生成。

分类、标签的另一种配置方式：

title: Hexo - 10分钟0成本搭建博客系统
categories:
  - 博客
tags:
  - 博客
  - Hexo
  - 教程
date: 2020-04-07 17:00:00

3.5 其他

发布注意事项

每次发布之前，必须要执行 hexo clean ，否则将会导致一些奇怪的问题发生。如果你觉得每次发布都要执行两条命令很麻烦，可以整合一下。
修改 package.json 文件，在 script 一栏中，增加 release 这条指令：

"scripts": {
    "build": "hexo generate",
    "clean": "hexo clean",
    "deploy": "hexo deploy",
    "server": "hexo server",
    "release": "hexo clean && hexo d -g"
  },

之后再执行