如何搭建个人网站(二)

283 阅读2分钟

上篇我们讲到前期准备部分:技术栈选好了,服务器买好了,域名也备案过了,DNS 解析也 OK了……那是不是可以开心上线了?

等等,网站还在你本地,服务器那边空荡荡的,还啥也没有。接下来,就到了“把自己的网站丢上云端”的激动时刻!

一、远程连接服务器

远程连接是我们通向云服务器的桥梁,一般用的是 SSH 工具(别慌,超简单)。

💻 Windows 用户:

可以用 XshellPuTTY,或者直接用 Windows 自带的 PowerShell + ssh 命令:

ssh root@你的公网IP

系统会提示你输入密码(一般是你买服务器时设置的)。

🍎 Mac/Linux 用户:

可以直接在终端输入一样的命令:

ssh root@服务器IP

连接成功之后,你就能正式访问云服务器啦!

二、部署网站

我用的是 VitePress,所以部署其实不复杂,但第一步——得先让服务器具备“接收能力”。

✅ 1. 安装 Node.js 和 npm

推荐装 nvm(Node 版本管理器),可以自由切换版本:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
source ~/.bashrc
nvm install --lts
nvm use --lts

✅ 2. 把网站项目传到服务器

有几种方式:

  • scp 命令:

    scp -r ./your-local-site root@你的IP:/root/your-site-folder
    
  • 或者用可视化工具如WinSCP拖过去也行。

✅ 3. 安装依赖 & 构建项目

cd your-site-folder
npm install
npm run build

构建成功后会生成一个 dist 目录,这就是你的网站啦!

三、部署上线

这一步我们需要一个 Web 服务器,比如最常见的 Nginx

✅ 1. 安装 Nginx

sudo apt update
sudo apt install nginx

装完之后,可以把网站部署到 /var/www/html 下,或者建一个自己的目录。

✅ 2. 配置 Nginx

编辑配置文件:

sudo nano /etc/nginx/sites-available/default

然后改成你自己的网站目录:

server {
    listen 80;
    server_name 你的域名;
​
    root /root/your-site-folder/.vitepress/dist;
    index index.html;
​
    location / {
        try_files $uri $uri/ /index.html;
    }
}

修改后别忘了重启Nginx:

sudo nginx -s reload

现在,用你的域名访问试试?是不是网站就上线啦 ✨

四、后续建议

  • 加上防火墙规则,限制访问端口(安全第一)
  • HTTPS 加持:申请 SSL 证书,让你的网站支持 HTTPS
  • 备案号别忘贴(不然有可能被请喝茶)

虽然部署上线的步骤比较多,但真的一步步来,其实也没想象中那么难。 而且当你第一次用域名打开自己的作品时,那种小激动,真的太值得了!