复活我的博客

前言

“白驹过隙，时光荏苒”

让我想起我的博客是我查看验证码的时候撇到的旁边的邮件：

当时我就是一个地铁老人看手机的表情

然后我就把这件事情给忘了，就产生了一个悲伤的故事（笑

以上都是开玩笑，事实上让我再次摸回我博客的原因是想要在转专业的时候有一些竞争力。然而目前看来大概是了罢。

但是抱着求知的心态我还是想着把博客重新搭设好

于是便有了断断续续的踩坑过程

博客搭建

博客搭建前的准备

有了上次搭建博客的经验，没什么好说的，一路下来和流水线一样流畅。只不过在频繁访问Github的时候我会选择搭梯子来加快访问速度XD

这一次设定的目标是增加自动集成自动部署的功能的，所以决定了使用Gayhub pages和他们自家的Actions来实现这个功能

在主题商城逛来逛去，最终敲定了选择Volantis作为我新博客的主题。在翻阅文档的时候发现别人的文档有透明卡片和多样的壁纸，然后又有了添加针对手机和电脑应用不同背景的想法

所以最终确定了以下功能：

那就动动小手行动起来8

博客搭建需要的准备

本文基于知乎上ruchan的文章进行博客的搭建

Hexo 通过 Github Actions 实现持续集成

https://zhuanlan.zhihu.com/p/137867759

获取和配置Access Tokens

首先去获取Actions环境访问仓库以及写入仓库所需的Access Tokens

添加Tokens

https://github.com/settings/tokens

Tokens获取之后只会显示一次，所以最好将tokens记录下来

然后在仓库的Settings => Secrets => Actions => New repository secret添加两个变量

GIT_EMAIL值为Github账号的邮箱

GH_TOKEN为刚刚获取的Access Tokens的值

添加了这两个变量之后在Actions环境中就可以访问这两个变量，但是不直接在仓库中写出来，防止Tokens泄漏

仓库配置

虽然我之前部署的旧博客 并没有遵循这种规则，并且用hexo g命令也能成功部署，但是我为了避免不必要的麻烦还是跟着文章使用了username.github.io的仓库名称

由于之前已经在/blog博客的根目录下进行过git的操作，所以我重新在根目录下进行仓库的初始化操作

1

git init

移除之前关联好的仓库，关联新的要使用的仓库

1
2

git remote rm origin
git remote add origin git@github.com:mengyan233/mengyan233.github.io.git

在本地创建master分支

1

git commit -a -m "Create master branch"       //用-a参数省去了git add .的命令

执行git branch之后就能发现本地有了master分支

接下来新建hexo分支并且换到该分支

1
2

git checkout -b hexo
// 该命令相当于 git branch hexo 以及 git checkout hexo，前者是创建分支 hexo，后者是切换到 hexo分支。

commit提交之后就应该是push了

1

git push origin HEAD -u

推送完成之后打开github的会发现仓库中有两个分支：master和hexo

Actions的设置

在本地文件的博客根目录下新建文件夹.github并且再在里头新建一个workflows然后就可以新建文件了，命名为deployment.yml（文件名前缀随意，后缀必须是yml，Actions只认.yml文件）

在deployment.yml写入以下内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

# 文件路径 .github/workflows/deployment.yml
name: Deployment

on:
  push:
    branches: [hexo] # only push events on source branch trigger deployment

jobs:
  hexo-deployment:
    runs-on: ubuntu-latest
    env:
      TZ: Asia/Shanghai

    steps:
    - name: Checkout source
      uses: actions/checkout@v2
      with:
        submodules: true

    - name: Setup Node.js
      uses: actions/setup-node@v1
      with:
      	# volantis要求的node版本最低为16
        node-version: '16.x'

    - name: Install dependencies & Generate static files
      run: |
        node -v
        npm i -g hexo-cli
        npm i
        hexo clean
        hexo g
    - name: Deploy to Github Pages
      env:
      	# GIT_NAME后写自己的用户名
        GIT_NAME: mengyan233
        GIT_EMAIL: ${{ secrets.GIT_EMAIL }}
        # REPO写推送的仓库地址
        REPO: github.com/mengyan233/mengyan233.github.io
        GH_TOKEN: ${{ secrets.GH_TOKEN }}
      run: |
        cd ./public && git init && git add .
        git config --global user.name $GIT_NAME
        git config --global user.email $GIT_EMAIL
        git commit -m "Site deployed by GitHub Actions"
        git push --force --quiet "https://$GH_TOKEN@$REPO" master:master

在gayhub提交之后就回本地的bash

1
2
3

git add .
git commit -m "利用 Github Actions 持续集成"
git push origin hexo

回到github，点开actions选项就能看到成功部署了

