从零开始搭建你的个人博客Hexo+Github Pages详解

2021.10.29。本文迁移自之前的博客，因为各种原因(懒)，之前的博客已经废弃了，而这篇文章是我一年前写的，也是我的第一篇文章，所以搬过来留作纪念，虽然现在我已经换了主题，站点也放在了租来的服务器上，但本文的操作还是具有很强的可行性的。（PS:本博客存在里模式，里模式里使用的是最初的主题，但里模式目前不对外开放，等一个浪漫的时间）

前些天想搭个博客，记录各种各样的事，如今基本上完工力！happy!
所以写了这篇文章把整个流程梳理一遍，为了让后来的小伙伴们能轻松一点（网上一些教程只列出了步骤，跟着做的时候难免有些懵逼），所以我会尽力说明每个步骤是在干嘛，要达成一个怎样的效果。那么，开始吧！

本文写作上尽量按照通俗的标准去写，细节上可能存在不严谨的地方，如有错误请联系我，我会及时更正。另外我搭建博客的过程主要是参考了@云游君的文章,遇到问题也可以去这里看看。

• 教你如何从零开始搭建一个属于自己的网站

准备工作

做一件事之前，一定要明白要达到一个怎样的效果，搭建博客也是如此，比如我希望输入网址能访问到我的博客，博客里能存放我的文章相册，文章下面游客可以评论，而我可以自由的编辑和发布博客的内容，当然了还希望搜索引擎能收录等，对着这些需求，我们再来看如何实现他们。这里我们会用到一些工具，你可能完全没有听说过他们，但没关系，不用害怕，我在搭建这个博客之前连 git 都不怎么懂，也基本没有一点前端知识，最后也还是完成了。

注册 GitHub

相信大家都知道，在浏览器里输入域名就能访问到对应的网站，浏览网站里的内容。

那么问题来了，网站的内容总得有个地方放吧？这个地方一定得和域名相关联吧？对的，访问网站的一部分过程就是通过域名找到这个放网站内容的地方，我们的博客也是如此。

为了让人人都能访问，我们需要一个域名，同时也需要一个存放网站内容的地方。

那你可能会问，这是不是就要买域名和服务器？没错，我们需要域名和服务器资源，但不一定非得购买，白嫖也是一种解决问题的办法。

GitHub 为广大的开发者提供了名为GitHub Pages的网站解决方案，我可以利用 GitHub Pages 来搭建自己的个人博客，所以我们需要注册一个 GitHub 账号来借用（白嫖）GitHub 的域名和服务器资源

注册完后点击右上角的 + -> New repository 新建仓库

仓库名一定要是你的 用户名.github.io

