前言

作为基础教程,本文以本地搭建 Hexo 环境生成静态文件推送到 GitHub 仓库并使用 GitHub Pages 托管为例,了解了基本流程后,后续您可以更换自己喜欢的主题、使用其他平台托管网站等等

Hexo 简介

Hexo 是一款基于 Node.js 快速、简洁且高效的博客框架,通过 Node.js 将本地的每一篇 Markdown 文章渲染成 html 网页文件,这样我们的博客就是纯静态的网页,如果我们需要修改文章直接修改对应的 Markdown 文件再重新生成静态网页就好了。Node.js 默认的包管理器是 npm , 建议使用 yarn 做为 Hexo 的包管理器,当然根据自己喜好即可。如果使用 Git 管理文章的话,就不用担心文章丢失了,也可以随意回滚版本,这属于 Git 的范畴,本文不做深入讨论

准备工作

假设你现在有一台计算机,Windows、Linux 或者 macOS 都可以,首先我们需要安装 Node.js、Git、npm、yarn 这些 Hexo 需要的工具

Windows

Scoop 安装

在 Windows 下建议使用 Scoop 来安装环境,可以大幅度降低配置成本,👉 详见 在 Windows 下使用 Scoop 管理软件

按照上面安装好 scoop 后,准备 Hexo 所需环境很简单

# 安装 nodejs yarn git 
$ scoop install nodejs-lts git yarn

否则,请按照 👇 下面“手动安装环境”步骤安装

手动安装

对于 Windows,安装 Node.js 会一起安装 npm,yarn 可以通过 npm 安装也可以直接下载 yarn 的安装程序,安装过程如下:

安装 Node.js,建议 LTS 版,🔗 官方下载

Windows Nodejs

安装 Git,🔗 官方下载

下载后直接一路 Next 安装即可

安装 yarn,🔗 官方下载

Linux

以常见的 Linux 发行版为例

Debian/Ubuntu

$ sudo apt update
$ sudo apt install nodejs npm git yarn

ArchLinux/Manjaro

$ sudo pacman -Syy
$ sudo pacman -S nodejs npm git yarn

openSUSE

$ sudo zypper refresh
$ sudo zypper install nodejs npm git yarn

macOS

确保你的 macOS 已经安装了 homebrew,如果没有的话,使用以下命令安装 homebrew:

$ /bin/bash -c "$(curl -fsSL https://raw.GitHubusercontent.com/Homebrew/install/HEAD/install.sh)"

然后使用 homebrew 安装所需工具:

$ brew install git node yarn npm

在你的系统安装好后,在你的 Terminl/Bash 中检查安装是否正确

$ node -v
$ git --version
$ npm -v
$ yarn -v

检查安装

类似输出正确的版本号,应该安装没有问题了,现在我们本地搭建 Hexo 的环境就好了

安装 Hexo

全局安装 Hexo

打开系统的 Terminal/Bash,全局安装 Hexo

Windows

# 如果使用 yarn
$ yarn global add hexo-cli
# 或者使用 npm
$ npm install -g hexo-cli

Linux/macOS

# npm 安装和 yarn 安装二选一即可
$ sudo npm install -g hexo-cli 
# 或者
$ sudo yarn global add hexo-cli

现在我们的 Hexo 已经在本地计算机安装好了,下面我们从自己的第一个 Blog 开始

初始化博客

此步骤对于上面的系统应该都是一样的步骤,在你想要存放本地 Blog 源文件的目录打开 Terminal/Bash

# 初始化一个 Hexo 目录
$ hexo init Blog
# 进入 Blog 目录
$ cd Blog
# 安装依赖,依然是 npm 和 yarn 二选一
$ npm install
# 或者
$ yarn install

此时 Blog 目录下有类似下面的目录结构

.
├── .GitHub 
├── node_modules   # Hexo 所需依赖
├── _config.yml    # Hexo 全局配置文件
├── package.json   # npm软件包及版本信息
├── scaffolds      # 模版文件夹
|   ├── draft.md   # 草稿模板
|   ├── page.md    # 页面模板
|   └── post.md    # 文章模板
├── source         # 资源文件夹
|   ├── _drafts    # 草稿文件夹
|   └── _posts     # 文章文件夹
├── .gitignore     # Git 忽略文件信息
├── _config.[主题名].yml # 主题的配置文件
└── themes         # 主题文件夹

本地预览

在 Blog 目录打开 Terminal/Bash 使用命令 hexo s -p [埠号] 启动本地预览,默认埠为 4000

# 以默认埠启动本地预览
$ hexo s
# 此时本地预览的网址为 http://localhost:4000

# 以自定义埠启动本地预览,比如 250
$ hexo s -p 250
# 此时本地预览的网址为 http://localhost:250

现在本地的 Hexo 已经搭建完成了,接下来聊聊将本地生成的 Hexo 静态网页推送到 GitHub 仓库并使用 GitHub Pages 服务托管我们的网站

GitHub 托管网站

首先肯定得有一个 GitHub 账号,没有的话就注册一个,记得别用国内的 QQ 邮箱之流,以后有的坑(这是后话了)

