建站小记: 使用 Astro 和 Nginx 部署个人博客

在这篇博客中, 我将详细记录我如何使用 Astro 框架和 astro-theme-cody 主题来构建并部署我的个人博客网站.

使用 Astro 构建网站

Astro 是一个现代的静态网站生成器, 支持使用 React, Vue 和 Svelte 等前端框架来创建组件, 并且内置了对标准 Markdown 及 MDX 文件的支持, 我选择 Astro 是因为它的渲染性能优越, 能够输出极其快速的静态内容.

选择主题并构建开发环境

我选择的主题是 astro-theme-cody, 这是一个为技术博客设计的简洁主题. 通过简单的配置即可开始内容创作, 这对我这样的开发者来说非常友好, 也可以去Astro Themes查看更多主题.

1. 安装 pnpm

首先, 确保开发环境中已安装 pnpm. 如果尚未安装, 可以通过以下命令进行安装:

> npm install -g pnpm

2. 创建 Astro 项目

接下来, 使用 pnpm 通过 create-astro 工具, 直接从 kirontoo/astro-theme-cody 模板创建新的 Astro 项目. 这个命令会自动设置项目结构, 并安装所需的依赖.

> pnpm dlx create-astro --template kirontoo/astro-theme-cody

在执行这个命令后, 系统会引导完成一些基础设置, 包括项目名称的设置等, 完成后, 项目就已经创建好了.

3. 进入项目目录

创建完成后, 进入新创建的项目目录:

> cd kakunasablog

4. 开发和预览

现在, 可以在本地开发服务器上运行 Astro 项目, 以便可以预览博客.

> pnpm run dev

这将启动本地开发服务器(通常地址为 http://localhost:4321), 可以在浏览器中预览博客.

5. 构建静态文件

开发完成后, 使用以下命令构建项目, 以生成用于部署的静态文件:

> pnpm run build

这个命令会在项目的 dist/ 目录下生成静态内容, 准备好被部署到任何静态网站托管服务.

部署到 VPS

我的网站托管在一台我自己购买的 ubuntu 系统 VPS 上, 这里是我配置服务器的一些基本步骤:

👉🏻　如果要为博客配置域名和 SSL 证书, 请查看建站小记 - 2.

设置 Nginx

Nginx 是一个高性能的 HTTP 和反向代理服务器, 我用它来处理 HTTP 请求. 下面是我配置 Nginx 的步骤:

安装 Nginx

更新软件包列表, 安装 Nginx.

> sudo apt update
> sudo apt install nginx

启动 Nginx 服务

安装完成后, 需要启动 Nginx 服务, 以便 Nginx 开始处理请求.

> sudo systemctl start nginx

编辑 Nginx 的配置文件

接下来, 编辑 Nginx 的默认站点配置文件. 这里可以设置托管的网站信息, 如服务器名称,根目录等. 配置的修改可以参考文章最下方的示例配置.

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

启用站点配置

修改配置文件后, 需要创建一个符号链接到 sites-enabled 目录, 以启用这个网站配置.

> sudo ln -s /etc/nginx/sites-available/default /etc/nginx/sites-enabled/

重启 Nginx 服务

重启 Nginx 服务, 以使配置生效.

> sudo systemctl restart nginx

防火墙设置

最后, 一般情况下vps默认会拒绝除端口22以外的入站请求, 需要开启防火墙并允许 HTTP 和 HTTPS 请求通过.

> sudo ufw enable
> sudo ufw allow 22
> sudo ufw allow 80
> sudo ufw allow 443

配置完毕后, 检查防火墙的当前规则列表, 以确保所有必要的端口都已正确开放, 不要忘记允许 SSH 连接以避免在启用防火墙后失去对服务器的远程访问:

> sudo ufw status verbose

Status: active
Logging: on (low)
Default: deny (incoming), allow (outgoing), deny (routed)
New profiles: skip

To                         Action      From
--                         ------      ----
22/tcp                     ALLOW IN    Anywhere
80                         ALLOW IN    Anywhere
443                        ALLOW IN    Anywhere
22/tcp (v6)                ALLOW IN    Anywhere (v6)
80 (v6)                    ALLOW IN    Anywhere (v6)
443 (v6)                   ALLOW IN    Anywhere (v6)

部署静态文件

准备完毕VPS及项目后, 将构建好的静态文件上传到 VPS 服务器, 并将其放置在指定的路径下, 以便 Nginx 可以正确地提供这些文件. 这里我在项目根目录下使用 scp 命令将 dist 目录上传到 VPS 服务器:

> scp -r dist kaku.vultr.vps:/apps/kakunasaBlog

此时如果直接访问VPS的ip地址, 会看到部署完毕的博客网站.

以下为nginx配置文件示例的一部分:

root /apps/kakunasaBlog/dist; 与以上scp命令相对应, 这一行即为配置新站点目录.

# Default server block
server {
    listen 80 default_server;
    listen [::]:80 default_server;

    root /apps/kakunasaBlog/dist;  # Keep as is or point to a generic landing if needed
    index index.html index.htm;
    server_name _;

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