使用 Hexo + GitHub 搭建个人博客

一、前言

本文是作者对于Hexo搭建的阶段总结。汇总了一些搭建过程中找到的资料。希望能够较为全面的记录博客搭建的全过程。给自己备忘，为他人提供帮助。

二、安装依赖环境

1.Hexo简介

Hexo是一款基于Node.js的静态博客框架，依赖少易于安装使用，可以方便的生成静态网页托管在GitHub和Coding上，是搭建博客的首选框架。

2.前期安装

2.1安装Git

Git是目前世界上最先进的分布式版本控制系统，可以有效、高速的处理从很小到非常大的项目版本管理。也就是用来管理hexo博客文章，上传到GitHub的工具。因为 Hexo 是一个托管于 GitHub 上的开源项目，所以安装 Hexo 的时候需要使用 Git 来下载源码和依赖代码，而且后面要将自己的博客发布到 GitHub pages 上面也需要使用 Git。

windows：到git官网上下载,Download git,下载后会有一个Git Bash的命令行工具，以后就用这个工具来使用git。windows在git安装完后，就可以直接使用git bash来敲命令行了。

linux：

1	`sudo apt-get install git`

2.2安装nodejs

Hexo是基于Node.js开发的，所以需要安装一下Node.js环境。

windows：Node.js选择LTS版本就行了。

linux：

1 2	`sudo apt-get install nodejs sudo apt-get install npm`

三、安装Hexo

首先在本地新建一个空文件夹myBlog，用来存放 Hexo 的文件和以后要写的博客文件，注意不要有中文路径，避免可能出现的问题。我这里建立在 D:\Mycode\projects\Hexo Blog\myBlog。

然后cd到这个文件夹下。

# 进入到myBlog文件夹
cd myBlog
# 安装 hexo 框架
npm install -g hexo-cli
# 初始化hexo
hexo init
# 安装 hexo 依赖包
npm install

安装 hexo 模块，-g表示安装全局模块。

hexo 初始化，会用 git clone命令去 GitHub 下载一个 hexo 默认模板代码库。

安装依赖包，类似安装 pip 的 requirement 文件，会根据刚下载的代码库中的配置文件，下载并安装所需依赖包。

新建完成后，指定文件夹目录下有：

node_modules: 依赖包
public：存放生成的页面
scaffolds：生成文章的一些模板
source：用来存放你的文章
themes：主题
_config.yml: 博客的配置文件

打开hexo的服务

# 清除缓存文件，建议写完文章后执行一次
hexo clean 
# 生成静态文件（生成 public 文件夹，写完文章执行）
hexo g                       g->generate
# 启动服务器
hexo s                       s->server

# 或者直接执行
hexo clean && hexo g && hexo s

此时，在浏览器输入http://localhost:4000/，就可以看到 Hexo 搭建的默认主题博客示例了。

更换主题
参考开始使用 | Hexo Fluid 用户手册 (fluid-dev.com)

去主题官网，里面有上百种主题，这里选择 Fluid 主题，也是我个人在用的。

执行命令，将主题安装到myBlog根目录
1
npm install --save hexo-theme-fluid
然后在博客目录下创建 _config.fluid.yml，将 Fluid 主题的 _config.yml 内容复制进去。

后续修改博客的配置，例如标题，头像，评论等等只需要在 _config.fluid.yml文件中配置就行。

1.指定主题
修改myBlog博客目录中的 _config.yml：
1
2
theme: fluid  # 主题
language: zh-CN  # 语言
2.创建关于页面
首次使用主题的「关于页」需要手动创建：
1
hexo new page about
创建成功后，编辑博客目录下 /source/about/index.md，添加 layout 属性。

修改后的文件示例如下：
1
2
3
4
5
6
---
title: about
layout: about
---

这是关于页面
打开hexo的服务
1
2
3
4
5
6
7
8
9
# 清除缓存文件，建议写完文章后执行一次
hexo clean 
# 生成静态文件（生成 public 文件夹，写完文章执行）
hexo g                       g->generate
# 启动服务器
hexo s                       s->server

# 或者直接执行
hexo clean && hexo g && hexo s
此时，在浏览器输入http://localhost:4000/，就可以看到 Hexo 搭建的 Fluid 主题博客示例了。

四、Github部署

我们利用 Hexo 框架在本地搭建了一个精美的博客，可是只能本地访问，要想发布到互联网上，还需要将它部署在网站上。

博客的功能只要能阅读文章就够了，因此可以考虑将其部署在提供静态网页托管服务的网站上，这样就省去了购买服务器(云主机)、域名、 IP 这些步骤。

下面介绍怎样利用 GitHub 提供的免费静态网页托管服务 GitHub Pages 建站。

