231101_hexo+GitHubPages搭建个人博客

作为准备就活的一部分，いよいよ要部署个人博客了。感觉hexo的主题还是比vuepress更丰富，就先用hexo吧。之后可能自己写一个前端主题界面，然后买服务器换自己的域名。

总体跟着hexo官网的文档做就行了

環境構築

npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo server

官方文档是这样的流れ，但我不喜欢-g全局安装。还好文档也给了其他办法

Advanced installation and usage

Advanced users may prefer to install and use hexo package instead.

$ npm install hexo

Once installed, you can run Hexo in two ways:

npx hexo <command>
Linux users can set relative path of node_modules/ folder:

echo 'PATH="$PATH:./node_modules/.bin"' >> ~/.profile

then run Hexo using hexo <command>

因为没有全局安装hexo-cli，所以直接命令行hexoを打つ，hexo -v, shell是不识别的。

但npx hexo就可以了。npx hexo -v有输出则安装成功

关于npx，参考記事：

记录一下 npx 的使用场景

npxでnodeモジュールを実行する

Setup

npx hexo init blog
cd blog
npm install

然后npx hexo server本地启动看看。(npm run server也可以，もしpackage.json的scripts定義されれば)

写文章

npx hexo new "230810_EndeavourOS折騰記"

当然也可以不new，而直接把本地写好的記事复制到/source/_posts下，只要编辑先頭的title, dateすればいい

注意：.md放在_posts根下面，图片等asset(注意文件名不要有空格)有的话就記事ごとに开一个folder，然后.md里用相对路径引用

关于显示图片

https://hexo.io/docs/asset-folders 优先参考官网，网上記事的一些方法过时了

把_config.yml配置文件中的post_asset_folder改为true

然后注意图片文件名不要有空格

但官方文档也说了：

正确的引用图片方式是使用下列的asset_img标签插件而不是markdown：

{% asset_img example.jpg %}

但这种办法改起来很操蛋

hexo博客如何插入图片

启用hexo-renderer-marked :

_config.yml

post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

这样就还可以用md语法了，但注意相对路径相对的是那个同名的assets目录，所以直接![](image.jpg)就可以了 (但其实![](./image.jpg)也对)

hexo server前最好先clean一下

换主题

https://github.com/EvanNotFound/hexo-theme-redefine

https://redefine.ohevan.com/

把主题clone到themes文件夹下 (cd到hexo项目根目录执行下記コマンド，即有themes的目录)

git clone https://github.com/EvanNotFound/hexo-theme-redefine.git themes/redefine

修改_config.yml配置文件

theme: redefine

npx hexo clean, npx hexo generate, npx hexo server三连

更多配置跟着 https://redefine-docs.ohevan.com/getting-started 文档做就好了

注意：在hexo项目根目录下创建 _config.redefine.yml 文件。所有改动都在 _config.redefine.yml 文件中进行，不建议直接修改主题文件，因为更新主题时会覆盖你的改动。

about page

hexo new page "about"

然后修改所用主题的配置文件_config.redefine.yml，把about前的注释去掉

修改source/about/目录中的index.md文件即可

部署到GitHub Pages

github上新建一个username.github.io的仓库

使用hexo-deployer-git来One-command deployment

Install hexo-deployer-git .

npm install hexo-deployer-git --save

修改_config.yml配置文件

deploy:
  type: git
  repo: git@github.com:hl-tang/hl-tang.github.io.git
  branch: gh-pages

branch名是main啥的也行

Run hexo clean && hexo deploy.
Check the webpage at username.github.io.

Reference

https://hexo.io/

手把手教你从0开始搭建自己的个人博客 |无坑版视频教程| hexo 羊哥