Hexo博客的搭建与可持续化部署

本文最后更新于:2022年10月18日 下午

记录一下本博客的搭建过程,简单易懂,~有手就行~

准备

用框架和轮子之前的第一件事肯定是去看官方的介绍和文档。

搭建 Hexo 博客,先上官网

~官方文档写的比我好,快去看~

另外搭建 Hexo 需要npm,找个网好的地方安装。如果安装遇到问题可以尝试换源。

创建

创建一个 Hexo 博客很简单,首先用npm安装Hexo

1
npm install hexo-cli -g

安装完成之后,创建博客:

1
2
3
hexo init <folder>
cd <folder>
npm install

<folder>是博客的工程文件夹,如果你已经创建好这个文件夹了,那么先cd进入这个文件夹之后hexo init就行了。

如果一切顺利,大概会这样显示:

1
INFO  Start blogging with Hexo!

现在就可以用hexo server在本机启动服务器。默认情况下会使用 4000 端口,访问网址为:http://localhost:4000/即可。如果报错FATAL Port 4000 has been used. Try other port instead.,说明端口被占用,用-p来手动指定端口。

在浏览器上访问Hexo本地服务器的网址,可以看到Hexo已经预置了主题和一些页面。接下来进行一些个性化配置。

配置

配置部分主要在_config.yml中进行。

官方的详细配置文档在此:https://hexo.io/zh-cn/docs/configuration

官方文档写的很详细了,按照文档把对应参数改成自己想要的,主要titlesubtitledescriptionkeywordsauthorlanguagetimezoneurlroot等。

写作

创建一篇新博客很简单,一条命令:

1
hexo new [layout] <title>

[layout]是布局,不加也行;title 是你要创建的文章文件名。

你的文章都存在source/_posts文件夹里,每篇文章就是一个Markdown文件。

写博客时现在上面添加 Front-matter 来指定文章的一些信息,例如:

1
2
3
4
---
title: Hexo博客的搭建
date: 2021-06-15 17:09:41
---

还有一些参数,可以查阅文档:https://hexo.io/zh-cn/docs/front-matter

下面就是各位大文豪发挥的时候了。

主题

Hexo有很多不错的主题,可以去https://hexo.io/themes/或 Github 搜索。

配置主题不难,具体请看你选择的主题的文档。

当前版本的主题配置文件是.config.<主题名>.yml,在.config.yml中更改theme为你的选择的主题,然后在对应配置文件修改主题设置。

部署

使用hexo generate命令可以简单地生成静态博客。生成成功后会在项目目录中生成一个public文件夹,里面就是你的博客了。

静态博客部署非常简单,服务器、虚拟主机、Github Pages、Netlify 等都可以部署。本质上就是访问服务器上的一些文件,不需要数据库、运行环境之类的东西。

这里我选择的是 Netlify。注册账号后把你的网站文件夹拖拽进去就完成了,极其简单,真·有手就行。

*大陆访问 Netlify 的的配置界面可能需要科学上网。访问网站不受影响。

相比 Github Pages,Netlify 之类的服务更自由,可以部署多个网站,自由选择二级域名。

拖拽文件部署虽然简单,但是每次做修改都要生成再部署还是挺麻烦的。

因此,我们使用 Netlify 另一个强大的功能——可持续自动化部署。

在你的项目设置中选择Link site to Git,然后跟着向导,选择 GitHub 中的项目(可以是私有项目,需要给权限),选择分支,然后在Basic build settings中设置部署命令npm run build和文件夹public即可。

配置成功后,你只需要把博客的工程托管到 Github 上,就可以自动触发部署,安全又方便。

你还可以把你自己的域名绑定到 Netlify 上,在 DNS 上设置一些加速和缓存提高访问速度。

结束,开始

如果你跟着做下来配置成功了的话,那么恭喜你;如果哪里卡住了,可以去查一查官方文档以及 Google 一下。

搭好博客只是个开始,写文章才是关键,不要停下来啊。


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!