使用Hexo构建属于你的静态博客网站

Hexo与静态网站生成器

Hexo是什么?

Hexo是一个快速、简洁且高效的博客框架。Hexo使用Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

Hexo是一个使用JavaScript语言开发的静态博客网站生成器,可以让我们使用方便的Markdown格式来书写文章,然后生成结构完整、外观精美的静态网站文件。我们可以把生成后的静态网站部署到互联网上,让其他用户也能够访问。

静态网站生成器

所谓的静态网站(Static Site),就是指网站中所有的资源都是已经生成好的(静态资源),它们的URL路径结构跟文件目录结构相同,在浏览器访问时资源时得到的就是文件中原原本本的内容,而不是在访问时临时生成的(动态资源)。

Hexo是一款将功能侧重点放在博客功能上的静态网站生成器(Static Site Generator),当然,Hexo也不仅仅只能用于创建博客,创建通用的静态网站也没问题。

此外,世界上还有很多静态网站生成器,比较流行的有JekyllNextHugo等等,它们的开发语言和模板支持不一而足。StaticGen网站上收集了众多的静态网站生成器,并且根据一定的指标进行了排名,感兴趣的朋友可以了解一下。

使用Hexo创建博客网站

安装Hexo

环境准备

Hexo是使用JavaScript开发的一套命令行工具。在安装Hexo之前,我们需要先准备好以下环境:

  • Git
    Hexo需要使用Git克隆初始项目模板和默认主题到本地来新建项目。
  • Node.js
    Hexo是使用JavaScript编写的,而Node.js则是本地的JavaScript运行环境,可以在本地像运行Python脚本一样运行JavaScript脚本。
  • NPM
    NPM是Node.js的包管理器,用来方便地引入他人造好的轮子(软件包)。一般,NPM是随着Node.js一起安装的,但有时候NPM可能需要单独安装,比如在Linux上,如UbuntuManjaro等。

安装Hexo命令行工具

准备好以上的环境之后,我们就可以通过以下命令安装Hexo:

1
2
3
# 使用NPM安装`hexo-cli`包
# 参数`-g`表示全局安装,安装完成后可以在全局使用`hexo`命令
npm install -g hexo-cli

注意:在Linux或macOS中运行以上命令可能会出现permission denied的错误,这是因为使用-g参数时,为了让所有用户都能在全局使用hexo命令,NPM会将Hexo安装到系统目录中,但是当前用户没有系统目录的写入权限。解决这个问题的一个简单办法是,使用root身份来安装:

1
2
# 使用root身份安装
sudo npm install -g hexo-cli

运行以上命令还可能出现node-pre-gyppermission denied错误(比如在macOS上),这是因为NPM出于安全考虑,默认在使用root身份运行时自动切换为nobody用户,该用户没有写入文件的权限,此时需要添加参数--unsafe-perm来避免这种身份的自动切换,即强制使用root身份安装:

1
2
# 强制使用root身份安装
sudo npm install --unsafe-perm -g hexo-cli

验证安装

安装完成后,我们可以运行以下命令检查是否安装成功:

1
2
# Hexo的全局命令行工具
hexo

创建Hexo项目

创建一个初始Hexo项目

安装好Hexo命令行工具之后,我们就可以使用hexo命令来创建我们的博客项目了。

提示:为方便表示,以下所有以/开头的文件路径均为相对于项目根目录的相对路径,而非相对于系统根目录。

1
2
3
4
5
6
7
8
# 在当前目录下创建一个`blog`目录,作为博客项目的根目录
# Hexo会在项目根目录中使用Git克隆项目基础模板`hexo-starter`和默认主题`landscape`
# 一般情况下,Hexo还会自动安装NPM依赖(会有`/node_modules/`目录)
hexo init blog
# 切换到项目根目录
cd blog
# 如果没有自动安装依赖,则运行以下命令安装依赖
npm install

运行以上命令,我们就得到了一个初始的Hexo项目,通过修改、添加文件,我们可以定制自己的博客内容。

项目的主要目录结构

