国庆不出门宅女美丽新家装潢一站式笔记
5661 字
标签 # 技术
分类 银色溜冰鞋 ,

从旧主题换到Hugo-Luna主题。又遇到了很多之前没有遇到过的问题！坎坷的过程记录，大量参考了塔塔和小鱼的博客，塔塔的一起动手搭建个人博客吧！ 帮我理清了搭建博客的基本流程，中途遇到许多Luna主题的个性问题，查询多方未能解决，绝望地逛小鱼博客时发现小鱼曾用过这个主题！！这篇博客 给了我很大帮助！另外又在这篇 中找到了详细的waline评论区设置方法，大声赞美感谢。记录过程顺便尝试一下Luna主题丰富的短代码样式。

先在开头记录一下To do List和各种备忘：

  • Vercel托管网页域名在去年遭到DNS污染，这也是此次我的博客链接不能直接在墙内打开的原因。查询得知墙内用户唯一的解决办法是绑定已在国内备案的自定义域名，那就算了，先放在这里，起码写满十万字再买个人域名吧！（好贵呢要二十块.jpg）

    2022-11-09更新：已解决！域名获取及重定向见我的另一篇短博客更新 。

  • 友链不添加图片好像就不能显示，下次看看，先用空白图糊弄一下啦。
  • 长毛象简介网站验证，嗯，把rel=“me"加进about和footer都没有验证成功，只好先让域名在毛象主页暂时灰着…><…下次再看加到哪里才对！

    2022-11-09更新：已解决！ 美观起见，将验证链接加进网站footer部分，在./layouts/partials/html/footer.html文件中修改即可。

  • 真的没有什么要改的了天呐好满意。
  • 此文档长期更新。

初始主题网页生成

换主题准备

  1. 从旧主题文件中单独复制出content文件夹，content保存的是与主题无关的个人博客文档，如果没有其他存档的话建议保留。
  2. 为了重建一个文件逻辑更清晰的博客结构，我将其他所有文件包括hugo.exe全部删去。

环境配置

安装Git

官网下载即可。同时准备一个GitHub账号。

配置SSH

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

Github Docs 有一篇讲 SSH 连接的中文文档 ，可以辅助参考。

生成SSH

安装 Git 之后，在桌面点开 Git 图标，或者右键任意地方，选择 Git Bash Here，在弹出的命令行窗口里输入

1

$ ssh-keygen -t rsa -C "github账号注册时使用的邮箱"

之后系统会提示是否需要指定密钥位置、是否输入密码，这里可以按需输入，也可以直接一路回车，显示如下结果时即为生成成功

1

Your identification has been saved in id_rsa. Your public key has been saved in id_rsa.pub.

连接SSH

先找到公钥，公钥的地址是C:/Users/username/.ssh/id_rsa.pub，右键用记事本打开，复制里面的全部内容。

打开 Github 账号，右上角头像 - Settings，在左边找到SSH and GPG keys选项，新建一个 SSH 密钥，标题可以随便填，把之前复制的密钥内容粘贴进去，保存。

测试是否完成了SSH连接，在Git Bash Here中输入

1

ssh -T git@github.com

如果返回

1

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

则连接成功。如果询问Are you sure you want to continue connecting (yes/no)?，输入yes再回车。

安装Hugo

在希望存放的位置（如：username/AppData）创建HugoProgram文件夹，从Hugo-GitHub 下载Luna主题要求的>=v0.104.0版本的安装包 文件，注意一定是hugo_extended版本。下载后将其解压，将Hugo.exe文件放入HugoProgram文件，并将其添加路径：Windows开始->设置->系统->关于->右侧栏相关设置下高级系统设置->高级->环境变量->用户变量->打开Path，点击新建，将Hugo.exe所在系统路径复制写入空白框。

测试是否安装成功？在Hugo.exe所在根目录(HugoProgram文件夹下)空白处右键，点击Git Bash Here，输入

1

$ hugo version

若输出hugo版本，即成功。

安装NodeJs

在NodeJs官网 安装最新的稳定版本NodeJs，即下图左边链接，按照流程安装即可。

安装postcss-cli

打开终端（windows+R输入cmd打开命令提示符窗口），输入命令行

