装修日记
10 分钟
4539 字
分类 跌跌撞撞 ,

写在前面

每次看到别人有自己的漂亮博客就好羡慕好羡慕，但秉持着“只要手头上还有比这更容易做的事就不轻易动手”的原则，一直拖拖拖拖了一整个2022……于是在2023年1月1号这一天，博主抛下了难产的年终总结以及难产的毕设中期报告，撸起袖子开始捣鼓了！

设备与测试环境：MacBook Air 2020(M1) macOS Ventura 13.1 Chrome

ToDo List

详情
  • 普通博客文章插入图片默认铺满宽度，无法调整大小（但在gallery模式就可以）
    • 2023-01-09更新：解决啦！实在憋不住去GitHub上给作者留了个issue，没想到很快就得到了回复 ！
    • 具体方法是在/assets/sass/typo.scss中
    1
2
3
4
5
6
7

      //找到第281行： 
  img:not(.link-card-img), 

  //将上面这行删去改为
  img {
      @apply my-4 rounded dark:border-darkBorder w-auto mx-auto max-w-[60%] //这里具体大小可以自己调整
  }
  • 想要一个评论系统><
    • 2023-01-27更新：解决啦！赞美小鱼！具体见下文。
  • waline评论区夜间模式设置
开始搭建！

前置准备

1. 安装Homebrew和Git

以下是基于Mac(M1)的安装方法，其他操作系统可根据homebrew官网教程 进行安装。

首先需要在mac上打开“终端”（英文版系统叫Terminal，不会打开的朋友可以看这里 )。随后在终端命令行窗口输入官网提供的安装命令。

1

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

但是由于GFW的存在，如果没连VPN，可能会报错 curl: (7) Failed to connect to raw.githubusercontent.com port 443: Connection refused。
搜索后发现gitee上的大佬写了自动安装脚本，只需在终端内输入：

1

/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"

回车执行指令后，出现下图，根据提示选择镜像下载即可。

这里要注意的是，在安装homebrew的过程中，如果之前没有安装过git，系统会终止homebrew安装并弹出git安装提示。点击“安装”，耐心等待git安装完成后再次输入homebrew安装指令，重复以上步骤即可。

验证安装是否成功：安装脚本执行完成后，重启终端，分别输入brew -v以及git version验证，输出版本号则说明homebrew和git已安装成功。

2. 安装Hugo

直接在终端内输入brew install hugo，等待安装完成。随后输入hugo version，若出现版本信息则表示安装成功。

3. 配置SSH

其实博主本人并不明确地知道这个步骤是否有用，因为在搭建过程中出了太多奇怪的问题，推倒重建过好几次，但这一步并没有重建。

SSH 密钥用来链接本地和 Git 服务器，它成对生成，分别是” 公钥 “和” 私钥 “，我们将其中的” 公钥 “保存到 Git 仓库后，就可以在电脑上向这个 Git 仓库提交代码。
Github Docs有一篇讲SSH连接的中文文档 ，可以辅助参考。

查看是否已配置过SSH（该步可省去）

打开终端，在默认目录输入cd ~/.ssh，如果无法进入该目录说明还没有生成过。

生成SSH

在终端输入ssh-keygen -t rsa -C "github注册时使用的邮箱名" enter出现类似如下的代码

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

$ ssh-keygen -t rsa -C "github注册时使用的邮箱名" 
Generating public/private rsa key pair.
Enter file in which to save the key (/Users/Username/.ssh/id_rsa):    //密钥的目录
Created directory '/Users/Username/.ssh'.
Enter passphrase (empty for no passphrase):    //直接按回车则密码设置为空
Enter same passphrase again:
Your identification has been saved in /Users/Username/.ssh/id_rsa.
Your public key has been saved in /Users/Username/.ssh/id_rsa.pub.
The key fingerprint is:
SHA256:******* **** //公钥
The key's randomart image is:
+---[RSA 3072]----+
|     o.*+ . .o.. |
|    + *o*. .. .  |
|     *.B       o |
|      +. .    . .|
|      . S E .  . |
|     . . + = .o  |
|    . . + +.*. . |
|     . o.+o@.    |
|        o*B.o    |
+----[SHA256]-----+

