Hexo折腾笔记

一、GitHub 建仓

建立一个 GitHub 仓库，名字为 [用户名].github.io

比方说我的用户名是 xjimlinx，那么就创建一个仓库名为 xjimlinx.github.io

可以设置为 private 也可以设置为 public

然后进入到该仓库主页面

复制好仓库地址做准备

注意如果是 git类型地址 要在本机上设置好 ssh key 同时在 GitHub 上设置好权限。

---

二、hexo 下载

2.1 NPM 下载

NPM 即 Node Package Manager，一般

用你所能使用的比较适合的方法安装 npm

从 2.1.1 和 2.1.2 中选择一个方法，不建议直接从官方下载（Windows系统当我没说）

2.1.1 系统包管理器下载

以 Arch 为例

sudo pacman -S npm

同时还需要下载 nodejs

sudo pacman -S nodejs

2.1.2 NVM——Node 版本管理器

即 Node Version Manager

以 Arch 为例

sudo pacman -S nvm

注意同时可以使用 nvm 官方的安装方法（但是系统包管理器能用为什么不直接用呢？反正 Arch 的包一般都是最新的）

然后使用 nvm 下载最新的稳定版

nvm install stable

当然你要下载最新版也没人拦你

nvm install node

设置默认 node 版本

最新稳定版

nvm alias default stable

最新版

nvm alias default node

2.2 Hexo 下载

全局安装 hexo-cli

npm install hexo-cli -g

这将把hexo安装到如下地址

/home/username/.nvm/versions/node/v23.2.0/bin/hexo

即安装到当前 node 版本的文件夹下。

---

三、使用 hexo 从 md 文件创建页面

3.1 hexo 本地部署

在想要放置博客的目录，使用 hexo 初始化一个文件夹：

hexo 文件夹的名字 

比方说想放在 home 目录下的 test 里面

cd
hexo init test

就会在 home 目录下初始化一个文件夹 test ，然后再执行

cd test # 虽然我也不知道为什么要写这一步，可是就是可能有的人不会啊？

进入 test 目录

hexo clean # 清理文件
hexo generate # 根据 source文件夹下的内容生成页面文件
hexo server # 本地部署hexo服务，默认访问端口是4000 按 Ctrl+c 取消

hexo generate 步骤会将页面文件生成到 test/public 文件夹下。

然后就可以在浏览器里面通过 localhost:4000 访问 hexo 页面了。

然后之后只需要在 test/source/_posts 文件夹下放置自己的 md 笔记，然后再执行上面那三个步骤（hexo xxx）就可以看当前效果了。

3.2 笔记内容格式要求

md 笔记必须在开头有如下格式

---
title: Hexo 折腾笔记
author: Xein
categories: 
	- Web
	- 网站搭建
updated: YYYY-MM-DD HH:MM:SS
date: YYYY-MM-DD HH:MM:SS
tag:
    - tag1
    - tag2
    - ...
    - tagn
---

注意冒号用英文输入法的冒号 即 “:“

其中：

• title：必选项，即显示在页面的文章标题
• author：非必选，显示作者
• categories：非必选，如果需要多层目录就像上面那样写，就会有一级目录 Web 和二级目录（一级目录子目录）网站搭建。同理可以设置多层，只需要在下面多写几个 “- xxx” 形式的行
• updated：非必选，修改时间
• date：非必选，创建时间
• tag：非必选，像上面那样写会有从 tag1 到 tagn 的多个 tag，tag 没有层级关系存在
• comments：非必选，是否开启评论，取值范围为 false 和 true，此外还需要在 _config.yml 里进行相关设置。
• description：非必选，摘要，也可以使用如下方式，在开头格式下方添加一个
• <!--more--> ，然后这个和开头格式之间的内容就是摘要

---

四、上传到 GitHub

以下方法我觉得方便，但是不一定对所有人来说都方便，所以可以参考，因为我网络环境不是很好，使用 hexo-deployer 因为没有详细的输出，会出现傻等的情况，并且 hexo-deployer 在 commit 步骤过后就当作是提交了，只能再更新内容才可以提交 push，所以我使用下面的方法

首先到 test 的父文件夹

将第一步建仓得到的地址复制下面那个代码中

git clone 你的github.io仓库的地址

然后在终端执行。