1

npm install postcss-cli -g // -g意为全局安装

即可安装。

在安装postcss-cli上遇到了不少坎坷，过程略去不表了，最后结论是除了全局安装之外，后续安装好主题后仍需在个人站点根目录本地安装一次，并写入依赖，流程如下：

1
2
3

npm install postcss
npm install postcss-cli
npm init //这一步是创建package.json文件，之后一路回车，最后输入yes创建文件完毕即可。

安装主题

在Hugo.exe所在根目录执行

1
2
3
4

git init
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

（也可以采取直接下载代码的方式安装）

此时，点进themes/ExampleSite，复制该文件夹下所有内容到HugoProgram下。并按上述方法在本地安装postcss-cli，然后右键Git Bash Here，运行

1

hugo server//或根据提示hugo server --disableFastRender

打开命令行最后输出的博客部署地址 http://localhost:1313/ ，即可看到博客网页ExampleSite的预览。

在打开 http://localhost:1313/ 的过程中显示无法连接？依据经验，有如下几种可能情况：

  1. Internet 信息服务(IIS)管理器。localhost 拒绝了我们的连接请求？
  2. Localhost端口冲突。
  3. 错误将http协议写成https。

注：Hugo根目录下复制而来的config.yaml文件是将来有个性化设计需求时进行修改的主要文件。

完成如上步骤后，静态博客网页已经安装并部署成功，但为了更方便地更新部署网页并方便分享给他人查看，我们采用vercel托管GitHub Page。

Vercel托管部署

这里我们使用 Vercel 来进行博客搭建，Vercel 是一个开箱即用的网站托管服务，通过它我们可以获得：一个非常简单的博客搭建过程、一个静态博客自动部署服务、还不错的网页国内访问加速，同时它还允许你将博客的源代码仓库设为私密。

方法一

Vercel部署个人网站有两种路径，一是安装主题文件并创建GitHub仓库之前先用Vercel生成hugo模板网页，并自动创建GitHub仓库，之后使用GitHub Desktop克隆GitHub仓库到你选定的空文件夹，由此将模板文件下载到本地，之后再更改为你想要的主题。详细步骤如下：

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

注意：如果提示 “Error:This user account is blocked.Contact support@vercel.com for more information.”，这是由于 Vercel 不支持大部分国内邮箱注册，可以发邮件和他们沟通解封（一般等他们上班时间就会有反馈），也可以换用 Gmail 等国外邮箱重新注册一个 Github 账号再登录。

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

然后配置环境变量：在 Vercel 上点击左上角的用户名，进入Dashboard，打开刚刚建立的Hugo项目，进入后在上方选项卡处找到Setting进入设置页面，在左侧点击Environment Variables，NAME处填写HUGO_VERSION，Value处填写版本号，例如最新版本为0.104.2，最后点击add。

这一步是因为 Vercel 本身自带的 Hugo 版本比较老了，所以需要告诉它我们使用的 Hugo 版本是什么。

对于Luna主题来说，还需要在Settings-General-BUILD COMMAND中写入npm install hugo-extended --save-dev来覆盖hugo默认的部署语句，否则会在部署时出现报错command “Hugo -D --gc”exited with 255。

Vercel托管网页的方法在我上一次搭建博客时是流畅的，但此次建站过程中反复遇到Deploy过程中失败"An unexpected error occurred. Our team has already been notified and are working to resolve the issue, please try again shortly.“的问题，过一段时间后又恢复正常，应该是Vercel方面的问题，没有什么解决方法。

GitHub Desktop

现在我们把刚刚 Vercel 建立的博客 Github 仓库克隆到本地。静态博客的写作和管理都是基于本地文件进行的，我们打开 Github Desktop，登录 Github 账号，点击右下角 Clone 仓库

在随后弹出的窗口中，点击 Local path 选项右边的 Choose，将 Local Path 设置为你想要博客文件存放的路径，比如可以放在E:/Hugo，注意目标文件夹一定要是空的。

