记录使用Hexo搭建个人博客的过程

发表于 分类于 阅读次数： 本文字数： 1.3k 阅读时长 ≈ 5 分钟

安装 hexo

全局安装

1
npm install -g hexo-cli

局部安装

1
npm install hexo

创建项目

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

创建完项目后, 包括以下文件:

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

运行项目

1
npx hexo server # 局部创建使用npx

安装hexo-next 主题

方式 1 使用 npm 安装

1
npm install hexo-theme-next

方式 2 使用 git 安装

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

修改主题

修改_config.yml文件中的:

1
theme: next

使用本地配置

  1. 在项目目录下创建文件_config.next.yml
  2. 把依赖配置内容拷贝到_config.next.yml:
    1
    2
    3
    4
    # 使用 npm 安装
    cp node_modules/hexo-theme-next/_config.yml _config.next.yml
    # 使用 Git 安装
    cp themes/next/_config.yml _config.next.yml

清理缓存后重新运行调试

注意: 修改_config.yml或者_config.next.yml配置文件后, 需要使用hexo clean清理一下再运行, 修改后的配置才会生效.

1
npx hexo clean && npx hexo s

添加 Local Search 本地搜索

安装插件 hexo-generator-searchdb

1
npm install hexo-generator-searchdb --save

修改 _config.yml 配置文件

在末尾添加

1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

修改 _config.next.yml 配置文件

1
2
local_search:
  enable: true

增加文章字数统计和阅读时长

安装插件 hexo-word-counter

1
npm install hexo-word-counter --save

修改 _config.yml 配置文件

在末尾添加

1
2
3
4
5
6
7
8
9
# 增加文章字数统计及阅读时长功能
symbols_count_time:
  symbols: true
  time: true
  total_symbols: true
  total_time: true
  exclude_codeblock: false
  wpm: 275
  suffix: "mins."

修改语言为中文

修改_config.yml文件

1
language: zh-CN # zh-CN 对应 themes/next/languages/zh-CN.yml

添加分类

生成分类页

1
hexo new page categories

创建完成后会在source目录下生成 categories/index.md 文件.

1
2
3
4
---
title: categories
date: 2023-09-02 15:36:39
---

添加 type 属性

在categories/index.md文件中date下面添加type属性

1
2
3
4
5
---
title: categories
date: 2023-09-02 15:36:39
type: "categories"
---

将文章添加到分类

打开想要分类的文章, 添加categories属性

1
2
3
4
5
6
---
title: Hexo 使用
date: 2023-09-01 22:09:52
categories:
  - 其它技术
---

打开分类配置

在_config.next.yml中打开分类配置

1
2
3
4
5
6
7
8
9
menu:
  home: / || fa fa-home
  #about: /about/ || fa fa-user
  # tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive
  #schedule: /schedule/ || fa fa-calendar
  #sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat

添加标签

生成标签页

1
hexo new page tags

创建完成后会在source目录下生成 tags/index.md文件

1
2
title: tags
date: 2023-09-02 15:50:52

添加 type 属性

在tags/index.md文件中date下面添加type属性

1
2
3
title: tags
date: 2023-09-02 15:50:52
type: "tags"

给文章设置标签

打开想要设置标签的文章, 添加tags属性

1
2
3
4
5
6
7
8
---
title: Hexo 使用
date: 2023-09-01 22:09:52
categories:
  - 其它技术
tags:
  - hexo
---

打开标签配置

在_config.next.yml中打开标签配置

1
2
3
4
5
6
7
8
9
menu:
  home: / || fa fa-home
  #about: /about/ || fa fa-user
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive
  #schedule: /schedule/ || fa fa-calendar
  #sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat

添加关于

生成关于页面

1
hexo new page about

创建完成后会在source目录下生成about/index.md文件

1
2
3
4
---
title: about
date: 2023-09-02 16:04:00
---

可以 index.md 文件里添加关于的内容信息.

打开关于配置

1
2
3
4
5
6
7
8
9
menu:
  home: / || fa fa-home
  about: /about/ || fa fa-user
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive
  #schedule: /schedule/ || fa fa-calendar
  #sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat

创建新文章

1
hexo new post <title>

执行以上指令后, 会在 source/_posts/文件夹下生成<title>.md文件, 支持使用markdown语法来书写文章.

启动本地服务器预览

1
2
3
hexo server
# 或者
yarn server

默认情况下，访问网址为：http://localhost:4000/

生成静态文件

1
2
3
hexo generate
# 或者
yarn build

执行以上指令后, 会在 public文件夹下生成静态文件.

部署到个人服务器

将生成后的文件部署到个人服务器. 我使用的是个人阿里云轻量服务器, 在个人服务器操作过程如下:

安装 Docker

1
2
3
4
5
6
7
8
9
10
11
12
# 1. yum 包更新到最新
yum update
# 2. 安装需要的软件包, yum-util提供yum-config-manager功能, 另外两个是devicemapper驱动依赖的
yum install -y yum-utils device-mapper-persistent-data lvm2
# 3. 设置yum源
yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo
# 4. 安装docker, 出现输入界面都按y
yum install -y docker-ce
# 5. 查看docker版本,
docker -v
# 6. 开启docker服务
service docker start

第四步报错:

1
2
  - Status code: 404 for https://download.docker.com/linux/centos/3/x86_64/stable/repodata/repomd.xml (IP: 13.32.50.112)
错误：为仓库 'docker-ce-stable' 下载元数据失败 : Cannot download repomd.xml: Cannot download repodata/repomd.xml: All mirrors were tried

解决办法:
修改 /etc/yum.repos.d/docker-ce.repo

1
vi /etc/yum.repos.d/docker-ce.repo

把docker-ce-stable的baseurl改为:

1
https://download.docker.com/linux/centos/7/$basearch/stable

在执行安装 docker 命令

1
yum install -y docker-ce

启动 docker 服务

1
systemctl start docker

开机启动 docker 服务

1
systemctl enable docker

下载 Nginx 镜像

1
docker pull nginx

创建 Nginx 容器, 设置端口映射, 并使用数据卷挂载目录

1
2
3
4
5
6
7
docker run -d --name mynginx \
-p 80:80 \
--mount type=bind,source=/root/mynginx/conf/nginx.conf,target=/etc/nginx/nginx.conf \
--mount type=bind,source=/root/mynginx/conf/http-8080.conf,target=/etc/nginx/conf.d/http-8080.conf \
--mount type=bind,source=/root/mynginx/logs,target=/var/log/nginx/logs \
--mount type=bind,source=/root/mynginx/html,target=/usr/share/nginx/html \
nginx

配置 Nginx

重启 Nginx

1
docker restart mynginx

参考文档:
hexo 官方英文文档
hexo 官方中文文档
hexo-next 文档