hexo+github建站笔记

1.前言

在ubuntu上利用hexo+github建站网上有很多博文，但是由于时效原因，24年1月2日配置的时候遇到一些问题。遂本文对于细节不提而用步骤带过，主要汇总一下利用hexo中文官网文档安装遇到的问题，需要有一丢丢linux基础。

2.开胃菜

安装 Hexo 相当简单，只需要先安装下列应用程序即可：

• Node.js (Node.js 版本需不低于 10.13，建议使用 Node.js 12.0 及以上版本)
• Git

2.1安装git

sudo apt install git

2.2安装node.js

摘自 NodeSource

1. Download and import the Nodesource GPG key

sudo apt-get update
sudo apt-get install -y ca-certificates curl gnupg
sudo mkdir -p /etc/apt/keyrings
curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | sudo gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg

2. Create deb repository

NODE_MAJOR=20
echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_$NODE_MAJOR.x nodistro main" | sudo tee /etc/apt/sources.list.d/nodesource.list

Optional: NODE_MAJOR can be changed depending on the version you need.

（可选项）：选择node.js版本

NODE_MAJOR=16
NODE_MAJOR=18
NODE_MAJOR=20
NODE_MAJOR=21

3. Run Update and Install

sudo apt-get update
sudo apt-get install nodejs -y

3.正餐

3.1安装hexo

npm install -g hexo-cli

3.2初始化

hexo init <folder>
cd <folder>
npm install
hexo g # 生成静态文件，即public文件夹

此刻，在指定文件夹下生成了网站目录如下，对各目录的解释见hexo文档 . 建站和Hexo搭建个人博客——系列教程。

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

3.3本地验证

运行下面代码后，命令行中提示的网址，在本地查看网站

hexo server # 或者 hexo s

4.github部署

4.1github端

1. 建立名为 <你的 GitHub 用户名>.github.io 的储存库
2. 参考我的Git基本操作笔记第三节1~4点，gitee改成github
3. 参考http://t.csdnimg.cn/X3vjf ，获得person access token
   • github右上角头像 - > settings
   • 左侧菜单栏，滑到最下面，选择Developer settings
   • 左侧菜单栏，选择personal access tokens -> tokens(classic) -> Generate new token -> Generate new token(classic)
   • expiration可选无限（no expiration）
   • 下面的方框全选
   • 点generate token
   • 保存好生成的token，据说以后查不到了

4.2本地端

1. 安装 hexo-deployer-git如下，

npm install hexo-deployer-git --save

2. 在 _config.yml 中添加以下配置（如果配置已经存在，请将其替换为如下）:

deploy:
  type: git
  repo: # 复制仓库的ssh
  # 如我的是，git@github.com:Hezexian/hezexian.github.io.git
  branch: gh-pages

3. 执行 hexo clean && hexo deploy

   • 这一步会让你输入github名字密码，其中密码是4.1节生成的token
   • 执行完这一步，hexo文档被同步至github

4. 浏览<你的 GitHub 用户名>.github.io

   • 第三步执行完需要等一会儿网站才能打开，别心急 😃

5.更新文章

法1：

将xxx.md文件添加进source/_posts中

注意md文件写标头，参考：写作，Front-matter

---
title: hexo+github建站笔记
date: 2024/1/2 19:29
categories: 
- 啥都会一点
tags:
- hexo
- 博客
---

接着在hexo目录中

# 清除缓存
hexo clean 

# 生成public，静态网页
hexo g 

# 推送 github
hexo d  

法2：

# 三种布局 post、page 和 draft
hexo new [layout] <title> 

问题

1.butterfly主题分类、归档404

按照官方文档的说法:

• 前往你的 Hexo 博客的根目錄
• 輸入 hexo new page categories
• 你會找到 source/categories/index.md 這個文件
• 修改這個文件：
• 記得添加 type: "categories", 如下。

  ---
  title: 分類
  date: 2018-01-05 00:00:00
  type: "categories"
  ---
  

还是不行，原来是包没有安装：
npm list对比

├── hexo-deployer-git@3.0.0
├── hexo-generator-archive@2.0.0
├── hexo-generator-category@2.0.0
├── hexo-generator-index@3.0.0
├── hexo-generator-tag@2.0.0
├── hexo-math@4.0.0
├── hexo-renderer-ejs@2.0.0
├── hexo-renderer-marked@6.0.0
├── hexo-renderer-pug@3.0.0
├── hexo-renderer-stylus@2.1.0
├── hexo-server@3.0.0
├── hexo-theme-landscape@0.0.3
└── hexo@6.3.0

安装：

npm install hexo-generator-category --save
npm install hexo-generator-archive --save

2.hexo的butterfly、next主题下，代码块缩进特别大

对比发现，当缩进为一个tab时才会出现问题。当缩进为4个空格时，则表现正常。

原因

hexo的next主题(v 8.5)编译之后代码块缩进特别大，怎么调整？ - Mr.J的回答 - 知乎

文中说，

可能原因，你缩进使用了tab，在HTML下，默认等于8个空格，建议修改为空格缩进，或者修改tab-size属性

把vscode的缩进改成空格就好了。

可是，我的文章已经写了上万字，逐个修改显然不可能实现。

解决办法

hexo根目录/_config.yml第50行(若没改过的话)，tab_replace改为四个空格，如下：

highlight:
  line_number: true
  auto_detect: false
  tab_replace: '    ' 
  wrap: true
  hljs: false

问题解决。