1.GitHub Pages 简介

GitHub 是世界上最流行的软件源代码托管服务平台。

一个项目的主页如果只有源码，对新接触的人很不友好，不知从何处下手。虽然已经有了 readme.md 文件，但毕竟不如一个直观的网页来的直接。于是 GitHub 就设计了 Pages 功能，允许用户设计一个图文并茂的网页作为项目首页。

2.GitHub Pages 准备

首先注册一个 GitHub 账号。

打开 GitHub 主页，点击左上角New。

由于每个 GitHub 账户只能建立一个 GitHub Pages 页面，所以 Repository name 必须填username.github.io，否则就会建立一个普通仓库，GitHub Pages 功能不会生效。比如我的用户名是Sulawesi02，Repository name 这里就填Sulawesi02.github.io。

注意勾选 Public。

网上有的教程建议勾选 Add a README file自动生成一个 readme.md文件，但这样做后续发布 Hexo 到 GitHub时会出问题，所以这里建议不要勾选。

点击create repository，创建仓库。

3.将hexo部署到GitHub Pages

3.1配置 Git 参数

在博客根目录配置用户名和邮箱

1 2	`git config --global user.name "Sulawesi02" git config --global user.email "18293411692@163.com"`

使用以下命令生成 SSH Key：

1	`ssh-keygen -t rsa -C "18293411692@163.com"`

接着一路回车，直到结束。会显示已经生成了.ssh的文件夹。在你的电脑中找到文件夹C:\Users\ useraccount /.ssh/id_rsa.pub，用记事本打开，复制全部内容。

打开自己的 Github 主页，点击右上角的头像，点击Settings。

点击SSH and GPG keys，然后点击New SSH keys。

找到SSH keys的设置选项，点击New SSH key 把id_rsa.pub里面的信息复制进去。

Title 可以随便起一个名字，Key 填写上一步复制的公钥内容，然后点击Add SSH key

最后执行下面的命令，测试一下 Git 参数是否配置成功。出现Hi Sulawesi02! You've successfully authenticated, but GitHub does not provide shell access.，说明配置成功。

1	`ssh -T git@github.com`

3.2发布

打开站点配置文件 _config.yml，翻到最后，修改为

deploy:
  type: git
  repo: git@github.com:Sulawesi02/Sulawesi02.github.io.git
  branch: main

安装deploy-git 插件，也就是部署的命令,这样你才能用命令部署到GitHub。

1	`npm install hexo-deployer-git --save`

然后

# 清除缓存文件，建议写完文章后执行一次
hexo clean 
# 生成静态文件（生成 public 文件夹，写完文章执行）
hexo g                       g->generate
# 部署到远程站点
hexo d                       d->deploy

# 或者直接执行
hexo clean && hexo g && hexo d

执行成功可以通过``https:// Sulawesi02.github.io` 来访问博客了。

五、编写Markdown文章

Typora + PicGo + GitHub图床 + jsDelivr CDN加速

使用 Typora 编写markdown文章, 拖入或者粘贴图片时，会自动调用 PicGo 将图片上传到 GitHub图床，并把返回的图片链接粘贴到文章中。GitHub 存储的图片地址是 https://raw.githubusercontent.com 开头的网址，这个域名在某些地方可能打不开或者很慢导致图片加载失败，所以需要对图片配置 CDN 加速。

1.Typora

使用 Typora 编写markdown文章。

写文章时自己在开头添加好title，date，tags等字段。

图床(Picture host，即提供外链访问的图片存储服务器)

通俗讲就是你把图片上传到一个图床提供者的图片服务器上，它会生成一个存储链接，你就可以随时通过这个链接就下载这个图片，而且还可以把这个链接放到 html 里或者 Markdown 文件里，浏览时再由浏览器或者阅读器自动加载出来。

对于我们的 Markdown 格式的博客而言，图片就成了一个文本，你可以把文章复制到 CSDN/简书/知乎/个人博客等地方，每次换地方不需要重新上传图片，这些网站都能根据图床链接将图片加载出来。

我们可以利用 GitHub 的存储能力和对外开放访问的特点，将 GitHub 仓库作为图床。

2.GitHub图床

2.1新建仓库

打开 GitHub 主页，点击左上角New。

新建一个仓库 Pictures 用于存储图片。

2.2获取 repo tokens

这个 token 主要用于让 PicGo 有权限往我们的仓库 push 代码(图片)。

点击自己的头像，选择Settings。

选择Developer settings。

点击 Personal access tokens。然后点击Generate new token，因为是敏感操作，此时需要确认密码。

