前言

本文旨在提出一种零编程基础的傻瓜式静态博客搭建方案，优点如下：

无需本机环境搭建，无需 git 终端操作；
完全免费，无需域名、服务器、备案等等相关的申请付费；
hexo 生态良好，大量优秀博客主题可供使用；
一次部署，永久可用，不用关心源码；
自动部署站点，你唯一需要管理的，是你的 markdown 源文件。

在搭建与后期维护的环节，只需要在github站点进行文件上传与下载。所以依然是存在一些前置必要条件的：你需要拥有一个 github 账号。

这套方案不是完美的，只是对脑海中存在的 hexo 部署简化方案的一个实践。如果你需要更多的配置项，或者需要更多自定义的功能，那么建议阅读 hexo 官方文档。另外你选择的主题也并不能满足你对功能上的全部预期要求，主题源码都是开源的，自己动手丰衣足食。

原理讲解

本文方案基于hexo、Github Pages、Github Action这三个基础前提，那么先来大致说说三者的关系。

Hexo 静态博客生成器

Hexo 是一款博客框架，使用它可以生成你博客站点所需要的静态资源以及页面。根据指定目录下的markdown文件，生成对应的网站页面，并且除了主页以外，默认有分类、归档的页面。支持markdown解析，可以让 markdown 输入的内容，最后成为对应的 HTML 页面。

相信折腾过独立博客搭建的朋友，应该都听说过这么几个博客框架：Wordpress、Jekyll、Hugo、Typecho 等等。

一般在个人博客的末尾，都会写上由什么框架驱动，以及当前博客使用的主题。所以你要是对某个主题有特别大的偏好，可以直接下载一份进行部署。

其实我对博客框架没有特别大的偏好，只要能满足自己对博客建设的需求，毕竟博客内容才是最重要的。很多时候频繁切换博客框架、主题，反而是一种舍本逐末的做法。

Hexo 支持对 github 的一键部署，正如它官网所提到的一样，5 个命令就可以把站点在本地跑起来，配置一下 github 的仓库地址，就可以一键部署了。

npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo server

社区强大、插件丰富也是我选择它的理由，在这里你可以查询到 hexo 收录的所有插件。

利用插件你可以做到：

站点 SEO、站点 sitemap
评论插件
展示社交网站账号
站内搜索
RSS
文章归档
Emoji
…

甚至还有带界面的 hexo 发布后台插件hexo-admin——

生态良好、部署简单，足够满足我对搭建博客的大部分需求，这就是我使用 Hexo 的理由。

Github Pages 免费部署无限流量的静态站点

Github Pages 是面向用户、组织和项目开放的公共静态页面搭建托管服务，站点可以被免费托管在 Github 上，你可以选择使用 Github Pages 默认提供的域名 github.io 或者自定义域名来发布站点。

每一个 github 账号和组织都可以得到一个主站点，并且无限制的项目站点。也就是说，Github Pages 本身的出发点，是为在 Github 上托管源代码的用户，有一个更可读、体验更好的项目主页。

Github Pages 支持自动利用 Jekyll 生成站点，也同样支持纯 HTML 文档。

Jekyll 是 Github Pages 原生支持的静态站点生成器，直接往对应的目录中上传的静态页面实际上都会经过 Jekyll 的处理。

当你新建一个仓库，然后在仓库设置中的Github Pages选项下，点击Choose a theme，完成你的主题选择时，Github 会自动把 Jekyll 生成的内容上传到项目仓库中，也就是说只要选择完主题，你就可以根据它提示你的网址，访问你的站点网页了。

官方目前提供了 12 种默认模板，很明显的，这些都是面向项目的主题选择，不适合博客搭建。但它的社区也有大量的博客模板可供选用。

如果相对Github Pages有更多的了解，建议阅读官方指南。

Github Action 构建自动部署

Github Actions可以自动化你的项目工作流，世界级的 CI/CD。在 Github 就可以构建、测试部署你的项目代码。可以用来做代码评审、分支管理、issue 标签等等。

GitHub Actions 的配置文件叫做 workflow 文件，存放在代码仓库的.github/workflows目录。

workflow 文件采用 YAML 格式，文件名可以任意取，但是后缀名统一为.yml，比如foo.yml。一个库可以有多个 workflow 文件。GitHub 只要发现.github/workflows目录里面有.yml文件，就会自动运行该文件。

同样是强大的社区支持，甚至都不用自行编写，直接配置已有的 action 就可以完成你的项目配置。

