前言

之前一直没有养成写文章的习惯，写的一些技术教程也只是浅尝辄止了，总感觉学了很多却什么也没留下。于是想建一个个人博客，把平时学到的东西、看到的有趣的文章整合一下，之后还能回顾、总结自己的学习历程。也考虑过CSDN、博客园、思否之类的技术社区，但是在公众环境下，多多少少会有一些不可名状的限制，而且，寄人篱下的感觉并不好。对于个人博客的搭建，其实有着非常多的选择余地，像动态的 Typecho，WordPress 等，还有静态的站点，如 Hugo，Jekyll 等。机缘巧合之下，了解到博客框架hexo，hexo是轻量化的博客搭建工具，它可以以静态页面形式部署在代码托管网站上，比如GitHub、Gitee、Coding等，hexo社区也有很多别人开发好的主题以及各种插件，这些代码都是开源的，可以在GitHub上获取，并且Hexo的创建者是台湾人，写的官方文档对中文的支持很友好。正好契合我的需求，加上刚好有掌握前端相关的技术，我萌生了用hexo搭建自己博客的想法。有个自己的地盘，总归是方便一些的，而且，比起社区，我更需要一个私密的空间。

这篇文章就是记录一下自己搭建hexo博客的过程，旨在记录，以免回头连自己都忘了( ･´ω`･ ).

搭建博客的步骤

获得个人网站域名

可以选择在万网或者godady上购买域名。各有利弊。不过考虑到只是用来做个人网站的域名，为了方便建议在万网购买，购买后解析域名再绑定就完事了，这个网上教程很多，很简单。

由于我建博客只是为了做一些记录方便自己回顾，静态站点就完全足够，也不需要让他人访问，因此也就没有申请域名，毕竟 GitHub Pages可以白嫖太香了·使用GitHub来托管，因为托管网站内容的服务器在美国，完全不需要备案，省了很多麻烦。

创建GitHub Pages

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

注册完成后登录到GitHub，点击GitHub中的New repository创建新仓库，仓库名应该为：用户名. github.io这个用户名使用你的GitHub帐号名称代替：

image-20210708172021169

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

当然，如果想要动态站点，要么自己购买服务器搭建，要么付费搭建在他人服务器上。总而言之要么寄人篱下，要么费时费力。

安装Git

虽然现在已经有了我们自己的GitHub Pages仓库，但它空空如也，我们需要将本地编写好的网站内容同步到这个仓库，这可以通过点击仓库旁的Add file按钮来完成，但是这种方式对于大量且需要多次同步的文件来说显然过于憨憨，为了省事还是得装个Git，通过Git来连接GitHub仓库并同步本地文件。

下载Git安装包

从Git官网下载：Git - Downloading Package，下载下来设置一下环境变量即可，Git_HOME，%Git_HOME%\bin之类的，不多说。

如果想要了解Git的细节，可以参看廖雪峰老师的Git教程：Git教程

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

git --version

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

生成SSH密钥

（本地已有SSH密钥则跳过这一步）先设置user.name和user.email配置信息：

git config --global user.name "你的GitHub用户名"
git config --global user.email "你的GitHub注册邮箱"

生成SSH密钥文件：

ssh-keygen -t rsa -C "你的GitHub注册邮箱"

然后直接三个回车即可，默认不需要设置密码
然后找到生成的.ssh的文件夹中的id_rsa.pub密钥，将内容全部复制

image-20210708172053691

打开GitHub_Settings_keys 页面，新建new SSH Key

image-20210708172107110

Title为标题，任意填即可，将刚刚复制的id_rsa.pub内容粘贴进去，最后点击Add SSH key。
在Git Bash中检测GitHub公钥设置是否成功，输入 ：

ssh -T git@github.com

这里之所以设置GitHub密钥的原因是，GitHub通过非对称加密的公钥与私钥来完成加密，公钥放置在GitHub上，私钥放置在自己的电脑里。GitHub要求每次推送代码都是合法用户，所以每次推送都需要输入账号密码验证推送用户是否是合法用户，为了省去每次输入密码的步骤，采用了SSH，当你推送的时候，git就会匹配你的私钥跟GitHub上面的公钥是否是配对的，若是匹配就认为你是合法用户，则允许推送。这样可以保证每次的推送都是正确合法的。简而言之，SSH密钥为我们提供了一种免密登录的方式。

安装Node.js

由于Hexo是基于Node.js运行的，所以我们要先安装Node.js，Node.js下载地址

注意安装Node.js会包含环境变量及npm的安装，安装后，检测Node.js是否安装成功，在命令行中输入 :

node --version

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

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

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

安装Hexo

Hexo就是我们的个人博客网站的框架,使用npm命令安装Hexo，输入：

npm install hexo-cli -g

创建hexo工程

选择一个合适的目录新建一个文件夹,以后这个文件夹就做为你存放网站内容的地方了~

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

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

输入完这条指令后，你的blog文件夹里就有一些东西了

新建POST

hexo new “HelloWorld”

进入初始化后的blog文件夹，此时会在/blog/sources/_post/目录下生成HelloWorld.md文件。

生成静态文件

hexo g

使用Hexo引擎将Markdown格式的文件解析成可以使用浏览器查看的HTML文件，HTML文件存储在blog/public目录下。

运行hexo服务器

hexo s

打开命令行提示的地址，一般是http://0.0.0.0:4000/，就可以看到我们的Hexo网站。你可以按 Ctrl + C 中断服务器的运行。

编辑POST

此时HelloWorld文章中没有任何内容。打开/blog/sources/_post/目录，使用编辑器打开其中的HelloWorld.md并在其中添加markdown格式的内容保存，然后重新运行以下命令：

hexo g
hexo s

打开浏览器查看修改后的内容。以后创建并查看新的POST，运行以下命令即可：

hexo new “your post name”
hexo g 
hexo s

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

安装主题(可选)

Hexo提供了默认主题landscape。如果想要使用别人的主题则需要用到Git工具。这个可以在Hexo主题预览。

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

在Hexo主题中选好自己心仪的主题后，你可以点击主题的标题跳转到对应的GitHub界面，点击clone -> Download ZIP即可下载主题,或者把仓库地址复制下来，克隆到本地，比如：

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文件

关于theme

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

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

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

除此之外Hexo的主题也支持很多自定义项，可以参见该主题的文档，如Yun主题有对应的Yun文档

博客部署

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

npm install hexo-deployer-git

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

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

将其下的repo字段改为你的GitHub Pages仓库地址，这里有两种连接方式，一种是通过Https连接，一种是通过SSH连接。个人建议使用SSH连接，不过这两种方式都可以了解一下。

通过Https连接

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

通过SSH连接

SSH连接的话，repo需要填写为git@github.com:用户名/用户名.github.io.git，这种方式稍复杂一点，但每次hexo deploy时不需要验证你的GitHub用户名和密码，且能连接到私有仓库。

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

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

至此每次本地编辑完博客，只要输入这三条指令就可以将博客部署到GitHub仓库了，当然也可以简写成一行hexo cl && hexo g -d,此外在hexo deploy 之前也可以先hexo server在本地查看下效果，之后你就可以在https://你的用户名.github.io看到你的线上网站了。

源码保存(可选)

现在博客已经可以正常使用了，但是还存在一个问题，只能在当前的电脑上编辑你的博客，换一台设备就不行了。

为了预防某天设备损坏，文件丢失时造成不可挽回的后果，我们可以在GitHub上新建一个私有仓库来存放你博客的源码，好消息是，GitHub被微软收购以后已经可以免费创建私有仓库了。

image-20210708172122761

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

初始化Git

git init

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

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

git remote add origin git@github.com:用户名/仓库名.git

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

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

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

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

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

自动部署(可选)

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

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

image-20210708172348367

我们的目标是把它变成这样:

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

新建workflow

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

image-20210708172835505点击建立自己的工作流

image-20210708172932554随便取个名字，然后粘贴如下代码

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 "you@example.com"
        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密钥。

配置gihtub仓库

image-20210708173016627

然后……Name填HEXO_DEPLOY_KEY

image-20210708173036667

之后，请到C:\Users\用户名\.ssh文件夹里，找到名字为id_rsa的文件（注意是私钥，没有后缀的）复制里面的内容粘贴进去。

关于为什么必须使用私钥而不是公钥？

之前已经说过，github通过非对称加密的公钥与私钥来完成加密，公钥放置在GitHub上，私钥放置在自己的电脑里。当你推送的时候，git就会匹配你的私钥跟GitHub上面的公钥是否是配对的，若是匹配就认为你是合法用户，则允许推送。我们的虚拟机要与GitHub配对，这就必须要拿到我们电脑本地的私钥。同时为了保证私钥的安全，我们把私钥放置在secrets里。

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

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

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