更改主题：采用安装主题中介绍的方法将主题文件下载下来，整个复制到上一步下载到本地的站点文件夹中，取代原模版文件。也可以直接用git submodule方式安装在站点文件夹中，省去复制移动步骤。全部完成后，先在根目录下Git Bash Here中输入Hugo本地编译，生成Public文件，然后打开GitHub Desktop把本文件夹的所有更改推送到GitHub仓库，最后等待Vercel部署，就大功告成啦！

方法二

上面的方法其实也算是我走的一个弯路，实际上，如果已经将主题文件下载到本地，根本不需要Vercel生成一个新的模板页！只需要创建一个相对应的GitHub仓库（用命令行Push[见PS: GitHub Push and Pull]或GitHub Desktop载入本地仓库推送到GitHub），然后打开Vercel点击New Project-Import Git Respository-Continue with GitHub选择该仓库即可！环境变量及BUILD COMMAND改动同上。

再次，全部完成后，先在根目录下Git Bash Here中输入Hugo本地编译，生成Public文件，然后打开GitHub Desktop把本文件夹的所有更改推送到GitHub仓库，最后等待Vercel部署，就大功告成啦！

PS：GitHub Push and Pull

将我们刚刚在HugoProgram形成的所有文件上传到新建Github仓库，这里由于不熟悉GitHub操作走了一点弯路，实际上可用GitHub Push快速上传仓库。

具体步骤很实用，这里记录一下，参考github及git push的使用入门 ：

  1. 建立代码库，设置基本属性。
  2. 下载Git，配置SSH，连接GitHub。
  3. 打开需要上传GitHub的本地文件夹，在空白处右键Git Bash Here
  4. 输入git init在该文件夹下创建一个本地库（.git隐藏文件夹）
  5. 输入git add .，其中”.“表示上传所有文件到本地库，也可以单个上传
  6. git commit -m "为本次上传写一个简介"
  7. git remote add origin https://github.com/用户名/仓库名.git，此时仓库必须是创建好的空仓库，否则不能上传。
  8. git remote -v可查看此时挂载状况。
  9. git push -u origin master前面都是仓库初始化工作，这一步开始上传GitHub。运行此命令后会跳出GitHub登陆页面，输入账号密码，就会继续上传。
  10. 上传完成，去GitHub查看一下。
  11. 如果需要下载仓库中的文件，git pull origin master.

此时，在GitHub Desktop选择“添加硬盘上已存在的仓库”，选择此文件夹，会自动对应到GitHub仓库，之后本地文件有任何更新（即是你的网页进行更新），GitHub Desktop都可以方便地进行版本管理以及推送更新操作。

主题个性化修改

写到这里，已经开始累了！！一言以蔽之，关于网站的大部分设置都可以在根目录下的config.yaml文件中修改，语法和功能大家自己揣摩吧（我也不会），小改动略去不表。

Waline评论区

着重记录一下评论区功能的设置。Luna主题默认的giscus评论功能已经很完整了，不美丽的是giscus采用GitHub账号登录，我们悲惨的GitHub域名被GFW进行DNS污染的大陆人看到了就会恼羞成怒啊！而且我也不需要展开程序员社交，GitHub上全是大学健康打卡脚本项目很不好意思见人的好吗？所以我把giscus换成waline！接下来的做法完全参考小鱼在博客中的记录。

waline的官方文档写得非常清晰，直接放在这里 Get Started ，从LeanCloud Settings开始，跳过中间可选的Assign Domain（这一步是用来把waline网页绑定你的自定义域名的），一直到Comment Management步骤即可完成。

对于中间Importing in HTML步骤，不同主题修改方式可能有细微不同，先在layouts/partials/comment.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: '',
                emoji: [],
                requiredMeta: ['name', 'email', 'url'],
            });
        }, 1000);
    </script>
</div>

填好 serverURL (就是之前生成的waline网页域名，注意不要写成你的站点域名)和表情链接(可以自定义你想要的表情集合)，之后去这里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邮件提醒

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

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

自己发了一条评论进行测试后，发现评论者昵称下方会出现设备与浏览器的版本号。 Waline 的新功能，但是对我来讲太多余了。Waline，我真的不需要了解网友那么多信息啦！取消方法是在vercel生成的waline网页项目中设置环境变量 DISABLE_USERAGENT值为true。

注意，对环境变量进行任何改动之后都需要在项目主页进行redeploy才会生效。