部署一个属于自己的个人主页——从0到无限

想必大家在互联网冲浪时都看见过下图这样的个人主页网站，本期来介绍一下如何部署一个自己的这样的网站。

我的示例：WaveYo | Home 

这些个人主页网站绝大部分基于GitHub开源项目 imsyy/home ,基于该项目你的个人主页只需要修改一些简单信息就可以完成自动生成网页，之后部署在Web服务器上即可

购买与开启服务器

拥有一个属于自己的博客网站首先所必要的就是拥有一个属于自己的服务器

这里我以雨云云服务器为例，作为新兴的云服务器厂商，雨云提供了更具性价比的云服务器选择

同时使用我评论区提供的邀请码注册新用户还可以获得新用户首月5折优惠券

注册完成并登陆后打开"云产品>>云服务器>>立即购买"，如图所示

接下来进入购买页面，根据自己的情况选择不同地区的服务器。

其中特别注意！江苏宿迁、中国香港、美国洛杉矶节点服务器默认购买没有独立公网IP，只支持10个NAT端口（对于独立公网IP与NAT端口的区别，将会根据本篇文章流量收入决定下一期是否介绍）

浙江宁波、湖北十堰、江苏宿迁三个中国大陆地区节点架设对外开放的网站，按照国家法律法规需要进行先ICP备案，之后在进行公安备案，其中只有ICP备案后，网站才能对外开放。整体备案过程在15个工作日至2个月间不等

其中经过比价，如果没有极低的访问延迟需求，中国香港节点性价比最高，但是网络带宽很低

这里服务器我采用的是浙江宁波KVM顶配版

接下来开始选择服务器详细配置，如果你不了解Linux系统，请保持和我相同的选择

首先系统选择”Ubuntu>>Ubuntu Server 22.04 LTS“，预装APP可选 1Panel。这里以没有选择为教程基础

其他选项保持默认，记得在最后选择你获得的5折优惠券，立即购买

接下来你就可以进入雨云服务器管理页面，等待服务器运行状态由”创建中“变为”运行中“后就可以通过ssh远程连接进入服务器内部了

进入服务器并部署Home

接下来你需要记下服务器的公网IP地址，远程用户名，远程密码。其中请切记不要将公网IP与远程密码泄露给任何人，避免造成损失。如果IP与密码不慎泄露，在本页面中还提供了”重置密码“与每月1次的更换公网IP的机会，本文中就不过多介绍。

现在你需要通过ssh软件远程连接进入服务器内部部署Halo。如果你没有ssh软件我推荐可以使用Xterminal（无广），当然Windows的cmd与powershell也提供了ssh命令（Open-SSH），但是操作起来没有那么便捷。

Windows SSH连接命令：ssh root@<你的公网IP>

打开Xterminal并新建一个服务器，在地址、登陆用户、登录密码中分别填入你之前记下的公网IP地址、远程用户名、远程密码，并保存。随后回到Xterminal主界面点击”连接”就顺利进入服务器内部了

接下来非常重要的一步，不可或缺，后面可能出现安装时的找不到包，安装包失败进行这一步后都会迎刃而解

分别先后运行下面两个指令：

apt-get update

apt-get upgrade

运行指令过程会提示是否继续执行，输入"y"后按回车即可

接下来开始安装

1. 克隆项目到本地输入命令：

mkdir /website

cd /website

git clone https://github.com/imsyy/home.git

cd ./home

如果报错“bash: git: command not found”之类的问题，请在执行 git 之前先运行“sudo apt-get install git-core”

1. 首先 imsyy/home 依赖于 node.js 环境

node > 16.16.0npm > 8.15.0

终端中执行

# 下载node.js安装脚本

curl -fsSL https://deb.nodesource.com/setup_23.x -o nodesource_setup.sh

# 使用 sudo 运行设置脚本

sudo -E bash nodesource_setup.sh

# 安装 Node.js

sudo apt-get install -y nodejs

# 验证安装

node -v

继续执行：

# 安装 pnpm

npm install -g pnpm

# 安装依赖

