LITREILY

Hexo + Github 搭建博客记录

2020-12-20技术

部署在 Github 的 Hexo 博客搭建过程记录。

引言：闲来无事心血来潮想码码代码，于是便想搭建一个博客，起初是想学 Python，于是通过搜索终于看见一篇 Python+Django 搭建博客的挺详细的教程：Django 搭建个人博客，于是兴高采烈地跟着复制码代码，可是到后面我突然意识到，要部署到服务器意味着要购买域名和云服务器，然后进行配置，一来麻烦二来烧钱，不过是玩玩而已，遂放弃。接着我又看到 PHP+WordPress 搭建博客的教程：果核建站教程，相比于之前自己码一堆代码，这个方便很多，但是同样要购买云服务器和域名的。后来我在B站看到 Gitee+Hexo 搭建博客教程：零成本-搭建私人永久博客，才知道可将博客托管到 Gitee 或者 Github 上。于是进而搜索到几篇相对详细的关于 Github+Hexo 搭建免费博客的教程，其参考链接附在文末。

博客搭建

前期准备

本博客在 Window10 环境下搭建。
  • 安装 Git、Node.js

下载并安装 Git、Node.js。除了安装路径，我全部选择默认选项安装。

安装完成后可以运行以下命令行验证是否安装完成：
git --version
node -v
npm -v
若出错可尝试检查环境变量路径或重启电脑或重新安装。

  • 安装 Hexo

在随意位置鼠标右键 Git Bash Here

后面提到命令若无特别说明在根目录下 git bash 运行。

输入npm install -g hexo，回车安装 Hexo。

其安装时间较长，若长时间未反应可参考 零基础免费搭建个人博客-hexo+github中关于安装 hexo 部分：

npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm install -g hexo-cli

安装过程显示 warn ：npm WARN deprecated fsevents@2.1.3: Please update to v 2.2.x，忽略即可：

cnpm install hexo --save

若出现错误，根据错误直接百度。

安装完成后查看是否成功：hexo -v

初始化 Hexo

  • 创建文件夹

根据自己情况选择合适位置建立文件夹用以存放相应文件，例：D:\Blog。

  • 初始化 hexo

在Blog文件下，右键Git Bash Here，输入命令：hexo init，进行初始化。

  • 初始配置

打开根文件夹下的_config.yml文件，进行基础配置。

参数 描述
title 网站标题
subtitle 网站副标题
description 网站描述
keywords 网站的关键词。支援多个关键词。
author 作者名字
language 网站使用的语言。对于简体中文用户来说，使用不同的主题可能需要设置成不同的值，请参考你的主题的文档自行设置，常见的有 zh-Hans和 zh-CN。
timezon 网站时区。Hexo 默认使用您电脑的时区。请参考 时区列表 进行设置，如 America/New_York, Japan 和 UTC 。一般的，对于中国大陆地区可以使用 Asia/Shanghai。

更多配置参考：官方文档

  • 浏览本地博客

运行以下命令：

hexo g
hexo s

更多 hexo 命令参考：hexo常用命令笔记

在浏览器输入localhost:4000，可浏览本地博客效果：

按 Ctrl+C 可关闭 server。

博客写作

  • 新增博客

可在 D:\Blog\source\_posts 文件夹下新建 博文标题.md 文件。

也可运行命令行 hexo new "博文标题"，新生成文件开头是一些初始化设置，可以在 \scaffolds\posts.md 中修改默认设置:

---
title: {{ title }}
date: {{ date }}
tags: 
top:
---

同样在 \scaffolds 文件夹中可以自己建立模板，例如 demo.md，输入命令 hexo new demo "博文标题" 就可以直接使用模板了。

---
title: 示例
date: 2020-12-20 18:10:10
tags: 
- 标签1
- 标签2
top: 3 #自定义文章排序
---
正文

注意:

_config.yml 中有个 permalink 设置，默认为 permalink: :year/:month/:day/:title/，即存放博客文章的永久链接格式，例如新建了一篇 Hexo+Github搭建博客记录 博文，其将被存放到 Github 仓库的 Lykisun.github.io/2020/12/20/Hexo+Github搭建博客记录/ 目录。

如何让博文列表不显示全部内容：
在合适的位置加上 <!--more--> 即可。

博客部署

本博客选择部署到 github 上。

配置 GitHub 仓库

  • 申请 github 账号
  • new repository

点击右上角你的头像 -> Your repositories -> New 新建仓库。

在 Repository name 一栏填入 {GithubID}.github.io（ {GithubID} 为你的 GitHub ID，与前面的 Owner 一致，例如我的是 Lykisun/Lykisun.github.io ），Description 可不填，然后点击 Create repository 添加新仓库。

配置 _config.yml

  • 在 _config.yml 进行配置

在文件末修改：

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

若 hexo d 出现 fatal: unable to access https://github类错误，将 repo 地址改为 SSH 地址：git@githu .com:User/User.github.io.git`

部署到 GitHub

  • 配置 SSH Key

