博客出生日记

可有可无的介绍

拖了这么长时间总算是把博客弄起来了，procrastination确实害人不浅啊（bushi）那么就按照惯例（？）写一下这个小破网站是怎么~~搭起来~~ 东拼西凑 起来的吧

缘起

其实很早在读高中的时候就萌生了类似想要自己搭建网站的想法，但是因为种种原因一直未能付诸于实践

后来大学的时候渐渐的对“homelab”有了兴趣，也慢慢开始自己折腾hypervisor，vm，docker之类的东西。尝试 ~~抄作业~~ 的途中也有过自己在本地虚拟化笔记，代码库等各种各样的服务，逐渐也对“host公网网站”没了兴趣

但在过去的一个暑假经历了种种狗血事件之后心里总觉得有几口老槽不吐不快，于是就诞生了这个网站 – 是的，这个网站的诞生仅仅是因为我压抑不住内心急于吐槽的欲望，也算是应了“share my personal life on my blog”的原旨

总而言之，这篇用语匮乏，表述欠妥的文章大概是涵盖了这个站点的搭建过程，请各位评论区大佬脚下留情，轻踢

同时感谢所有慷慨公开自己建站、装修过程的前辈，大佬们。我也会把搭建过程中借鉴过的资源帖子全部放到这篇文章的最后面

平台选择及搭建流程

TL；DR

网站 = Hugo SSG + Hugo stack theme + Stack theme mod

部署 = 本地Gitlab实例 + Gitlab ci + Cloudflare page

--- title: 大概流程 --- stateDiagram direction LR state1: 本地修改 state2: 推送/合并到主分支 state3: 本地容器构建 state4: wrangler 上传到 cloudflare page state1 --> state2 state2 --> state3 state3 --> state4

（反正都本地host了）

网站本体

背景

背景主要是两个：

彩虹背景，来自于@zhixuan’s blog
动态线条效果，来自于@叶相相的博客

<!--
    layouts/partials/footer/custom.html
-->
<script
    src="https://cdn.jsdelivr.net/gh/zhixuan2333/[email protected]/js/ribbon.min.js"
    integrity="sha384-UEK8ZiP3VgFNP8KnKMKDmd4pAUAOJ59Y2Jo3ED2Z5qKQf6HLHovMxq7Beb9CLPUe"
    crossorigin="anonymous"
    size="300"
    alpha="0.6"
    zindex="-1"
    defer
></script>

<script type="text/javascript"
	color="224,224,224" opacity='0.8' zIndex="-2" count="255" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js">
</script>

样式

这个其实就没有什么好说的了，就是用了hugo的stack主题魔改版，其中主题由JimmyCai原创，小球飞鱼魔改。

在那之后又根据几位博主的装修日记进行了细微调整，包括滚动条样式，三栏的宽度调整，图标修改，etc.

其中栏位宽度，滚动条样式修改主要来自于 XR_G’s Blog – Hugo Stack主题更新小记 _{^{详细信息、图片就不放了}}

再者实在是感谢博主在文章里用elements inspector的提醒，为我之后debug省了好多脑细胞 XD

侧栏/中间栏

这里主要是在右侧启用文章目录，和在中间栏底部启用不蒜子统计

<!--
    layouts/partials/footer/footer.html
-->
<i class="powerby">
  <span id="busuanzi_container_site_pv">
      访问量&nbsp;-&nbsp;<span id="busuanzi_value_site_pv"></span>
  </span>&nbsp;
  <span id="busuanzi_container_site_uv">
      访客数&nbsp;-&nbsp;<span id="busuanzi_value_site_uv"></span>
    </span>
  </i>
</footer>

功能/小部件

mermaid 作图，来自于@std::bodun::blog Add Mermaid to Hugo with Dark Mode
Channel.io 气泡，来自于@山茶花舍给 Hugo 加一点好玩的功能
APlayer 歌曲，来自于@山茶花舍给 Hugo 加一点好玩的功能
语言切换，来自于@锦李本鲤个人网站的建立过程（三）：Hugo主题stack的使用与优化
Comments 系统，stack主题自带

部署

Cloudflare Page

用Cloudflare Page 的原因在于比对下来 “nanohomelab.com” 这个域名在cloudflare最便宜，也省去了域名导入的步骤 _{别问我为什么要用一个这么奇怪的域名，问就是中二病犯了}

同时欣喜的发现cloudflare page对我而言几乎是可以一辈子免费使用的 – 无限制实在是太香了

加上有报导说cloudflare对于direct upload支持还不错，直接本地实例就可以cicd部署一条龙，正好我有台24小时不关机的机器，就尝试手贱一下

不过用direct upload的话还是要记得先创建项目名称，不然之后wrangler deploy不了，如下：

Gitlab

Runner

Gitlab Runner的话其实没有什么好配置的，就只要照着guide一步一步来就完事了，至于默认镜像也无所谓，反正到时候都是要指定的

原本我是打算构建之后放到另外一个虚拟镜像仓库的，但是准备的时候发现上次服务器整体精简化的时候这玩意儿被我nuke了就也懒得多此一举了

不过本地构建存储的话建议还是在config里面加上一句：

# etc/gitlab-runner/config.toml

[runners.docker]
...
+ pull_policy = "if-not-present"

省得到时候名字撞车

Container Image

本来是想直接用官方的extended 镜像的 _{因为本身需要extended} 但是不知道为什么官方的镜像并不是开箱即用，所以只能这么搞一下了不过这样也好，省的到时候hugo版本撞车：

# Dockerfile
FROM registry.gitlab.com/pages/hugo/hugo_extended:0.116.1

RUN apk add --update nodejs npm
RUN npm install -g npx
RUN npm config set user 0
RUN npm install wrangler --location=global
RUN npx wrangler init

# bash
docker build -t nanohomelab/nanohomelab:latest

.gitlab-ci.yml 部分配置

cache:
  paths:
    - public/

test:  
  stage: test
  script:
    - hugo version
    - hugo
  rules:
    - if: $CI_COMMIT_BRANCH != $CI_DEFAULT_BRANCH

pages:
  stage: pages
  script:
      - hugo
      - CLOUDFLARE_ACCOUNT_ID=$CLOUDFLARE_ACCOUNT_ID CLOUDFLARE_API_TOKEN=$CLOUDFLARE_API_TOKEN npx wrangler pages deploy ./public --project-name YOUR_PROJECT_NAME --branch main
  artifacts:
      paths:
        - public
  rules:
    - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH
  environment: production