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

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

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文件中可以查看更多配置的教程文档,这里就不多赘述了。