Hexo项目的主要目录结构如下(部分文件是在后期自动生成或需要时手动添加的):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
blog/                   // 项目根目录
|-- _config.yml // 项目的Hexo配置文件
|-- package.json // 项目的NPM配置文件,定义了项目的NPM属性以及依赖
|-- package-lock.json // package.json的依赖固定版本,详尽地列出了所有依赖的NPM包和具体的版本号
|-- node_modules/ // (Git忽略) NPM依赖安装目录,所有依赖的NPM包都会安装到这里
|-- scaffolds/ // 模板目录(创建文章时会以这里面的文件为模板)
|-- post.md // `文章`类型的文章模板
|-- page.md // `页面`类型的文章模板
|-- draft.md // `草稿`类型的文章模板
|-- sources/ // 资源目录(自定义资源文件都放在这里,如文章、CSS、字体、图片等)
|-- _posts/ // `文章`类型的文章存放目录
|-- _drafts/ // `草稿`类型的文章存放目录
|-- _data/ // 数据文件存放目录
|-- _其他文件 // 以下划线开头的文件名的文件不会输出
|-- 其他文件 // Markdown和HTML文件会先解析再输出,其余的保持目录结构复制输出
|-- themes/ // 主题目录,每个主题会作为一个目录放在这里
|-- landscape/ // 默认主题
|-- public/ // (Git忽略) 静态网站资源文件输出目录
|-- db.json // (Git忽略) 生成静态资源所用的数据文件

生成静态网站与本地服务器

创建好项目之后,我们可以随时运行以下命令生成最新版本的静态网站,并开启本地服务器以便在浏览器中访问:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 生成静态网站文件,生成的文件会输出到`/public/`目录中
hexo generate
# 或简写为
hexo g

# 生成静态网站文件,并监视文件改动,如果文件有改动则自动重新改动的部分
hexo generate --watch
# 或简写为
hexo g -w

# 开启本地服务器,默认访问地址为`http://localhost:4000/`
# 本地服务器在开启时,会自动在项目文件发生变动时重新构建(watch),刷新浏览器即可看到最新结果,不需要手动运行命令重新构建
# 本地服务器使用的不是`/public/`目录中的内容
hexo server
# 或简写为
hexo s

其他常用命令请参考Hexo文档 - 指令

Hexo基础配置

对Hexo项目的配置主要在两个地方:

  • 项目的/_config.yml配置文件
  • 所用主题的配置文件(一般是主题目录下的_config.yml文件,若主题支持,也可以是某个数据文件)

以上两种配置文件中一般都会有详细的注释或者给出参考文档,告诉我们每一个配置项的含义和怎么写。在这里,我仅列出/_config.yml中几个需要我们设置或者注意的配置项。

配置项 含义 注意 示例值
language 网站的语言,构建时会使用指定的语言输出主题内容 这个值实际上是根据当前主题的languages/目录里面的YML文件的文件名来的,并不是任意语言都可以 zh-CN,中文简体
zh-TW,中文繁体
timezone 网站的时区,构建中涉及时间或日期时会用到 时区写法列表:List of tz database time zones Asia/ShanghaiPRC等,都是中国北京时间
url 网站地址(首页的网址),构建中生成绝对URL时需要 如果配置不对,一般页面之间的链接没问题(使用的是相对URL),但任何涉及到本站绝对URL的地方都不对,如果网站要发布到互联网上,最好正确设置urlroot的值
如果网站是通过一个子目录访问,需要在urlroot中把子目录写出来,以便生成正确的绝对URL
https://yadelei.cn(域名)
https://yadelei.cn/blog(子目录)
root 网站首页相对于域名的路径 /(域名)
/blog/(子目录)
post_asset_folder 是否对文章生成同名资源目录 如果设置true,在新建文章或草稿时会自动创建同名目录,以存放文章中用到的资源文件。如果我们的文章中除了文字内容之外,还经常有其他资源,如图片等,那么最好设置为true,这样方便对资源进行管理,哪些资源属于哪篇文章一目了然,否则,需要自行管理各个资源文件的目录结构 true(生成)
false(不生成)
theme 当前使用的主题 主题的名称就是/themes/目录下主题的目录名 landscape

更多配置,请参考Hexo文档 - 配置

使用主题

博客是很个性化的东西,丰富多彩的主题是少不了的。Hexo的主题不仅可以提供精美的外观,还可以扩展许多功能。Hexo官网上为我们提供了数量众多的主题,这些主题由来自世界各地可爱的开发者们友情贡献。我们也可以自己开发主题,并贡献到Hexo主题列表中(我准备过段时间也贡献一个,嘿嘿)。

