笔记

上回建站的时候没记录，这回记录一下安装过程

文档 | Hexo

安装hexo

先根据官方文档里安装git和nodejs，如然后

1
npm install -g hexo-cli

然后找个放博客的文件夹

1
2
3
4
5
6
7
hexo init blog
cd blog
npm install
#此时会卡死，看到目录里有pnpm-lock.yaml，估计是因为我有pnpm，所以直接用pnpm初始化了，执行下边的可以解决
npm cache clean --force
rm -rf node_modules package-lock.json
npm install

现在其实就装好了，在blog目录里hexo server，访问http://127.0.0.1:4000 就能访问到博客了

服务器上装的就先ssh -L 4000:127.0.0.1:4000 root@服务器ip把端口映射到本地，参考ssh隧道 | ScyCree's Blog

文章就在 /hexo/blog2/source/_posts 里面写就行

安装主题

到Themes | Hexo里面找个好看的，我选的reimu，因为我是傻逼二次元

shokaX其实也差不多，reimu的作者也没少给shokaX commit，reimu本身也是参考了老shoka。但是shokaX安装好像比较特殊，我懒得折腾就reimu了。

https://github.com/D-Sketon/hexo-theme-reimu

1
2
3
4
5
cd themes
git clone https://github.com/D-Sketon/hexo-theme-reimu.git
mv hexo-theme-reimu/ reimu
cd ..
vim _config.yml

vim里按/可以搜索，输入theme回车，按n往下找到theme: landscape，改成theme: reimu

要让图片正确显示，要把post_asset_folder改成true，还要npm install https://github.com/CodeFalling/hexo-asset-image，这样在typora里配置图片路径为./${filename}的时候直接上传就能正确显示了。

不会用vim的先别红温，可以下一个WinSCP操作，反正平时往上传博客也要用到。

现在再hexo server开起来博客看一下会发现主题变了，这就算装好主题了。

当然一般是不会直接用hexo的server的，在blog目录下执行hexo g可以生成静态页面到public目录里，这里边就是你博客的静态网页。把这个目录挂nginx上就完了。传博客就把md和相同目录下的图片文件夹一块传到blog/source/_posts里，然后hexo g重新生成一下就行。

如果不是很讲究的话到这就能用了，讲究的可以再往下做点配置。

配置

https://d-sketon.github.io/20230707/hexo-theme-reimu-guide/

照着这里边配就完了，下边有几个里面没说但比较有用的。

语言

首先网站是英文的，给他改成中文的

在blog的 _config.yml 里，把language:改成zh-CN

网站标题，作者等信息也能在这配置。

图片路径

虽然上边说了可以按照hexo-asset-image来解决图片路径问题，但是因为我有一些历史遗留问题(早期我把图片存在${filename}.assets下，甚至有些目录分隔符还是windows的反引号)，所以这种办法不能完全解决。

在blog的 _config.yml 里添加配置：

1
2
3
marked:
  prependRoot: true
  postAsset: true

修改node_modules/hexo-renderer-marked/lib/renderer.js的源码，搜索<img可以搜到生成图片标签的函数，在image({ href, title, text })下面，这个函数的第一行加一个href=href.split(/[/\\]/).pop();就能解决。

1
2
3
4
5
6
7
// Prepend root to image path
image({ href, title, text }) {
	href=href.split(/[/\\]/).pop();//添加这行
	const { options } = this;
	const { hexo } = options;
	const { relative_link } = hexo.config;
	const { lazyload, figcaption, prependRoot, postPath } = options;

我平时不喜欢往md放图片也有这个原因，第一次建站的时候折腾了老长时间

中文引号

代码块以外，正文里的英文引号会自动转成中文引号，带引号的命令写正文里复制的时候引号全错了。

在在blog的 _config.yml 里，在marked下面添加smartypants: false。如果是用的markdown_it_plus，需要自己新建一项markdown_it_plus，再设置typographer为false：

1
2
3
4
5
6
marked:
  prependRoot: true
  postAsset: true
  smartypants: false #如果是用的marked
markdown_it_plus:
  typographer: false #如果用的markdown_it_plus

如果不懂，两个都加上