Astro使用简述

与 Hexo 先初始化程序再安装主题不同，Astro 安装主题本质上是基于一个现成的模板来初始化你的项目，需要先安装好 nodejs 和 git，具体安装步骤不再赘述，主要有两种安装方式：

方法一：使用 Astro CLI

# 基于官方主题名称创建
npm create astro@latest -- --template 主题名称

# 或基于GitHub仓库创建
npm create astro@latest -- --template github用户名/仓库名

# 安装依赖并启动
cd 你的项目名
npm install
npm run dev

方法二：克隆主题仓库

# 拉取源码到本地
git clone https://github.com/作者名/主题仓库名.git

# 安装依赖并启动
cd 主题仓库名
npm install
npm run dev

具体步骤

以 astro-nano 主题为例，用方法二介绍安装部署步骤：

构建本地项目

# 拉取源码到本地
git clone https://github.com/markhorn-dev/astro-nano.git

# 重命名为自己喜欢的名字
mv astro-nano astro-blog

# 安装依赖并启动
cd astro-blog
npm install
npm run dev

至此，本地服务已启动，访问默认地址 http://localhost:4321 即可访问本地 Astro 项目。Astro内置了 Vite 作为核心构建系统，用于实现快速开发服务器，所以定制修改主题预览很方便，监控本地文件修改自动刷新。astro项目的主要文件在根目录的src下，自定义修改页面可参照 Astro 官方文档自行学习操作，不在此赘述。

推送代码到 github 仓库

新建一个 github 仓库，执行以下操作：

# 修改远程仓库地址
git remote set-url origin 新建的 github 仓库地址

# 提交代码到仓库
git add .
git commit -m "first init"
git push

Vercel 自动部署

Vercel 新建 Project，Import Git Repository 选择对应的仓库选择Import，一路下一步即可，此时Vercel 已经和你的 GitHub 仓库建立了连接，几分钟内，你的线上网站就完成了更新，整个流程无需你手动进行任何操作。

Astro 主题文章一般存放在 src/content/ 目录下，格式为 Markdown（.md）或 MDX（.mdx）文件，当你写完一篇新文章，或者修改了网站的配置文件后，执行 Git 命令将改动提交到 github 仓库，一旦检测到有新的代码推送，Vercel 会自动开始以下流程 ：

拉取你最新的代码。

运行 npm install 安装依赖。

运行 npm run build 构建你的静态网站。

将生成的 dist/ 文件夹部署到它的全球 CDN 上，此时你可以尽情享受 Vercel 服务带来的便利和全球节点的访问速度。