RE：从零开始的博客搭建

一切的开端

多日以后面对额度用不完的Codex的那天半夜，我将会想起考试周忙里偷闲刷b站的那个下午…

好吧，也算不上忙里偷闲，毕竟也没好好复习😋

看到视频里的内容，再看着我那买了以后因为赶上考试都没咋用过的Codex（😭😭😭），我心中萌生了要制作一个博客网站的想法，不过当时也只是想了一下

后来考完试放假了，假期里吃饭吃不香，睡觉睡不好。想起来前几天上课考试的时候状态还挺正常，我觉得给自己找点事做会好一点，然后就开始着手制作这个网站了

准备工作

前端基础

虽然代码都是让AI来写的，但我作为监工还是得懂一点东西的（~~事实证明这一点用都没有，还浪费了我不少时间~~），所以我先上b站找了一个速成课：3小时前端入门教程（HTML+CSS+JS），再搭配上课程配套的教程网站极客侠GeeksMan-前端入门以及菜鸟教程，顺便把网址发给Codex让它帮我整理了笔记

网页框架

框架和上面的视频选择了同款，即Astro。在着手制作自己的博客之前，我先跟着官网上的教程搭了一个demo

下面是其中的页面 oops，图片不见了 ~~哈哈，毅力哇啦！~~

参考网页

在完成上面的工作后，我在1.14514秒内意识到一个严重的问题：作为一个从来没学过前端也没有审美的人，用着审美同样贫乏的GPT，这活肯定是干不成的

这时聪明的你肯定会想到我之前刷到的那个视频，我也是这么想的。然后我把那个视频翻出来，发现上面既没有网址，也没有GitHub仓库地址，有种上厕所的时候确信自己带纸了，结果从兜里掏出来一看发现是砂纸的感觉

本着死马当活马医的心态，我根据视频里相关的信息在Github上搜了一下，没想到真搜到了up的主页

Yuimi_Chaya

于是我就给仓库点了个star然后clone下来了😋

参考网站-Yuimi Lab

后来我发现这个网站有的设计我不是很喜欢，就去b站找到了一个用Astro开发的开源博客模板Mizuki，将这个一并列入参考对象

参考网站-Mizuki

此外，在开发过程中，我还让ChatGPT去搜集了一些设计非常优秀的网站作为参考，不过我压根看不懂，只学到了皮毛，一并放在这里

参考网站-Anthony Fu

参考网站-Maggie Appleton

开干！

基本工作

第一步肯定是先创建本地文件了，在配置好开发环境的前提下在控制台运行npm create astro@latest，即可选择创建的模板（注：默认用的是cmd，如果你使用的是Windows PowerShell，可能会出现指令被拦截的情况，用npm.cmd create astro@latest即可）。我创建的是空白模板。

然后就是创建Github仓库，把项目放进去

项目规划

一个好的项目肯定离不开详尽的项目计划书，而为了省力肯定会借助AI。Codex额度不抗造，所以我选择使用ChatGPT网页版来辅助工作

在网页端左侧的“项目”栏新建一个项目，即可在“来源”页面一次性把项目的背景信息全传进去，省的换窗口的时候还得再发一遍孩子们，图片坠机了

这里我传了三个txt文件，里面是参考网站和我的博客demo的Github仓库地址，方便GPT随时读取并用作参考

然后就是紧张刺激的提示词大战AI环节了（悲）孩子们，图片坠机了

孩子们不要学我，我不会写提示词，只能边聊边提需求，榨干自己最后一滴脑浆换来一个充满AI味的plan😭😭😭 alt text

这里提几点小技巧：

GPT有强大的识图功能（~~不像某条蓝色大肥鱼~~），你可以直接利用截图工具截取参考网站中你中意的部分，然后在上面进行批注，只要注释清晰可见，GPT就能理解你的意图对plan进行修改
想看看网站做出来什么效果，又怕做demo浪费Codex额度？你完全可以让网页端来做这件事，它可以生成简易的示例网站，包括HTML页面，CSS样式甚至简单的JS交互，支持在线预览整体效果，你也可以让它把文件打包供你下载，在本地品鉴最🔥新🔥最🔥热的示例网页
为了节省额度，一切的规划都可以交给网页端来做，它可以根据你的需求自己生成供Codex执行的plan以及详细的提示词，只要一句话，它就可以把上述文档、截图批注和示例页面一块打包发你，之后你只需要把它放到项目目录下让Codex自己读取即可

