Hexo + Github Pages 搭建个人博客

发表于 更新于 分类于 本文字数： 2.3k 阅读时长 ≈ 8 分钟
最近一直在折腾个人博客, 对于我这个前端纯小白而言, 真是感慨万千.

前言

搭建个人博客的流程大概是: 先搭建博客环境, 就像你要玩电脑游戏, 首先得先买一台电脑一样. 这不废话吗 之后在电脑上创建博客的本地文件, 最后再将创建好的本地文件上传到网上就可以了. 这里我使用的是 Hexo 和 Github Pages 来搭建个人博客.

环境配置

安装 Git

进入 Git 官方网站 下载安装即可.

验证方法: 在桌面右键, 只要出现 Git GUI Here 和 Git Bash Here 就表示安装成功了.

安装 Nodejs

进入 Nodejs 官方网站 下载安装即可.

LTS 版本即可满足使用, 可以在 cmd 中使用 node -v 和 npm -v 进行验证, 出现版本号就说明成功了.

安装 Hexo

安装 Hexo 之前, 如果你想要更改 Hexo 的安装位置 (Hexo 默认会安装在 C 盘), 可以在 cmd 中输入下面的命令, 记得把路径改为自己的:

1
2
npm config set prefix "H:\Programs Computer\NodeGobal"
npm config set cache "H:\Programs Computer\NodeCache"

之后可以使用以下命令查看设置:

1
2
npm config get prefix
npm config get cache

先切换 npm 源: 打开 cmd, 输入下面的命令:

npm config set registry https://registry.npm.taobao.org

之后安装 Hexo:

npm install -g hexo

创建本地博客

  1. 新建一个文件夹, 来放置本地博客, 名字以及路径自己决定. 我的是: F:\WorkSpace\HexoBlog
  2. 进入这个空的文件夹, 点击鼠标右键, 选择 Git Bash Here, 会弹出一个类似 cmd 的窗口, 这个窗口会一直使用, 不要关闭, 如果不小心关闭了, 再次回到这个文件夹中, 在空白处点击鼠标右键, 选择 Git Bash Here 即可再次打开.
  3. 初始化本地博客, 在 Git Bash Here 中输入: hexo init
  4. 安装默认依赖包, 在 Git Bash Here 中输入: npm install
  5. 生成静态文件, 在 Git Bash Here 中输入: hexo generate 或者命令的缩写 hexo g, 此时网页就创建好了, 下面我们来预览一下博客的样子.
  6. 开启服务, 在 Git Bash Here 中输入 hexo server 或者命令的缩写 hexo s, 服务默认开启网址: http://localhost:4000 , 此时在浏览器中即可预览博客.

【注】

  • 预览完毕后记得按 Ctrl + C 停止服务.
  • 如果不小心按了Ctrl + C 停止了服务, 再次输入 hexo s 开启服务即可.
  • 如果 http://localhost:4000 无法预览博客, 可能是 4000 端口被占用了, 我们先按 Ctrl + C 停止服务, 然后使用下面的语句切换端口: hexo server -p 端口号 , 这里的端口号从 4000 往上加即可, 如: 4001, 具体使用哪个不用太纠结, 可以预览博客即可.

关联 GitHub 和 Hexo

经过前面两个步骤, 我们已经在本地创建好了博客, 也可以通过本地服务进行预览, 但是这样网页仅仅保存在本地, 网络上的人无法查看的, 此时我们就要将本地博客和 GitHub Pages 关联, 或者说上传到 GitHub 上, 这样所有人都可以查看了.

开启 GitHub Pages

GitHub Pages: 其本来用于介绍托管在 GitHub 上的项目, 由于它的空间免费稳定, 因此适合用来搭建个人博客, 但是有以下注意点:

  • 每个 GitHub 账号只能有一个仓库来存放个人主页,
  • 仓库的名字必须是 username.github.io,
  • 通过 http://username.github.io 来访问个人主页,
  • 个人主页的网站内容是在 master 分支下.

接下来我们创建个人主页仓库: 在 GitHub 首页右上角头像左侧的加号处, 点击: New repository, 仓库名字必须是: 你的 Github 用户名.github.io, 下面选择 Public, 下面的选项是让你是否在仓库中初始化一个 README.md 文件, 自己随意. 最后点击创建仓库, 这样 GitHub Pages 就创建好了.

获取 SSH 密钥

直达车:

1
2
3
git config --global user.name "KurohaKirito"
git config --global user.email "KurohaKirito@gmail.com"
ssh-keygen -t rsa -C "KurohaKirito@gmail.com"

至此, 我们的本地博客和 GitHub Pages 都准备好了, 下面就可以把网页部署 (上传) 到 GitHub Pages 上了. 在部署之前, 我们先设置一下 SSH 密钥. 因为如果不配置 SSH 密钥, 每次部署本地博客到 GitHub Pages 时, 都要输入 Github 账号密码, 非常繁琐.

获取 SSH 密钥: 如果你是第一次使用 Git, 要先配置 Git 的用户名和邮箱, 在 Git Bash Here 中输入:

1
2
git config --global user.name "username"
git config --global user.email "mail"

上面的 username 改成你 GitHub 的用户名, mail 改成你 GitHub 的邮箱. 之后再次输入:

1
ssh-keygen -t rsa -C "mail"

mail 要用你自己的 Github 邮箱. 回车后会依次出现三个选项, 直接全部回车即可. 这样 SSH 密钥就生成了, 接下来需要密钥填写到 GitHub 上.

在 C:\Users\用户名\.ssh目录中, 会出现这样两个文件: id_rsa 和 id_rsa.pub

打开 id_rsa.pub 文件, 复制里面所有的内容.

之后打开浏览器, 登录 GitHub, 依次点击头像下的 Settings, 左面的 SSH and GPG keys, 右上角的 New SSH key, 填写标题时, 最好和你那个网页文件夹的名字一致, 方便记忆和日后查找.
点击 Add SSH key 并且验证 GitHub 密码, 即可完成密钥的添加.

部署本地博客到 GitHub Pages

之前的步骤中 SSH 密钥已经设置好了, 接下来就可以部署本地博客到 Github Pages 了, 在这里不建议直接使用 Git 进行部署, 而是使用 Hexo 中的 Hexo deploy 插件进行一键式部署, 方便快捷.

首先要安装 Hexo deploy 插件, 还是在 Git Bash Here 中输入命令:

1
npm install hexo-deployer-git --save

之后打开网页根目录下的 _config.yml 文件, 文件的末尾是这样的:

1
2
3
4
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type:

修改成下面这样:

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: git@github.com:KurohaKirito/KurohaKirito.github.io.git
  branch: master

repo 就是你仓库的地址: 有 SSH 和 HTTPS 两种格式, 你选择哪种都可以. 我选择的是 SSH 格式. 在你仓库页面上点击绿色按钮 Clone or download 即可获得仓库地址.

配置完成之后, 执行部署命令, 还是在 Git Bash Here 中输入命令: hexo deploy 或者命令的缩写: hexo d, 输入 GitHub 用户名, 密码即可.

验证方法: 在浏览器中输入网址: https://用户名.github.io , 用户名修改为你自己的 Github 用户名, 如果能看到之前博客的样子, 就说明部署成功了!

附录

常用 Hexo 命令

命令 作用
hexo help 查看帮助
hexo -v 查看本地环境
hexo init 初始化 hexo 目录
hexo new "postName" 新建文章
hexo new page "pageName" 新建页面
hexo gernerate 生成网页
hexo server 本地预览
hexo deploy / hexo d 部署到远程服务器
hexo clean 清除缓存 建议每次执行命令前先清理缓存
hexo clean && hexo g && hexo s 一键生成部署
hexo clean ; hexo g ; hexo s 一键生成部署

hexo 主题

下面是我搜集的一些主题及其项目开源地址:

  • Gal
  • Indigo
  • Spfk
  • Smackdown
  • Black-blue
  • Shana
  • Yilia
  • Winterland
  • OKCjs
  • AnimaStars
  • Coney
  • Kiddochan
  • Landscapeplus
  • NexT
  • Hexo Themes Net

警告与错误的处理

Warning: LF will be replaced by CRLF

问题原因: 不同操作系统所使用的换行符是不一样的:

  • Unix / Linux 采用换行符 LF 表示下一行 (LF: LineFeed 换行)

  • Dos / Windows 采用 回车 + 换行 CRLF 表示下一行 (CRLF: CarriageReturn LineFeed 回车换行)

  • Mac OS 采用回车 CR 表示下一行 (CR: CarriageReturn 回车)

在 Git 中, 可以通过以下命令来显示当前你的 Git 中采取哪种对待换行符的方式:

git config core.autocrlf

此命令会有三种输出: true, false, input

  • true: Git 会将你 add 的所有文件视为文本文件, 将结尾的 CRLF 转换为 LF, 而 checkout 时会再将文件的 LF 格式转为 CRLF 格式.

  • false: line endings 不做任何改变, 文本文件保持其原来的样子.

  • input: add 时 Git 会把 CRLF 转换为 LF, 而 check 时仍旧为 LF, 所以 Windows 操作系统不建议设置此值.

解决办法: 将 core.autocrlf 设为 false 即可解决这个问题, 不过如果你跨平台工作的话, 还是需要考虑一下.

如果你想要将 core autocrlf 设置为 true , 有一个需要慎重的地方, 当你上传一个二进制文件, Git 可能会将二进制文件误以为是文本文件, 从而也会修改你的二进制文件, 从而产生隐患.

如果你不跨平台的话, 进行如下设置即可: git config --global core.autocrlf false

Error: validation failed

原因: issue 的 id 有长度限制! 最大长度限制是 50 个字符.

每个 issue 有两个标签, 一个是 gitment, 另一个是 id. 将 id 进行如下配置: id: '<%= page.date %>', 因为日期是永远不会超出 50 个字符的.