pnpm install

1. 编辑个人页面

   这时候使用我推荐的Xterminal的好处就会体现出来，依托于Xterminal提供的左侧文件列表，你可以快速找到并编辑服务器上的文件

   找到之前clone的文件路径，如果你没有修改命令那么应该是 /website/home 将文件“.env.example”重名为“.env”，并打开修改

修改内容在.env中有详细注释解释，其中额外解释以下内容：

VITE_SITE_URL = "imsyy.top" # 站点地址    |    这里是用来填写你的域名地址，或者访问URL

VITE_SONG_API = "https://api-meting.imsyy.top/api"  # 歌曲 API 地址    |     如果你懒得自己配置API可以直接使用我的：

VITE_SONG_API="https://music.waveyo.cn/api"

# 播放类型 ( song-歌曲, playlist-播放列表, album-专辑, search-搜索, artist-艺术家 )

VITE_SONG_TYPE = "playlist"

# 播放 ID ( 若无需播放器，请设为空即可 )

VITE_SONG_ID = "9379831714"

这一部分播放类型就如注释所解释，播放ID这里以网易云为例：

我通过链接分享一个歌单：

https://music.163.com/playlist?id=12752948320&uct2=U2FsdGVkX1+Yxzk+o6o86aE7iwmNnrdUEBBHh/GPUa8=

那么“12752948320”就是你需要填入“VITE_SONG_ID”的字符

社交链接与网站链接的配置内容分别可以在 /website/home/src/assets/socialLink.json 与

/website/home/src/assets/siteLink.json 中找到

天气 Key 的获取：

访问 高德开放平台 ，注册登陆账号后进入控制台

如图创建应用

按自己喜好输入应用名称，类型选择天气

创建成功后点击“添加Key”

按自己喜好输入Key名称，选择“Web服务”，勾选同意协议提交即可

这时你就可以看见自己的Key了，复制粘贴在“ VITE_WEATHER_KEY = "" ”的引号里就行了

开始部署

上面介绍的都是配置网页内容，接下来才开始部署网页让其可访问。

为了简化部署方式，我推荐你使用1Panel，当然如果你更喜欢宝塔面板也是可以的，如果你在雨云创建服务器时安装了1Panel，按照雨云面板的输出内容直接登陆即可。

安装1Panel只需一行命令：

curl -sSL https://resource.fit2cloud.com/1panel/package/quick_start.sh -o quick_start.sh && sudo bash quick_start.sh

这是适用于Ubuntu系统的，其他系统可以阅览 1Panel官方文档 

之后按照脚本提示执行即可，记得提示是否配置Docker加速镜像时选择 是

安装成功后，控制台会打印面板访问信息，可通过浏览器访问 1Panel：

https://<目标服务器 IP 地址>:<目标端口>/<安全入口>

• 如果使用的是云服务器，请至安全组开放目标端口。

• ssh 登录 1Panel 服务器后，执行 1pctl user-info 命令可获取安全入口（entrance）

接着登陆1Panel面板，打开 应用商店>>安装OpenResty 1

安装页面如果与我相同就保持不变安装即可

在等待安装的过程中回到SSH窗口，如果你没有修改过路径，确保终端显示的为“root@server:/website/home#”其中路径确保为/website/home

如果是输入命令

pnpm build

待执行完毕（无报错）后继续下一步

回到1Panel，打开 网站>>创建网站>>静态网站

在主域名中填入格式“<你的服务器IP>:<端口>”

不知道填什么端口就填2233（

之后打开网站目录

点击一下最上面的路径，把它完整复制下来备用，例如我的是“/opt/1panel/apps/openresty/openresty/www/sites/192.168.23.128/index”

接下来在这里前往你的home所在路径“/website/home”，进入home下名为“dist”的文件夹内。如果你前面没有执行pnpm build是没有这个文件夹的

进入dist后全选文件夹内所有文件，点击“复制”

在地址栏中回到之前备用的路径中，点击粘贴即可

之后直接访问 https://<你的服务器IP>:<网站端口>就可以访问你的主页了