title: blog
date: 2024-08-14 11:24:35
categories:
- Hexo
- blog
- 教程
tags:
- Hexo
- 教程
keywords: “blog,Hexo,github”
cover: https://s2.loli.net/2024/08/14/xCVrUGEQ1WhSpPs.png
访问个人blog查看详情 https://caokaier.zeabur.app/
可以使用hexo+github pages直接搭建,这里使用zeabur设置域名访问
安装git、node.js(这里不过多赘述)
Hexo文档以及主题 https://hexo.io/zh-cn/ 注意官方文档很久没更新了
#验证Node.js、npm、git是否正常安装
node -v
npm -v
git -v
#安装Hexo
npm install -g hexo-cli #国内安装较慢
#修改为使用阿里云镜像源安装
访问 https://npmmirror.com/ 复制代码 即:
npm install -g cnpm --registry=https://registry.npmmirror.com #这个过程可能相对较慢,耐心等待,安装后把npm换成cnpm使用
#安装Hexo
cnpm install -g hexo-cli
#初始化Hexo项目
hexo init blogfile #在选定位置执行,会生成blogfile文件项目,拉取可能失败,多执行几次即可
#也可以新建好blogfile文件夹,进入后直接执行 hexo init 尝试几次发现这样拉取成功几率大
#我这里出现了一下错误,没有错误的可以忽略直接 hexo g 并启动服务 hexo s 这里 hexo init 时下载依赖失败 手动下载
#一下是全部过程,耐心查看
beast@gentle-beast MINGW64 /d
$ hexo init blogfile
INFO Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
INFO Install dependencies
warning hexo > warehouse > cuid@2.1.8: Cuid and other k-sortable and non-cryptog
raphic ids (Ulid, ObjectId, KSUID, all UUIDs) are all insecure. Use @paralleldri
ve/cuid2 instead.
warning hexo-renderer-marked > jsdom > abab@2.0.6: Use your platform's native at
ob() and btoa() methods instead
warning hexo-renderer-marked > jsdom > data-urls > abab@2.0.6: Use your platform
's native atob() and btoa() methods instead
warning hexo-renderer-marked > jsdom > domexception@4.0.0: Use your platform's n
ative DOMException instead
warning hexo-renderer-stylus > stylus > glob@7.2.3: Glob versions prior to v9 ar
e no longer supported
warning hexo-renderer-stylus > stylus > glob > inflight@1.0.6: This module is no
t supported, and leaks memory. Do not use it. Check out lru-cache if you want a
good and tested way to coalesce async requests by a key value, which is much mor
e comprehensive and powerful.
WARN Failed to install dependencies. Please run 'npm install' in "D:\blogfile"
folder.
#这里报错依赖
beast@gentle-beast MINGW64 /d
$ cd blogfile/
beast@gentle-beast MINGW64 /d/blogfile
$ ls
_config.landscape.yml node_modules/ scaffolds/ themes/
_config.yml package.json source/
#使用cnpm手动安装
beast@gentle-beast MINGW64 /d/blogfile
$ cnpm install
√ Installed 10 packages on D:\blogfile
√ All packages installed (used 36ms(network 27ms), speed 0B/s, json 0(0B), tarba
ll 0B, manifests cache hit 0, etag hit 0 / miss 0)
#生成静态文件又报错,报错显示highlight.js 模块可能中出现了语法错误
beast@gentle-beast MINGW64 /d/blogfile
$ hexo g
INFO Validating config
INFO Start processing
FATAL Something's wrong. Maybe you can find the solution here: https://hexo.io/d
ocs/troubleshooting.html
D:\blogfile\node_modules\highlight.js\lib\languages\isbl.js:1806
// enum TE
SyntaxError: Unexpected end of input
at wrapSafe (node:internal/modules/cjs/loader:1281:20)
at Module._compile (node:internal/modules/cjs/loader:1321:27)
at Module._extensions..js (node:internal/modules/cjs/loader:1416:10)
at Module.load (node:internal/modules/cjs/loader:1208:32)
at Module._load (node:internal/modules/cjs/loader:1024:12)
at Module.require (node:internal/modules/cjs/loader:1233:19)
at require (node:internal/modules/helpers:179:18)
at Object.<anonymous> (D:\blogfile\node_modules\highlight.js\lib\index.js:88
:31)
at Module._compile (node:internal/modules/cjs/loader:1358:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1416:10)
at Module.load (node:internal/modules/cjs/loader:1208:32)
at Module._load (node:internal/modules/cjs/loader:1024:12)
at Module.require (node:internal/modules/cjs/loader:1233:19)
at require (node:internal/modules/helpers:179:18)
at highlightUtil (D:\blogfile\node_modules\hexo-util\dist\highlight.js:19:16
)
at Hexo.highlightFilter (D:\blogfile\node_modules\hexo\dist\plugins\highligh
t\highlight.js:41:12)
at SyntaxHighlight.exec (D:\blogfile\node_modules\hexo\dist\extend\syntax_hi
ghlight.js:21:24)
at D:\blogfile\node_modules\hexo\dist\plugins\filter\before_post_render\back
tick_code_block.js:49:44
at String.replace (<anonymous>)
at Hexo.backtickCodeBlock (D:\blogfile\node_modules\hexo\dist\plugins\filter
\before_post_render\backtick_code_block.js:11:36)
at Hexo.tryCatcher (D:\blogfile\node_modules\bluebird\js\release\util.js:16:
23)
at Hexo.<anonymous> (D:\blogfile\node_modules\bluebird\js\release\method.js:
15:34)
#更新 Hexo 和相关依赖,重新安装highlight.js
beast@gentle-beast MINGW64 /d/blogfile
$ npm update
npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memo
ry. Do not use it. Check out lru-cache if you want a good and tested way to coal
esce async requests by a key value, which is much more comprehensive and powerfu
l.
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supporte
d
npm warn deprecated abab@2.0.6: Use your platform's native atob() and btoa() met
hods instead
npm warn deprecated domexception@4.0.0: Use your platform's native DOMException
instead
npm warn deprecated cuid@2.1.8: Cuid and other k-sortable and non-cryptographic
ids (Ulid, ObjectId, KSUID, all UUIDs) are all insecure. Use @paralleldrive/cuid
2 instead.
added 3 packages, removed 1 package, and changed 224 packages in 3m
23 packages are looking for funding
run `npm fund` for details
beast@gentle-beast MINGW64 /d/blogfile
$ npm uninstall highlight.js
up to date in 1s
23 packages are looking for funding
run `npm fund` for details
#使用cnpm重新安装highlight.js
beast@gentle-beast MINGW64 /d/blogfile
$ cnpm install highlight.js
√ Linked 1 latest versions fallback to D:\blogfile\node_modules\.store\node_modu
les
√ Installed 1 packages on D:\blogfile
√ All packages installed (1 packages installed from npm registry, used 7s(networ
k 7s), speed 0B/s, json 0(0B), tarball 0B, manifests cache hit 1, etag hit 1 / m
iss 0)
dependencies:
+ highlight.js ^11.10.0
#清理缓存并使用cnpm重新安装依赖
beast@gentle-beast MINGW64 /d/blogfile
$ cnpm cache clean --force
npm WARN using --force Recommended protections disabled.
beast@gentle-beast MINGW64 /d/blogfile
$ rm -rf node_modules
beast@gentle-beast MINGW64 /d/blogfile
$ cnpm install
√ Linked 208 latest versions fallback to D:\blogfile\node_modules\.store\node_mo
dules
deprecate hexo-renderer-stylus@3.0.1 › stylus@0.62.0 › glob@^7.1.6 Glob versions
prior to v9 are no longer supported
deprecate hexo-renderer-stylus@3.0.1 › stylus@0.62.0 › glob@7.2.3 › inflight@^1.
0.4 This module is not supported, and leaks memory. Do not use it. Check out lru
-cache if you want a good and tested way to coalesce async requests by a key val
ue, which is much more comprehensive and powerful.
deprecate hexo-renderer-marked@6.3.0 › jsdom@20.0.3 › domexception@^4.0.0 Use yo
ur platform's native DOMException instead
deprecate hexo-renderer-marked@6.3.0 › jsdom@20.0.3 › abab@^2.0.6 Use your platf
orm's native atob() and btoa() methods instead
deprecate hexo@7.3.0 › warehouse@5.0.1 › cuid@^2.1.8 Cuid and other k-sortable a
nd non-cryptographic ids (Ulid, ObjectId, KSUID, all UUIDs) are all insecure. Us
e @paralleldrive/cuid2 instead.
√ Run 1 script(s) in 835ms.
√ Installed 11 packages on D:\blogfile
√ All packages installed (220 packages installed from npm registry, used 10s(net
work 10s), speed 553.16KB/s, json 155(1.17MB), tarball 4.36MB, manifests cache h
it 54, etag hit 53 / miss 89)
#cnpm install 命令成功地安装了依赖包,但有一些关于依赖包的警告和弃用提示,不必理会
#成功,莫名其妙ps:有大佬来解释一下吗
beast@gentle-beast MINGW64 /d/blogfile
$ hexo g
INFO Validating config
INFO Start processing
INFO Files loaded in 236 ms
INFO Generated: archives/2024/index.html
INFO Generated: archives/2024/08/index.html
INFO Generated: archives/index.html
INFO Generated: index.html
INFO Generated: fancybox/jquery.fancybox.min.css
INFO Generated: css/style.css
INFO Generated: js/jquery-3.6.4.min.js
INFO Generated: fancybox/jquery.fancybox.min.js
INFO Generated: js/script.js
INFO Generated: css/images/banner.jpg
INFO Generated: 2024/08/13/hello-world/index.html
INFO 11 files generated in 238 ms
#成功启动服务
beast@gentle-beast MINGW64 /d/blogfile
$ hexo s
INFO Validating config
INFO Start processing
INFO Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.
#此时访问http://localhost:4000/,已经成功了
#安装切换主题,我这里选了Butterfly,一直喜欢这个风格,访问github,可能需要科学上网,不能科学上网的使用steam++加速github,直接复制下面代码也行
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
#这里证书加速有问题的话是因为开了网络加速
#关闭证书验证
git config --global http.sslVerify false
#安装 pug & stylus renderer
npm install hexo-renderer-pug hexo-renderer-stylus
#修改项目根目录配置文件_config.yml,别找成主题的_config.yml
#修改主题为
theme: butterfly #这里使用什么主题就写什么
#清理缓存,重新生成静态文件并运行
hexo clean
# 或hexo c 或hexo cl
#这里有报错看下面,少一个组件,官方文档的事
$ hexo cl
INFO Validating config
ERROR Script load failed: themes\butterfly\scripts\filters\post_lazyload.js
Error: Cannot find module 'hexo-util'
beast@gentle-beast MINGW64 /d/blogfile
$ cnpm install hexo-util --save
√ Linked 1 latest versions fallback to D:\blogfile\node_modules\.store\node_modules
√ Installed 1 packages on D:\blogfile
√ All packages installed (used 92ms(network 90ms), speed 0B/s, json 0(0B), tarball 0B, manifests cache hit 1, etag hit 1 / miss
0)
dependencies:
+ hexo-util ^3.3.0
$ hexo cl
INFO Validating config
INFO
===================================================================
##### # # ##### ##### ###### ##### ###### # # #
# # # # # # # # # # # # #
##### # # # # ##### # # ##### # #
# # # # # # # ##### # # #
# # # # # # # # # # # #
##### #### # # ###### # # # ###### #
4.13.0
===================================================================
#然后生成静态文件
hexo generate
# 或hexo g
hexo server
# 或hexo s 访问http://localhost:4000/
#修改主题内容,不修改的话图片很简约
#访问github上butterfly主题的Docs中文版,看到升级建议
為了減少升級主題後帶來的不便,請使用以下方法(建議,可以不做)。
在 hexo 的根目錄創建一個文件 _config.butterfly.yml,並把主題目錄的 _config.yml 內容複製到 _config.butterfly.yml 去。( 注意: 複製的是主題的 _config.yml ,而不是 hexo 的 _config.yml)
作者: Jerry
連結: https://butterfly.js.org/posts/21cfbf15/
來源: Butterfly
著作權歸作者所有。商業轉載請聯繫作者獲得授權,非商業轉載請註明出處。
注意: 不要把主題目錄的 _config.yml 刪掉
注意: 以後只需要在 _config.butterfly.yml 進行配置就行。
如果使用了 _config.butterfly.yml, 配置主題的 _config.yml 將不會有效果。
Hexo會自動合併主題中的 _config.yml 和 _config.butterfly.yml 裏的配置,如果存在同名配置,會使用 _config.butterfly.yml 的配置,其優先度較高。
#创建完成后,这里使用了https://sm.ms/,一个免费的在线图床服务
#上传自己的图片,并生成链接,放入_config.butterfly.yml,这里只做演示,修改以下内容
#完成后重新清理缓存,生成静态文件并运行
hexo cl
hexo g
hexo s
#访问http://localhost:4000/查看
#推送或部署到GitHub,首先安装部署插件
cnpm install hexo-deployer-git --save
#配置Hexo部署信息,在根目录下的_config.yml,注意缩进,yaml文件对缩进有要求
deploy:
type: 'git'
repository: https://github.com/manong/blogfile.git #这里复制自己在github上创建的仓库连接,创建仓库就不过多赘述了
branch: main
#推送,首次弹出对话框登录github
hexo deploy
# 或hexo d
#最后一步设置公网访问域名,这里使用https://dash.zeabur.com/
#选择后面不带标签的,免费,然后选择github
#第一次使用会配置github,授权后可以看到自己的仓库
#选择创建的仓库,部署,下面就成功了
#生成免费域名
#成功访问,之后可以在本地修改配置文件,逐步精美,然后上传到github,github仓库与zeabur关联会自动更新,非常方便
Demo: https://caokaier.zeabur.app/
#补充,以下可以忽略
hexo new [post]: 创建一个新的文章。
hexo g 或 hexo generate: 生成静态文件。
hexo s 或 hexo server: 启动本地服务器,预览网站。
hexo d 或 hexo deploy: 部署网站到远程服务器。
#如果你想要一个更友好的图形界面,可以考虑使用社区开发的插件,比如 hexo-admin。这个插件提供了一个简单的后台管理界面,你可以通过浏览器访问并管理 Hexo 站点的内容。
#安装 Hexo Admin:
#在 Hexo 项目的根目录下安装 hexo-admin:
cnpm install --save hexo-admin
#启动 Hexo 本地服务器:
hexo server
#访问 http://localhost:4000/admin/,你将看到一个简易的后台管理界面。