缘起

前段时间刷到一篇文章 Your blog doesn’t need a JavaScript framework 看了下挺有感触的,也有一些共鸣和启发,我的站点目前除了后台有用到 js 其他方面好像确实不需要用到,也去了解了下里面提到的 11ty ,综合了一些因素后决定迁移一下站点。

现状

目前我的站点构成包括一个后台界面、一个前台文章展示界面、一个数据库、一个Node服务提供接口,站点整体部署在 Linode 服务器上。

Linode 刚开始速度还可以,后来就时不时变慢,偶尔还会因为不可抗力因素抽风而不能正常访问;另外一方面也觉得站点不需要用到框架、数据库这么重的东西,刚好趁此机会改成纯静态站点,将这些问题彻底干掉。

新版开搞

关于11ty

我选择了 11ty 作为新的起点,可以将它理解成一个页面生成器,毕竟人家的 slogan(Eleventy is a simpler static site generator.)就是这么描述的。

比如我有一个形如下面的目录:

├── _includes/
│ └── layout.njk # 公用布局
├── posts/
├── a.md
│ └── b.md
└── .eleventy.js # 配置文件

通过配置一些规则,它可以将文章 a 和 b(可以是md、njk、pug、ejs、html等格式)输出为 a.htmlb.html,你可以为这些文章套一个公用的布局 layout.njk ,为它们加上公用的页头页尾,后面只需要将这些静态页面发布出去即可。

那么这类方案也就完全用不到数据库了,因为使用数据库的目的是为了存储内容,而用11ty的时候项目本身就包含了内容,直接在项目中写 markdown 即可(markdown 真的是一种很方便的格式);既然数据库都没了,后台也就没有存在的必要了,索性将服务器整个清退了。

关于部署

上面提到利用 11ty 生成静态页面,这个页面要把它放在一个大家都能访问到的地方才行,那么站点部署在哪就是个问题了,前面也说了我自己的服务器已经清退了,那么只能去嫖别人的服务器了。

部署这类静态站点大多数使用 github pages 这类东西,我也结合 actions 食用了一番,由于众所周知的原因访问速度还是不理想,包括后面也试用了一段时间的 netlify 也是一样(netlify 其实很棒,但是在国内也没有节点)。

所以开始找国内的方案,部署这类站点,最好是能做到代码提交之后自动化发布,国内常用的就数 giteecoding.net 了吧。

综合比较后我选择了 coding.net 的托管服务,同时也理了一下最终流程:

  1. push 代码触发 hooks

    利用了git的钩子。

  2. 11ty build 生成静态页面,上传静态页面到 gh-pages 分支

    这里之所以要单独建一个分支,是因为发布的时候是发布的整个分支的内容。

  3. coding.net 自动发布 gh-pages 分支

    其实是发布到腾讯云存储服务上,然后 CDN 分发。

小结

到这里大部分东西都已经转移完成了,也粗略理完了所有流程,剩下任务的就是刷 11ty 的文档了,在写自动化构建计划的 Jenkinsfile 上也遇到了一些磕磕绊绊,主要是两个片段:

...
stage('Main') {
parallel { # 并行的流程
stage('Build') { # 生成页面流程
steps {
echo 'Install Dependencies'
sh 'yarn install'
echo 'Compile'
sh 'yarn build'
echo 'Result'
sh 'pwd && ls'
}
}
stage('Side mission') { # 附加流程
steps {
echo 'Checkout gh-pages into /home/deploy_pages'
sh 'git clone --depth=1 --single-branch --branch gh-pages https://${PROJECT_TOKEN_GK}:${PROJECT_TOKEN}@e.coding.net/xxx.git /home/deploy_pages' # 检出 gh-pages 分支到 /home/deploy_pages 目录
dir('/home/deploy_pages') { # 进入目录
sh 'ls'
echo 'Clean up'
sh 'git rm -r --ignore-unmatch *' # 清空原有内容
}
}
}
}
}
stage('Deploy') {
steps {
dir('/home/deploy_pages') { # 进入目录
echo 'Copy files'
sh 'cp -RfL ${WORKSPACE}/_site/* .' # 复制工作目录产出的静态内容到当前位置
echo 'Create a commit'
sh 'git add .'
sh 'git commit -m "deploy: ${GIT_COMMIT_SHORT}"'
echo 'Push the commit'
sh 'git push https://${PROJECT_TOKEN_GK}:${PROJECT_TOKEN}@e.coding.net/xxx.git HEAD:gh-pages' # 推送
echo 'Complete'
}
}
}

这里的推送结束之后紧接着就会触发 coding.net 的网站托管流程,待这些全部走完就部署成功了。

这里短短的几行流程也走了很多坑才整理的比较完善,整体的迁移过程也有很多细节没有展开来讲,以后有空讲一下11ty再来回顾一下。