终于来到静态网站搭建了！让我们从引导页开始吧！

你可以点击下方卡片或点击标题上方带有”合集“字样的按钮来查看合集下的其他文章。

https://blog.365sites.top/tags/series-202401

前言

其实“imsyy/home”在发文的两周前开发者本人就已经宣布不再维护

Commit时间

停更通知

但是现在仍然有很多人在使用它，而且考虑到其美观性，所以我仍然决定写一篇部署这个项目的教程。

此教程部署的项目是使用另一个大佬“first19326”开发的“WorstOne”（home项目的修改版），使用的部署方式是通过Vercel提供的免费空间进行部署，使用此部署方式部署时，Vercel将自动锁定其版本。

部署

准备工作

你需要先注册一个Github账号，并成功登录上去。

另外如果没有可以翻越GFW的技术建议使用Steamcommunity 302（点击此处下载）对Github和Vercel进行加速，否则它们在国内的访问速度可能非常慢甚至无法访问。

确定要使用Steamcommunity 302加速的记得在设置里开启下方两个代理选项并重启后端

创建网站

点击下方按钮以Clone项目最新版本的模板

如果跳出登录界面就注册一下

注：务必选择使用Github账号快速注册，否则后面会很麻烦

之后你会看到如下界面：

其中，“Git Scope”为你要连接的Git账号，这个不用管。随便填写一个“Repository Name”（存储库名称，亦为项目名称）并勾选“Create private Git Repository”（防止配置公开），然后点击“Create”等待Vercel将网站创建完成就可以了。

创建成功后的界面

配置网站

刚才，我们已经成功的创建了一个个人主页并将其发布到了网络上，并成功的领取了一个Vercel免费提供的二级域名（xxx.vercel.app）。但是，这个二级域名在国内已经被GFW拦截，所以我们需要通过绑定自定义域名来绕开GFW的限制。

绑定自定义域名

添加域名

点击刚刚放过烟花界面的“Add Domain”选项进入域名页面

如果刚刚你不小心关闭了这个页面，则可以通过项目主页右上角的“Domains”按钮进入域名页面

在“域名”页面里，我们可以看到这个网站绑定了哪些域名，这里我们直接在输入框中输入我们想要的域名（后面必须是自己已经购买的域名，例如你购买了internet.xyz这个域名，则在输入域名时必须包含internet.xyz，且必须位于最后），这里我输入www.hicosor.top这个域名做例子，输入完成后点击“Add”即可添加域名。

在点击“Add”以后，你可能会收到下方提示

这是由于你输入的域名触发了Vercel的Apex Domain（顶点域）规则导致的，这里我建议选择第一项，它会将www.<你的根域名>和<你的根域名>一起添加；如果你不想这么做，则请点击第三项（强烈不推荐，因为选择后者可能会降低你的SEO排名）。

添加解析记录

添加成功后，你的域名应出现在列表中，并出现红色的”Invalid Configuration“（配置无效）标识。

”配置无效“看着挺唬人的，但我们往下看我们就会看到这个信息（”Name“下方的文字如果不同很正常，以你的为准）：

或者这个信息：

此时我们就要按照提示去解析DNS，这里以CloudFlare为例，登录到dash.cloudflare.com后，我们点击侧边栏的”网站“→自己的域名进入网站主页

选择DNS→记录，在右侧”管理 example.com 的 DNS“卡片中找到”添加记录”，然后会出现下方表单

这里的“类型”或“记录类型”就对应你Vercel中的“Type”，“名称”或“记录名”对应“Name”，“IPv4地址”或“目标”或“记录值”对应你Vercel中的“Value”。

⚠️ 注意事项1

Vercel给你的Value必须是“76.76.21.21”或者“cname.vercel-dns.com”或者"cname-china.vercel-dns.com"，如果Vercel给你的不是这3个值，请将记录类型换成“A”，记录值一律换成“76.76.21.21”，否则你的网站仍会受到GFW的影响。

⚠️ 注意事项2

使用CloudFlare的用户在填写表单时一定要把代理给关掉，就像下面这样显示“仅DNS”

否则你的网站SSL会冲突，进而导致浏览器阻止你访问！

验证结果

返回Vercel的“域名”页，单击右边的“Refresh”按钮以验证结果，出现像下面这样打两个勾即表示域名绑定成功（如果出现了两个勾右边转圈的情况，请耐心等待它转完）。

