[0基础] 如何使用服务器建设一个炫酷的主页！

[声明: 本文章出现的网站源码非本人所创，此处为原作者github上的仓库，请尊重他人创作]

前言

• 买了一个用于个人的域名，不知道主域名做什么比较好？
• 自己有很多网站，不知道如何将他们美观的统一在一个界面？

跟着教程，你就可以获得一个炫酷的主页，即时你是一个刚刚接触服务器的小白哦！

想要看具体效果的话，可以访问0ctberの主页查看哦

可参考以下界面↓

前期准备工作 

首先你需要一台云服务器或虚拟主机(如果自己有一台物理服务器，自行在目录中跳转相关内容)

这里推荐雨云的美国洛杉矶极速二区【别问为什么不选延迟更低的香港，这么高的带宽配上廉价cdn不香吗doge】，当然，如果你有备案域名就推荐选择江苏宿迁的机子。

在服务器购买中需要注意的是，如果你只是用于搭建个人博客或者是展示站这种对于配置需求不高的话，虚拟主机即可解决你的大部分问题啦(本文不对虚拟主机如何配置进行说明，不过大概操作类似），使用云服务器的话，选择配置最低的那个即可，具体请根据你实际需求进行

在服务器的系统选择方面，比较推荐选择 Ubuntu 20.04 这个版本，为什么不是22.04呢(因为目前宝塔面板不支持，如果选择其他支持的面板请忽略)，还有就是雨云或其他厂商的用户千万不要选择预安装app，如果你不想过了几个小时都发现还在安装的话(国内服务器请忽略)

之后只要等到服务器初始配置完成即可

服务器配置阶段

安装服务器面板是尤为重要的，帮助你可视化配置自己的服务器

配置 服务器面板

首先先进入到服务器的管理面板页面，然后开启你的云服务器(如其他厂商默认开启的，请忽略)

你会进入到类似于这个界面(具体请看你选择的云服务器厂商)

如果你是在雨云购买的服务器，可以直接选择绿色开机旁边的 Xtermjs模式 你可以理解为进入到了一个类似于电脑cmd的一个终端页面，如果你在其他厂商购买的云服务器，也可寻找类似的按钮，如果没有的话，可以选择 SSH链接 的方式，具体可以看zeruns大佬在介绍建站中提到的如何进行SSH连接服务器，这里就不多赘述

在终端中输入你的用户名和密码(可在远程连接中看到，具体请根据云服务器厂商提供的)，然后输入(如果要安装非宝塔面板，请参考各个面板官方提供的教程，基本操作类似)

wget -O install.sh https://download.bt.cn/install/install-ubuntu_6.0.sh && sudo bash install.sh ed8484bec

就可以安装宝塔面板了，如果是其他操作系统，可以在宝塔面板安装这个页面中找到对应的安装脚本，等待安装之后，提示一个外部面板的链接(建议拿个小本本记上)，用浏览器进入后，输入他告诉你的账号和密码，就进入到你服务器的面板界面啦！

配置 服务器环境

进入后会提示你安装套件，选择LNMP即可，推荐编译安装(其他面板如没有请手动安装)

提示页面

接下来等到安装任务全部完成后，你就会进入到这个页面

宝塔面板操作页面

然后请确认你的服务器是否安装了docker，你可进入面板右侧的docker项查看，如果没有请安装

网站配置阶段

终于是到了正题了，接下来就是如何部署自己的网站了！

安装网站相关文件

首先你得先下载你所需要的文件，github仓库 ，如果部分地区无法访问或者下载贼慢，我这里给大家放在了 蓝奏云 上了，或者也可在本文章上方的文件中下载

将你下载好的这个压缩包，放到服务器的任意位置(最好是在网站根目录的位置，如果你不知道根目录在哪里，你可以在右侧网站这个选项中，选择添加站点，随便瞎填个网站，创建成功后进入点击进入网站根目录即可)，记得给他解压喽

配置网站相关文件

接下来，你进入到服务器终端(或是上文所说的 远程连接-Xtermjs模式 )，之后开始安装

进入到文件位置
首先通过cd进入到之前解压的文件所在目录(文件所在路径，可以右击文件，点击属性中复制)

cd 文件所在的路径

构建网站项目

不推荐更改代码哦，不过如果你知道如何配置docker项目的话

docker build -t home .

创建一个数据卷

面板右侧找到docker项，找到类似于存储卷或者数据卷相关内容，创建一个名称为home名字的数据卷即可

创建容器
其中的12445可以改成任意没有被占用的端口哦，冒号前后保持一致，而/var/lib/docker/volumes/home/_data，如果你不是宝塔用户或者与数据卷地址不符合的，请改成数据卷的地址，具体可以上文的docker存储卷中找到哦

docker run -d --name home -v home:/var/lib/docker/volumes/home/_data home

然后就大功告成啦，别忘了点击面板左侧，进入安全，放行刚刚配置端口就可以访问了
浏览器访问链接:http://服务器公网ip:你滴端口 (千万别弄成https!!)

自定义你的网站

认识网站

先让我们来大概认识一下一下自己的网站吧！

首先在开始页面，你会在左侧看到网站logo与网站标题，下边一段可点击的文字，再下边是你的联系方式。

当你点击了那一段可点击的文字的时候，你会进入到一个时间胶囊的页面，在下方你可以自定义文字内容，在时光胶囊的右上方是用户的设置项，可以设置壁纸啥的

再点击那段文字或者右上角的 X 回到主页，在右上角，你会看到 一言 和 一个时间、天气的显示面板，当鼠标移动到一言上时，可以进入到音乐播放器。在主页的右下方，是网站列表，可用于连接你的所有站点

基础配置

接下来的所有操作会改变你的网站，由于docker重构有点麻烦，建议根据教程一次完成
(需要提示的一点是，当你修改完网站文件后，网站并不会更新，这一点之后会说)

首先先进入文件，找到命名为 .env 的文件，打开他

我们会看到网站的作者已经对每一项进行了详细的说明，你只需对每一项进行自己的修改就好了！

需要注意的是以下一点哦:

1. 不推荐修改站点主图标，主页图标，和 aplle端图标 的文件位置，后续教程中会直接覆盖掉原文件
2. 天气key这一项该如何配置，马上就会说明
3. 关于歌单方面，我的网站使用的是作者自带的歌单，如果你需要配置，请按照作者配置文件中说明的来(VITE_SONG_ID 这一项填的应该是歌单的id)

如何配置你的天气key呢？
在高德地图开放平台中， 创建一个新应用，选择添加key,选择Web 服务，直接创建就好了，不要管ip白名单，创建完后复制key到上文中的地方的好了

深度配置

我们会看到文件夹中有这几个文件夹

.github , .vscode , public , screenshots , src

.github , .vscode ，screenshots 这仨文件夹的内容呢，你可以完全不鸟他

public-修改网站图片与字体
在该文件夹中，分别有 font(存放字体的) 和 images(存放图标，图片的)

在font文件中，如果你自己没有一个很好的字体，建议直接使用文件中自带的

在images文件中，你会看到 10张名为background 的图片，和 icon 文件夹，background这几张图片就是你网站用户设置选项中的默认壁纸项，你可以将他们全部删除，换成自己想要的，只要注意图片的名字也要是background+数字。

需要注意一点的是，如果你自己的放进去的图片不是10张的时候，需要在/src/components/Background.vue中修改，具体在后边会说

在 icon 文件夹中，则是网站的各种图标，比如在联系方式中的各大社交平台的logo，网站logo啥的，你可以将他们自由的替换。

favicon.ico 这个文件是用于修改浏览器标签页的logo(一般位于左边)
logo.png | apple-touch-icon.png 这两个文件时修改站点标题旁边的那个logo的
其他的文件请根据自己需求自行更改

src-深度自定义你的站点
我们会看到文件夹中有这几个文件夹

api , .assets , components , store , store , style , utils , views

以及名为 App.vue 和 main.js 这两个文件

先从这两个文件讲起， 这两个文件能修改的东西不多

在 App.vue 中，根据作者的注释我们可以找到
屏蔽右键 对应的代码，你可以选择删掉他，这样你就可以右键了(不推荐)，你也可以选择修改屏蔽右键的警告文本。
鼠标中键 对应的代码，删掉他就没有了壁纸展示功能(不推荐)，你也可以修改提示文本。
控制台输出 对应的代码，这个你可以理解为一个彩蛋一样的，按下F12，在控制台中可以看到，你可以自己修改输出内容(不要删掉作者的github地址哦，这是他人的劳动成果)

在 main.js 中，根据作者注释，能修改的只有
弹出更新项 对应的代码，你可以选择修改弹出更新的文本，虽然用户在正常操作下很难看到这个提示，但你也可以修改

这两个文件讲完了接下来就是讲文件夹中的内容了

api 这个文件夹里那一个文件，建议不懂的别乱动，不过你可以在作者注释中，找到获取一言数据，在网址中改成自己的一言api，其他的真不建议你去乱动
assets中，有两个文件，分别是 siteLinks.json | socialLinks.json 这两个文件，第一个修改的是主页右下角的网站列表里的网站，第二个修改的是主页左下角的联系方式中的内容

在siteLinks.json中的icon后边跟的内容与之后在components文件夹中的Links.vue
文件有关，后续会说明
在socialLinks.json中的icon这一项，则是与上文images文件中的icon文件夹有关，你可以自己在这个文件中添加想要的图片文件，并将路径填入

components中，这个可以改的文件内容就多了，我们只选择需要重点去修改的文件去说，在下面没有说明的文件内容，基本上就是找到对应的文字修改就行了

• Background.vue，这个文件能修改的不多，找到作者注释为 壁纸随机数 下边的代码，如果在上文的修改壁纸图片中，你增加或减少了壁纸，需要在
  const bgRandom = Math.floor(Math.random() * 10 + 1);
  这个代码中，把10改成你的实际的背景图片数，这一点在作者注释中也解释了

• footer.vue，这个能改的也不多，他修改的是网站页脚的文字，也就是版权啊，备案啊这种的，需要注意的是，千万别把 made by imssy 给删掉，这是对作者创作的尊重，如果你们想在添加文字，可以直接加载站点备案这个代码的后边，就像我的网站在后边加了一个 雨云强力驱动 这串字

• Links.vue，诶~这个能改的虽然也不多但很重要，还记得上文在siteLinks.json中看到的icon吗，就是在这里进行查找和修改滴，找到作者在文件中注释为
  可前往 https://www.xicons.org 自行挑选并在此处引入下边的代码，{}中的内容，就是可以在上文的icon项中填写的内容后，如果你觉得这点图标不够你用，可以进入注释中的网站，在搜索栏下方中，选择 fa，找到你想要的图标后直接复制名称黏贴到{}中即可
  然后还需要往下翻，找到作者注释为 网站链接图标 ，下边的代码中，也要添加一次刚刚复制的名称，然后你就可以在siteLinks.json中填进icon这一项啦
  不过这个网站可能需要魔法上网，后续我可能会整理出来！

• Set.vue，这个也比较好玩，还记得，在上文中说到用户可点击首页左边标题下方的那个文字后可以进入时间胶囊的页面吗，在这个页面的右上角有个设置按钮，这个文件就是修改这个设置按钮里边的内容的！
  由于作者的api可能有点问题，建议在里边将
  < el-radio value=“2” size=“large” border >随机风景
  < el-radio value=“3” size=“large” borde r>随机动漫
  这两个代码直接删掉，当然如果你觉得每日一图也不要，也可以直接删掉
  其他的你可以不管他，或者改变文字啥的都可以，不过不要修改自己不动的地方哦

好了，现在components文件夹中的修改就到此为止了，我们进行下一步修改

store 与 style，这俩文件夹你可以不用理他
untils，这个文件夹中，你只需要修改getTime.js中的内容就好了，找到作者注释为 欢迎提示 下的代码中，你可以修改不同时间段的欢迎词，当然你也可以选择自己添加，比如在 else if (hour < 9) 这个代码中，hour < 9的意思就是在9点前。找到作者注释为 默哀模式 ，下的代码，前面的数字是日期，后边就是提示词，比如说4.4: “清明节”，就会在4月4日这天，网站变成黑白色，且欢迎词变成"今天是清明节"，如果你想添加或者删减可以直接修改
views，这个文件夹中，你只需要修改moreset文件夹中的那个文件，这里修改的就是网站在上文说的设置页左边的那个更新日志，你可以修改为你自己的网站更新日志，需要注意一点的是，不建议删掉作者github源码仓库这个按钮，请尊重他人创作

至此，你已经完成了网站所有修改，返回你的网站就发现都修改好啦

使用自己的域名

现在你要访问刚刚搭建的网站是不是 http://公网ip:端口/ 这么访问的呢，如何使用自己的域名访问呢？
首先你可以在雨云或者其他平台注册或者使用他人的域名的二级域名到自己服务器上(本文章不对域名解析做详细操作解释，这种教程一大堆)  

这里推荐一波热陈云的域名解析用户，新用户免费解析二级域名

然后你还记得之前在宝塔中瞎填了一个网址创建了一个网站吗，点击网站设置，在域名中加入你的域名，删掉原先乱填的那个域名(及得吧网站备注也改了)，然后选择右边的反向代理，点击添加反向代理，代理名称随便填，只要你能看懂，目标url就是http://公网ip:端口/ ，然后直接点击确定后，记得将缓存开启，这样你再次输入网址就是你制作完成的网站力！

温馨提示:可以在宝塔面板或者雨云等平台申请一个免费的ssl证书提高安全度哦

总结

现在的你已经完成了所有的操作，享受你制作完成的网站吧！
如果后续想要修改内容，只需要修改文件就好啦！