68 lines
9.2 KiB
Plaintext
68 lines
9.2 KiB
Plaintext
|
---
|
|||
|
|
title: 弃用 WordPress 了，但我相当“后悔”
|
|||
|
|
slug: switch-blog-to-nextjs
|
|||
|
|
date: 2024-04-07 16:09:09
|
|||
|
|
updated: 2024-04-14 00:07:00
|
|||
|
|
tags:
|
|||
|
|
- 博客
|
|||
|
|
category: 编程
|
|||
|
|
summary: 如你所见，当你访问这篇文章的时候，我已经把写了 13 年的博客程序从 WordPress 迁移到了自己用 Next.js 写的程序，这可能是我第 N 次尝试使用其他的方式写博客，但我想绝对不会是最后一次。
|
|||
|
|
cover: /images/2024/04/2024040719182310.jpg
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
如你所见，当你访问这篇文章的时候，我已经把写了 13 年的博客程序从 WordPress 迁移到了自己用 Next.js 写的程序。这可能是我第 N 次尝试使用其他的方式写博客，但我想绝对不会是最后一次。
|
|||
|
|
|
|||
|
|
第一次接触类博客的平台还是 20 年前，初一同学在课间说道：“我开通了 QQ 空间，快去给我踩一踩。”正儿八经地写作，还要追溯到 15 年前，那时的我是那么的多愁善感，什么东西都想要“为赋新词强说愁”。我的足迹遍布各类 SNS 平台，在上面书写各种现在看来相当幼稚的话语。
|
|||
|
|
|
|||
|
|
因为专业的原因，在大学期间接触到了独立博客和 WordPress，当时的我就被这种独立而又个性的写作方式惊到了。那时还属于独立博客的黄金年代，QQ 雷锋群里群英荟萃，我那孱弱的前端知识就是通过此类途径习得。而我没想到的是，[当初的开博宣言](/the-beginning-of-blog)竟然一写就是 13 年。
|
|||
|
|
|
|||
|
|
年龄真是个好东西，因为其增长，我们能不断地丰富自己的阅历，也能见证所谓的“历史”。兜兜转转，写博客的人来来去去。有些相识数载至今还是好友，有些已经消失再无音讯。而我，对这 WordPress 也是又爱又恨，这期间换过太多的平台。有简单的 Hexo、Hugo，也有同样基于 LAMP 平台的 Typecho、Emlog、Z-Blog，还有之前很时髦的 Ghost。很多文章评论都放在了多说、Disqus 上，因为这来来回回的“搬迁”遗失大半。到头来，竟然还是这 WordPress 最好用，如同家里的“黄脸婆”，阅尽世间百态，才发现老婆是真爱。虽然至今还是不会写 WordPress 主题，但好在漂亮的主题数不胜数，凭着钞能力也能基本解决。
|
|||
|
|
|
|||
|
|
但，我还不甘心。
|
|||
|
|
|
|||
|
|
这十几年来前端风起云涌，每天都有新的东西诞生。13 年前博客用个 jQuery 就很了不起了，很多页面还使用表格布局，为了 IE6 要写一堆 Hack，那个时候声称不兼容 IE 的网站都属于“珍惜动物”。而如今 IE 早已不复存在，继任者 Edge 也把自己变成了 Chrome 的模样。前端相关的框架更是层出不穷，光打包工具我就完完整整地经历了 Grunt、Gulp、Webpack、Rollup、Vite、SWC 等，更别提其他的了。在这些技术的背景下，我这基于 jQuery 的 WordPress 就显得稍微有点 old school 了。
|
|||
|
|
|
|||
|
|
上周和 Tison 聊天，发现他正好准备基于 Astro 弄个[新的博客](https://github.com/tisonkun/dacapo)。沉眠于心中多年的想法终于浮起，既然用了这么多博客平台都不满意，为何不能自己写一个。Next.js 这么时髦，其 App Router 还能用最新的 React Server Component，我都眼馋很久了。于是说干就干，趁着正好清明放假，我把几乎所有的时间都投入在了这一“浩大”的造博运动中。
|
|||
|
|
|
|||
|
|
## Logo 设计
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
对我而言，技术牛逼与否并不是最重要的，最重要的是颜值。如果不好看，那就直接 pass。所以还没写博客，第一步，我就在考虑重新设计自己的博客 logo。对于之前用的 logo，其实问题并不大，主要的问题是矢量化。绘制这个 logo 的时候还是 6 年前，像素被限制在了 65px，在 PSD 底稿和对应字体都丢失的当下，想要放大适应视网膜屏幕等就显得有些困难。于是我借着这个机会，学习使用 [sketch](https://sketch.com) 来绘制矢量图形。这当中最大的绘制难点就是 logo 中那两个不规则的半圆环，我画了两个圆去叠加，然后合并后一点点拖拽曲线。才调整到和以前相思的形状。
|
|||
|
|
|
|||
|
|
绘制“帆”字的时候已经稍微熟悉，就直接使用钢笔工具一个个锚点描边，再稍微调整曲线就好，但是没想到还是在和圆环合并上栽了大跟头。弄了半天才发现是路径曲线的闭合问题，这其中的曲折大概就像是以前在微博上看到的[这张长图](/images/2024/04/2024040719234718.jpg)所描绘的景象。不过万幸的是，最终圆满地达成了我想要的效果。
|
|||
|
|
|
|||
|
|
在绘制 logo 的同时，我也一并绘制了黑白两种形态，为日后主题支持黑白模式准备，同时也绘制了 Github Poster 放在 `README.md` 上用于展示。这当中最有意思的事情，就是对以膨胀色与收缩色的概念的复习。以前自学设计的时候，觉得这东西很抽象。这次设计黑色 logo 的时候，发现明明是同样的大小，但是黑色的 logo 在屏幕上就是显得大上一圈。我不得不微调曲线，向内收缩一圈才在视觉的保持了 logo 的大小一致，相当有趣。
|
|||
|
|
|
|||
|
|
## 字体使用
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
字体选择上分为博客正文字体和图片字体。以前并不懂版权，不知道字体很多是需要授权才能在一些公开媒介上使用的，这次特意选择了商业免费可用的字体。
|
|||
|
|
|
|||
|
|
正文字体使用的是 [OPPO Sans 3.0](https://www.coloros.com/article/A00000050/)，5 年前在字谈字畅的 [PodCasts](https://thetype.com/typechat/ep-113/) 得知此字体的公布，当即就喜欢上了。虽然和阿里普惠体、微软雅黑体等一众“汉仪兄弟们”师出同门，但是其变化是最讨喜的。它去掉了自冬青黑体时代就有的大喇叭口，字形更加方正，在笔画转弯处也更加刚正。其家族字体设计更多的是为传统非视网膜屏幕服务，所以夸张的笔锋搭配上抗锯齿就能有较好的观感。这种设计，放在当今连手机都是视网膜屏幕的年代，就显得很难看。所以 OPPO Sans 的设计，在当下很长一段时间，将成为我的首选字体。
|
|||
|
|
|
|||
|
|
Logo 部分的字体，主要是基于 [M+A1](https://booth.pm/ja/items/2347968) 进行制作。虽然此字体是日本人制作，但是不同于在日本起绝对统治地位的明朝体，此字体是一款明朗的黑体，而且同时免费提供了多种粗细字型，简直感动到哭。最有意思的就是细款字形的笔画末端都有一定的隆起，结合之前学习到的[光陷阱](https://www.thetype.com/2021/06/21723/)，想必此款字体在打印机下也能有极好的显示效果。
|
|||
|
|
|
|||
|
|
## 技术选型
|
|||
|
|
|
|||
|
|
技术选型上这次有点激进，相比已经成熟很好用的 VitePress 等动静结合的生成工具，我义无反顾地选用了 Next.js 的 App Router，运行环境选用了更快的 Bun。至于其他方面，基本是照着 [leerob](https://leerob.io) 的博客进行仿写。所以文章格式不再是常见的 Markdown，而是能插入动态内容的 MDX。对于历史的评论，我还是舍不得丢弃，毕竟有 3000 多条。所以再三对比之下，我选择使用 [Artalk](https://artalk.js.org) 进行存储。有了多说的经历后，我也不敢使用任何第三方的 SaaS 服务存储评论，毕竟数据在自己手里才最安全。
|
|||
|
|
|
|||
|
|
博客以前最喜欢的音乐播放器是 Hermit-X，对应的作者荒野无灯已经神隐很久，获取网易音乐信息的 [Meting API](https://github.com/metowolf/Meting) 也没持续更新。而 APlayer 更是不知道 [DIYgod](https://diygod.cc) 什么时候能来“扫墓”，上次 APlayer 的诈尸还只是更新了个 License。所以在新博客环境只有 [Aplayer React](https://aplayer-react.js.org) 这个名为 APlayer 实则是借着其样式用 React 完全重写的播放器可用，其在 RSC 下有点小问题，但估计短时间内作者也没时间修复。（谁叫我是前端菜鸟呢）
|
|||
|
|
|
|||
|
|
MDX 一开始是手动使用 `fs` 加载，使用 `grey-matter` 解析 `matter` 后再用 `next-mdx-remote` 渲染。但是鉴于自己太菜，很多页面的渲染都需要全量读取博文解析。后面改成了[推友推荐](https://twitter.com/ilovek8s/status/1776809454790676827)的 `contentlayer` 先渲染静态化，再进行加载。但瞅着 `contentlayer` 这半死不活的状态，未来大概率还是要弃。😭
|
|||
|
|
|
|||
|
|
## Update 2024/04/14
|
|||
|
|
|
|||
|
|
没错，一周后我又来屁颠屁颠地更新博客啦，一周过去后，我的博客也发生了不少变化。首先是搜索终于支持了，使用的是 fuse.js。前文提到的 Contentlayer 也被我废弃，换成了更好用的 Velite。
|
|||
|
|
|
|||
|
|
----
|
|||
|
|
|
|||
|
|
写此文章前，本有一肚子关于清明三天折腾的坎坷想要倾诉。真正写下来的时候，却又没多少。一来是年龄的增长，很多东西不再像以前那么过激。二来，大部分问题基本解决。数数上次更新博客的时间，已经不知道是猴年马月。希望自己在未来的年月里，能笔耕不辍，多记录一点自己的生活。
|
|||
|
|
|
|||
|
|
至于博客载体，那都是浮云啦。
|
|||
|
|
|
|||
|
|
|