访问你绑定的域名即可查看到你的站点

修改基本内容

接下来，我们需要修改网站上的基本信息

返回项目主页，点击右上角的“Repository”跳转到存储库。（后面我都不截图了，根据文字说明做吧）

在跳转后的网址的后面拼接上“/edit/main/.env”即可进入配置文件编辑页面，全选所有的文本，删除，然后将下方内容粘贴进去

# 站点名称
VITE_SITE_NAME = "网站名称"
VITE_SITE_AUTHOR = "站长昵称"
VITE_SITE_KEYWORDS = "WorstOne, HomePage" # 站点关键词，用于搜索引擎排名，多个关键词之间用“, ”隔开
VITE_SITE_DES = "网站介绍"
VITE_SITE_URL = "网站主页地址，一般是https://你的域名"
VITE_SITE_LOGO = "首页站点图标，建议用绝对路径"
# 站点图标
VITE_SITE_ICON = "标签页站点图标，建议用绝对路径"
VITE_SITE_ICON_APPLE = "这个配置同上面"
# ICP 备案
VITE_SITE_FILING = "ICP备案，没有做备案的话留空"
# 公安备案
VITE_SITE_POLICE = "公安网备案，没有做备案的话留空"

# 简介文本
VITE_DESC_HELLO = "电脑左下角卡片标题"
VITE_DESC_TEXT = "电脑左下角卡片内容"
VITE_DESC_HELLO_OTHER = "点击卡片后的卡片标题"
VITE_DESC_TEXT_OTHER = "点击卡片后的卡片内容"

# 一言数据（默认）
VITE_HITOKOTO_TEXT = "简单地活着，肆意而又精彩。"
VITE_HITOKOTO_FROM = "WorstOne"

# 天气 Key
## 请前往高德开放平台注册 Web 服务 Key（免费的）
VITE_WEATHER_KEY = "8292d245d9b4945a8cf300ad15513d34"

# 建站日期
## 请按照 YYYY-MM-DD 格式填写
VITE_SITE_START = "2023-05-05"

# 下面的配置不要动！

# 歌曲
## 请在 public/data 目录下的 music.json 文件中配置
## 此处提供的服务可能会超量从而无法访问, 请自行部署
## 请参照 https://github.com/xizeyoupan/Meting-API 进行 API 服务部署
## 若使用 QQ音乐 歌单, 歌曲数量最好不要超出 50 首
## 备用: https://api.wuenci.com/meting/api/
## 参数说明: 
## api 歌曲 API 地址
## server 歌曲服务器 （ netease-网易云, tencent-QQ音乐 ）
## type 播放类型 （ song-歌曲, playlist-播放列表, album-专辑, search-搜索, artist-艺术家 ）
## id 播放目标 （ 歌曲ID 或 歌单ID 等 ）
VITE_MUSIC_URL = "/data/music.json"

# 社交链接
## 请在 public/data 目录下的 socialLinks.json 文件中配置
VITE_SOCIAL_URL = "/data/socialLinks.json"

# 网站列表
## 请在 public/data 目录下的 websiteLists.json 文件中配置
VITE_LISTS_URL = "/data/websiteLists.json"

# 背景图片
## 请在 public/data 目录下的 background.json 文件中配置
## 注: 请勿设置默认背景 url 属性, 请勿调整默认背景在配置文件中的位置
VITE_BACKGROUND_URL = "/data/background.json"

# 默哀模式
## 请在 public/data 目录下的 mourn.json 文件中配置
## 注: 不是默哀模式的开关, 而是手动开启默哀模式（非指定日期）
VITE_MOURN_URL = "/data/mourn.json"

# 更新日志
## 请在 public/data 目录下的 updateRecords.json 文件中配置
VITE_RECORDS_URL ="/data/updateRecords.json"

# 控制台内容
## 请在 public/data 目录下的 console.json 文件中配置
VITE_CONSOLE_URL = "/data/console.json"

按注释修改，完成后点“Commit changes”提交更改，等1~3分钟后刷新页面即可看到结果。

修改网站列表

点击存储库的"public"文件夹，然后继续点击"data"文件夹，最后点击"socialLinks.json"文件，点击代码右上角的一支笔的图标进入编辑页面，按照格式修改内容即可。

修改其他配置

在存储库根目录下的readme.md文件中可以查看更多配置的教程文档，这里就不多赘述了。