从0.5开始搭建属于自己的博客网站

Yanksi Li

中文生活折腾

Published: Apr 17, 2021

折腾了三天，终于算是搞定了这个现在看起来还可以的小窝，记录下整个折腾过程。

模板选择

博客的模板我最终采用的是一个叫Volantis的Hexo主题。得益于其高度模块化的设计，使用它搭建个人页面就和搭积木一样简单。鉴于我的整个搭积木过程使用的基本都是前人的工作，再用 “从0开始搭建” 这种比较常见的标题未免会闲得过于自大，因此在这里改成 “从0.5开始搭建”。

开始前的准备工作

需要提前安装的应用

不出意外的话npm会在安装的Node.js的同时被自动安装，不用特别再去下载安装。

需要拥有的知识

开始配置

鉴于Volantis的官方文档十分详尽，在这里我就不对整个主题的配置过程进行赘述，主要会描述如何构建个人网页的整体框架。

部署方式

我选择的方案是利用Github Action自动生成网页，然后使用Vercel进行部署和网页托管，我认为这样做的好处有以下两点。

• 使用Vercel托管网站貌似能够在国内获得更快一点的访问速度，并且Vercel的网站管理功能相对于Github Page会更全面一些。
• 对博客进行自动部署，每次部署时甚至连hexo d都不用敲，懒人福音。
• 分离博客的网页部分与代码部分。将这两个部分分别存在两个repository中可以方便之后将博客部署到别的地方（虽然不知道有什么用）。这条其实主要是为了满足我的精神洁癖，虽然部署也可以通过branch实现，但我嫌弃这种方法会弄脏我的repository。

具体步骤

1. 在Github新建两个repository，一个用来存放博客代码，另一个作为部署时的工具人
2. 跟随这篇教程来配置自动化的部署

   这里需要注意一下的是如果你的Volantis主题文件夹是通过git submodule添加到博客代码repo中的，需要对知乎回答原文中的.github/workflows/deploy.yml文件稍作修改，修改后的文件如下

   • 代码
   • 原因

   name: Hexo Deploy
   
   on:
     push:
       branches:
         - master
   
   jobs:
     build:
       runs-on: ubuntu-18.04
       if: github.event.repository.owner.id == github.event.sender.id
   
       steps:
         - name: Checkout source
           uses: actions/checkout@v2
           with:
             ref: master
             submodules: 'recursive'
   
         - name: Setup Node.js
           uses: actions/setup-node@v1
           with:
             node-version: '12'
   
         - name: Setup Hexo
           env:
             ACTION_DEPLOY_KEY: $
           run: |
             mkdir -p ~/.ssh/
             echo "$ACTION_DEPLOY_KEY" > ~/.ssh/id_rsa
             chmod 700 ~/.ssh
             chmod 600 ~/.ssh/id_rsa
             ssh-keyscan github.com >> ~/.ssh/known_hosts
             git config --global user.email "Your Email Here"
             git config --global user.name "Your Name Here"
             npm install hexo-cli -g
             npm install
   
         - name: Deploy
           run: |
             hexo clean
             hexo deploy
   

   actions/checkout@v2不再默认支持检出submodule，需要手动将submodule这个field设置为recursive。

3. 跟随Vercel的傻瓜式引导完成将网页从工具人repo部署到Vercel的操作。

   在这步结束后可以在Vercel里边设置一下网页的新名字，或者可以去买一个域名然后来Vercel设置一下。Vercel域名卖的都比较贵，比较之下我感觉从Google Domains买域名比较便宜一些

简单的三步走完成后，你现在将最新的博客内容push到博客仓库的时候，整套自动部署流程会被启动，Vercel完成部署后还会给你发邮件。

配置过程中的小坑

LeanCloud

对于海外党来说，注册LeanCloud时登记手机号的流程会比较迷惑。填写手机号时LeanCloud没有提供国家码的下拉菜单，所以写电话的时候我们需要自己添加国家码（以美国例：+1··········）。

Artitalk

在你的说说页面停用pjax！！！
在你的说说页面停用pjax！！！
在你的说说页面停用pjax！！！
（重要的事情说三遍，因为这个问题我浪费了两个多小时。。。。）

Gallery

如果你想在博客里弄画廊页面的话，建议现将一个页面上传到图床上再以链接的形式引用，我用的是去不图床。不知道是什么原因，我将图片放在repo里再引用的时候经常出现有些图片加载不出来的情况。
上传图片到图床时建议将图片压缩一下再上传，这样做可以提升网页中图片的加载速度。我用的是这个网站做图片压缩，感觉压缩后图片的质量并没有损失很多。

icon vs. avatar vs. img

icon用的是Font Awesome里边图标的class，直接把值复制过来就行。
avatar和img的区别我其实搞得也没有非常明白，不过根据官方document，两种field的值都是应该一个图片的链接，唯一的区别在于如果将图片链接填在avatar里边图片的边缘会被裁切成圆形，填在img里边图片的边缘会呈方形。

想做的事

Modified: Jul 5, 2022

Hexo

Volantis