Back to blog
Aug 05, 2024
3 min read

该blog网站建立过程记录

第一篇blog🎉!记录一下这个blog网站是怎么搭建和部署的。

大家好,这是我的第一篇blog。(撒花🎉

特此来记录一下这个小网站的诞生过程。算不上tutorial,所以没什么干货并且废话会比较多hhhh

用到的东西

  • Astro的template
  • Cloudflare
  • Namesilo(购买域名)
  • Markdown

正文

起因

其实很早就立了个建个人网站的flag,因为太懒而一直搁置,直到近期刷b站偶然看到鱼皮哥发的这片推文利用Astro建站,就突然有了填坑的冲动。

选择搭建方案

在此之前也有看一些搭blog网站常用的技术,框架有Hexo、Hugo、WordPress之类,部署方案有Vercel、Netlify、Cloudflare之类(或者国内服务器+ICP备案)。

博客模板

鱼皮哥的那篇推文让我认识了Astro。怎么说呢,感觉Astro的模板真的超级贴合我的审美,比起WordPress什么的要好了太多。没什么“网红味”。而且兼顾性能,基本都是超级轻量化的,动画不卡。

(在此之前我其实试过阿里云的学生包,用了下WordPress,但卡在了备案,就瞬间失去了继续往下搞的热情,遂弃。

部署

选Cloudflare的最大原因是看着顺眼(bushi)。其实主要是阅读了几篇攻略,提到Vercel和Netlify国内访问非常不稳定,甚至直接就是被隔开了(悲)。但是后来才发现,Cloudflare在近期也被盯上了,对,就是近期,大概就是几个月之前吧(悲)。

所以现在访问这个网站也并不稳定了。实测是,手机端可以直连,但是成功率也不是100%;电脑端就必须要借助外力。

域名

其实Cloudflare自带的pages.dev这个域名也挺好看的(比那什么github.io好看)(你礼貌吗x

但是由于一些不是很清楚的原因,我还是选择了去买个(更漂亮的)域名。

Tip:如果你不打算在国内环境建站(国内建站必须备案)的话,尽量不要在国内域名商购买域名。 别问,问就是没必要。(可能会被催着备案之类的(不过影响没有国内服务器来的那么大

Namesilo是国外域名商,并且支持支付宝。😏

搭建过程

1. 上Astro网站选模板

模板商城兜兜转转逛了一圈,选的是Mark Horn制作的Astro Sphere。这个模板在美学意义上相对独特(没有那种大背景图冲脸的”网红“感,就很好),而且还轻量化,简洁又不简单。缺点是颜色相对单调了一些。

然后跟着readme去部署就好了。把项目克隆到本地,然后npm run dev。

然后就可以在localhost查看效果了!

2. 编辑网站内容

看懂模板,然后知道怎么去修改内容,就行。

最简单的入口就是 \src\pages\index.astro

这个模板还是很容易看懂的,而且它在博客展示的部分已经有了好几篇tutorial,写了包括File Structure、添加博客和project、修改社交媒体链接之类的内容,甚至还教了怎么用markdown。他真的,我哭死。

3. 发布更新内容

上Cloudflare提交新的部署。

部署攻略为Astro的官方攻略。

第一次部署的时候,我是打算把项目放github上然后同步过去的。但是这样容易出问题,在部署的时候提示我文件锁和package.json的组件版本不一致,我没法解决这个问题(同时也怀疑是模板在更新的时候没对上配置)。之后选择了用wrangler直接提交本地内容,所以就绕过了用git的这一步。

之后更新也很简单,直接到对应页面,把你的文件夹一拽(?),点击部署,就好了(真是个大聪明)。

结语

没啥结语,主要是懒得写了。

总之就是,再次庆祝第一篇博客的诞生(撒花again🎉

今后我打算写点长的东西,少在空间朋友圈发过于碎片的内容,也算是培养自己长线思考的能力吧。因为我发现,长线思考能力无论是对于自己的事业发展还是生活质量提升都是极其重要的,比如说它几乎就是你独立搓出一个项目(课设)的必要条件。

所以这里以后既有学习工作上的记录,也有生活方面的杂记之类的。可能会写一些特别喜欢的歌/专辑的乐评。可能会中英文都写,趁机练一下英语能力。甚至可能会有一些创作(?

总之,just everything I want to write down.

Peace✌️