素材搜集

像我这样没啥技术的人，只能靠搜集优秀的素材给我充满AI味的小网站撑撑门面了孩子们，图片坠机了

图片

背景图片和默认封面都是在Pixiv里搜集的，我选用了焦茶老师的杰作。我很喜欢老师的画风，线条清晰，颜色丰富，人物神态生动。遗憾的是老师已经去世了，R.I.P.

深色模式背景 alt text

浅色模式背景 alt text

默认占位封面 alt text

我头像的出处是歌曲MEGA TSKR的封面

关于兴趣展柜部分，基本就是在网上搜集各个作品的高清海报往上放。另外，如果你想放的游戏是steam上的，可以去Steam\appcache\librarycache\游戏id（游戏id可以去SteamDB查，直接问AI也没有问题，它会帮你查好的）里面找到对应的游戏背景图和透明背景的游戏logo，再和AI说一声做成steam游戏页面那种感觉，这样做出来会好看一些孩子们，图片坠机了这样搞虽然好看，但后面你要是想添加非steam的游戏就有可能打破队形，逼死强迫症，用之前请谨慎考虑

至于网站logo就是八仙过海各显神通了，如果你是大佬的话可以自己设计，像我这样的小白还是最好用AI来搞。你可以让ChatGPT帮你找几个免费设计logo的网站，不过做出来的效果都挺丑的😵当然要是你的要求不高，只要简单的字母组合，让GPT直接生成svg图像的效果还是挺好的，它还可以把图像转成ico格式，一举两得

下面这个就是拿GPT生成的，效果还不错，对吧？

音乐

孩子们，考验歌品的时候到了（孩子们，图片坠机了

想放到网站上的歌可以直接去明月浩空网免费下载mp3文件，专辑或歌曲的封面自行搜集（我是上网易云薅的）

开始生成

其实到这一步就没啥可做的了，你只需要把GPT写好的提示词发给Codex等它分阶段生成代码，然后对每阶段的成果进行验收，确认无误后commit一下，把改动push到云端，然后创建PR将该分支merge到main，~~接下来看着自己慢慢归零的额度无能为力，天天视奸Tibo的X账号祈祷能重置额度~~

网站优化

经过长时间的奋战好不容易是做完了，现在快进网站里看看吧！

相信我，除非你有前端设计的功底并且在设计阶段下足了工夫，否则用不着两分钟你就被AI味熏出来了😫

AI生成的网站往往有种不可名状的诡异感，乍一看没啥大问题，但越看越不对劲，你知道它很奇怪，但就是找不出问题具体出在哪

看着那个说不上哪里不对劲的AI网站的你be like: 孩子们，图片坠机了

然后我仔细观察了一下，发现了一些AI味的来源：

所有页面布局高度雷同，比如我的网站里最初全是胶囊状的圆角卡片，极易导致视觉疲劳
过多无意义的字符堆砌。AI相当喜欢在犄角旮旯里面塞一些没有必要的文字，显得非常多余
所有动画效果都是上浮。这里指的是鼠标悬停在特定卡片上时出现的动画，如果不加约束的话，AI大概率会全做成这样的

你可以像我一样把这些看起来不舒服的点总结一下发给ChatGPT，也可以把你网站的Github仓库地址发给ChatGPT让它自己来看，然后和它商讨敲定细节，最终给出网站的优化方案交给Codex执行

如果你做这个博客只是为了在本地记录一些东西，那这些已经够了，如果你希望把博客做成网站供人访问，就继续往下看吧

网站部署