也就是说 github 官方提供了 CI（持续集成）/CD（持续部署），可以让我们在提交项目的commit、push等操作时触发我们想要的 action。例如在代码提交到仓库时，自动构建单元测试。

总结

对三者的作用有一个大致了解后，可以得知，如果我们想要一个傻瓜式的博客站点，那么我们需要：

一个静态博客生成器：Hexo
托管静态站点的服务器、域名：Github Pages
终端操作命令、网站自动部署：Github Action

那么接下来，开始实战操作。

实战演练

1. 在 github 站点上新建仓库，并上传 hexo-starter

名称

建议叫做blog，这样访问路径是username.github.io/blog。

或者使用主站点，username.github.io作为项目名称，这样访问路径就是username.github.io。

点击Create repository

选择uploading an existing file。

下载hexo-starter，把解压后的全部内容拖到 github 的上传界面中，等待文件全部上传完毕。

上传完毕后，直接点击绿色的Commit changes按钮，等待页面处理。

这一步对应到终端操作，其实就是hexo init，新建了一个 hexo 的初始内容站点。

2. 根据你的需求，选择一个喜欢的主题

好像 hexo.io 官方站点已经挂了，我访问不到。这里有另外一个地址：hexo 主题，你可以在这里进行 hexo 主题的选择。

对博客主题的选择

选择博客主题是一件比较严谨的事情，如果你的需求只是搭建一个自己觉得好看、可以管理博客文件的内容，那么选一个好看精致的主题足够。

如果你希望博客拥有 RSS、社交媒体配置、文章归档分类等功能，那么请注意阅读主题源码下的_config.yml文件，查看是否有你希望的全部功能。

_config.yml

如果该文件下面描述的功能，缺少你想要的功能，那么建议你谨慎选择。否则你需要改动源码来达到自己的目的。

一般博客源码的开发者，都会在注释中写明当前设置项的用途。

示例

我这里直接选用官方的landscape主题进行示范。

选择一个主题，点击它的名字，不要点图片。图片会跳转到 demo 站点，不一定还在维护。名字会跳到 github 仓库。

依然是下载 zip 包，然后解压。

新建文件夹themes，下面再以主题名称建一层，我这里是landscape，然后把解压得到的全部内容扔进去。

如果你下载的主题源码里，是这样的结构，那么我们需要themes/themesName这部分。

回到你的仓库页面，然后选择Create new file，选择themes层级，把内容全部上传上去。

这里必须遵循\themes\landspace\这样的目录上传，否则无法正确应用主题。

💡 注意：这个步骤对应到终端，就是在themes/路径下执行git clone，把想要的主题放进去。也可以通过在主站内配置git submodule进行处理。其实配置submodule可以节省此步骤，但对于我们只通过网站操作来说，会影响对主题配置文件的操作。

4. 新建分支，分别管理源码和静态博客站点

很多人部署 hexo 会遇到一个困扰，一旦部署会覆盖掉站点源码，只剩下生成后的静态内容。

所以我们在这里需要再建立一个叫做gh-pages的分支，存放生成后的站点。也就是说源码在master分支，网站部署在gh-pages分支。

在当前仓库中找到Setting选项，进去拉到底可以找到Github Pages的选项，更改 Source 为gh-pages branch。

5. 生成密钥，配置 Github Action 自动部署流程

得到你博客仓库的 SSH 地址，复制到粘贴板。

修改博客仓库根目录下的_config.yml文件，末尾增加如下代码，仓库地址粘贴刚才复制的内容：

# Deployment
deploy:
  type: git
  repository: git@github.com:sheilaCat/newBlog.git # 这里更改为你仓库的SSH地址
  branch: gh-pages

打开控制终端，mac上就叫做terminal，windows上点击菜单输入cmd打开。

输入如下代码，后面是你的邮箱，跟你的 github 账号的登陆邮箱相同。

$ ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

生成的文件中，id_rsa是私钥，id_rsa.pub是公钥，直接用文本打开即可。

点击用户账号的setting，找到SSH and GPG keys，名字随便起一个，把公钥内容复制进去。

然后在你的博客仓库中，选择Setting。

把私钥文件中的全部内容复制到这里，名字必须为ACTION_DEPLOY_KEY。

配置博客仓库的 action 工作流。

把如下代码复制进去，需要修改 3 处：

你的 github 用户名；
对应的账户邮箱；
主题目录名称。

搜索这段代码中的example关键字，就是你需要填入的内容。


name: Deploy Blog

on: [push] # 当有新push时运行