在贡献自己的主题之前,我们不妨先安装Hexo上最著名、功能最全、由国人主导开发(意味着功能更契合国内用户的需求)的NexT主题,了解一下Hexo中主题的使用方法,以及制作一个主题需要考虑哪些功能。

安装主题

安装NexT主题的过程很简单,本质上就是把NexT主题的文件以目录的形式放在/themes/目录下。我们可以在NexT主题的GitHub项目中下载最新Release版本,或者直接克隆该项目:

1
git clone https://github.com/theme-next/hexo-theme-next.git themes/next

如果是使用了Git管理我们的博客项目,那么更好的方式是使用Git的Submodule(子模块)功能来引入NexT主题,将NexT主题项目作为我们博客项目的一个子模块,避免包含重复代码,同时还可以使主题保持独立更新和选择版本:

1
git submodule add https://github.com/theme-next/hexo-theme-next.git themes/next

应用主题

/_config.yml配置文件中将theme的值设置为next(主题的目录名),然后重新生成(hexo g),即可看到焕然一新的博客网站。

配置主题

Hexo主题的目录中都有一个_config.yml,这就是主题的配置文件,里面列出了许多与主题相关的配置项,而且一般都有详尽的注释和参考文档,我们很容易根据说明修改配置项,定制主题。

有些时候,我们可能不希望通过修改主题的_config.yml配置文件来配置主题,这种情况多出现在对主题使用了Git进行版本管理并且想通过Git进行更新的情况下(需要解决冲突问题),尤其是通过Submodule引入的主题,主题的_config.yml文件根本不在博客项目的版本管理范围内。为了解决这个问题,有些主题支持使用数据文件的方式来配置主题。

比如NexT主题,允许使用/source/_data/next.yml数据文件作为配置文件,覆盖(可选择全部或部分)主题自身的_config.yml的配置项,使得我们的自定义配置跟主题自身分离。具体步骤请参考:NexT文档 - 数据文件

编写文章

外观基本上已经打理好了,以后的事情,就是日常写文章了。我们可以使用方便的Markdown格式来书写文章,最终通过Hexo自动生成生成精美的、语义化的HTML静态文件。Markdown是一种纯文本文件,可以使用任意的文本编辑器编写。如果不想纯手撸Markdown文本,也可以使用更加美观可读的可视化Markdown编辑器,如Typora(支持Windows、Linux、macOS)等。

布局

Hexo默认带有三种布局(在/scaffolds/目录中),对应三种不同类型、不同用途的文章:

  • post(默认)
    标准文章类型,存放在/source/_posts/目录中,就是会输出到静态网站中供他人访问的文章,我们写的博文用的就是这个。
  • page
    页面类型,就是网站上的一个页面,访客可见,按所需URL路径同样的目录结构存放在/source/目录中,文件名为index.md,一般用来做一个专题页,或者一个单页应用等。
  • draft
    草稿类型,存放在/source/_drafts/目录中,默认不会输出到静态网站(访客不可见),可以改为postpage

这3种是Hexo自带的布局,除此之外,我们也可以定义自己的布局,如相册等,只要将布局文件放在/scaffolds/目录中,然后在创建文章时使用对应的布局名称即可。

创建和发布文章

创建文章:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 使用默认布局创建文章(如果没有更改默认布局,那就是`post`)
hexo new 标题

# 使用`post`布局创建标准`文章`,文件路径为`/source/_posts/标题.md`
hexo new post 标题

# 使用`page`布局创建`页面`,文件路径为`/source/标题/index.md`
hexo new page 标题

# 使用`draft`布局创建`草稿`,文件路径为`/source/_drafts/标题.md`
hexo new draft 标题

# 使用自定义布局创建文章
hexo new 自定义布局名称 标题

创建文章之后,在/source/目录中就能看到新建的Markdown文件了,此时我们在这些Markdown文件中写入我们自己的内容,这就是编写文章了。

发布文章(更改文章类型):

1
2
3
4
5
6
# 将`草稿`改为(发布为)默认布局类型
hexo publish 标题
# 将`草稿`改为`文章`,新的文件路径为`/source/_posts/标题.md`
hexo publish post 标题
# 将`草稿`改为`页面`,新的文件路径为`/source/标题/index.md`
hexo publish page 标题