截至目前，我只了解过两种网站部署方式，一是用Github Pages托管网页。你问它的好处？只要问问AI，相信你能看到一大堆文字给它吹得天花乱坠（~~不过最突出的是完全免费~~），但对于一个身处中国大陆的人来说，它有一个最最致命的缺点——要魔法。这点对制作网站的你来说肯定不成问题，但对你的访客就不一定了。而且次次访问都要挂梯子也挺麻烦的。你要是能接受这些的话那就大大方方跟AI说“把我的博客部署到Github Pages上”，Codex可以全权负责完成这些工作，或者你自己查文档手动搞，可以省点额度

其二就是把网站部署到自己租的服务器上，即VPS（Virtual Private Server），这也是我选用的方式，接下来进行讲解：

前置任务

和Github Pages不同的是，利用VPS部署要花钱，而需要花钱的地方有两处：一是租用服务器，二是注册域名。这里提一嘴域名并不是必须的，没有域名也可以直接通过IP地址访问网站，但我觉得这样做有种生了个孩子不给取名，而是一直用身份证号来叫他的诡异感觉（

如果你要搞域名的话又得分两种情况：一是将你的网站部署到大陆的服务器上，此时你的域名需要备案，根据我在网上的了解，这个过程相当长，而且每个地区政策不一样，而且如果你未成年的话就直接和这个方式say goodbye了。另一种情况就是将网站部署到大陆以外的服务器上，这样域名可以不用备案。

服务器

注：以下内容绝非广告，而是我个人了解或选用的方案孩子们，图片坠机了

如果你是大学生，并且想要租用大陆内的服务器，那你可以去阿里云薅羊毛，有个套餐一年只要99块，不过用过一年后就回复正常价了孩子们，图片坠机了

想要租大陆外的服务器就很难薅到羊毛了，这时就不用看大厂了。实在不知道去哪找的可以试试小兔互联，我在b站上搜到的，价格也不算贵（应该）。我租了一个月的香港服务器，实测大陆可以直连。

域名

域名就是形如xxxx.com的东西，它能充当你网站的名字，让你的网站更好记

我是在国外的公司购买的域名，这里又有两种选择：一是在Porkbun买域名并使用DNSPod进行解析，这个方案有个好处使是Porkbun支持支付宝，但是购买需要实名，而且走的是国外的平台。我对于把本人举着身份证的照片发到国外公司手里是很抵触的，所以我选择了另一种方案，即在Cloudflare Registrar购买域名并用Cloudflare DNS进行解析，缺点是这个只能用外汇卡支付，并不支持国内主流付款方式。

有一点要注意，就是要学会接受不完美（孩子们，图片坠机了

发现ponylab.com已经被注册的我有点纳闷，于是出于好奇心去搜了一下，然后就发现了这个页面：孩子们，图片坠机了

整整7000多刀，再加一点可以买辆小车了

看着这个恐怖价格，我突然感到一阵头晕目眩，头顶的天花板看起来忽近忽远，屏幕上的数字似乎出现了重影。这时我的父母打了通电话过来，告诉我我们家其实是超越马斯克的顶尖富豪，这点价格完全不值一提…当然这都只是我的幻想😭最终我选择退而求其次，购买了一年的pony-lab.com

服务器配置

在以下的说明中，采用两个占位符：

服务器公网IP：SERVER_IP
你的域名：example.com

开放服务器端口

如果购买云服务器的平台有防火墙/安全组/网络规则/入站规则之类的页面，点进去开放三个TCP端口：

端口	用途	来源
22	SSH登录服务器	0.0.0.0/0
80	HTTP网页	0.0.0.0/0
443	HTTPS网页	0.0.0.0/0

如果你和我一样用的是小兔互联，那就可以跳过这一步

登录云服务器

Windows打开PowerShell，输入：

ssh root@SERVER_IP

注：这里的”root”指的是平台给你的用户名，如果和这里不一样的话注意自行替换

如果连不上就把梯子关了，此后在操作服务器的过程中记住千万不要开梯子，否则断连

正常会让你输入密码，直接去平台复制就行了，输入密码的时候终端里面什么都不会显示，输完直接按回车就好

连接成功后一般会看到

root@服务器名称:~#

更新服务器并安装Nginx

