文章

从零开始搭建自己的网站

发表于
作者 klizzz
24 分钟阅读
从零开始搭建自己的网站

1. 背景

前言

很早就想有一个自己的网站，虽然一直都不知道做一个自己的网站要干啥，但就是想拥有，作为程序员的一点执念吧。2024 上半年从 PKPM 离职后，开始着手做这件事，但一直到 2025 年底，都还在优化与改进的过程中。

这一切的伊始，都要从 2024 年 4 月，我坐在德阳那个面向窗台的小书桌边，在阿里云上以 99 块钱一年的价格租了台服务器作为开始。然后，就是断断续续又漫长的个人网站搭建。

因为时间线很长，下面的内容也都是断断续续添加的，有的章节内容不太完整，全篇逻辑也不太通顺。就先把所有网站搭建相关的东西都放在这里吧，以后啥时候有闲心了就整理一下。

环境

  • 服务器：阿里云服务器，2c2g，Ubuntu

2. Nginx 相关

经过考虑，使用 Nginx 作为网站代理服务。（Nginx 详见后面介绍）

2.1 安装

  • 采用以下命令安装 Nginx ：
1

sudo apt install <package-name>
  • 确认 Nginx 是否正确安装：
1

nginx -v
  • 检查 Nginx 服务状态：
1

sudo systemctl status nginx
  • 如果 Nginx 没有启动或有错误，可以查看错误日志以获取更多信息：
1

sudo less /var/log/nginx/error.log
  • 如果有需要，可以重新启动 Nginx：
1

sudo systemctl restart nginx

2.2 默认配置

Nginx 的主要配置文件通常位于以下路径之一：

  • /etc/nginx/nginx.conf：这是主配置文件。
  • /etc/nginx/sites-available/default：这是默认站点的配置文件（在 Debian/Ubuntu 系统上）。
  • /etc/nginx/conf.d/ 目录下的文件：通常用于存放不同网站的配置文件。

在终端中使用文本编辑器打开配置文件。例如，使用 nano 或 vim 编辑器：

  • 使用 nano 编辑主配置文件：

    1

    sudo nano /etc/nginx/nginx.conf

  • 可以使用 vim 编辑默认站点配置，默认配置路径如下：

    1

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

2.3 新增配置

  • 也可以创建新的配置文件：
1

sudo nano /etc/nginx/sites-available/huidi.top
  • 在打开的文件中，添加以下内容（请根据需要修改 root 和 index 路径）：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

server {
    listen 80;
    server_name www.huidi.top huidi.top;

    root /var/www/huidi.top;  # 请确保此目录存在并包含您的网站文件
    index index.html index.htm;

    location / {
        try_files $uri $uri/ =404;
    }

    # 日志配置（可选）
    access_log /var/log/nginx/huidi.top.access.log;
    error_log /var/log/nginx/huidi.top.error.log;
}
  • 如果您在 sites-available 目录下创建了文件，则需要使用以下命令创建一个符号链接到 sites-enabled 目录，以启用该配置：
1

sudo ln -s /etc/nginx/sites-available/huidi.top /etc/nginx/sites-enabled/

2.4 检查和重新加载 Nginx

  • 检查 Nginx 配置是否正确：
1

sudo nginx -t
  • 重新加载 Nginx 配置：
1

sudo systemctl reload nginx

3. Ubuntu 相关命令

3.1 系统相关

可以通过运行以下命令获取发行版或版本等信息：

1

cat /etc/os-release

3.2 apt 安装

使用以下命令来安装软件包：

  • 更新所有软件包列表：
1

sudo apt update
  • 安装软件包（将 <package-name> 替换为要安装的软件包名称）：
1

sudo apt install <package-name>
  • 升级所有已安装的软件包：
1

sudo apt upgrade
  • 卸载软件包：
1

sudo apt remove <package-name>

3.3 检错

  • 80 端口已被占用：可以使用以下命令检查端口 80 是否被其他服务占用：
1

sudo lsof -i :80

3.4 文件目录

  • 使用以下命令创建所需的目录：（-p 参数会确保在创建目录时，祖先目录也会被创建）
1

sudo mkdir -p /var/www/huidi.top
  • 使用 nano 或其他文本编辑器创建一个简单的 HTML 文件：
1

sudo nano /var/www/huidi.top/index.html
  • 按 CTRL + O 保存文件，然后按 Enter 确认文件名。
  • 按 CTRL + X 退出编辑器。

4. 本地连接服务器

4.1 SSH 实现免密登录

要想本地的 Windows 免密登陆 到 Linux 服务器上，需要把自己的 ssh 公钥上传到服务器上来，这样ssh就可以直接和你的私钥进行验证，从而绕开密码这一步。

