Astro博客框架上手指南-Reno Blog

简单介绍

本教程基于 AstroBlog，Windows 平台，特色如下

响应式
支持 mdx 文档
支持 md 拓展语法，比如高亮删减行、特定行，设置标题等
支持评论（giscus）
支持 aside 友好提示
支持显示阅读时长
支持暗色主题

开始搭建

下面是写作工作流程的简要说明

博客存储github
博客上线vercel
博客加工cursor

博客印刷typora

┌───────────────┐     ┌──────────────┐     ┌──────────────┐     ┌───────────────┐         
│    Typora     │ ──► │    Cursor    │ ──► │    GitHub    │ ──► │     Vercel    │
└───────────────┘     └──────────────┘     └──────────────┘     └───────────────┘  
       ▲                     ▲                    ▲  					▲ 
  	📝 本地预览    	   	  🛠 版本管理     		 🔄 CI/CD 测试  		 🌍 线上网站 
     

博客存储 github

注册账号

点击前往
添加密钥

WIN + R 输入 cmd 回车执行以下指令，会自动打开记事本，复制记事本中的内容
```
ssh-keygen -t ed25519 -C "your@email.com" -f %USERPROFILE%\.ssh\id_ed25519
notepad %USERPROFILE%\.ssh\id_ed25519.pub
```
访问密钥页，Title 随意填写，然后将复制内容粘贴到 Key 点击 Add SSH Key 完成添加
创建giscus

点击创建，名称填写 giscus，注意选择 Public，创建好后参考 giscus 官网进行配置

博客上线 vercel

注册账号

点击注册

创建astro

点击创建，名称填写 astro，修改环境变量后点击 Deploy 部署

Name	Value	Description
GISCUS_REPO	UserName/RepoName	giscus仓库地址
GISCUS_REPO_ID	****	参考 giscus 官网配置
GISCUS_CATEGORY_ID	****	参考 giscus 官网配置
GISCUS_lang	zh-CN	giscus仓库语言

添加域名

在 cloudflare 需要绑定的域名添加一条 A 记录指向 76.223.126.88 后，进入 vercel 的 astro 项目依次点击 Settings - Domains - Add ，接着输入绑定的域名，然后点击 Add Domain，接着注意勾选第三项后点击 Add 完成添加

博客加工 cursor

开始前，需要先前往 git 官网下载 git 并安装：点击前往

下载cursor

前往 cursor 官网下载：点击前往，双击下载好的 exe 文件安装

克隆仓库

打开 cursor，点击 ` Clone repo，复制你的 astro 仓库地址后回车，按提示使用 github 账号登录授权后会要求选择克隆地址，建议放在 onedrive 根目录 %USERPROFILE%\OneDrive`，项目目录结构如下

📂 %USERPROFILE%/OneDrive/astro
├── 📂 public/  
│   ├── 📂 assets/  
│   │   └── 📄 logo.svg  
├── 📂 src/  
│   ├── 📂 assets/  
│   │   └── 📄 socialIcons.ts  
│   ├── 📂 components/  
│   ├── 📂 content/  
│   │   ├── 📂 blog/  
│   │   │   └── 📄 some-blog-posts.md  
│   │   ├── 📄 _schemas.ts  
│   │   └── 📄 config.ts  
│   ├── 📂 layouts/  
│   ├── 📂 pages/  
│   ├── 📂 styles/  
│   ├── 📂 utils/  
│   ├── 📄 config.ts  
│   └── 📄 types.ts  
└── 📄 package.json  

本地配置

点击 Terminal - New terminal 开启终端，或快捷键 CTRL + Shift + ~ 直接打开终端，执行以下代码

git config --global user.name "Your GitHub Username"
git config --global user.email "Your GitHub Email"
git config --list

自定义博客
- 修改logo：从左侧文件目录打开 astro\public\assets\logo.svg，替换为自定义的 svg
- 修改主页：从左侧文件目录打开 astro\src\pages\index.astro 进行修改
- 修改关于页：从左侧文件目录打开 astro\src\pages\index.astro\about.mdx 进行修改
- 修改联系方式：从左侧文件目录打开 astro\src\config.ts 修改联系方式并通过active定义是否显示
- 修改博客文稿：从左侧文件目录打开 astro\src\content\blog 进入文稿目录，选中旧稿件后按 Del 键可删除
推送更新

编辑博客后，打开终端执行以下代码可以同步到github并自动更细部署到vercel
```
git add .
git commit -m "update posts"
git pull origin master
```

博客印刷 typora

下载安装

推荐下载 v1.9.5 版本：点击下载，双击下载好的 exe 文件安装，注意勾选 仅为当前用户安装，并且先不要打开 typora
激活

点击下载，然后解压，将解压得到的两个 exe 文件复制到 %USERPROFILE%\AppData\Local\Programs\Typora ，然后在该目录右键打开终端，执行以下命令
```
.\node_inject.exe
.\license-gen.exe
```
这里会生成一串序列号，这时打开 typora 激活输入序列号即可
配置

在 typora 点击文件 - 偏好设置 打开配置界面，也可使用快捷键 CTRL + ，快速打开
- 文件：建议勾选允许折叠和自动保存
- 编辑器：建议勾选所有
- 图像：建议勾选优先使用相对路径
- Markdown：建议勾选除首行缩进外其他所有
编辑博客

点击文件 - 打开文件夹，路径输入 ` %USERPROFILE%\OneDrive\astro\src\content\blog` 后打开，然后可以使用快捷键CTRL+N新建文件，使用 md 语法开始创作，注意 astro 要求页面开头包含 YAML Frontmatter，用于定义页面的元数据

```markdown

title: 如何开始撰写博客 author: reno

date: 2025-03-17

postSlug: 如何开始撰写博客 featured: false published: true tags: - aitool description: 关于撰写博客的经验和技巧的笔记 – ```

编辑好文章后使用快捷键 CTRL + S 保存，然后可以使用 cursor 推送更新