Front-Matter

文章除了内容之外,还会带有一些属性,比如发布时间等。Hexo没有使用数据库,纯粹使用文件来管理,文章的属性是以Front-Matter的形式写在文章的文件顶部的,以便和内容部分区分开。

Front-Matter是在文章最顶部以---开头和结尾的YAML块(或以;;;开头和结尾的JSON块),其中定义了一些属性数据,如标题title、发布日期date、分类categories、标签tags等,详情请参考Hexo文档 - Front-matter

部署网站

在我们的博客项目中,/public/目录就是静态网站的输出目录,如果直接复制这些文件去做服务器让人访问也是可以的,但每次都通过手动复制的方式更新网站太麻烦了,所以Hexo提供了一个部署的功能,让我们能够方便地将最新的静态网站文件放到某个位置,比如某台服务器上,达到随时更新网站的目的。

部署的本质就是文件的传输和存储,Hexo部署支持多种与文件传输和存储相关的方式,如Git、SSH、FTP等,不过,这些功能没有预置到Hexo中,使用前需要先安装对应的插件。

以Git部署为例,首先我们需要安装Hexo Git部署插件:

1
npm install hexo-deployer-git --save

接着在/_config.yml中添加部署配置,指定部署类型和Git远程仓库地址:

1
2
3
4
5
deploy:
# 部署类型
type: git
# 远程仓库地址
repo: https://github.com/yadelei/yadelei.github.io.git

然后运行以下命令之一即可完成部署(需要事先在本地配置好Git,确保能够写入远程仓库):

1
2
3
4
5
6
7
8
9
# 直接部署
hexo deploy
# 或简写为
hexo d

# 生成静态网站,然后部署
hexo g -d
# 同样的作用
hexo d -g

更多部署方式,请参考Hexo文档 - 部署

Hexo项目克隆

有时候,我们可能需要在其他计算机上管理我们的Hexo博客项目,如果使用了Git进行版本管理,就可以很方便地使用克隆功能来完成这一需求:

1
2
# 克隆远程仓库上的Hexo项目到本地
git clone <Hexo项目的远程仓库URL>

克隆下来的项目只包含了最基本的master分支的文件,没有安装依赖,也没有拉取子模块(意味着可能主题还没安装),此时的博客无法进行构建和预览,我们需要先进行依赖的安装和子模块的拉取:

1
2
3
4
5
6
# 安装依赖
npm install

# 如果主题是使用子模块进行管理,则还需要进行子模块的拉取
git submodule init
git submodule update

将博客网站部署到互联网

只运行在我们自己电脑上的博客网站是无法广博天下之客的,想要让我们的博客能够被他人访问,我们还需要将其部署到互联网上。

使网站在互联网上可访问

部署一个网站,让网站能够在互联网上可访问,本质上都是建立一个可供互联网访问的服务器(物理的或虚拟的)。我们的博客网站是静态网站,是最简单的网站类型,需要的服务器功能支持也是最简单的(完全不需要服务器端编程语言的支持)。要得到这样一个服务器,我们有很多方式可以选择,比如免费的Pages服务,可以购买的虚拟主机云服务器,甚至是自行搭建的物理服务器等等。下面简单介绍几种服务器部署方式。

Pages服务

Pages服务,是部分Git托管平台提供给用户的静态网站托管功能,让用户以一个项目做为静态网站资源,通过浏览器访问Pages服务分配的域名,即可直接访问到项目中的静态资源,如HTML页面等,就像这个静态网站放在了一台服务器上一样。

Pages服务一般是免费的,常用的Pages服务有GitHub Pages(国外)、Coding Pages(国内)等。部分Pages服务还允许用户绑定自己的域名。

我们可以将Pages服务当成是一个免费的服务器,在上面以一个Git项目的形式放上我们的静态博客网站,就可以让所有人都能访问。我们可以使用Hexo中的Git部署功能方便地更新网站。如果使用的Pages服务支持绑定域名的话,也可以购买一个域名,绑定后就可以通过购买的这个域名访问了。新注册域名很便宜,流程也很简单,相比Pages服务提供的默认域名,我们自己选购的域名更加个性化,更具有辨识度,而且,有一个域名在手上不止能用来做博客网站,还可以做其他很多事情。