先更新服务器，依次执行下面两条指令：

apt update
apt upgrade -y

然后安装Nginx，并设置开机自启动：

apt install nginx -y
systemctl enable nginx
systemctl start nginx

Nginx是一个负责接收用户的网页请求，再把网站内容或后端服务返回给用户的高性能Web服务器和反向代理工具。

简而言之就是一个帮你完成各种杂活的工具，有了它你就能专心搞你的网站和后端程序了

运行完别忘了检查以下状态：

systemctl status nginx

要是看到

active (running)

说明成功了，按Q退出状态页面。

现在在浏览器访问：

http://服务器公网IP

如果进去看见Welcome to nginx!说明一切正常，可以进行下一步

在服务器上创建网站目录

执行以下命令：

mkdir -p /var/www/你的网站名
chmod -R 755 /var/www/你的网站名

本地网站构建

回到你本地的博客项目，将你的域名发给Codex，告诉它你正准备将网站部署到服务器上，让它对本地的配置文件进行修改

修改好以后在终端中打开你的项目，运行：

npm install
npm run build

这里npm还是有可能会被拦截，按照前面说的换成npm.cmd即可

运行完后，你的项目会生成dist文件夹，这就是你要上传到服务器上的文件

你可以通过运行

npm run preview

来预览构建的结果，预览完毕后按Ctrl + C即可停止预览

上传dist

用终端打开博客项目的根目录，执行

scp -r .\dist\* root@SERVER_IP:/var/www/你的网站名/

记得替换占位符！

输入密码后就会开始上传文件

上传完成后，你可以在服务器里执行

ls -la /var/www/你的网站名

要是能看到对应目录说明上传成功

配置Nginx

在服务器执行：

nano /etc/nginx/sites-available/你的网站名

然后在里面粘贴如下配置（记得更改占位符）：

server {
    listen 80;
    listen [::]:80;

    server_name example.com www.example.com;

    root /var/www/ponylab;
    index index.html;

    location / {
        try_files $uri $uri/ =404;
    }

    error_page 404 /404.html;

    location ~* \.(css|js|jpg|jpeg|png|gif|svg|webp|ico|woff|woff2|ttf|mp3|ogg)$ {
        expires 7d;
        add_header Cache-Control "public";
        try_files $uri =404;
    }
}

然后按Ctrl + O和回车保存文件，再按Ctrl + X退出页面

启用配置：

ln -s /etc/nginx/sites-available/你的网站名 /etc/nginx/sites-enabled/你的网站名
rm -f /etc/nginx/sites-enabled/default

正常情况下会显示：

syntax is ok
test is successful

然后重新加载：

systemctl reload nginx

Nginx 会根据请求中的域名，也就是 server_name，选择对应的网站配置。

这时再访问

http://服务器公网IP

就能看到你的网页了

在Cloudflare设置域名解析

进入：

Cloudflare 控制面板
→ 你的域名
→ DNS
→ Records

添加第一条记录：

类型：A
名称：@
IPv4 地址：服务器公网 IP
代理状态：DNS only / 仅 DNS / 灰色云朵
TTL：Auto

再添加第二条：

类型：CNAME
名称：www
目标：example.com
代理状态：DNS only / 仅 DNS / 灰色云朵
TTL：Auto

稍等一会后，在PowerShell检查

nslookup example.com

如果返回你的服务器的公网IP，说明解析已生效，这时访问

http://你的域名

就能看到网站了，但还没有HTTPS。

申请免费HTTPS证书

安装 Certbot，在服务器执行：

apt install certbot python3-certbot-nginx -y

申请证书：

certbot --nginx -d example.com -d www.example.com

接下来照着指引来就行了，注意一点：

是否自动把 HTTP 跳转到 HTTPS，选择重定向选项。

Certbot 可以自动申请证书并修改 Nginx 配置，使网站使用 HTTPS。

修改Cloudflare代理

HTTPS 确认正常之后，回到 Cloudflare DNS，把两条记录的代理状态改成Proxied，即橙色云朵

然后进入

Cloudflare
→ SSL/TLS
→ Overview

