如何建一个Blog

使用什么技术来建一个Blog

目前比较主流的有WordPress、Hugo、Hexo等。今天介绍的是Hexo

为什么使用Hexo

因为Hexo技术非常成熟，而且不差。
Hexo Theme的Github很多都是3、4年前甚至7、8年前就不更新了。因为相对已经很稳定了。

TIP
当然，也有还在不断更新的，比如Next，Fluid等

最重要的原因是：
我用HUGO建的时候出错了，我不会修复～
😂

为什么选用Fluid主题

  • 首先，这个主题还在更新中；
  • 其次，这个主题我比较喜欢；
  • 再次，这个主题文档比较全；
  • 最后，这个主题能跑起来～
    😂

前期准备工作

具体的详细步骤欢迎访问Hexo文档官网
以及Fluid主题官网

下载安装Git

参考Git官网

下载Node.js

参考Node.js官网

安装Hexo

1
npm install -g hexo-cli

或者

1
npm install hexo

建站

选择项目存储的文件夹folderA,可以是桌面或者任何地方，站点的文件夹会建立在这个地方

1
cd folderA

建立站点文件夹folderB

1
2
3
hexo init folderB
cd folderB
npm install

这样，初始化后你就得到了如下结构的文件夹

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

这样一个最基础的站就建好了

应用主题

接下来就是用自己喜欢的主题了。Hexo默认的是landscape。

说明
每一个主题都可能有不一样的操作方法，本篇仅使用Fluid供参考

安装主题

1
npm install --save hexo-theme-fluid

如果有出错，也可以从Github的Relese页面下载，解压到 themes 目录，并将解压出的文件夹重命名为fluid

应用主题配置

将fluid主题的_config.yaml文件复制一个命名为_config.fluid.yaml,存放在文件的根目录，与Hexo原本的_config.yaml在一个文件夹内。

TIP
Github release安装的在themes – fluid文件夹内
npm安装的，在node_modules – hexo-theme-fluid文件夹内

预览

此时，一个初版的Blog已经建立了！
可以运行如下代码预览：

1
hexo server

会看到如下界面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
INFO  Validating config
INFO  Start processing
INFO  
------------------------------------------------
|                                              |
|     ________  __            _        __      |
|    |_   __  |[  |          (_)      |  ]     |
|      | |_ \_| | | __   _   __   .--.| |      |
|      |  _|    | |[  | | | [  |/ /'`\' |      |
|     _| |_     | | | \_/ |, | || \__/  |      |
|    |_____|   [___]'.__.'_/[___]'.__.;__]     |
|                                              |
|             感谢使用 Fluid 主题              |
|    文档: https://hexo.fluid-dev.com/docs/    |
|                                              |
------------------------------------------------

INFO  Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.

输入上面的本地地址，就能够看到网页了！

写自己的Blog文章

让我们Ctrl+C，回到输入的界面

1
hexo new post first.md

新的文章路径在/source/_posts/first.md
编辑first.md，然后再次

1
hexo server

你就会在网页上看到自己的内容了

文章的index和banner图片放在哪里？

都在/source/img里面。可以自己建立文件夹放入。
比如/source/img/first/1.png
那么在first.md的front-matter内应该填写如下：

1
2
index_img: /img/first/1.png
banner_img: /img/first/1.png

图片在文字内应用请参照Markdown语法或参考主题提示

个性化

主题等个性化内容请参考hexo和fluid官方指南设置

TIP
如果技术上不是很懂的，在/themes/fluid/source/img内，用自己的图片改成原本的图片名字就能替代显示了

发布

内容都准备好之后就要发布了

1
2
hexo clean
hexo generate

会得到一个Public的文件夹，包含了所有网站的内容
使用Github的方式发布，或者参考我之前写的cloudflare pages的方式发布

TIP
官方手册中有介绍一键发布，请自行参考

㊗️建Blog顺利&开心

Technology
#Blog #Hexo #Fluid
如何建一个Blog
http://kevin.zone.id/2025/04/05/blogdev/
作者
Kevin
发布于
2025年4月5日
许可协议