建议手动复制 SSH 公钥。以下是步骤：

1）显示并复制本地公钥

打开本地生成的 SSH 密钥对的路径，通常在 C:\Users\你的用户名\.ssh\ 下找到 id_rsa.pub 文件。

用记事本或任何文本编辑器打开 id_rsa.pub 文件，复制其中的内容。

2）手动添加公钥到远程服务器

可以通过直接访问 Linux 服务器的文件，打开文件 /root/.ssh/authorized_keys ，将公钥直接复制进去就可以了。

或者在服务器中通过命令行来执行是一样的：

1
2
3
4

mkdir -p ~/.ssh
echo "你的公钥内容" >> ~/.ssh/authorized_keys
chmod 700 ~/.ssh
chmod 600 ~/.ssh/authorized_keys

确保将上面复制的公钥内容粘贴到 echo 命令的双引号中。

4.2 使用 VSCode + Remote

点击 VSCode 中左下角，然后在最上方的提示符中点击 Connect To Host ，然后点击 Add New SSH Host 直接连接到 服务器，输入以下命令建立新的连接：（root是服务器上的用户名，“@”后面是服务器地址）

1

SSH root@59.110.31.194

也可以点击 Configure SSH Hosts 来编辑连接配置，在 Config 配置中添加以下内容，保证以后不用再重复输入连接了：

1
2
3

Host 59.110.31.194
  HostName 59.110.31.194
  User root

4.3 访问 Linux 文件

在 VSCode 上 通过 SSH 连接到服务器后，为了访问服务器中文件方便，可以直接打开服务器上的某个文件夹，方便本地进行操作。在 VSCode 的【欢迎页】，点击【打开文件夹】，在上方引导栏中输入服务器中的目标文件夹，即可连接过去。

如下图所示，就是添加过的所有文件夹：

image-20240813224941597

5. 域名

5.1 购买域名

在阿里云上花了 188 购买了一个域名 10 年的使用权限，还是挺便宜的。

5.2 域名ICP备案

在 ICP 备案前需要先在阿里云上添加实名认证模板，这个按照引导把自己的姓名身份证号输一下，很快就通过了。

image-20241112235410559

5.3 解析域名

如下图所示增加解析：

image-20241112234728586

5.4 使用路径绑定域名

image-20241113000306221

如上图所示，在 Nginx 配置文件中添加新的 server 块来配置域名。

然后通过以下命令读取配置和重启 Nginx 服务：

1
2

sudo service nginx reload
sudo service nginx restart

5.5 公安局备案

还需要在 全国互联网安全管理服务平台 进行备案，账号是手机号，密码见个人笔记。

申请一个主体，再添加一个域名就可以了，等待一两个工作日就审批通过了。

5.6 为域名增加 https 支持

以下是在 Nginx 中增加 HTTPS 支持的详细步骤：

获取SSL证书和私钥

  1. 使用 Let’s Encrypt 获取证书（以Certbot为例）

    • Let’s Encrypt 是一个免费、自动化和开放的证书颁发机构，它提供了简单的方式来获取和更新证书。（也可以在其他平台上购买，但是个人使用的话就用 Let’s Encrypt 最划算了）

    • 在服务器上安装 Certbot。使用以下命令安装：

      sudo apt -y install certbot python3 - certbot - nginx

    • 运行 Certbo t命令来获取证书并自动配置 Nginx。运行以下命令：

      sudo certbot --nginx -d huidi.top

    • Certbot 会自动完成证书的申请和 Nginx 配置的更新。它会通过验证域名的控制权（通常是通过在域名的 DNS 记录或 Web 服务器上放置特定的验证文件）来获取证书。

    • 服务器上执行命令的效果如下所示：

      root@Hanbai-Linux:/etc# sudo certbot –nginx -d klizzard.top Saving debug log to /var/log/letsencrypt/letsencrypt.log Certificate not yet due for renewal

      You have an existing certificate that has exactly the same domains or certificate name you requested and isn’t close to expiry. (ref: /etc/letsencrypt/renewal/klizzard.top.conf)

      What would you like to do?

      1: Attempt to reinstall this existing certificate 2: Renew & replace the certificate (may be subject to CA rate limits)

      Select the appropriate number [1-2] then [enter] (press ‘c’ to cancel): 1 Deploying certificate Successfully deployed certificate for klizzard.top to /etc/nginx/conf.d/klizzard.top.conf Congratulations! You have successfully enabled HTTPS on https://klizzard.top

      If you like Certbot, please consider supporting our work by:

      • Donating to ISRG / Let’s Encrypt: https://letsencrypt.org/donate
      • Donating to EFF: https://eff.org/donate-le

    • 证书和私钥文件会被存储在服务器的特定位置。一般情况下，证书文件（.crt或.pem格式）和私钥文件（.key格式）会被放置在/etc/letsencrypt/live/yourdomain/目录下，其中yourdomain是你的实际域名。

  2. 卸载重装

    若执行 cerbot 命令时出错，可通过卸载所有安装包，重新安装的方式进行尝试：

    • 卸载 Certbot 及插件：
      • 先使用 sudo apt remove certbot python3-certbot-nginx 命令卸载当前安装的 Certbot 以及 Nginx 插件，卸载过程中如果提示有依赖相关的确认信息，根据提示进行相应操作。
      • 然后再使用 sudo apt autoremove 命令移除之前自动安装但现在不再需要的那些依赖包（之前命令执行结果里提示有这些包可以移除），确保系统比较干净，没有残留可能干扰后续安装的文件或配置。
    • 重新安装 Certbot 及插件：
      • 执行 sudo apt update 来更新软件源信息，确保能获取到最新且完整的软件包版本。
      • 再使用 sudo apt install certbot python3-certbot-nginx 命令重新安装 Certbot 以及 Nginx 插件，安装完成后再次运行 sudo certbot --nginx -d huidi.top 命令看看是否能够正常使用 Nginx 插件来申请证书并配置 Nginx 了。