将加密模式设置为

Full (strict)

到这里，你的网站就部署完成了

孩子们，图片坠机了

以后更新网站的方法

先构建网站，在删除服务器里的旧文件，然后上传新文件，整合起来就是

（本地）npm run build
（服务器）ssh root@SERVER_IP "rm -rf /var/www/你的网站名/*"
（本地）scp -r .\dist\* root@SERVER_IP:/var/www/你的网站名/

更便利的更新方法*

由于这是个静态网站，所以更新时必须得走这套流程，显得非常麻烦。不过我们可以把这些工作交给Github Actions来做。Github Actions是Github自带的自动化工具，可以帮你完成许多工作。在这里我们配置好以后，你只需要将更新内容推送到对应分支，Github Actions便可以自动构建网站并将其传到服务器上，极大地简化地我们更新网站的流程女儿期待.jpg

下面开始讲解部署的流程

在服务器创建专用部署账户

为了安全，我们可以只对GitHub Actions开放修改网站对应文件夹的权限。这需要我们先给它创建一个账户。

在服务器中执行：

adduser --disabled-password --gecos "" deploy

创建网站目录：

mkdir -p /var/www/你的网站名
chown -R deploy:deploy /var/www/你的网站名
chmod 755 /var/www/你的网站名

安装rsync：

apt update
apt install rsync -y

这样就创建好了只能修改对应目录的账户

在电脑上生成一套自动部署密钥

打开 Windows PowerShell，执行：

ssh-keygen -t ed25519 -C "github-actions-你的网站名" -f "$env:USERPROFILE\.ssh\你的网站名_actions"

注：如果你正在参考这个文章，请根据自身状况把下面所有指令中的ponylab替换

它会生成两个文件：

ponylab_actions       私钥，之后放入 GitHub Secrets
ponylab_actions.pub   公钥，放入服务器

查看公钥：

Get-Content "$env:USERPROFILE\.ssh\ponylab_actions.pub"

把整行都复制下来，然后进行下一步

把公钥加入服务器

回到服务器终端，执行：

mkdir -p /home/deploy/.ssh
nano /home/deploy/.ssh/authorized_keys

把刚才复制的公钥粘贴进去，然后保存并退出.

设置权限：

chown -R deploy:deploy /home/deploy/.ssh
chmod 700 /home/deploy/.ssh
chmod 600 /home/deploy/.ssh/authorized_keys

然后在电脑的PowerShell中测试：

ssh -i "$env:USERPROFILE\.ssh\ponylab_actions" [email protected]

这里正常来说是不要密码的，但若账户处于锁定状态则会索要密码，这时在服务器执行：

passwd deploy

然后设置一个密码，这样就可以正常连接了

如果能正常进入服务器并看到deploy@服务器名:~$，说明自动部署密钥配置成功了

把服务器信息存进 GitHub Secrets

进入你的博客仓库，在Github页面一次打开：

Settings
→ Secrets and variables
→ Actions
→ New repository secret

添加四个Secret：

VPS_HOST

你的服务器IP地址

VPS_PORT

22（默认ssh端口）

VPS_USER

deploy

在 PowerShell 查看私钥：

Get-Content "$env:USERPROFILE\.ssh\ponylab_actions" -Raw

完整复制整个私钥，包括-----BEGIN OPENSSH PRIVATE KEY-----和-----END OPENSSH PRIVATE KEY-----，然后创建下一个Secret

VPS_SSH_KEY

在这里复制你的私钥

在项目中创建 GitHub Actions 文件

这一步还是交给Codex，把上述的信息整合成提示词发给它，让它修改配置文件，并且测试最终效果。

做完这些，你就可以通过更新某一分支来同步更新你的网站了

结语

好悬是给这网站做完了，有人问主播主播你怎么不做动态网站，那是因为我的技术力还不够😇这篇文章也是，仅作为我个人制作网站的过程的一个记录，可能会出现许多纰漏，希望各位海涵。以上。

附录：

谢谢你看到这里，请你吃西红柿炒鸡蛋孩子们，图片坠机了