返回首页

Astro 6 SSG on VPS:站点技术栈 2026

Astro 6 SSG + Nginx on VPS 上的静态双语站点案例。描述技术栈、i18n、SEO 基础设施、带同意的分析、TypeScript strict。为高级开发者详细分解配置和限制。

如何在 Astro 6 + VPS 上构建站点,300r
Advertisement 728x90

2026年:使用Astro 6与VPS构建静态网站架构

“Na Derevo”网站采用Astro 6的SSG模式生成简洁的静态文件:包括项目主页、MENO产品落地页和博客。双语支持(俄语/英语)通过非SPA或SSR方式实现。服务器端使用VPS上的Nginx,成本为300卢布,SSL通过Certbot配置。分析工具采用带同意机制的Yandex.Metrica。

技术栈为性能优化而精简:

  • 框架:Astro 6(SSG)
  • 语言:TypeScript(严格模式)
  • 内容:Astro内容集合 + Markdown/MDX
  • 服务器:Nginx
  • SSL:Certbot(Let's Encrypt)
  • 分析:Yandex.Metrica(可选)

Astro生成包含HTML、CSS、JS的dist文件夹,生产环境无需Node.js。Nginx直接提供文件服务,比SSR更快。

Google AdInline article slot

本地化与URL结构

Astro的i18n配置:

locales: ['ru', 'en'],
prefixDefaultLocale: true,
redirectToDefaultLocale: false

结构:

  • naderevo.com/ru/ — 主页(俄语)
  • naderevo.com/en/ — 主页(英语)
  • naderevo.com/ru/blog/ — 博客(俄语)
  • naderevo.com/en/blog/ — 博客(英语)
  • naderevo.com/ — 重定向页面(无索引)

根目录通过localStorage、cookie或Accept-Language确定语言并重定向。为两种语言添加前缀简化了hreflang和canonical处理。内容集合确保frontmatter类型化——字段缺失会导致构建失败。

Google AdInline article slot

SEO基础设施

每个页面包含:

  • 基础标签:canonical、hreflang(包括x-default)、Open Graph、Twitter Card。
  • 结构化数据<head>中的JSON-LD(主页用WebSite、落地页用SoftwareApplication、文章用BlogPosting)。
  • 站点地图:由@astrojs/sitemap生成,过滤实用页面。
  • robots.txt
User-agent: *
Allow: /
Sitemap: https://naderevo.com/sitemap-index.xml

对AI爬虫开放。astro.config.mjs设置site: 'https://naderevo.com'以在站点地图/OG中使用绝对URL。

部署与服务器配置

VPS通过Nginx提供静态文件服务。为何不选Vercel/Netlify:完全控制重定向、头部信息,无供应商锁定。

Google AdInline article slot

nginx.conf中的重定向

# http -> https
server {
    listen 80;
    return 301 https://$host$request_uri;
}

# www -> apex
server {
    server_name www.naderevo.com;
    return 301 https://naderevo.com$request_uri;
}

资源缓存

Cache-Control: public, max-age=31536000, immutable

文件名中的哈希值(Astro生成)在部署时使缓存失效。

安全头部

X-Content-Type-Options: nosniff
X-Frame-Options: SAMEORIGIN
X-XSS-Protection: 1; mode=block
Referrer-Policy: strict-origin-when-cross-origin

SSL通过Certbot自动更新。为旧文章slug提供传统重定向。

注重隐私的分析工具

Yandex.Metrica在用户同意后加载。Cookie横幅将选择保存在cookie/localStorage中。如果拒绝:

  • 脚本不加载。
  • 分析cookie被清除。

目标通过data-metrika-goal设置。ID来自PUBLIC_YANDEX_METRIKA_ID——开发环境可选。

禁用Webvisor/点击地图以减少负载。

TypeScript与配置

tsconfig.json

{
  "extends": "astro/tsconfigs/strict",
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

严格模式捕获组件、集合、i18n配置中的错误。

实施限制

  • 重定向页面/(无索引)——SEO妥协:权重分配给/ru//en/
  • 所有页面使用通用OG图像(计划添加唯一图像)。
  • Metrica中无会话记录。

关键要点

  • Astro SSG + Nginx——为静态网站提供最大速度和可靠性。
  • 通过内容集合实现完整内容类型化。
  • SEO就绪:hreflang、JSON-LD、开放的robots.txt。
  • 隐私保护:分析工具仅在同意后使用。
  • VPS比PaaS更便宜,配置完全可控。

— Editorial Team

Advertisement 728x90

继续阅读