虚拟主机

虚拟主机就是在一台物理机上划分出的多个虚拟的服务器(主机),使得一台物理机可以运行多个网站服务。虚拟主机不具备完整的服务器机器能力(即不能直接使用所在服务器上的操作系统),只是专门用于部署Web网站。除了支持最基本的静态网站功能,有的虚拟主机还提供诸如ASP、PHP等后端编程语言的运行环境,可以部署动态网站。

如果有一台虚拟主机资源,按照虚拟主机服务商提供的说明,上传网站的资源文件即可。

自有服务器

如果自己有服务器资源(不论是物理机、云服务器还是容器服务),也可以自己配置服务器来部署。一般先要在服务器上安装Web服务器软件,然后进行相关的配置。静态网站的配置是非常简单的,下面给出Nginx和Apache上的服务器配置参考,具体的值按实际需要来。

Nginx
1
2
3
4
5
6
7
8
9
10
11
12
13
server {
# 监听HTTP端口
listen 80;
# 设置服务器名称,也就是访问网站时的域名或IP
server_name yadelei.cn;
# 静态网站目录路径
root /srv/www/yadelei.cn;

# 处理所有请求
location / {
index index.html index.htm;
}
}
Apache
1
2
3
4
5
6
7
8
9
10
11
12
13
<VirtualHost *:80>
# 设置网站目录的访问权限
<Directory /srv/www/yadelei.cn>
Options FollowSymLinks
AllowOverride None
Require all granted
</Directory>

# 服务器名称
ServerName yadelei.cn
# 静态网站目录路径
DocumentRoot /srv/www/yadelei.cn
</VirtualHost>

CDN加速

我们的博客已经可以被所有人访问到了,但是,由于种种原因,比如服务器带宽很小、服务器在国外等,用户访问我们的网站可能非常慢。访问速度慢对用户体验的伤害是巨大的,为了解决这个问题,我们可以使用CDN服务来为我们的网站进行加速。

CDN,Content Delivery Network,内容分发网络。简单地说就是,由原来用户直接向服务器(源站)请求资源,变为用户向代理请求资源,代理发现资源没有缓存,就去向源站请求资源,然后再响应给用户,并将这个资源缓存在代理本地,下一次(未过期时),当代理附近又有用户请求这个资源时就不需要再找源站要,直接从代理本地把缓存的内容给用户就行。分布在各个地方的这种缓存代理组成的网络,就叫做CDN。CDN可以降低源站的负载,加快用户获取资源的速度(就近分发,且CDN的总带宽一般远高于单台服务器),从而大幅提高网站的性能,尤其是是像我们这种静态网站,是最适合使用CDN进行缓存加速的资源。

目前,市面上有许多服务商提供CDN加速服务,如阿里云腾讯云等,价格便宜,操作简单,用上之后立竿见影,效果拔群,对于静态网站来说,实乃必备之利器。

SEO

SEO,Search Engine Optimization,搜索引擎优化。基本的概念就是,通过了解搜索引擎的工作机制并加以利用,让自己的网站能在用户的搜索结果中排名尽量靠前。越靠前,就意味着在用户眼中出现的可能性越高,也就越可能有更多的人访问,有更多的流量。

如果自己的博客网站有推广需求的话,可以了解一下SEO。

更多玩法

Hexo的本质是静态网站生成器,虽然使用JavaScript开发,但其本身并不算是前端,而更像是一次性的后端。实际上,静态网站生成器可以使用任何编程语言开发。

静态网站生成器输出的静态网站,则是完全在前端范围内了,我们可以在其上使用任何浏览器可用的前端技术来丰富我们的网站。通过改写Hexo中的模板、制作主题等操作,我们可以自主控制Hexo的输出,为网站引入丰富多彩的前端技术,扩展网站的功能,实现在基础博客功能之外的更多玩法。


以上说的都是技术实现层面的东西,这些东西可以使我们的博客锦上添花,但并不是最核心的东西。对于一个博客来说,核心的东西只有一个,那就是内容,也就是我们的文章,坚持写下去,写高质量的东西,写给他人带来价值的东西,这才是一个博客的立身之本。

0%