从零开始使用 Astro + Vercel 搭建个人现代化静态博客

1. 安装本地环境 Node.js 和 Git

• Node.js（自带 npm）： 去 https://nodejs.org/ 下载，下载 Node.js 安装包，双击安装，一路下一步完事。
• 装完重启一下命令行， 跑 node -v 和 npm -v 看看版本号，有就对了。
• Git：去 https://git-scm.com/download/win 下安装包，
• 下载 Git 安装包安装时选 “Git from the command line”，其他默认。
• 装完 git --version 验证。
• 当然如果你用AI的话直接可以让他给你装环境，这里只是说明需要的环境内容。

2. 创建 Astro 项目

找个你放代码的目录，打开命令行，输入astro创建脚手架：
以微软大战代码(Microsoft VS Code)IDE工具举例
打开项目文件夹后新建终端 输入npm命令创建astro项目

npm create astro@latest
#如果提示（How would you like to start your new project?）
#就是让你输入要创建到哪个文件夹内，
#直接输入.然后回车就是当前文件夹,但是文件夹内必须为空，否则不让你创
#这里我因为文件夹内有文件所以我创到了当前文件夹内的blog文件夹

可以按键盘上下选择模板类型\

• 这里我选的blog
• 接下来的是提示是否需要自动给你安装依赖和要不要给这个项目初始化一个 Git 仓库
• 这里我都yes，因为后续我们做vercel部署时需要用到git仓库来实现自动更新

3. 运行测试

• 安装好了之后他会显示如下内容 如果你是在当前文件夹直接创建的项目
  那就可以直接npm run dev来运行，否则需要先cd打开你创建的项目目录内后再输入运行
• 运行后给了一个本地访问地址 http://localhost:4321/
  访问预览模板项目内容

4. 撰写文章

• 这里我们用官方示例进行操作
  项目src文件夹包含了项目的完整目录结构

src/
│
├── assets/ ──────────── 图片、字体等资源
│
├── components/ ──────── 可重复使用的小组件
│       │
│       ├── Header ───── 网站顶部
│       ├── Footer ───── 网站底部
│       └── BaseHead ─── HTML 基础信息
│
├── content/
│   └── blog/ ────────── 真正的 Blog 文章内容
│       │
│       ├── first-post.md
│       ├── second-post.md
│       └── third-post.md
│
├── layouts/
│   └── BlogPost.astro ─ 文章的“外壳/布局”
│
└── pages/ ───────────── 决定网站 URL 和页面
        │
        ├── index.astro
        │       └── /
        │
        ├── about.astro
        │       └── /about
        │
        └── blog/
                │
                ├── index.astro
                │       └── /blog
                │
                └── [slug].astro
                        └── /blog/文章名称

• 这是目录结构和作用 你可以直接去src\content\blog内进行新建md文件作为新文章发布
• 文章内容头部结构参数内容是用于模板展示提取
• //文章内容示例

---
title: 'First post'
description: 'Lorem ipsum dolor sit amet'
pubDate: 'Jul 08 2022'
heroImage: '../../assets/blog-placeholder-3.jpg'
---

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet.

• src\pages\blog[…slug].astro为blog文章展示的模板页面
• 最终展示是用的BlogPost组件

---
import { type CollectionEntry, getCollection, render } from 'astro:content';
import BlogPost from '../../layouts/BlogPost.astro';

export async function getStaticPaths() {
	const posts = await getCollection('blog');
	return posts.map((post) => ({
		params: { slug: post.id },
		props: post,
	}));
}
type Props = CollectionEntry<'blog'>;

const post = Astro.props;
const { Content } = await render(post);
---

<BlogPost {...post.data}>
	<Content/>
</BlogPost>

• 获取参数后进行占位输入TDK或者内容的呈现
• 可以自行修改/创建文章md

5. 提交github

• 去GitHub登录后创建新仓库https://github.com/new
• 可以参考如下设置
• 咱自己博客就私有就行，其余不用勾选
• 创建好了后会跳转到参考初始页面
• 会有一堆git初始指令，这边因为我们创建astro的时候已经初始仓库了，所以只需要commit后push到main分支就行
• 当然你也可以用ide工具的可视化git进行操作，这边我以指令举例

#先把当前项目文件添加至提交列表
git add .

#将add的文件commit到仓库
git commit -m "初始化"

#现在只是提交到了我们本地仓库列表内，接下来要同步到GitHub
#如果你电脑未连接过GitHub则需要先绑定GitHub账号
git config --global user.email "你的邮箱"
git config --global user.name "你的用户名"

#切换到main分支
git branch -M main
#换成你的仓库地址**https://github.com/Licy711/myblog.git**只是举例
git remote add origin "https://github.com/Licy711/myblog.git"
#提交
git push -u origin main

• 提交后会弹出验证绑定，可以浏览器登录然后点击
• VScode也可能直接提示然后跳转可以绑定
• 可以浏览器登录好GitHub后点击第一个(sign in with your browser)
• 这里我举例第二个(sign in with a code)
  
• 点击code验证后\
• 复制八位密钥然后点击下方连接
  
• 点击继续
  
• 输入密钥后绑定成功
  
• 最后控制台提示成功
  
• 此时我们仓库就获取到项目代码了
  

6. 部署vercel

• 去https://vercel.com/注册登录后进入项目列表

• 添加项目project
  

• 绑定你的GitHub账号

• 勾选你改成创建的仓库然后保存，保存成功后搜索仓库名称点击选择导入
  

• 由于模板blog内功能不多，无需配置环境变量什么的，我们直接部署就行

• 如果后期你博客需要接入密钥之类的可以放在环境变量这里

• 部署成功，可以用他提供的子域名预览(https://myblog-ten-opal.vercel.app)

• 但是vercel.app这个域名是国内会墙的，所以最好是绑定自己的域名

• 这里我们可以添加自定义域名

• 添加后会让我们解析cname到他指定的域名

• 添加cname解析 这里是cloudflare举例，无需开启代理

• 这样域名就绑定完成了，会自动生成ssl证书，可以访问你的自定义域名查看

• 如果国内速度你觉得不行的话，可以把他给的
  cname地址6a939bd4d19096e2.vercel-dns-017.com改成cname-china.vercel-dns.com去解析指向，虽然列表内会提示如下内容，但是不影响

7. 后续/总结

后面想改内容就撰写 md 文件，git push提交到GitHub仓库，Vercel 会自动拉取最新代码重新部署，不用手动。 我写的时候就是把自己当成一个纯小白，每一步都跑通了才截图，遇到可能卡住的地方尽量写清楚，比如 Astro 创建时选哪个模板、Git 第一次推送怎么认证、Vercel 怎么绑域名。因为我自己折腾的时候也踩过坑，知道那种卡住又没人说的感觉。

所以这份文档更像是我一边装一边记的笔记，而不是事后补的教程。如果后面有人照着能一次跑通，那就没白写。