输入自定义密码（不需要的话就一路回车），然后可以看到id_rsa的文件名和路径/User/Username/.ssh/id_rsa。

连接SSH

依据上面的文件路径找到公钥，然而/User/Username/.ssh是个隐藏文件夹，默认情况下我们看不到。为了找到这个隐藏文件夹，使用快捷键shift +command +. (每个人设置的快捷键不同，此处是默认快捷键)。右键用记事本打开id_rsa.pub文件，复制里面的全部内容。
打开 Github 账号，右上角头像 - Settings，在左边找到 SSH and GPG keys 选项，新建一个 SSH 密钥，标题可以随便填，把之前复制的密钥内容粘贴进去，保存。

验证SSH连接是否成功

继续在终端内输入 ssh -T git@github.com
如果返回

1

Hi Username! You've successfully authenticated, but GitHub does not provide shell access.

则为连接成功。如果出现以下语句则输入yes后回车即可。

1

Are you sure you want to continue connecting (yes/no/[fingerprint])?

很不幸，博主在输入yes后返回的是git@github.com: Permission denied (publickey).，搜索发现应该是ssh密钥出了问题，于是返回重新生成.pub文件，但不知道为什么反复重试了好几次之后突然成功了（可能靠一些执着感动了它）。

安装NodeJS和postcss-cli两步是Luna主题官方文档 的要求，我在安装其他主题时并未涉及。因此可以查询对应主题的安装文档说明来决定是否需要安装。

4.安装NodeJS

进入NodeJS官网 挑选合适的安装包下载即可。

5.安装postcss-cli

打开终端，输入npm install postcss-cli -g，等待安装即可。

安装主题

1. 新建站点

打开终端，在根目录下输入hugo new site myblog，在/User/Username下就会出现一个名为“myblog”的新文件夹（也可以将命令中的my blog改成其他名字，本文中以myblog为例），该文件夹内的目录结构如下图：

2. 挑选主题

简单来说就是，打开官方主题商店 ，然后开始选妃！这一步看似简单但实际耗费了我很长时间……试了好几个主题，也尝试装修了两个，总体感觉各有各的好，最终确定了用美丽的luna！

3. 安装luna

在 Hugo 根目录执行

1
2
3

git submodule add -b master https://github.com/Ice-Hazymoon/hugo-theme-luna themes/hugo-theme-luna
cd themes/hugo-theme-luna
npm install --production

之后将/mybolg/themes/exampleSite中的所有内容复制到你的站点目录下，并根据自己的需求修改config.yaml配置内容。（里面写得很详细很贴心！赞美作者！）

4. 配置主题

Luna主题经常更新，下文内容可能已经过时。如有解决不了的问题，Luna主题GitHub主页 的Issue板块是最好的求助渠道。（作者大大非常热心！）

配置主题前，在/User/Username/myblog下执行命令

1

hugo server

找到最后输出结果中的网址（http://localhost:1313/），打开即可看到博客网页的预览。该网站由本地文件生成，可立刻查看修改结果，非常适合用来配置主题。
具体配置主要参考了官方文档 和这篇 ，博主不懂yaml或toml语言，所以只是照猫画虎摸索着大概改了一点……

托管部署(GitHub Page/Vercel)

以下两种方法都可以部署，博主两种都试过之后才发现自己曾经是非常画蛇添足地先部署到GitHub Page，再把GitHub Page部署到Vercel上（啊啊啊被自己笨死）。但其实不用这么麻烦的，两种选一种就可以了！（反正在国内这俩都不能流畅访问TvT）

部署在Vercel上

  1. 点击 Vercel 注册 页面，选择使用 Github 账号注册；
  2. 弹出授权窗口时，点击 Authorize Vercel，随后跳转到 Let’s build something new 页面（如果没有，在 Dashboard 点击 New Project）；
  3. 点击 Browse All Templates，下拉，找到 Hugo；
  4. 在 Create Git Repository 模块点击 GIT SCOPE 下拉列表，点击 Add GitHub Org or Account ，弹出安装窗口，点击 Install ；
  5. 在GIT SCOPE中点击你的 Github 账户，在右侧RESPOSITY NAME位置输入你想设置的仓库名（这里输入什么都可以），依次点击 Create-Skip，等待约半分钟，Vercel 就会自动搭建一个 Hugo 博客。

