跳到主要内容
技术
服务器
部署

搭建个人网站中的总结

阅读需 5 分钟

以下是在我搭建网站过程中得到的一些教训

一. 有的技术不会​

别学会了再做，等你学会了，你又没兴趣了。AI 也需要用起来。

无法加载

二. 想清楚自己要的是什么​

前期我陷入了追求完美的误区，想要炫酷的UI设计，好的性能，前后端分离。

到最后我发现，个人网站内容才是最重要的。一个作品是否有价值，取决于它是否能为用户提供有价值的信息或服务。而不是它技术有多牛逼 🙃。

三. 快速搭建​

我搭建网站的目的是：积累自己的博客内容，放作品，被动求职。针对我的需求，我发现暂时没必要有后端，只需要一个静态网站即可。用 typescript + react + docusaurus + tailwindcss 可以迅速开发搭建。

开发阶段：在 docusaurus 官方文档中安装。通过 AI 快速了解 docusaurus 的基本使用方法，辅助开发搭建出一个简单的博客网站。

部署阶段：此阶段你需要准备 静态网站文件，服务器，域名，后面会详细介绍。

持续迭代阶段：当整个流程跑通后，页面设计，功能设计，网页性能，文章内容等，开始进行大刀阔斧的迭代。

维护阶段：网站搭建完成后，需要定期维护，包括更新内容，修复bug，优化性能等。

我的困境

道理大家都懂，但在实践后我的问题在于想得太多。但这对于“开头”往往不是一个好事。找准痛点，解决核心问题永远是最优先的。在这件事中，先把服务搭建起来让用户可以访问，才是最重要的。当然这只是我的困境。

四. 部署项目​

需要准备：服务器，域名，静态网站文件。详细步骤问 AI

4.1 最快最优解​

  1. 项目提交到 github 仓库。
  2. 使用 vercel 部署项目。
  3. 配置 DNS，将域名指向 vercel 提供的 IP 地址。在域名注册商的 DNS 管理页面中添加一个 A 记录，将域名指向 vercel 提供的 IP 地址。再到 vercel 项目设置中，将域名添加到项目的域名列表中。详细步骤问AI。

4.2 自有服务器​

自有服务器部署项目需要注意的问题

域名绑定国内服务器需要备案，备案过程比较复杂，需要提交相关文件到国家备案管理部门审核。备案完成后，就可以将域名指向服务器的 IP 地址了。不建议白嫖玩家前期使用。

以下步骤是在部署过程中遇到的麻烦，你在做的时候大概率还是会遇到这些坑，建议配合AI完成。

  1. 项目提交到 github 仓库。
  2. 部署服务器：

  • 使用SSH客户端（如PuTTY、Termius等）登录服务器。

  • 安装必要的软件：

    • 安装Git：sudo apt install git
    • 安装Node.js：sudo apt install nodejs npm
    • nginx：sudo apt install nginx

  • 在目录 /var/www/projects 下克隆项目代码：git clone https://github.com/yourusername/yourproject.git

  • 进入项目目录：cd yourproject

  • 安装项目依赖：npm install

  • 打包项目：npm run build

  • nginx 配置：

    • 配置 nginx：编辑 /etc/nginx/nginx.conf 文件，添加以下内容：
    server {
        listen 80;
        server_name yourdomain.com;

        location / {
            proxy_pass http://localhost:3000;  # 假设你的应用监听在 3000 端口
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
        }
    }
    • 域名备案：
      • 确保域名已备案，否则无法通过 HTTPS 访问。
    • 通过DNS的方式申请https证书：
      • 安装 certbot：sudo apt install certbot python3-certbot-nginx
      • 申请证书：sudo certbot --nginx -d yourdomain.com
      • 配置 nginx：编辑 /etc/nginx/nginx.conf 文件，添加以下内容：
    server {
        listen 443 ssl;
        server_name yourdomain.com;
        ssl_certificate /etc/letsencrypt/live/yourdomain.com/fullchain.pem;
        ssl_certificate_key /etc/letsencrypt/live/yourdomain.com/privkey.pem;
        include /etc/letsencrypt/options-ssl-nginx.conf;
        ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;
    }
    • 申请证书后，将证书文件复制到 nginx 配置目录：
      • sudo cp /etc/letsencrypt/live/yourdomain.com/fullchain.pem /etc/letsencrypt/live/yourdomain.com/privkey.pem /etc/nginx/ssl/
    • 域名新增记录：
      • 在域名注册商的 DNS 管理页面中添加一个 A 记录，将域名指向服务器的 IP 地址。
      • 添加一个 CNAME 记录，将 www 指向 yourdomain.com。

  • 服务器厂商配置：

    • 确保服务器的防火墙允许 HTTP（80）和 HTTPS（443）流量。
    • 配置防火墙规则，允许流量通过。
提醒

因为我们这次是被迫使用了 DNS 手动验证模式（--manual），这意味着 3 个月后证书到期时，certbot renew 自动续期命令无法自动完成（因为它没法自动去改你的域名解析记录）。

你需要记个日历提醒，到时候再运行一遍今天这个命令： sudo certbot certonly --manual --preferred-challenges dns -d lastwhisper.online -d www.lastwhisper.online

  • 其他建议:
    • 服务器资源有限时，推荐使用github action自动部署。详细步骤问AI。

五. 最后​

持续迭代吧 🙃

Loading Comments...