我是如何进行博客迁移的

我是如何进行博客迁移的

前言

首先,在迁移之前,我只会简单的 JavaScript 语法,看不懂高级用法,并且对于在许多基础知识上都有着很大的漏洞,但因为时期特殊加上时间有限,我只能使出浑身解数在高考之前的这个暑假完成了这次迁移,在这之后的不到一年时间里,可以让这个博客处于「完全托管」的状态。

事后回顾整篇文章,不管我愿不愿意面对、承认,我完全在借鉴或者说模仿「苏卡卡的有底洞」,因为他做到了我对博客的所有幻想,「美观」「速度」「高质量」。高质量需要时间的沉淀,但美观和速度似乎只需要恶补就可以做到。

迁移

那么这个就是「如何把大象从冰箱拿出来」的问题惹:

  1. 从 Typecho 导出数据「文章」「图片」「评论」
  2. 建立新的博客平台 Hexo
  3. 将「文章」「图片」「评论」导入 Hexo

首先说说新的博客平台,在参考了这篇将 Hexo 部署到 Cloudflare Workers Site后,我也想用 Cloudflare 来「减速」我的博客,但这样的方案对我来说有两个缺点:

  1. 收费。
  2. 复杂。

复杂等于自己可以定义更多的流程,能够更加自由,但对于小白状态的我来说,显然不合适。考虑到静态博客的部署优势,我开始考虑直接静态网站托管服务来部署网站而不是「服务器+ CDN」的模式,偶然发现 Cloudflare 在今年推出了 CloudFlare Pages,同样几乎与所有的静态网站生成器兼容,支持从Github仓库自动构建,包括私密仓库。直接部署在 Cloudflare 200+ 数据中心上的同时自动从Github构建,大概整个地球都没有比它更优秀的免费静态网站托管服务了,完美。

于是最终的方案便直接变成了 CloudFlare Pages.

文章——从 Typecho 到 Hexo

由于在写作时的习惯,Markdown 格式的文章通常首先保存在本地文件夹内,所有迁移就只需将文件统统移至 Hexo 对应的文件夹内,在 .MD 文件头部添加上对应的 Front-matter 即可。

图片——从 Chevereto 到 jsDelivr

部署

曾经的我在国内的平台上自建了“最好的图床之一” Chevereto,美观的相册确实令人赏心悦目,但却并没有多少实用,甚至在最后连一个自动上传的 API 都没有调试好。
回到主题,观察到 Sukka 部署在 Cloudflare Site Workers 的博客将图片等静态资源发布成 npm 包并借助公共 CDN jsDelivr 进行引用,速度十分的可观。
在参考npm图床的使用技巧这篇博客后,我也决定用 Github Actions 来自动发布 NPM 包,但这篇博客里需要手动进行版本号的更新,研究一番后,自动更新版本号的 Github Actions如下:

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
name: ReleaseJson
on:
push:
branches:
- main
jobs:
npmPublish:
name: Npm Publish
runs-on: ubuntu-latest
steps:
- uses: actions/[email protected]

- name: patch npm package version and publish
uses: actions/[email protected]
with:
node-version: "12.x"
registry-url: https://registry.npmjs.org/
- name: version patch and publish
run: |
npm version patch --no-git-tag-version
npm publish
env:
NODE_AUTH_TOKEN: ${{secrets.npm_token}}

- name: commit new version number
env:
$USER_EMAIL: ${{ secrets.USER_EMAIL }}
$USER_NAME: ${{ secrets.USER_NAME }}
run: |
git config --global user.email ${{ secrets.USER_EMAIL }}
git config --global user.name ${{ secrets.USER_NAME }}
git add .
git commit -m "links(json): update YML and generate JSON successfully" -a
- name: Push changes
uses: ad-m/[email protected]
with:
github_token: ${{ secrets._GITHUB_TOKEN }}

需要进行设置的 Secret 关键字有:
| Secrets 名称 | 变量值描述 |
| — | — |
| USER_EMAIL | Email 地址(用于 Commit 信息的提交) |
| USER_NAME | Github 用户名(用于 Commit 信息的提交) |
| _GITHUB_TOKEN | Github Token(用于 Commit 信息的 Push) |
| NPM_TOKEN | NPM Token (用于提交新的 NPM 包)
|
如果不更新版本号,将无法更新 NPM 库。如果不在更新版本号后及时更新 Github 仓库,那么将会影响下一次提交。当然你也可以去掉上面有关 Github Push 的部分,手动更新 NPM 库版本号。

优化

即使使用 jsDelivr 这样强大的全球 CDN,动辄几MB的图片,且不说 jsDelivr 有着 100MB 的包支持上限,这依然会使得博客的加载完全大大推迟。在一番研究后,我用三个方法把图片优化到了我认为的极致:

  1. 使用 Webp 格式的图片
  2. 策略性的有损压缩
  3. 避免使用图文无关的图片


