Image

2022 年了,我终于又写了一个 Blog 站点

Viewed: loading...

9 minutes to read


前言

终于,这一天来了

翻翻仓库,这已经是我写的第 n 个 Blog 了,前几次应该还是在大三找实习的时候,为了整点面试可聊了,自己整了一整套前端博客,后端服务加管理系统,但是也跟随一次云服务器过期,数据被删除,永远的离开了 233

picture 54

由于维护成本巨高,后面再也没有动过写 Blog 的念头了。有折腾的精力读读书,写点东西不是更香,所以一度弃用了 hhh

在各种机缘巧合下,各种要素终于达到化合反应的标准,我又开始尝试写 Blog 站点了,为了避免这次重蹈覆辙,我仔细分析了下,我为啥需要这么一个站点?

Blog 能为我们带来什么

如果以上内容你有一点点共鸣,那感觉继续看下去应该会有所收获

Blog 应该如何搭建

首先,得想想 需求 是什么,每个人的需求都不一样,有些人只是希望有个地方记录自己的碎碎念,有些人希望这是自己的一个作品集,有些人希望这是一个炫技的场地

不同的需求对应的最佳实践也有所不同

梳理需求

我简单想了想,我的需求应该如下:

方案调研

在开始编写前,我也体验了不少 Blog 的技术选型了,梳理了一下现有的 Blog 实现方案和对应的优缺点,为大家提供一些参考:

在各种方案都体验了之后,发现如果想达到我要的效果,还是逃脱不了写代码的成本,在机缘巧合下看到即刻里有即友分享 fly.io 这个部署平台,外加自己看到 devaslife 的这个 youtube 视频 后,开始了现在的尝试 ( 顺带说一下这个日本自由职业的开发小哥的视频水准确实棒,调色配乐和设计都是有东西的,确实是一个很厉害的全栈开发工程师

动手动手

到这里先说一声抱歉,下面的建站内容需要有一定的技术背景,如果是非技术的小伙伴,可能就要到此为止了(可以尝试在上面第三服务中做一些取舍呢 😂

同时也可以参考上面的方案,如果想跟随尝试一下,那会是一个不错的体验嘿

技术选型

本次综合各方面的技术选型结果如下:

技术栈解析

Astro.build

picture 55

astro 是一个类 hexo 的静态站点生成框架,非常适合用来搭建 blog,这里之所以没选择 hexo,主要是考虑可定制的程度和生态;而且 astro 的文档写的也是相当不错的

目前 astro 是支持 react 和 mdx 的,写起来基本上只需要写一些定制的组件就 ok 了,markdown 也是直接支持解析,用起来非常方便,并且产物的体积和性能整体来说还是很不错的

两行搞定初始化

npm create astro@latest
npm run dev

Tailwind

对应的 tailwind 集成也是有官方插件,直接加上就行

这里有一个大坑需要说下,如果中间有定制 markdown 的解析插件 rehypePlugins,里面用到的类记得放到一个 astro 组件里,要不然 treeshake 给你丢了,折腾半天

React

astro 支持各种框架的组件解析,这点还是很不错的,比较方便的就是直接用 react 写定制组件,基本没坑,像此处的 Header 和对应的功能也是直接写就ok

这里需要注意一下 astro 的 Client Directives,这个会控制 UI 框架如何在客户端集成,基本上开 client:load 就 ok

Fly.io

这个部署平台得说一下,是近期发现的非常优秀的平台了,主要有以下几点

picture 56

基本上按照文档流程,完成域名绑定和 dockerfile 的编写就 ok 了,省心

以上的优势基本上就秒杀了 vercel 和 netlify 了,但 如果不考虑 gfw 的话… 我可能还是觉得 vercel 香,设计深得我心

有一个小点,就是这里实例是需要静态服务 host 对应的 files 的,本身不像 pages 一样提供托管功能。所以这里简单用 astro preview 来实现了,后续如果发现有问题,在尝试用 node 或者 deno 来 host

Github Actions

关于 CICD,这类静态站点维护起来是最舒服的,直接 build 完 deploy 就行

这里 actions 的配置内容,大家可以直接点击顶部 navbar 中的 Source 进行查看~

达到的效果

结语

web 3.0 我不懂,但是关于个人站的分析我认为是没有问题的,可能也许,在不久的将来 blog 将成为另一种个人的社交入口,链接众多志同道合的人,一个好的个人品牌能够快速拉近陌生人的关系,也能够提供一个对外暴露自己的契机,很多时候需要的只是这么一个小小的契机而已

最后的最后,归根结底,Blog 是用来写的,最近也积累了很多想写的议题,比如智能家居、上网自由,比如中医,比如 VIM 退出指南等… 如果感兴趣的朋友欢迎通过 RSS 订阅;或者关注我的微信公众号:晨阳再升,基本上也会第二时间同步更新

咱们下次见

哦对了,如果有更好的 Blog 建站方案也欢迎找我聊聊嗷

Comments

There are comments.

📰 邮箱订阅 📰
不错过每篇更新~
如有发现问题,请点击这里勘误🐶