jobs:
  build: # 一项叫做build的任务

    runs-on: ubuntu-latest # 在最新版的Ubuntu系统下运行

    steps:
    - name: Checkout # 将仓库内master分支的内容下载到工作目录
      uses: actions/checkout@v1 # 脚本来自 https://github.com/actions/checkout

    - name: Use Node.js 10.x # 配置Node环境
      uses: actions/setup-node@v1 # 配置脚本来自 https://github.com/actions/setup-node
      with:
        node-version: "10.x"

    - name: Setup Hexo env
      env:
        ACTION_DEPLOY_KEY: ${{ secrets.ACTION_DEPLOY_KEY }}
      run: |
        # set up private key for deploy
        mkdir -p ~/.ssh/
        echo "$ACTION_DEPLOY_KEY" | tr -d '\r' > ~/.ssh/id_rsa # 配置秘钥
        chmod 600 ~/.ssh/id_rsa
        ssh-keyscan github.com >> ~/.ssh/known_hosts
        # set git infomation
        git config --global user.name 'example'
        git config --global user.email 'example@example.com'
        # install dependencies
        npm i -g hexo-cli # 安装hexo
        npm i
        cd themes/example/ # 主题目录 我这里就是themes/landscape
        npm i # 安装子主题

    - name: Deploy
      run: |
        # publish
        npm install hexo-deployer-git # 安装deployer
        hexo clean # 清空以前的生成页面
        hexo deploy --generate # 生成静态页面并发布

填好后直接点击绿色按钮。

至此，博客源码部署完成，如果没有特别的需求，其实完全可以不要动源码了。

而且整个过程，我们没有在本地配置任何与代码相关的东西，意味着就算你电脑换了，也不用担心博客源码找不到、不方便部署等等困扰。

💡 注意：这个步骤对应到终端，就是hexo generate根据源码和主题的layout生成网站的静态内容，然后通过hexo deplay把站点的public/文件夹下内容一键部署到配置的 github 仓库分支。然后 github 会通过这个分支，自动挂载静态内容，得到你的博客站点。如果不配置Github Action，就需要每次都手动操作hexo d -g，而且本机保存源码，每次上传都生成静态内容，还是比较麻烦的。所以这个步骤对于想要自动部署已有 hexo 站点的人也有借鉴意义。

6. 发布你的 markdown 文件，开启独立博客写作

在master分支的source/_posts目录下，就是你放置 md 文稿的地方了。

每当你往这里上传你的markdown文件时，网站都会自动刷新部署，不需要额外操作。一次部署，再也不用操作博客源码了，你只需要管理你的 md 文件，像上传管理图片一样，管理你的博客，是不是很棒！

💡 注意：到了这一步，博客部署已经全部完成。接下来你只需要关注source/_posts/下的 markdown 文件内容。每次对文件内容有上传修改的操作时，Github Action会检测到你的动作，并且重新执行配置的动作，也就是在 hexo 中再次执行hexo generate、hexo deploy，然后覆盖到到gh-pages分支中，Github Pages再把静态站点内容挂载上去。

YAML Front-matter

博客内容访问地址就是你的文件名，例如hello-world.md，那么hello-word就是子路径。

编写markdown文件时需要写头部的Front-matter，如不编写，会直接使用默认值。

以下是预先定义的参数，可在模板中使用这些参数值并加以利用。

参数	描述	默认值
`layout`	布局
`title`	标题	文章的文件名
`date`	建立日期	文件建立日期
`updated`	更新日期	文件更新日期
`comments`	开启文章的评论功能	true
`tags`	标签（不适用于分页）
`categories`	分类（不适用于分页）
`permalink`	覆盖文章网址
`keywords`	仅用于 meta 标签和 Open Graph 的关键词（不推荐使用）

富文本与 markdown 文本的转换

可以使用typora，把富文本直接粘贴进去，然后切换到源代码模式，得到 markdown 文本格式内容。

使用 markdown 的好处，就是任何网站都有对应样式，不需要反复排版。

💡 注意：以上步骤，我已经实践过，可以成功搭建，demo 在这里。我会在挂载一段时间后下线该仓库。

使用Github Pages进行静态博客站点的部署，应该是程序员们的共识，简单快速、方便有效。但也许终端操作还是会存在一些门槛。本文方案的实现，主要还是归功于 github 推出了Github Action，简化重复操作。

从会使用 git 终端的人们的角度来讲，本文反而略显繁琐，几个 git 操作的事情。但是对于没有编程基础的人来说，得到源码后如何部署，静态站点与源码如何管理，过段时间再在本机上部署博客是否还能跑通代码，都是困扰。

希望本文可以帮到零编程经验的作者们，搭建属于自己的独立博客站点。