输入命令 ssh-keygen -t rsa -C {email} 来生成 SSH，其中 {email} 为你注册 github 的邮箱账号，直接三次回车即可。
完成后用记事本打开 C:\Users\用户名\.ssh\id_rsa.pub 并复制 ssh key 公钥。
回到 GitHub，点击头像 -> Setting -> SSH and GPG keys -> New SSH key， Title 可不填，将复制内容填入 Key 栏，然后点击 Add SSH key。
运行命令 ssh -T git@github.com，若出现 Hi yourname! You've successfully authenticated, but GitHub does not provide shell access. 表示 SSH 配置成功。

输入命令 npm install hexo-deployer-git --save 安装 deployer 。

  • 部署博客

依次输入命令：
hexo clean
hexo g
hexo d
此过程第一次发布会弹出浏览器页面登陆Github验证并授权，显示 INFO Deploy done: git 即部署完成。打开你的 Github 仓库 https://github.com/Lykisun/Lykisun.github.io/ 可以看见部署文件，打开 Lykisun.github.io 就可以看到你的博客了。

若出现错误 git config --global user.email "you@example.com" git config --global user.name"Your Name"，则按提示依次输入 git config --global user.email "邮箱"，git config --global user.name "Github ID" 并回车即可。
若出现其他错误可参考 史上最详细“截图”搭建Hexo博客并部署到Github、hexo部署至Git遇到的坑 相关错误解决办法，或直接搜索。

博客美化

主题下载

在 Hexo官网Hexo Themes可浏览主题，然后通过 git clone 主题的github地址 themes/{name} （{name}为主题名字，推荐使用最受欢迎的主题 next）命令或者根据主题的 Github 主页说明进行安装获取主题，下载的主题在 Blog\themes\ 文件夹中。
下载好主题后，打开根目录下的 _config.yml，搜索 theme 将 theme: landscape 修改为 theme: 下载的主题名。

在 hexo 官网，点击图片为打开该主题的 Demo 博客，点击下方蓝色的文字即可打开该主题的 GitHub 主页

主题配置

建议先使用配置完备的 next 主题，下载后打开 Blog\themes\下载的主题\_config.yml 主题配置文件进行配置，其配置参数一般可以在其 Github 主页或者直接在 Blog\themes\下载的主题\README.md 查看。例如 Schemes 参数：

# Schemes
scheme: Muse
#scheme: Mist
#scheme: Pisces
#scheme: Gemini

可以选择不同主题样式，在其 GitHub 主页 可以看到不同样式的 Live Preview 个人博客展示。
想阅读中文详细参数设置可参考：hexo博客搭建指北

我在使用next主题时并没有什么问题，但是在更换其他主题，博客页面显示：

搜索后查到： 原因是hexo在5.0之后把 swig 给删除了需要自己手动安装。
运行 npm i hexo-renderer-swig 后，过一会就正常了。

博客维护

上述方法部署博客，最终源码位于本地，生成文件部署在 Github 上。我们也可以将源码 PUSH 到 Github 上作为备份，当然这样子源码是公开的。

Push 源代码

在 Github 新建仓库，在 Blog 文件夹 Git Bash Here。

在2020年10月1起，Github 默认主分支从 master 更名为 main，以往提交方式会默认创建一个 master 分支，执行 git config --global init.defaultBranch main，可将本地 git init 的时候默认分支修改为 main。由于我们之前默认以 master 作为仓库主分支，因此在此不进行更改。

运行以下命令：
git init
git add .
git commit . -m "initialize" //注释
git remote add origin git@github.com:Lykisun/HexoBlog.git //本地仓库和远程github关联
git pull --rebase origin master //可选，若仓库存在例如README文件时报错可执行
git push -u origin master

进行文件更新时：

git add 文件名

git commit . -m "注释"

git push -u origin main
删除分支：

git push origin :分支名称 （注意空格位置）

CI 控制

原本根据 Hexo的版本控制与持续集成，想要使用 AppVeyor 来建立 CI，但是 AppVeyor 一直注册失败，加上根据评论看出会有不少问题，于是放弃该方案。

后来根据 将 Hexo 部署到 GitHub Pages，成功利用 Travis CI 将源码备份到 Github 仓库，并实现自动编译部署到分支。此后只需要将改动 PUSH 到仓库，就会自动进行部署博客。

问题

  1. 若 hexo d 出现错误 git config --global user.email "you@example.com" git config --global user.name"Your Name"，则按提示依次输入 git config --global user.email "邮箱"，git config --global user.name "Github ID" 并回车即可。
  2. 若 hexo d 出现 fatal: unable to access https://github类错误，将 repo 地址改为 SSH 地址：`git@github.com:User/User.github.io.git`。
  3. 若git remote add origin https://github.com/Lykisun/xxx.git 报错：git remote add origin https://github.com/Lykisun/xxx.git， 则执行：git remote rm origin，然后再执行：git remote add origin https://github.com/Lykisun/xxx.git。

参考链接

搭建个人博客-hexo+github详细完整步骤
Hexo博客搭建—从入门到精通
hexo博客搭建指北
史上最详细“截图”搭建Hexo博客并部署到Github
小茗同学的博客园
Hexo搭建Github静态博客
使用GitHub搭建Hexo博客

本文作者：长大了的谢星星★
本文链接：https://xiexinxing.github.io/2020/12/20/Hexo+Github搭建博客/
版权声明：随意转载，注明出处♥
HexoGithubBlog
目录