连接本地 Git 和 GitHub

打开本地 Terminal/Bash

$ git config --global user.name "username"   # username是你的GitHub用户名,注意大小写
$ git config --global user.email "email"     # email是注册 GitHub的邮箱
$ ssh-keygen -t ed25519 -C "email"           # 生成ed25519密钥对,email同上

默认密钥对在用户目录的 .ssh 目录下,在该目录你可以看到 id_rsaid_rsa.pub ,使用文本编辑器打开 id_rsa.pub 文件并复制

打开 GitHub,点击头像的 settings 选项进入设置,在 SSH and GPG keys 中粘贴 id_rsa.pub 内容,并点击 Add SSH key

添加GitHub SSH Key

回到本地的 Terminal/Bash,输入命令连接 GitHub

$ ssh -T [email protected]

出现一个 hostname 提示输入 yes 回车,类似下面的提示就代表没问题了

本地连接GitHub完成

回到 GitHub,新建一个名为 username.github.io 的仓库,username 是你的 GitHub 用户名如果你不是 GitHub Pro 用户,这个仓库应该要设置为 Public 可见?我忘记了,那就设置为 Public 吧

修改 Blog 目录下的 Hexo 全局配置文件 _config.ymldeploy 字段

deploy:
  type: git
  repo:
    github: https://github.com/username/username.github.io.git  # username是Github用户名
  branch: master                                                # 部署到仓库的分支名

安装 Hexo 推送 Git 插件

# npm 安装和 yarn 安装二选一即可
$ npm install hexo-deployer-git --save
# 或者
$ yarn add hexo-deployer-git

测试推送网站静态文件到 GitHub 仓库

$ hexo clean  # 清除生成的静态文件和缓存
$ hexo g      # 生成新的博客静态文件
$ hexo s      # 启动本地预览
$ hexo d      # 推送博客静态文件到远程仓库

如果每次推送都需要输入 GitHub 用户名密码

$ git config --global credential.helper store

前面都没问题的话,现在你的博客应该推送到 GitHub 仓库了,如下图所示打开 GitHub 仓库的 Pages 服务,注意对应仓库的分支和路径

打开Pages服务

GitHub Pages 绑定自定义域名

GitHub Pages 默认提供的是它免费提供的 github.io 的二级域名,如果你有一个自己的域名,绑定自己的域名当然更好了

Blog 目录的 source 下新建一个名为 CNAME 的文件(无文件后缀,注意大小写),里面写上想要绑定的域名

绑定自定义域名

hexo cl && hexo g && hexo d 推送更新到 GitHub 仓库,在域名的 DNS 解析记录增加一条 CNAME 解析到 username.github.io. 的记录,稍等片刻 DNS 解析记录生效后,去 GitHub 仓库的 SettingsPages 字段设置你的自定义域名并强制启用 HTTPS,现在你的博客应该可以通过 https://your.domain 访问了

升级 Hexo

Hexo 由热爱开源的开发者们更新维护,如果 Hexo 发布了新版本,升级也很简单

对于 npm 安装的 Hexo

# 查看hexo版本信息
$ hexo -v
# 全局升级 hexo-cli
$ npm install hexo-cli -g
# 检查升级
$ npm install -g npm-check
$ npm-check
# 开始升级
$ npm install -g npm-check-updates
$ npm-upgrade
# 更新全局依赖
$ npm update -g
$ npm update --save

对于 yarn 安装的 Hexo

# 查看hexo版本
$ hexo -v
# 全局升级hexo-cli
$ yarn global add hexo-cli
# yarn添加 npm-check-updates
$ yarn global add npm-check-updates
# 升级全部依赖,yarn.lock和package.json也会被更新
$ ncu --upgrade --upgrade All
# 全局更新
$ yarn upgrade --latest
# 安装依赖
$ yarn install
# 或者只需要一步代替上面yarn更新hexo步骤(忽略package.json指定的版本范围所有的都将被升级到最新版)
$ yarn upgrade-interactive --latest

Hexo 之禅

在上面的步骤完成后,你可能对默认的主题不满意,Hexo 目前有上百个主题,其中绝大部分都是免费开源并且长期有作者维护的,你可以在 Hexo-ThemeGithub 搜索 查看、挑选你喜欢的主题(当然大佬也可以自己写 😄 )

博主忠告: Hexo 主题的挑选和域名的挑选一样重要,请一定要慎重考虑!

请看 《 Hexo 之禅 》:

  • 折腾主题是Hexo的最大原罪。专注于创作,而不是令人眼花缭乱的效果。名家之博,不假于主题之花哨,而得知于内容;
  • 样式千万种,花哨莫去求。主题若彩虹,遇上方知有;
  • 有问题记得首先去查看 官方文档,善用搜索引擎。没有人有义务的无条件帮你;
  • 善于分享,赠人玫瑰手有余香。写作是检索你对知识理解程度的手段,而分享是你继续创作的动力;
  • 不忘初心,方得始终。

引伸阅读