在第三步中创建的文件夹 test 中，编写如下文件：

test/Makefile

COMMIT_DESCRIPTION ?= "nothing"
REPO_PATH ?= ../你的用户名.github.io
update: clean
	hexo generate

clean:
	hexo clean

update-repo: update
	cp -r ./public/* ../你的用户名.github.io/ 

push: commit
	cd ${REPO_PATH} && git push

commit: add
	cd ${REPO_PATH} && git commit -m ${COMMIT_DESCRIPTION}

add:
	cd ${REPO_PATH} && git add .
run:
	hexo s

.PHONY: clean add commit push update run

然后每次只要执行 make update-repo 就可以更新仓库内容，执行 make push 就可以直接将文章内容 push 到GitHub 仓库了

然后通过对 你的用户名.github.io 访问就可以访问到你的个人网站。

---

五、图片相关

直接使用默认设置，可以在编辑器里面看到图片但是无法在网页看到图片，或者能在网页看到图片但是无法在编辑器看到图片，这就需要进一步操作。

5.1 参考来源

原博客来源以及原博客参考资料来源：

• Hexo插入图片并解决图片的路径问题
• Github 有关此问题的Issue以及解决方案——md img render part improvement of hexo-render-marked

5.2 修改配置

首先打开hexo根目录下的package.json文件

sudo vim ./package.json

确认安装并启用的渲染插件是hexo-renderer-marked

接着打开 _config.yml 确认如下配置：

可以复制的文本如下（你是不是不想手打）：

post_asset_folder: true
relative_link: false
marked:
	prependRoot: true
	postAsset: true

设置说明：

• post_asset_folder: true

  执行hexo new post xxx时会同时生成 source/_posts/xxx.md 以及source/_posts/xxx文件夹（虽然我一般是手动创建。。。），然后将文章相关联的资源放里面

• relative_link: false

  默认配置，不将链接改为与根目录的相对地址（这样在同名文件夹下的图片才可以在网页上和编辑器上都正确显示）

• prependRoot: true

  将文章跟路径添加到文章内的链接之前

• postAsset: true

  在post_asset_folder设置为true的情况下，根据prependRoot的设置所在文章内资源的路径解析为相对于资源目录的路径

这里应该有某几行是默认配置没有的，直接加上应该就行（注意不要加重复了）

然后修改渲染插件代码

vim ./node_modules/hexo-renderer-marked/lib/renderer.js

按 Ctrl+/ 搜索image，定位到如下位置：

改动的代码就在两个箭头中间指的地方

// Prepend root to image path
image(href, title, text) {
  const { hexo, options } = this;
  const { relative_link } = hexo.config;
  const { lazyload, figcaption, prependRoot, postPath } = options;

  if (!/^(#|\/\/|http(s)?:)/.test(href) && !relative_link && prependRoot) {
    if (!href.startsWith('/') && !href.startsWith('\\') && postPath) {
      const PostAsset = hexo.model('PostAsset');
      // findById requires forward slash
      //
      // ========= Xein Change Here ===
      const fixPostPath = join(postPath, '../');
      const asset = PostAsset.findById(join(fixPostPath, href.replace(/\\/g, '/')));
      // const asset = PostAsset.findById(join(postPath, href.replace(/\\/g, '/')));
      // ========= End Change =========
      //
      // asset.path is backward slash in Windows
      if (asset) href = asset.path.replace(/\\/g, '/');
    }
    href = url_for.call(hexo, href);
  }

按照原博主的解释：

简单地说，这里的修改就是将文章路径postPath换成了它的上一级路径fixPostPath，更换的方法就是在postPath后面加上../。

也就是说将资源路径换成了文章的上一级路径，这样一来，就可以按照如下的方法来添加图片：

文章结构：

然后在文中就可以这样添加图片：

![修改渲染器配置的图片](Hexo折腾笔记/修改渲染器配置.png)

然后因为node_modules内部文件一般写在gitignore下，所以上面的改动在重新下载node依赖的时候就会没掉，所以可以额外保存含有这些改动的文件，然后在重新部署的时候再覆盖掉。

5.3 其他注意事项

图片的名称开头不要以下划线开头，要不然hexo g生成的网页该图片对应的链接就不会带上前缀，也就是说，无法正常显示