Home blog

# 使用 Hexo+Github 搭建个人博客

  • 什么是 Hexo？

    Hexo 是一个快速、简洁且高效的博客框架，基于 Node.js 运行，可以将我们撰写的 Markdown 文档解析渲染成静态的 HTML 网页。

  • Hexo+Github 原理：hexo 生成博客页面，部署到 github 的仓库，访问博客相当于访问仓库下的页面

# 一、安装相关环境

# 1. 安装 Node.js

在官网 Node.js (nodejs.org) 下载

进入命令行终端输入 node -v npm -v 查看版本

(安装过程中默认配置环境变量)

# 2. 安装 Git

在官网 https://git-scm.com/downloads 下载

进入命令行终端输入 git --version 查看版本

# 3. 安装 Hexo 框架

使用 npm 一键安装 Hexo 博客程序：

输入 hexo -v 查看 Hexo 版本

# 二、使用 Hexo 搭建博客（本地）

# 1. 新建一个文件夹 命名为 blog

# 2. 初始化博客

在 blog 目录下打开命令行终端

hexo init 初始化一个博客

等待初始化完成，得到下面的界面：

打开 blog2 文件夹可以看到生成了很多文件

hexo 会默认使用 landscape 这个主题

# 3. 启动博客

输入 hexo s

在浏览器输入 http://localhost:4000/ 即可本地浏览所搭建的博客

# 4. 发布文章

（1）输入 hexo n "My first blog" 即可创建为"My first blog" 的文章

在 blog/source/_posts 路径可以看到该 markdown 文档，打开并进行编辑即可

（2）输入 hexo clean (清理) hexo g （generate） hexo s （server）即可在本地浏览博客并查看刚刚发布的文章了

到这里，本地搭建博客就完成了，但只能在本地查看，公开可以通过将其部署到 Github 仓库中做到，也可以使用 Gitee...

# 三、部署到 Github 上

# 1.New repository

此处 repository name 需要使用 用户名.github.io

# 2. 安装 hexo 部署的插件

npm install hexo-deployer-git --save

# 3. 更改_config.yml 文档

在 blog 目录下找到_config.yml 文档，修改末尾的 #Deployment 部分

deploy:
  type: git
  repo: https://github.com/用户名/用户名.github.io.git
  branch: main

（这里的 branch 自己去仓库看一下是 main 还是 master，如果不对应会导致部署失败，踩坑警告！）

# 4. 生成 SSH 密钥

（1）生成密钥

ssh-keygen -t rsa -C "邮箱"

（2）在 C:\Users\ 用户名 \.ssh 目录下找到 id_rsa.pub 文件，复制文件内所有内容

（3）在 Github 中打开 settings--SSH and GPG keys --new SSH key

如果此处显示 Key type 选择默认的 Authentication Key

--Title 任取 -- 在 Key 中粘贴之前复制的内容 --Add SHH key

输入 ssh -T git@github.com 出现以下信息即可

# 5. 部署

输入 hexo clean hexo g hexo d (deploy) 即可生成静态文章并部署到个人博客上

首次 hexo d 时会弹出输入 github 的 username 和 password

# 6. 访问个人博客

网址：https:// 用户名.github.io/

好耶！我们成功了！

# 踩坑预警

  • 如何能够使文章中的图片顺利出现在个人博客上呢？

    npm install hexo-asset-image -- save

    首先请在_config.yml 文档中 #Writing 部分将 post_asset_folder: true 改为 true，这可以在你创建新文章时同时生成文章名.md 文档和文章名同名文件夹

    将文章中的图片放在该文件夹中，在 markdown 文档中使用图片时使用 ./ 文章名 / 图片名称即可

最近发现这个总是会 error loading，还是搞个图床吧

更多功能待开发，更多坑待踩

# 博客中直接插入 pdf

1. 安装 hexo-pdf

npm install --save hexo-pdf

在 source 文件夹下创建一个叫 pdf 的文件夹，把 xxx.pdf 文件放在这里，然后在_post 文件夹中的 xxx.md 直接使用

{% pdf /pdf/xxx.pdf %}

# 优化博客文章链接

在 Hexo 的默认设定中，文章链接就会是一大串的字符

解决方法，使用 hexo-abbrlink 插件

  1. 安装 hexo-abbrlink ：

npm install hexo-abbrlink --save

  1. 在 hexo 的配置文件 _config.yml ，修改 url 、 permalink 为（不是主题的配置文件）：

url: https://rainnn-w.github.io
permalink: posts/:abbrlink.html

  1. 在 hexo 的配置文件 _config.yml 中添加以下代码（不是主题的配置文件）：

#abbrlink配置
abbrlink:
  alg: crc32  # 算法：crc16(default) and crc32
  rep: dec    # 进制：dec(default) and hex

其中 alg 和 rep 为算法和进制，具体区别见下表：

算法进制生成链接
crc16hexhttps://rainnn-w.github.io/posts/66c8.html
crc16dechttps://rainnn-w.github.io/posts/65535.html
crc32hexhttps://rainnn-w.github.io/posts/8ddf18fb.html
crc32dechttps://rainnn-w.github.io/posts/1690090958.html
  1. 修改文件后，执行以下代码部署到 gitee 即可！

hexo clean 
hexo g
hexo d

Notion2Markdown 联动发布 Hexo 博客 - 自动化部署方案 | 遐说 (cuger.cn)

Edited on Views times