使用 Hexo 生成静态网页博客

Posted on Edited on

要求

  • Node.js

  • Git

下载

– 请注意参考个人电脑的操作系统！

进入 Terminal 查看安装的版本：

1
2
3
node --version # v18.16.0

git --version # git version 2.40.0

Quick Start

1
2
3
4
5
6
7
8
9
hexo init my-blog

cd my-blog

# 因为 hexo 是基于 Node.js 完成的框架，所以完成第一步之后无需再执行 `npm init -y` 生成 package.json 文件

npm i 

hexo server

接着我们去 localhost:4000 就能看到我们的博客了！

项目树状结构图

我们首先来了解一下我们的项目文件夹下面有些什么：

1
2
3
4
5
6
7
8
9
10
11
12
.
├── _config.landscape.yml
├── _config.yml
├── db.json
├── node_modules
├── package-lock.json
├── package.json
├── public
├── scaffolds
├── source
├── themes
└── yarn.lock

_config.yml：Hexo 博客设置

node_modules：存放启动需要使用的模组

public：存放生成的静态网页

1
2
3
4
5
6
7
8
9
10
11
12
13
public
├── 2023
├── README.md
├── archives
├── assets
├── css
├── fontawesome
├── fonts
├── images
├── index.html
├── js
├── tags
└── webfonts

scaffolds：存放 Hexo 个人博客的 3 种模版：page (白页)，post (博客)，draft (草稿)

1
2
3
4
scaffolds
├── draft.md
├── page.md
└── post.md

source：存放博客.md文件

themes：存放Custom主题，从npm下载的主题存放在node_modules里

第一篇博客

我们先从草稿开始：

1
hexo new draft first-draft

Hexo 会帮我们在/source/_drafts/文件夹里创建我们的第一篇草稿。

如果觉得写得差不多了，我们可以：

1
hexo publish first-draft

Hexo 会自动帮我们把first-draft.md移动到/source/_posts/文件夹里，这样当我们打开服务器的时候就能看到这篇博客了。

当然我们也可以带参数运行hexo server：

1
hexo server --draft

这样我们在写草稿时也能看到最终的布局，方便我们对内容排版进行修改。

修改_config.yml文件

我们可以通过修改设置文件来改变 Hexo 的一些初始行为，比如说在 Writing 一栏里改变default_layout变量的参数可以改变hexo new创建的文件类型。

1
2
# Writing
default_layout: post

这样我们就不用每次hexo new时还需要特地指定创建的文件类型了。