Helloworld：静态个人站搭建记录

Main project image

这个网站的定位是一个长期维护的个人主页与工程项目展示站，用于集中整理项目经历、代码实现、硬件设计、测试结果和阶段性技术记录。

站点采用静态站方案，而不是传统 CMS 或后端驱动的网站结构。静态站更适合当前需求：页面加载轻、部署链路简单、版本管理清晰，并且可以直接围绕项目展示、博客记录和自定义页面结构做持续扩展。

技术选型

当前网站的主要技术栈包括：

Astro 的优势在于静态优先，同时保留组件化开发方式。对于个人主页、项目详情页和技术博客这类内容型网站，可以在不引入复杂前端应用架构的情况下，保持较好的工程结构。

在这个站点里，Astro 主要承担几件事：根据文件结构生成路由，复用公共布局和组件，渲染 Markdown / MDX 内容，并在构建阶段输出可直接部署的静态文件。也就是说，Astro 不只是初始化项目时的脚手架，而是贯穿本地开发、内容组织和线上构建的核心框架。

本地开发环境

本地开发环境基于 Windows 和 PowerShell。Node.js 使用官方 zip 包方式安装，并手动配置到系统 Path，避免 MSI 安装器异常带来的环境问题。

当前使用的运行环境为：

node -v
# v24.14.1

npm.cmd -v
# 11.11.0

由于 PowerShell 执行策略可能拦截 npm.ps1，实际开发中使用 npm.cmd 调用 npm 命令。

启动本地开发服务器：

npm.cmd run dev

Astro 默认会启动本地预览服务：

http://localhost:4321/

开发阶段修改页面、组件或内容文件后，Astro 会自动触发热更新，适合快速调整页面结构、排版和内容展示效果。

站点工程结构

站点采用 Astro 工程结构组织页面、组件、样式和内容文件。页面路由、公共布局、可复用组件和内容集合分别维护，避免后续内容增加时全部堆在同一层文件里。

这种结构的重点不是固定某一种内容形式，而是为后续扩展保留清晰边界。无论是个人主页、项目案例、技术记录，还是后续新增的展示页面，都可以在现有结构上继续拆分和维护。

内容部分使用 Astro Content Collections 管理。每篇内容都带有结构化的 frontmatter，例如标题、发布日期、标签、描述和封面图等字段。构建前 Astro 会根据集合 schema 检查这些字段，避免文章缺少必要元信息，或者日期、图片等字段格式不正确。

普通文字内容可以直接使用 Markdown；需要更复杂展示时，可以使用 MDX，在正文里嵌入 Astro 组件。这样项目页可以保留文章式叙述，同时插入图片组、指标卡、工程图说明、项目跳转卡片等结构化模块。

构建流程

Astro 站点在部署前会被构建为静态文件。构建命令为：

npm.cmd run build

当前构建脚本会先执行 Astro 检查，再执行正式构建：

astro check && astro build

前半部分用于检查内容集合、组件和类型相关问题；后半部分负责把页面、内容和资源生成最终部署产物。

构建完成后，Astro 会生成 dist 输出目录。这个目录中包含最终可部署的 HTML、CSS、JavaScript 和静态资源文件。

整体构建过程可以概括为：

Astro 页面与内容集合
-> 组件渲染
-> 图片和静态资源处理
-> 生成 dist
-> 部署到 Pages 平台

这种方式的好处是线上环境不需要维护 Node.js 服务进程，也不需要单独配置数据库或后端运行环境。网站访问时直接由静态资源服务和 CDN 分发。

站点中的本地图片也会在构建阶段被处理为线上可访问的静态资源路径。对于内容型网站来说，这种方式可以把文章、项目图、封面图和页面结构一起纳入版本管理，减少线上运行时依赖。

自动部署

线上部署采用 GitHub 与 EdgeOne Pages 联动的方式。代码更新到生产分支后，EdgeOne Pages 会自动拉取仓库代码并执行构建。

当前部署配置为：

Framework preset: Astro
Root directory: ./
Install command: npm install
Build command: npm run build
Output directory: dist
Production branch: main

部署平台的工作流程为：

GitHub 仓库更新
-> EdgeOne Pages 拉取代码
-> 安装依赖
-> 执行 Astro 构建
-> 发布 dist 静态目录
-> 更新线上站点

目前网站没有接入后端 API、数据库或私密第三方配置，因此暂时不需要环境变量。整个站点保持静态化，可以降低维护成本，也便于后续迁移到其他静态托管平台。

域名与 HTTPS

域名 1214.me 由阿里云管理，站点部署在腾讯云 EdgeOne Pages。

接入过程主要包括：

  1. 在 EdgeOne Pages 中添加自定义域名
  2. 在阿里云 DNS 中添加域名验证记录
  3. 配置指向 EdgeOne Pages 的 CNAME 记录
  4. 等待 DNS 解析生效
  5. 在 EdgeOne Pages 中申请并部署 HTTPS 证书
  6. 开启强制 HTTPS

当前根域名已经接入完成：

https://1214.me

同时开启了 HTTP 到 HTTPS 的 301 跳转，保证访问入口统一到加密连接。后续 www.1214.me 也会统一跳转到根域名，避免同一网站存在多个入口。

后续扩展

这个站点后续会继续围绕个人主页和工程项目库两个方向扩展。

内容层面，会逐步补充项目详情页和技术记录。结构层面，会保持 Astro 静态站的基本路线，优先使用 Markdown / MDX、Astro 组件和静态构建能力完成页面扩展，避免引入不必要的后端系统或复杂前端框架。

这篇 Helloworld 作为第一篇博客，记录的是网站从技术选型到上线的基础链路。后续新增内容会在这个基础上继续扩展，包括项目展示、开发过程记录、硬件设计说明和调试复盘。