Hexo+GitHubPages搭建个人博客网站

Hexo 是一个静态网站生成器，GitHub Pages 可以免费帮我们托管静态网站，本文主要介绍如何结合两者搭建一个博客网站。
官网：https://hexo.io/zh-cn/

Hexo 介绍

Hexo 是一个基于 Node.js 开发的静态网页生成器，官网的说明是博客框架，但是我认为它不仅仅可以用于博客，还可以用于企业宣传站、产品展示、文本文档等以信息展示为主的网站。

特点

• 超快速度
  Node.js 所带来的超快生成速度，让上百个页面在几秒内瞬间完成渲染。

• 支持Markdown
  Hexo 支持 GitHub Flavored Markdown 的所有功能，甚至可以整合 Octopress 的大多数插件。

• 一键部署
  只需一条指令即可部署到 GitHub Pages, Heroku 或其他平台。

• 丰富的主题
  在众多美观、强大、可定制的主题中选择；使用任何兼容的模板引擎创建自己的主题。

• 丰富的插件支持
  强大的 API 带来无限的可能，与数种模板引擎（EJS，Pug，Nunjucks）和工具（Babel，PostCSS，Less/Sass）轻易集成。

安装 Hexo

Hexo 依赖了 Node.js 和 Git，所以在安装 Hexo 之前必须确保安装了这两个工具。

1. 在命令中执行下面的安装命令

npm install -g hexo-cli

2. 确认是否安装成功

hexo --version

如何能看到类似于下面的输出则证明安装成功。

使用 Hexo 生成本地网站

在命令行中执行下面的命令用来创建本地网站。

hexo init 网站目录名称
# 例如
hexo init myBlog

创建成功的话会生成一个具有下面目录结构的网站项目。

.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes

预览本地网站

在你的网站根目录下执行 npm run server ，它会启动一个 http 服务，用于本地预览。

访问控制台中提示的地址，如果能看到下面的网页则证明服务启动成功了。
访问：http://localhost:4000/

目录结构

.
├── _config.yml 网站配置文件
├── package.json 包说明文件
├── scaffolds 文章模板目录
├── source 源码目录
| ├── _drafts 草稿文章目录
| └── _posts 发布文章目录
└── themes 主题目录

写文章

1. 创建文章

hexo new 文章文件名称
# 例如
hexo new hello

2. 写文章

文章配置

• 语法：YAML
• 可配置项：https://hexo.io/docs/front-matter
  下面是一个示例

---
title: Sublime Text 打开方式
categories:
 - 开发笔记
tags:
 - Sublime Text
date: 2020-01-14 00:00:00
---

文章正文

• 语法：Markdown
• 编辑工具：推荐 Typora
  下面是一个示例
  

将本地网站 自动 部署到 GitHub Pages

Github Pages 是 Github 提供的一个免费的静态网页托管服务，可以用来托管博客、项目官网、文本文档等静态网页。

常规的方式：

• 编译构建
• 将构建结果推送 GitHub 仓库
• 开启 GitHub Pages

每次更新都需要重复上面的流程，太过繁琐，不推荐。

GitHub：生成 GitHub 访问 token

点击右上角用户头像，选择 Settings 设置

选择 Developer settings

在 Personal access tokens 中点击 Generate new token

Note：一个名字，英文即可，例如我这里是 myBlog
勾选 repo 选项

点击 Generate token 生成 token

绿色背景中的就是生成的 token，复制保存起来后面需要使用（之后不能查看）。
如果忘记了，就按照上面的方式重新生成。

GitHub：将 token 配置到项目的 secrets 中

Create a new repository

在项目中仓库中找到并依次进入：Settings -> Secrets

Name：起一个名字，例如我这里是 myBlog，如果你使用了别的名字，后面的脚本中也要对应修改
Value：就是你上面得到的那个 token

确认你 Add secret 之后能看到添加的这个。

本地：配置网站根目录

• 如果你部署的域名是根路径就不需要做任何修改
• 如果你部署的域名是子目录，就把 root 修改为那个子目录名称
  

本地：配置 GitHub Actions

在项目中创建 .github/workflows/main.yml 并写入下面的配置内容。

name: build and deploy

# 当 master 分支 push 代码的时候触发 workflow
on:
  push:
    branches:
    - master

jobs:
  build-deploy:
    runs-on: ubuntu-latest
    steps:
    # 下载仓库代码
    - uses: actions/[e-mail]
    
    # 缓存依赖
    - name: Cache dependencies
      uses: actions/[e-mail]
      with:
        path: ~/.npm
        key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
        restore-keys: |
          ${{ runner.os }}-node-
    
    # 安装依赖
    - run: npm ci
    
    # 打包构建
    - run: npm run build
    
    # 发布到 GitHub Pages
    - name: Deploy
      uses: peaceiris/[e-mail]
      env:
        PERSONAL_TOKEN: ${{ secrets.myBlog }}
        PUBLISH_BRANCH: gh-pages
        PUBLISH_DIR: ./public

本地：推送到远程仓库

提交之后要做的事情：

• 查看代码是否提交到线上
• 查看 GitHub Actions 是否已经开始工作
• 查看 GitHub Actions 是否工作成果
• 查看部署之后的网站

部署成功后，选择Settings找到GitHub Pages


浏览器输入https://dbsuperadmin.github.io/myBlog/

更新博客

上面的一系列流程配置好以后，之后只需安安静静的写你的博客（也就是markdown）就好了，如果需要发布更新，只需要使用 Git 提交推送项目的源码就可以了，它会自动触发 GitHub Actions 自动构建部署。

实践分享

文章图片

• 本地
  source/images
  

• 在线图床（推荐）
  新浪微博图床
  七牛云
  阿里云OSS
  。。。

草稿文章

hexo-hide-posts 插件
hexo-hide-posts 可以帮我们更好的处理文章的草稿和发布状态。
使用它的第一步就是把它安装到网站项目中。

npm install  hexo-hide-posts --save

然后在不希望发布的文章中配置 hidden: true 即可。

网站主题

主题市场或者GitHub下载好主题，将主题复制到themes目录，修改_config.yml文件的theme

域名

GitHub 提供的默认域名

• 用户名.github.io
  https://dbsuperadmin.github.io/
  仓库名称：用户名.github.io
• 用户名.github.io/仓库名称
  https://dbsuperadmin.github.io/myBlog/
  

自定义域名

1. 买一个域名
2. 在 项目中添加 CNAME 文件，其中要写入你的自定义域名网址
3. 在你的域名后台配置 CNAME 到 GitHub

更多内容

Hexo 官网：https://hexo.io/

• 文档教程：https://hexo.io/zh-cn/docs/
• API 说明：https://hexo.io/api/
• 插件市场：https://hexo.io/plugins/
• 主题市场：https://hexo.io/themes/