此时点击 Go To Dashboard 可以进入管理页面，红框部分即为自动分配的访问网址域名，同时你的 Github 仓库中，会出现一个由 Vercel 创建的叫 Hugo 的博客仓库。

部署在GitHub Page上

完全参考了将Hugo静态网站部署到Github Pages ，非常清晰！

到这里就完成了博客的搭建和部署！

博客维护与完善

1. 如何更新博客

想不到啊想不到，这一步居然都绊了我好久……被自己笨死！

git pull

解决git分支问题

如果把博客推送到 Github 仓库后发现 Vercel 没有反应，很可能是 git 分支没有推送正确，因此我们需要修改 git 分支。解决方法如下：

方法一

在终端中进入博客文件夹，输入git branch查看当前分支，返回：

1
2

  main
* master

说明当前默认为 master 分支。所以我们输入git checkout main切换分支，返回：

1
2

Switched to branch 'main'
Your branch is up to date with 'origin/main'.

此时再次输入git branch，会得到：

1
2

* main
  master

说明分支已经切换成功了。

方法二

在Vercel的Project面板里检查是否有这一句：To update your Production Deployment, push to the “main” branch.

如果是，在 Vercel 中点击Setting，左侧栏中找到Git，在Production Branch-BRANCH NAME中，将master改为main，再推送一次一般就能解决问题。
出现这个问题是由于 Git 有个设定叫分支，可以粗暴理解为不同的子文件夹，Vercel 只会监测被设定好的分支的修改。现在 Github 默认的主分支叫 master（目前在使用的分支可以在 Github 仓库左上角找到），我们的改动都是推送到 master 分支，如果 Vercel 被设定成监测 main 分支，那当然不会触发任何改动啦！

如果想了解 Git 分支究竟是什么，可以参考Git 分支 - 分支简介

2. 免费域名获取及重定向

我采用的是eu.org + CloudDNS的方法，成功实现了免费+国内直连两大目标！
具体操作完完全全参考了这篇 ，大声赞美！

2023-01-29 更新：这个方法似乎也不能国内直连了……权当拥有了一个新域名叭(> <)

3. Waline评论区配置

Waline 的官方文档 写得非常清晰！跟着官方文档从“LeanCloud设置”一直到“评论管理步骤”即可完成（可以跳过“绑定域名”）。
其中“HTML引入”这一步，找到/layouts/partials/comments/provider/custom.html，写入：

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

<div class="border-t py-6 px-6 md:px-8 dark:border-darkBorder">
    <div id="waline"></div>

    <script data-swup-reload-script>
        setTimeout(() => {
            console.log(document.getElementById('waline'))
            window.waline = Waline.init({
                el: '#waline',
                serverURL: '', //此处填入“Vercel部署”这一步得到的服务端地址
                emoji: [],
                requiredMeta: ['name', 'email', 'url'],
            });
        }, 1000);
    </script>
</div>

之后去layouts/partials/custom/head.html，写入：

1
2

<script src="https://unpkg.com/@waline/client@v2/dist/waline.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@waline/client@v2/dist/waline.css"/>

最后在根目录下的config.yaml找到评论模块，将 giscus 改成 custom 即可。

添加自定义表情

为waline添加可爱blob猫猫表情参考了这篇 !
只需要在/layouts/provider/custom.html中的emoji:后添加对应代码，例如添加Blob-cat表情则为（其余以此类推）：

1

emoji: ['https://cdn.jsdelivr.net/gh/norevi/waline-blobcatemojis@1.0/blobs']

评论更新邮件提醒

如果想要获得即时的评论通知，waline 提供多种方式的提醒渠道，包括邮件、微信、企业微信等等，具体设置方式Waline官方文档也说得很清楚，贴在这里：评论通知 | Waline 。

取消设备与浏览器版本显示

自己发了一条评论进行测试后，发现评论者昵称下方会出现设备与浏览器的版本号。应该是 Waline 的“贴心”新功能，但是对我来讲太多余了。搜索后发现取消方法是在 Vercel 生成的 waline 网页项目中设置环境变量 DISABLE_USERAGENT 值为 True。
📢 注意： 对环境变量进行任何改动之后都需要在项目主页进行 Redeploy 才会生效。

3. 其他可能有用的

记在这里以备不时之需。