Note填写 token 用途，用于备忘。下面只需要勾选repo，只给更新仓库的权限。最后点击最下面的Generate token创建成功。

复制字符串下一步使用。注意，为了安全起见此字符串只会出现一次，点击其他页面后就无法再查看了，需要重新创建，所以最好先保存到本地编辑器中。

3.PicGo

PicGo 是一款基于 electron-vue 开发的用于快速上传图片并获取图片 URL 链接的开源工具。

当写文章需要引用图片时，如果打开浏览器将图片上传到图床服务器，再把链接复制粘贴到文章中，效率太低。PicGo 便是做这件事的软件，只要配置好图床类型，就可以使用 PicGo 在插入图片时自动把图片上传并返回链接地址，配合 Typora 还可以实现在文章中插入图片时自动上传并替换为链接内容。

打开 PicGo ->图床设置 ->GitHub图床

设定仓库名：用户名/仓库名
设定分支名：master
设定Token：填写上一步获取的 token 值
指定存储路径：img/
设定自定义域名：用于修改返回的 url 前缀，不填则返回原始 url。后面配置CDN加速需要更改此项，现在可不填

选择设为默认图床，点击确定保存配置。

配置完成后，点击上传区，随便选择电脑上一张图片拖动到上传区，上传成功后会弹窗提示，将该 url 复制到浏览器打开就可以看到图片。可以在PicGo设置，打开上传后自动复制URL，这样上传成功后图片 url 会自动复制在剪贴板，可以直接粘贴到记事本。

4.jsDelivr CDN加速

从上一步可以看到 GitHub 存储的图片地址是 https://raw.githubusercontent.com 开头的网址，这个域名在某些地方可能打不开或者很慢导致图片加载失败，所以我们需要对图片配置 CDN 加速。

CDN的全称是(Content Delivery Network)，即内容分发网络。其目的是通过在现有的Internet中增加一层新的CACHE(缓存)层，将网站的内容发布到最接近用户的网络”边缘“的节点，使用户可以就近取得所需的内容，提高用户访问网站的响应速度。通俗来讲，就是 CDN 服务商在全球各个地方建立服务器把要加速的站点进行缓存备份，当你访问站点时实际上是从离你最近的服务器访问缓存，速度自然就快了。

原始图片地址的格式为https://raw.githubusercontent.com/用户名/仓库名/分支名/目录/图片名.png，https://raw.githubusercontent.com/yushuaige/myblog/master/img/image-20201219114500183.png，

更改后的图片地址的格式https://cdn.jsdelivr.net/gh/用户名/仓库名@分支名/目录/图片名.png，

https://cdn.jsdelivr.net/gh/yushuaige/myblog@master/img/image-20201219114500183.png。

PicGo 中需要改一下自定义域名，之后上传图片自动生成的链接就是 jsDelivr 的链接了。具体就是在设定自定义域名填写https://cdn.jsdelivr.net/gh/用户名/仓库名@master。

Typora 配置

打开文件->偏好设置->图像，选择插入图片时上传图片，勾选对本地位置的图片应用上述规则、对网络位置的图片应用上述规则、优先使用相对路径三个选项，上传服务设定选择PicGo (app)，PicGo 路径选择自己电脑上 PicGo 的安装路径。

美中不足的是虽然CDN加速解决了查看图片的速度，但是上传还是有点慢的，会出现在 Typora 中粘贴了一张图片后需要5秒以上才能上传成功并加载出来，还有就是本地没有分类备份(其实在C:\Users\用户名\AppData\Roaming\Typora\typora-user-images目录下有缓存)。

六、发布 Hexo 到 GitHub

1.手动发布

本地文章保存在E:\Markdown目录，Hexo 保存在D:\Mycode\projects\Hexo Blog\myBlog\source\_posts，发布 Hexo 之前需要先把本地文章拷贝到D:\Mycode\projects\Hexo Blog\myBlog\source\_posts目录。

1	`python copy_to_hexo.py`

可以查看D:\Mycode\projects\Hexo Blog\myBlog\source\_posts目录下是否生成新文章

# 进入到myBlog文件夹
cd myBlog

# 发布到本地
hexo clean && hexo g && hexo s

访问 http://localhost:4000/

# 发布到远程
hexo clean && hexo g && hexo d

访问 https://sulawesi02.github.io/

2.一键发布脚本

双击 post_my_blog.bat，或者在命令行执行 post_my_blog.bat

教程

#Hexo

使用 Hexo + GitHub 搭建个人博客

https://sulawesi02.github.io/2024/08/17/2024-08-17-使用-Hexo-+-GitHub-搭建个人博客/

作者

Sulawesi02

发布于

2024年8月17日

许可协议

git 上一篇