header

我又回来了

曾经几度对自己的博客开了又关,最初一个博客应该是在读初中的时候建起来的,使用的是 wordpress。但都没写什么文章,每次想写点什么,就觉得没什么好写的,或者写不出来。。等域名过期或是vps过期,然后也就这么丢掉了。比起写博客还是建博客比较好玩😊况且有了生成式人工智能,写作负担会小很多。

框架选择

我对前端不是很熟悉,SSG(Static Site Generator) 框架除了主流的 Hexo, Hugo, Jekyll 之外,我几乎不认识其他的。这几个框架在我看来都不是很灵活(不好整活)。

正好我发现某位页面仔群友也在用重写博客,使用了 Astro。之后我也去了解一下关于这框架的 features,令我比较感兴趣的是 Component Islands,它可以使用任何被支持的UI框架(比如 React, Svelte, Vue)作为组件,还有 MDX,这就相当有利于整活。SSR 的支持也是有的,以后可能会用来显示动态内容,比如评论。于是就选择了 Astro。

目标

  • 很快的页面打开速度
  • 无障碍
  • 搜索引擎友好
  • w3m 友好
  • 尽可能避免 JS

大概就是灯塔跑分要4个100,最初设定的目标算是达到了。

过程记录

设计

起初,我打算根据 Material You 的风格来设计我的博客,也就是现在(2023) Google 的设计语言。我模仿了 Material 官网的超大的R角(Radius: 40px),但后来我发现,过大的圆角严重影响了内容的展示。这里的逻辑是,为了看起来更协调,大圆角需要足够的留白,这就导致了内容展示的空间变少了。有空我一定要写一篇《圆角批判》!

色彩方面使用了 Material Theme Builder 进行调色。后面为了方便使用了 tailwind-material-colors 作为插件,只要设定一个 primary color 就能计算出其他的颜色,DarkMode 也自动适配好了。 写这篇博客的时候,使用了 #405e0d 作为主题色。以后看心情换。

CSS

初版使用纯正的 CSS 进行页面布局,写着写着越来越乱了,第一次写规模稍大的页面,不知怎么管理 CSS。后面使用 Tailwind CSS 负担小了很多,首先不用 template 和 css 来回切,不知不觉找不着 tab 了。如果要问为什么不写在 <style>,因为我不想看到 Network 里一大堆 stylesheet(这什么强迫症),实际上对加载速度也没很大影响。

最后的话

接下来,我将继续优化和完善这个博客,还有很多想法没实现呢。就这样。

本作品采用知识共享署名-非商业性使用-相同方式共享 (CC BY-NC-SA) 协议进行许可。
评论
由于是静态页面,评论提交后不会立即显示,这里 查看提交的评论。
test 2025/1/19 14:22

测试下评论?