Blog的诞生 | Bingoool

缘起

Blog 1.0 ： 在 GitHub Copilot 正火的时候，想到是不是可以在 AI 的辅助下完成个人博客的搭建。研究一番之后，选用了 Astro + Vercel 的方案，通过模板搭建完成了 1.0 的版本。 Blog 2.0 ： 在 Cursor 出来后，Copilot 的方式逐渐被 Agent 替代，对于设计师来说，开发前端页面更加简单。在 1.0 的基础上，逐步完善我的博客：有了自己的域名，充实了文章内容，支持了 RSS 订阅，也接入了一些好玩的第三方库。下面是 Blog 搭建过程的梳理，给想要搭建网站的同学提供一些参考。

拥有一个自己域名

如果采用 GitHub Pages 或者 vercel 部署，也可以使用平台提供的连接。缺点是域名不容易记忆，不过对于练手来说问题也不大。

购买域名

选购域名时可以选择海外平台（GoDaddy、Namecheap）或者国内平台（阿里云、腾讯云）。不同服务商提供的服务不同，比如免费提供隐私服务或者邮箱服务，不过服务商也是可以改的，需要花一点点钱。综合考虑性价比和平台服务来选择域名服务商。

我的域名是在服务商 Spaceship 购买的。用于练手的话，可以选择 6 位纯数字的 xyz 域名，性价比极高，续费 10 年仅需 50 元左右。

域名配置

我的域名是托管在 Cloudflare，一站式支持 DNS 解析、SSL 证书、CDN 等服务，能给网站提供安全防护。Cloudflare 被广大网友称为互联网大善人，其提供很多免费又好用的服务，比如 Workers、对象存储等，有兴趣的话可以了解了解。

对于简单的网站，我会推荐你也使用 Cloudflare 托管，选择免费套餐就已经能满足个人建站的需求。参考：Cloudflare托管域名教程-知乎

下面是域名配置的一系列步骤。

设置 DNS 服务器（域名解析）
1. 登录域名注册商的管理后台（如 GoDaddy、阿里云、Namecheap 等）。
2. 找到“DNS 设置”或“Nameserver 设置”。修改为以下两种方式之一：
  - 托管服务商的 DNS ：如果已购买服务器或虚拟主机，输入服务商提供的 DNS 地址（如阿里云的 dns1.aliyun.com）。
  - 自定义 DNS ：若需自主管理解析，可切换为第三方 DNS 服务（如 Cloudflare、腾讯云 DNSPod）。
配置域名解析记录 常见记录类型及用途
- A 记录 ：将域名指向服务器的 IP 地址（如 192.0.2.1）。
- CNAME 记录 ：设置子域名别名（如 www 指向主域名）。
绑定域名到服务器/托管平台
配置 SSL 证书（启用 HTTPS）
- 提升网站安全性，避免浏览器标记为“不安全”。
其他优化配置
- 重定向设置 ：将非 WWW 域名 301 重定向到 WWW 版本，或反之。
- CDN 加速 ：使用 Cloudflare、阿里云 CDN，配置 CNAME 指向 CDN 提供的地址。

页面开发

网页开发使用到了 Cursor 作为主力军，疑难杂症也会请教 Chatgpt 等外援。

Cursor 限制于使用次数，我在 GitHub 上发现了一个项目 cursor-free-vip，在项目的基础上重新写了一个一键命令，详情可以见另一篇博客文章《Cursor 破解小秘方（仅供学习）》查看

安装与验证环境：
- 安装 Node.js（包含 npm，用来安装工具）

包管理工具：在前端开发中，包管理工具是管理项目依赖（第三方库、框架、工具等）的核心基础设施，它们负责依赖的安装、版本控制、更新和移除。

版本管理：
- 安装 Git（用于管理代码版本）
- 推荐使用 GitHub Desktop，简单易上手。
页面开发：
- 从 0 开始创建基础文件结构（HTML、CSS、JavaScript）
- 使用前端框架构建项目（如 npm create vite@latest 创建 Vue/React 项目）
本地预览：
- 使用 npm run dev（或框架自带命令）在本地启动网站
- 打开浏览器访问 `http://localhost:4321（或提示中的地址）预览效果
- 在浏览器中检视页面并利用开发者工具调试布局与脚本