搭建静态博客

hexo优点很多,缺点就是会下载一大堆node_modules,不乱装mod很少出错。

hugo优点就是快,依赖少,缺点是主题少,需要自己动手能力强。

下面记录自己踩的坑,避免之后重新安装浪费时间。

hexo

安装nodejs、git

设置npm代理加块下载

1
2
3
npm config set registry http://registry.npm.taobao.org/
npm config set registry https://registry.npmjs.org/
npm --registry https://registry.npm.taobao.org

新建blog文件夹并进入

hexo init (需要访问github)

选择一个主题

我选择的是fluid,去release下载解压后放到themes/fluid里面,每个主题安装方法不同,如果是npm安装的话在node_modules里,git安装的话会在themes文件夹里

1
https://github.com/fluid-dev/hexo-theme-fluid/releases

将fluid里面的 _config.yml 修改为 _config.fluid.yml 复制到blog根目录,修改_config.ymltheme: fluid

hexo g 生成文件无报错

如果出现错误 Error: Cannot find module 'css' 执行

1
npm install css --save

修改blog根目录下的 _config.yml

1
2
3
4
5
6
deploy:
type: 'git'
repository: git@github.com:用户名/仓库名.git
# 如果有多个github账号改为
#repository: git@two.github.com:用户名/仓库名.git
branch: main

hexo d 部署到github上

ERROR Deployer not found: git

1
npm install hexo-deployer-git --save

为了方便搜索引擎索引需要装以下插件,然后在_config.yml里添加

hexo-generator-baidu-sitemap这个插件可能与其他插件冲突,慎重安装。出错后进入node_mod目录删除hexo-generator-baidu目录。

1
2
3
4
5
6
7
8
9
10
# npm i hexo-generator-baidu-sitemap --save # 百度用 ×
npm i hexo-generator-sitemap --save # Google √

npm install hexo-abbrlink --save # 优化路径 √
# 使用上面的就不需要使用下面的拼音了
# npm install hexo-permalink-pinyin --save # 生成中文拼音的永久链接 ×

npm install hexo-generator-feed --save # 添加 RSS 订阅 √

npm install hexo-all-minifier --save # 压缩 HTML, CSS, JS and Image √

_config.yml添加如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
# 自动生成sitemap
sitemap:
path: sitemap.xml
#baidusitemap:
# path: baidusitemap.xml

# hexo-abbrlink
abbrlink:
alg: crc16 #support crc16(default) and crc32
rep: dec #support dec(default) and hex
drafts: false #(true)Process draft,(false)Do not process draft. false(default)
# Generate categories from directory-tree
# depth: the max_depth of directory-tree you want to generate, should > 0
auto_category:
enable: true #true(default)
depth: #3(default)
over_write: false
auto_title: false #enable auto title, it can auto fill the title by path
auto_date: false #enable auto date, it can auto fill the date by time today
force: false #enable force mode,in this mode, the plugin will ignore the cache, and calc the abbrlink for every post even it already had abbrlink. This only updates abbrlink rather than other front variables.

permalink: posts/:abbrlink/
# or
permalink: posts/:abbrlink.html

# permalink_pinyin
permalink_pinyin:
enable: true
separator: '-' # default: '-'

# Extensions
plugins:
hexo-generator-feed
# 添加 RSS 订阅
feed:
enable: true
type: atom
path: atom.xml
limit: 30
hub:
content:
content_limit: 140
content_limit_delim: " "
order_by: -date

# Minifier
all_minifier: true

_config.yml 中的 updated_option

1
2
3
mtime: 使用md文件最后修改时间
date: 使用文章的日期
empty: 不显示更新时间

建议每装一个mod,执行一下hexo g,如果无报错,直接执行 hexo g -d 即可。

1
2
3
4
5
6
7
8
9
并列分类,了解一下:
categories:
- [Linux]
- [Tools]

并列+子分类,再了解一下:
categories:
- [Linux, Hexo]
- [Tools, PHP]

我使用的方案是先上传到github私密仓库->自动同步到vercel->使用cloudflare。

hugo

选择带extended的进行下载
https://github.com/gohugoio/hugo/releases

新建blog-hugo文件夹,进入文件夹后 hugo new site . 生成初始文件

git clone https://github.com/dillonzq/LoveIt.git themes/LoveIt

config.toml添加 theme = "LoveIt"

hugo new posts/first_post.md

hugo # 生成静态文件

hugo serve # 本地预览


搭建静态博客
https://shyi.org/posts/47666/
作者
Shyi
发布于
2023年6月4日
更新于
2024年9月7日
许可协议