配置Nginx支持HTTPS

这一段内容缺失，以后需要的时候再补充吧

配置检查与生效

在对配置文件进行修改后，务必使用 sudo nginx -t 命令来检查 Nginx 配置文件的语法是否正确，如果输出显示配置文件语法正确，再使用 sudo service nginx reload 命令来重新加载 Nginx 配置，使修改后的配置生效。

5.7 为子域名添加https

要给 www.blog.klizzard.top 和 www.memos.klizzard.top 两个子域名添加 HTTPS，只需使用 certbot 工具为它们扩展现有证书（或生成新证书），并自动配置 Nginx 重定向。步骤如下：

第一步：为两个子域名申请 SSL 证书

执行以下命令，将两个子域名添加到现有证书中（Certbot 会自动处理配置）：

1
2
3
4
5
6

# 关键：-d 参数后依次列出所有需要 HTTPS 的域名（主域名+两个子域名）
sudo certbot --nginx \
  -d klizzard.top \
  -d www.klizzard.top \
  -d www.blog.klizzard.top \
  -d www.memos.klizzard.top
执行命令后的操作：
  1. 若提示「是否扩展现有证书」，选择 E（Expand）。
  2. 若提示「是否将 HTTP 流量重定向到 HTTPS」，选择 2（Redirect），自动完成 HTTP→HTTPS 跳转。

第二步：验证 Certbot 自动生成的配置

Certbot 会自动修改你的 klizzard.top.conf 文件，为两个子域名添加 HTTPS 配置。最终生效的配置大致如下（无需手动修改，供参考）：

1. www.blog.klizzard.top 的 HTTPS 配置（自动生成）：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

server {
    server_name www.blog.klizzard.top;
    root /var/myblog/blog/_site;
    index index.html index.htm;

    # 日志配置（如果之前添加过）
    access_log /var/log/nginx/www.blog.klizzard.top.access.log;
    error_log /var/log/nginx/www.blog.klizzard.top.error.log;

    location / {
        try_files $uri $uri/ /index.html;  # 优化 Jekyll 路由
    }

    # HTTPS 证书配置（自动添加）
    listen 443 ssl;
    ssl_certificate /etc/letsencrypt/live/klizzard.top/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/klizzard.top/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;
}

# HTTP 自动跳 HTTPS（自动生成）
server {
    if ($host = www.blog.klizzard.top) {
        return 301 https://$host$request_uri;
    }
    listen 80;
    server_name www.blog.klizzard.top;
    return 404;
}
2. www.memos.klizzard.top 的 HTTPS 配置（自动生成）：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

server {
    server_name www.memos.klizzard.top;

    location / {
        proxy_pass http://localhost:5230;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504;
    }

    # HTTPS 证书配置（自动添加）
    listen 443 ssl;
    ssl_certificate /etc/letsencrypt/live/klizzard.top/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/klizzard.top/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;
}

# HTTP 自动跳 HTTPS（自动生成）
server {
    if ($host = www.memos.klizzard.top) {
        return 301 https://$host$request_uri;
    }
    listen 80;
    server_name www.memos.klizzard.top;
    return 404;
}

第三步：检查配置并生效

  1. 验证 Nginx 配置是否正确： 
    1

    sudo nginx -t

    输出 nginx: configuration file /etc/nginx/nginx.conf test is successful 表示配置无误。

  2. 重启 Nginx 使配置生效： 
    1

    sudo systemctl restart nginx

第四步：测试 HTTPS 是否生效