GitHub Pages 的域名就是你的用户名.github.io,与该域名同名的仓库用来存放网站的内容(GitHub Pages 只显示静态内容，关于静态网页|百度百科

安装 Git

现在你已经建好了你的仓库，但它空空如也，我们需要将本地编写好的网站内容同步到这个仓库（虽然现在还没有任何网站内容）。

你可以点击仓库旁的Add file按钮来完成这个工作，但这种方式对于大量且需要多次同步的文件来说显然过于憨憨，这时就需要用到全世界都在用版本控制|百度百科工具 Git。

通过 Git 来连接你的 GitHub 仓库并同步本地文件，现在不会用没关系，后面我会介绍如何使用

Git 安装完后，你会发现鼠标右键多了两个选项，你可以点击Git Bash here，然后在弹出的命令行里输入:

git --version

如果出现版本信息，则说明 Git 安装成功

安装Node.js与初始化Hexo

好了，万事俱备，现在我们就开始编写网站内容吧！什么？你不会写网站？好的你可以走了，开个玩笑，我也不会写网站，但是没关系，有现成的框架，我们只需要安装它并配置就 ok 了。

我使用的是 Hexo，选择它的原因有两个，一是快，二是能生成静态博客界面(上面也提到了 GitHub Pages 只显示静态内容)。

由于 Hexo 是基于 Node.js 运行的，所以我们要先安装 Node.js,这里推荐选择长期支持版，安装时无脑下一步就行。安装完后打开命令行输入:

node --version

若正常显示 Node.js 版本则说明 Node.js 安装正常

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

npm 是 Node.js 附带的包管理工具，我们通过它来安装各种工具,npm 国内可能比较慢，这里配置成使用淘宝的镜像

npm install hexo-cli -g
#安装hexo

全局安装 hexo 终端

然后选择一个合适的目录新建一个文件夹

以后这个文件夹就做为你存放网站内容的地方了~

在该目录下打开命令行(可以通过右键Git Bash Here)输入:

hexo init 你新建的文件夹的名称

新建的文件夹最好和你此前新建的仓库名一致，输入完这条指令后，你的新建文件夹里就有一些东西了

cd 你的名字.github.io

进入你的博客文件夹(以下简称为Blog)

npm install

安装所有 package.json 文件中提到的包

hexo server

开启 hexo 服务器，该指令会经常用可缩写成 hexo s

hexo s输入完后等待一会，命令会提示你可以通过localhost:4000访问本地网站了,打开浏览器，在地址栏输入localhost:4000，网站的模板就出来了。

你可以按 Ctrl + C 中断服务器的运行

至此你已经有了一个本地的网页，接下来要做的就是把本地的网页内容部署到 GitHub 仓库上了

购买域名与备案(可选)

在正式使用之前，我还想说说自购域名的问题，我是推荐自己去购买一个域名的。

首先有一个自己的域名可以用来装逼，也可以绑定邮箱，不过这都不是主要的，主要还是方便百度收录，因为某些问题，GitHub Pages 是拒绝百度访问的，有了域名以后，你可以将来自百度的请求解析到 GitHub Pages 的镜像(比如通过 Coding.net)，这样就能通过百度搜到你的网站了，可以参考这些文章:

• 百度无法爬取 Github Pages 静态网站解决方案
• 让百度收录你的 GitHub Pages 博客

选择域名时最好选择.com/.cn 这类顶级域名，可以在腾讯云、阿里云上挑选，普通的.com 首年一般要 60RMB 左右，.cn 会便宜一些，最好选捡漏个短一点的有内涵的，说不定哪天就暴涨了(想 Patch)。

当然图便宜的话，也有很多 1RMB 的小众域名，如:.xyz .top 之类的，很多博客也都是用的这些域名。

域名购买完后，为了更好地使用服务商的 CDN 服务，推荐去进行 ICP 备案，
按照各个服务商的备案教程操作即可。

需要注意的是

• 购买域名后要立刻进行实名认证，因为实名认证后需要等待 48 小时才可以开始进行备案
• 备案时一般需要填写服务器信息，你可以在相应服务商那里买一个月，一般都会有学生优惠，价格在 10RMB 左右，备案成功后不续费也没问题
• 备案成功后页脚必须展示备案号，且备案号必须指向http://www.beian.miit.gov.cn/

至于要不要长期购买服务器资源，就看个人的需求了，因为我的目的是搭建静态博客，免费的 GitHub Pages 就能满足我的全部需求，如果你想更加自由充分地使用网站，还是推荐去买个服务器的，由于我没有经验，就不多赘述了

博客配置与部署

主题选择与下载

打开你的本地博客，你可能觉得界面并不是很好看，但没关系，Hexo 生态提供了很多Hexo 主题供你选择,选择一个你喜欢的就好

顺带一提

• Hexo 最受欢迎的主题是NexT
• 我是使用的是一款名为Yun的主题

在Hexo 主题中选好了之后，你可以点击主题的标题跳转到对应的 GitHub 界面，点击clone -> Download ZIP即可下载主题

以 Yun 主题为例

下载完后来到你的Blog文件夹，将下载好的主题.zip解压到Blog的theme文件夹下,即形成Blog\theme\主题\主题的文件的结构

你也可以通过一条 Git 指令完成下载和解压的操作

git clone https://github.com/YunYouJun/hexo-theme-yun themes/Yun

clone GitHub 仓库就是 git 的一个功能，就是把对应的仓库的文件复制到你指定的文件夹(themes/Yun，如果不存在则自动创建)

配置 hexo

好的，下载安置好主题后我们来看看如何配置 hexo 让它用你的主题来生成静态页面文件，首先我们看到初始化 hexo 后的Blog文件夹下有这样几个文件，我们主要会用到的有_config.yml,source和themes

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

关于_config.yml

这是博客的配置文件，博客的名称、作者、语言、博客主题、以及部署信息都通过更改这个文件来设置

关于 source

source 放置我们博客内容，里面初始有两个文件夹，一个是 drafts（草稿），一个 posts（文章），里面是.md 文件

关于.md 文件会在博客写作里说明

关于 theme

不用我说了吧，theme 里存放的就是主题文件，hexo 会更据这些主题文件来生成静态界面

配置 hexo 实际上就是修改_config.yml文件，安置好了主题，我们还需要更改_config.yml来切换主题，在 _config.yml 中找到 theme 字段，将其后的 landscape(默认主题) 修改为 Yun

注意!我这里theme下的主题文件夹名是Yun,如果你用了其他名称，请根据你的名称修改，如:目录结构Blog\theme\A\A主题的文件，你想用 A 主题的话就应该修改成A

关于_config.yml的配置还有很多，可以参见Hexo 配置文档

除此之外 Hexo 的主题也支持很多自定义项，可以参见该主题的文档，如 Yun 主题有对应的Yun 文档
PS:主题的配置是一个漫长的过程，我推荐先把后面的流程走完再回来配置主题

博客部署

在Blog文件夹下打开命令行，由于 Hexo 本身是有部署到 GitHub Pages 的插件的,我们安装这个插件即可

npm install hexo-deployer-git

在将本地博客上传至 GitHub 仓库之前，我们还得进行一项配置，那就是配置_config.yml的delop字段

deploy:
  type: git
  repo:	#仓库地址
  branch: master # 默认使用 master 分支
  message: Update Hexo Static Content # 自定义此次部署更新的说明

将其下的 repo 字段改为你的 GitHub Pages 仓库，这里有两种连接方式，一种是通过 Https 连接，一种是通过 SSH 连接

通过 Https 连接

Https 连接方式的话，repo 直接填写为你的仓库的地址就好了https://github.com/用户名/用户名.github.io,
如我的仓库:https://github.com/Meow-2/Meow-2.github.io,这种方法比较简单，但缺点就是你每次输入部署指令hexo deploy时都需要验证你的 GitHub 用户名和密码，而且 Https 只能连接到公共仓库

通过 SSH 连接

SSH 连接的话，repo 需要填写为[email protected]:用户名/用户名.github.io.git，如我的仓库就是[email protected]:Meow-2/Meow-2.github.io.git ,这种方式稍复杂一点，但每次hexo deploy时不需要验证你的 GitHub 用户名和密码，且能连接到私有仓库。

关于如何用 SSH 连接到 GitHub 可以参考这篇文章:使用 SSH 方式实现 Git 远程连接 GitHub

各种配置完成后，我们就可以把博客上传至 GitHub 仓库了，这里会用到三个指令:

hexo clean #清理静态页面
hexo generate #生成静态界面
hexo deploy #根据你的deploy配置部署静态界面

以后每次本地写完博客，输入这三条指令就可以将博客部署到 GitHub 仓库了，当然也可以简写成一行hexo cl && hexo g -d,此外在hexo deploy 之前也可以先hexo server在本地查看下效果

之后你就可以在https://你的名字.github.io看到你的线上网站了

这里建议在打开 GitHub Pages 的强制 Https 跳转

打开仓库选项

开启 https 跳转(似乎默认就是打开的，如果没有打开，自己打开即可)

源码保存(可选)

现在你的博客已经可以正常使用了，但是有一个问题，你只能在当前的电脑上编辑你的博客，换一台电脑就没法了。

为了解决这个问题，我们可以在 GitHub 上新建一个私有仓库来存放你博客的源码(GitHub 被微软收购以后已经可以免费创建私有仓库了)

创建私有仓库

仓库创建完了之后，我们在Blog文件夹下打开命令行,之后我们将用 Git 来将本地文件同步到 Github 新建的仓库

初始化 Git

git init

这条指令执行完后，Blog文件下就会生成一个隐藏的git文件夹，此时该文件夹就成了一个本地仓库，这条指令执行一次即可

通过 Git 与远程私有仓库建立连接

git remote add origin [email protected]:用户名/用户名.github.io.git

前面提到了，要与私有仓库建立连接必须使用 SSH 协议，你的 GitHub 账户一定得设置了公钥，你的本地用户目录下一定得有对应的私钥才行，这条指令也是执行一次即可

将本地仓库推送到远程仓库

git add .  
git commit -m "描述此次的更改"
git push origin master

git 本地仓库存在一个缓存区，通过 git add 来将更改的文件放入缓存区内，后跟.则表示将文件文件夹下所有的文件加入缓存区(可通过编写.gitignore文件来将一些文件排除在外，支持正则表达式),然后 git commit 则是将缓存区中更改的文件同步到本地仓库，git push 则是同步到远程仓库

每次编写完博客后，只要将源码上传到私有仓库，即使换了台电脑，只要登录 GitHub 账号，就可以将自己博客源码 clone 下来，继续编写发布你的博客了。

自动部署(可选)

但是这样就存在一个问题，每次编写完博客又要部署，又要保存源码，实在是有点麻烦(当然，你可以用一个.bat 或一个.sh 文件解决这个问题)，但这里要介绍的是另一种方法，通过GitHub Actions实现:

一般情况下，我们发布博客的流程是:

我们的目标是变成这样:

这样我们每次只需要向私有仓库上传代码就好了，我们可以依靠 GitHub Action 来实现：

进入存放代码的私有仓库新建工作流

点击建立自己的工作流

随便取个名字，然后用以下代码替换默认代码

name: Hexo Deploy Automatically

on: [push]

jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    - name: Checkout
      uses: actions/checkout@v2

    - name: Node.js envs
      uses: actions/setup-node@v1
      with:
        node-version: "12.x"

    - name: Hexo deploy
      env:
        HEXO_DEPLOY_KEY: ${{ secrets.HEXO_DEPLOY_KEY }}
      run: |
        mkdir -p ~/.ssh/
        echo "$HEXO_DEPLOY_KEY" > ~/.ssh/id_rsa
        chmod 600 ~/.ssh/id_rsa
        ssh-keyscan github.com >> ~/.ssh/known_hosts
        git config --global user.name "Your GitHub UserName"
        git config --global user.email "[email protected]"
        npm i -g hexo-cli
        npm i
        hexo clean && hexo generate && hexo deploy

这段代码来自初探无后端静态博客自动化部署方案，原作者已经说的很详细了，我这里只做下补充。
因为 GitHub Actions 的工作流实质上是为每个仓库提供了一个储存有该仓库文件的虚拟机，当你 push 到远程仓库时，可以通过该虚拟机完成一些操作。
既然想让虚拟机帮我们部署博客，而且虚拟机上已经有我们仓库的文件了，也就是说包含了配置好的_config.yml，那它只需要安装 node.js
再更根据 package.json 安装相关包就行了(本地.gitnore 文件默认不上传包，但会上传 package.json 文件，这个文件里记录了所需包的信息，所以我们的仓库里是没发用 Hexo 和相关插件的，虚拟机要自己安装才行)Checkout和Node.js envs以及Hexo deploy的倒数 2、3 行就在完成这个工作
又因为我们没法直接操作虚拟机，如果通过 Https 方式 hexo deploy 的话，我们是没法输入用户密码的，所以我们需要用 SSH 方式来 hexo deploy。
这就需要本地主机的 SSH 密钥，Hexo deploy的 1~4 行就是把密匙交给虚拟机，这里用到了 HEXO_DEPLOY_KEY，需要我们自己将仓库的 HEXO_DEPLOY_KEY 设置为本地的 SSH 密匙

将仓库的 HEXO_DEPLOY_KEY 设置为本地的 SSH 密匙

然后我随便改点东西，在Blog文件夹下执行:

git add .  
git commit -m "描述此次的更改"
git push origin master

如果你的两个 GitHub 仓库都更新了，那么就说明你的自动部署配置完成了，同时也意味着关于博客的搭建基本上也完成了！可以开始写作了！

博客写作

Hexo 的写作方式是在source下的_posts中新建.md文件(_drafts是草稿箱，放在这里的.md文件不会被展示),.md文件即 Markdown 语法的文件。

Markdown 语法

Markdown 是一种文本标记语言，以纯文本的形式存储。 Hexo 的功能就是将.md 文件转化为静态的 Html 文件。

你可能从未使用过 Markdown 编写文本，不过不用担心，Markdown 语法并不复杂，只需要记住两三个常用的语法就可以开始使用了，我也是第一次使用 Markdown 来写文章，没错，本文就是 Markdown 编写。

一下是一些常用的 Markdown 语法:

# 一级标题

## 二级标题

# 又是一级标题

**加粗**
_斜体_
~~划掉~~
`块`

> 注释

更多 Markdown 语法

Ps:为了方便编写你可以选择一款带 Markdown 预览功能的编辑器，例如 VS Code、Atom、Tpyora 等

博客编辑管理工具

你可能觉得一篇篇新建博客，文章从草稿箱移动到_posts 很麻烦，有没有什么博客编辑管理工具呢，很遗憾，是有的，比如Hexo-admin不过它已经很久没有更新过了，同样使用npm安装

npm install --save hexo-admin

安装完后hexo s，进入http://localhost:4000/admin/# 就可以看到管理页面

通过管理界面，可以进行本章和界面的增删编辑等，同时也提供.md 预览功能，图片粘贴功能(在文章编辑界面粘贴图片，自动生成链接，同时保存到本地预设文件夹)以及一键部署功能。

说是一键部署实际上是运行用户自定义的脚本，所以我们也可以用它来同步我们的源码到私人仓库，搭配自动部署使用简直是懒人福音。
当然了要使用一键部署的功能还需要，在_config.yml配置:

admin:
   deployCommand:
    "你编写的脚本"
    #win下使用.bat,linux下使用.sh

由于 Hexo-Admin 很久都没有维护了，本身有许多 bug，比如粘贴图片时的路径 bug，可以参考这篇文章修改

• hexo-admin 插件 windows 系统插入图片失败问题解决，hexo-admin 汉化，通过修改源码完美解决，以及插件的一点点优化

(如果你不是追求 GUI+一键部署完全脱离命令行的话，我不太推荐 Hexo-Admin，毕竟小 bug 多，也几年没有人维护了)

以上就是全部的搭建了，要是你成功走完，恭喜你！但是可别忘了坚持下去啊!

尾声

博客嘛，无论怎么搭，贵在坚持，我搭博客的这段日子，对我个人来说也算是破釜沉舟的一段日子，这句贵在坚持既是对各位小伙伴说的也是对我自己说的，未来不可知，但总有许多前人的经验告诉我们什么时候该干什么事，我希望我做的每一件事都以自己为准，不被这些所谓的“应该”左右，这样做固然会面临各种各样的风险坏处，甚至以后一定会后悔，但我依然觉得人生就这么一遭，我应该尽自己而为。

最后，交个朋友吧，我是可爱的女孩纸！