为了向 Sukka 学习使用更多图文有关的封面,我摸索了一会儿 Sketch,自己通过网上的资源创建了一些贴合文章内容的封面,但迫于时间有限,还未能完全替换,这里加个 Todo List.

使用 SVG 格式的 ICON

之前在我主持 Hentaiverse ISEKAI 拍卖的时候,Sukka 曾运用 SVG 制作出了动态倒计时用于显示在古板老旧的 E站 BBS系统上(项目地址),尽管没有深入了解,但大抵已经有了粗略的印象。其实决定要用 SVG 的原因还是看到设计师发过来的缩略图有锯齿受不了,所以决定自己动手做一个,其实部署运用之后都一样
首先找到原型图,用 Photoshop 将图片扣下来,然后用 Illustrator 通过对模板图片的描点来绘制矢量图,最后导出画板得到SVG代码。



如此我也为我的博客换上了SVG图标,好耶!

评论——从 PHP原生 到 Disqus

使用 Typecho 插件 TypExport 导出评论为 Disqus 支持的 WordPressXML 格式,在 Disqus 后台中 Import, 并使用 Migration Tools 导出原博客文章链接的 .csv 文件,逐一进行匹配修改。然后又用到伟大 Sukka 的发明了呢——「DisqusJS」
使 Disqus 不再拖累性能和页面加载

优化

关于我这个Hexo博客的优化大部分都参考自 Sukka的博客。
天下武功,唯快不破 —— 我是这样优化博客的
图片 lazyload 的学问和在 Hexo 上的最佳实践
使用 Cloudflare Workers 加速 Google Analytics

其实使用静态博客直接部署在 Cloudflare 后,并没有太多需要的优化需要去做,大多数说精益求精,在极致之中追求完美。

魔改 or 美化

全站字数

首先在themes/icarus/layout/widget/profile.jsx开头,引入Hexo工具

1
const stripHTMLHelper = require('hexo-util').stripHTML;

然后getAvatar()函数之后插入getCount()函数

1
2
3
4
5
6
7
8
9
10
function getCount() {
let count = 0;
site.posts.forEach(post => {
const content = stripHTMLHelper.stripHTML(post.content);
const cn = (content.match(/[\u4E00-\u9FA5]/g) || []).length;
const en = (content.replace(/[\u4E00-\u9FA5]/g, '').match(/[a-zA-Z0-9_\u0392-\u03c9\u0400-\u04FF]+|[\u4E00-\u9FFF\u3400-\u4dbf\uf900-\ufaff\u3040-\u309f\uac00-\ud7af\u0400-\u04FF]+|[\u00E4\u00C4\u00E5\u00C5\u00F6\u00D6]+|\w+/g) || []).length;
count += cn + en;
});
return Math.round(count / 1000) / 10;
}

并添加变量调用上面添加的函数,然后在cacheComponent()回调函数的返回中插入wordcount关键字。最后修改在Profilerender()修改所呈现的网页文本样式。

友情链接

因为主题并没有自带单独的友情链接模板,所以在网上一番搜索后找到了这样一篇博客为 ICARUS 而生的友情链接页面,但是 Github 仓库中并没有发现博文中的代码。在尝试于作者取得联系后,得到了这样一封邮件,在自己的一番魔改研究后,完成了友情链接的部署,同样是通过 Github Actions 自动部署到 NPM 仓库。(其实 jsDelivr 可以加速 links.json,但这样做会方便后面将友链引用图片保存至仓库)

这里之后大概会单独出一篇博文来记录。

样式调整

嘛,样式的话就是萝卜青菜各有所爱了,按照自己喜欢的来吧~

  • 布局加宽
  • 字体颜色
  • 背景颜色
  • 左侧边栏个人信息

Todo List

  • 右侧边栏添加相关文章
  • 将友情链接中的图片保存并从 jsDelivr 引入
  • 黑暗模式
  • 将更多的封面替换为图文相关的图片

后记

其实在这次迁移的过程中,遇到很多很多的坑,在多次尝试都不得解得的时候,自然而然地会想要去求助朋友,然后当曾经可以帮你解决一切的朋友已经变得好似无法挽回实际没有勇气挽回,体验出的就又是另外一种绝望了。
相对独立地完成这次迁移,我作为一个 JavaScript 小白,接触学习了不少 JavaScript 知识和一些框架,还学习了 CSS预处理器、SVG和矢量图的制作等等……

我是如何进行博客迁移的

https://blog.sku.moe/post/blog-migration/

作者

Xuan

发布于

2021-08-07

更新于

2021-08-07

许可协议

评论

Your browser is out-of-date!

Update your browser to view this website correctly.&npsb;Update my browser now

×