在浏览器中访问：

  • https://www.blog.klizzard.top（Jekyll 博客）
  • https://www.memos.klizzard.top（memos 服务）

若地址栏显示「小绿锁」，且输入 http:// 前缀会自动跳转为 https://，则说明 HTTPS 配置成功。

补充说明

  • 证书有效期为 90 天，Certbot 会自动配置定时任务续期，无需手动操作。
  • 若后续需要添加新的子域名，重复第一步的 certbot 命令并新增 -d 新子域名 即可。

按照如上操作后，主域名和两个子域名就都支持 HTTPS 了，访问更安全且符合现代浏览器规范。

6. 其它

1）微信访问提示 “无法确认该网页的安全性，请谨慎访问”

首先确认：

  • ICP 备案和公安局备案均已通过
  • 是通过 https 访问的
  • SSL 加密没有问题（见上文）

修改

  • nginx 配置中增加备案响应头（见服务器实际文件内容）
  • 在网站下面添加备案信息（见 index 页面）

校验

通过腾讯提供的 网址安全中心 对网站进行校验。如果没问题的话如下图所示：

image-20251203174202976

申诉

在微信提示 “无法确认该网页的安全性，请谨慎访问” 的页面下方点击 “申诉”，最好按照微信的提示部署对应的 .txt 文件，也可以只提交申诉。

申诉模板如下：

您好，域名 klizzard.top，经检查网页里没有不安全的内容；该网站已经通过工信系统备案，备案号：京ICP备2024081088号-2；已在公安局备案，备案号：京公网安备 11010802020092号；经检查网站受 ssl 证书系统加密保护。请核实后帮忙解除拦截，感谢！

7. 名词介绍

7.1 Nginx

Nginx 核心作用

Nginx 是一款 高性能的 HTTP 服务器/反向代理服务器/负载均衡器/静态资源服务器，核心定位是：

  1. 静态资源托管：直接处理 HTML、CSS、JS、图片等静态文件（效率远高于动态服务器）；
  2. 反向代理：接收客户端请求，转发给后端应用服务器（如 Tomcat、Go 服务），隐藏后端真实地址，实现请求隔离；
  3. 负载均衡：将高并发请求分发到多个后端服务器，避免单点过载；
  4. HTTP 缓存/压缩：缓存热点资源、压缩响应数据，降低带宽消耗；
  5. SSL 终结：统一处理 HTTPS 加密/解密，减轻后端服务器压力。

本质是「前端流量入口」，专注于处理高并发、低耗时的网络请求，适合作为服务集群的“门面”。

Nginx 与 Apache 核心对比

对比维度 Nginx Apache
并发模型 事件驱动（epoll/kqueue），异步非阻塞 多进程/多线程（prefork/worker），同步阻塞
并发性能 极高（单机支持 10 万+ 并发连接），低内存占用 中等（单机几千并发），内存占用较高
核心优势 高并发、低资源消耗、静态资源处理快、反向代理/负载均衡能力强 模块丰富（生态成熟）、配置灵活、对动态请求（如 PHP）原生支持好
适用场景 高并发网站（如电商、直播）、反向代理、负载均衡、静态资源服务器 传统网站、动态请求为主（如 PHP 博客）、需要复杂模块扩展
配置风格 简洁集中（单配置文件+Include 机制），适合自动化部署 分散灵活（.htaccess 目录级配置），适合共享主机（虚拟主机）
动态请求处理 需通过 FastCGI/uWSGI 转发给后端（如 PHP-FPM、Go 服务） 可内置模块直接处理（如 mod_php），配置简单但性能一般
扩展方式 第三方模块（需重新编译），轻量高效 动态加载模块（无需重启），生态丰富
跨平台 原生支持 Linux/Windows（Windows 性能略弱） 全平台支持，Windows 兼容性更好

选择建议

  1. 选 Nginx：

    • 服务端开发/运维场景（高并发、集群部署）；
    • 需要反向代理、负载均衡、静态资源提速；
    • 追求低内存占用、高吞吐量（如微服务网关、API 入口）。

  2. 选 Apache：

    • 简单动态网站（如 PHP 个人博客），无需复杂集群；
    • 需要目录级配置（.htaccess）、大量第三方模块（如认证、Rewrite 规则）；
    • 共享主机环境（虚拟主机多用户隔离）。

  3. 实际场景：

    很多架构会「Nginx + Apache 搭配」—— Nginx 作为前端入口（处理静态资源、反向代理、负载均衡），Apache 作为后端处理动态请求（利用其模块生态），兼顾性能与灵活性。

技术, 需求操作文档
技术 需求操作文档 服务器 Linux 个人网站
本文由作者按照 CC BY 4.0 进行授权