修改主题

查阅volantis文档的时候发现了dearxaun的博客挺好看的（个人认为

于是决定改掉原主题的cover背景

更改背景

继续查阅文档，发现volantis提供了一些常用的样式和布局视图注入点，可以在不修改主题源文件的情况下对主题进行二次开发

Custom Files 自定义文件

在不修改主题原始源代码的情况下添加自定义内容

https://vlts.cc/v5/development-api/#Custom-Files-%E8%87%AA%E5%AE%9A%E4%B9%89%E6%96%87%E4%BB%B6

在主页F12对背景审查元素并且仔细翻查之后发现#l_body是整个页面的基础，那就从这里下手

已经改好的界面，仅做展示

在博客根目录下的/source/_volantis下新建style.styl文件，并且添加下面的样式

1
2
3
4
5
6
7

//固定网页背景
#l_body{
    background: url;   //此处的url换成背景链接
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

然后在bash里一顿操作就得到了网页背景固定的效果，非常简单

自适应横竖屏背景

由于我使用的是色图群群主提供的API，最开始的background使用的是随机横屏壁纸的地址，但是在使用过程中发现手机观感不尽人意，并且群主也提供了随机的竖屏壁纸。

遂必应一番乱查，决定在网页的前段部分中插入一段js来判断当前是电脑还是手机用户

继续在/source/_volantis下新建bodyBegin.ejs，然后加上以下内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<style>
    :root{
      --bgurl: url("");
    }
  </style>
  <script type="text/javascript">
    var bgurlroot = document.querySelector(':root')
    if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
        // document.root.style.setProperty('--bgurl', url('https://iw233.cn/api.php?sort=mp'));
        bgurlroot.style.setProperty('--bgurl', 'url("https://iw233.cn/api.php?sort=mp")');
    } else {
        // document.root.style.setProperty('--bgurl', url('https://iw233.cn/api.php?sort=pc'));
        bgurlroot.style.setProperty('--bgurl', 'url("https://iw233.cn/api.php?sort=pc")');
    }
</script>

/source/_volantis/sytle.styl文件也需要进行修改

1
2
3
4
5
6

#l_body{
    background: var(--bgurl);   
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

然后就实现了横竖屏壁纸自适应的自由

切换黑夜模式时调节背景亮度

原本的图片在没有调节亮度的情况下会让与正文和卡片的颜色打架，非常不和谐，所以决定调节背景亮度，并且还要在黑夜模式下也调整亮度

所以我想到了把亮度作为变量，在载入黑夜模式的异步加载样式时更改变量的值

style.styl文件

首先是/source/_volantis/sytle.styl文件，我们继续修改

把之前的

1

background: var(--bgurl);   

换成

1

background: linear-gradient(var(--bgBrightness), var(--bgBrightness)), var(--bgurl);

在文件开头加上

1
2
3

//defines
:root
  --bgBrightness: #00000026;

dark.styl文件

在/source/_volantis下新建dark.styl文件 之前调试了半天结果发现文件名没写对（捂脸

1
2
3

@media (prefers-color-scheme: dark)
  :root:not([color-scheme])
    --bgBrightness: #00000099 !important;

后记

博客的所有搭建工作到这里就结束了，虽然写的内容只有一点点，但是对于没有系统学习过html css和js的人来说真的有一点点折磨（捂脸

但是好在我大概还有耐心，一杯奶茶一包烟，电脑面前坐一天 其实我不抽烟

剩下的就是一些细枝末节的修改了，比如选了好几个评论系统最后选择了不用登陆的Waline，配置网站访问人数统计啊，主页的修改啊之类的等等等等只要动动手指就行没必要拎出来讲的东西。已经好久没有那么酣畅淋漓的抒发过自己的创作欲了，虽然有一部分也不是我创作的hhh。

杂谈

回想自己这几年来一直很茫然，中学的时候也有些不知天高地厚。在朋友的引导下看了Warma快点去关注这个可爱的女人！其中一期的视频，我才理解，原来自己想要的是在这个世界上留下我的痕迹，比如说被人记住，为可爱的祖国做出一点点点点贡献，成为up主出道拯救世界之类的。

作为一个共情能力非常强的人，或许和我小时候的一些经历有关系，学术一点的话语好像叫敏感？无论是沃玛的第十期爆炸电台，还是ChiliChill第一张专辑幕后的感想，我都能从中感受到他们透过视频与歌曲想传达给我们的情感。但是现实的骨感又让我觉得我只能作为一个普通的不能再普通的人活下去，我或许一生都没办法达到我自己的目标，或者说我根本没有目标。所以只能通过这种方法来发泄自己的那一点点表达欲吧

至此。Have a nice life！