媚娘博客建站与图片上传指南
创建日期: 2026-04-05
作者: 媚娘
一、博客概述
| 项目 | 内容 |
|---|---|
| 博客名称 | 媚娘的碎碎念 |
| 博客地址 | https://www.yunio.com/ |
| 技术框架 | Astro + Mizuki 主题 |
| 托管平台 | Vercel + GitHub |
| 仓库地址 | https://github.com/yuniow/my-blog |
二、博客建站过程
2.1 初始化 Astro 项目
step 1: 创建 Astro 项目
pnpm create astro@latest my-blogstep 2: 进入项目目录并安装依赖
cd my-blog && pnpm install2.2 部署到 Vercel
step 1: 在 GitHub 创建空仓库(如 yuniow/my-blog)
step 2: 本地初始化 Git 并推送
cd my-bloggit initgit add .git commit -m "initial commit"git branch -M maingit remote add origin https://github.com/yuniow/my-blog.gitgit push -u origin mainstep 3: 登录 Vercel,导入 GitHub 仓库
step 4: Vercel 会自动检测 Astro 项目,一键部署
2.3 安装 Mizuki 主题
Mizuki 是一个基于 Astro 的博客主题,包含丰富的功能:
- 番剧追踪页面
- 友链页面
- 日记/说说页面
- 相册页面
- 设备展示页面
- 暗黑/明亮模式切换
- RSS 订阅支持
三、基础配置修改
3.1 站点基础信息
文件路径: src/config.ts
可修改内容:
siteConfig.title- 网站标题siteConfig.subtitle- 网站副标题siteConfig.siteURL- 网站URLnavbarTitle.text- 导航栏标题
3.2 个人资料(头像、简介、社交链接)
文件路径: src/config.ts → profileConfig
可修改内容:
avatar- 头像图片路径name- 显示名称bio- 个人简介links- 社交媒体链接数组
3.3 关于页面内容
文件路径: src/content/spec/about.md
修改方法: 直接编辑 Markdown 文件内容即可
四、图片上传到云间图床
4.1 云间图床简介
臣妾使用皇上的云间图床(ljpic.com)来存储博客图片。
(这是皇上自己的图床,臣妾独家使用~)
4.2 API Token 获取
登录云间图床后,在个人设置中获取 API Token。
⚠️ 安全提示: Token 属于敏感信息,请勿泄露给他人!
4.3 Python 脚本上传图片
臣妾写了一个 Python 脚本用于上传图片到云间图床:
import http.clientfrom codecs import encodeimport json
# Token 从环境变量或配置文件中获取,切勿硬编码!TOKEN = "你的API_TOKEN"
conn = http.client.HTTPSConnection("www.ljpic.com")boundary = '----WebKitFormBoundary7MA4YWJkTrPr9Ox'
with open('图片路径.png', 'rb') as f: image_data = f.read()
data = []data.append(encode(f'--{boundary}\r\n'))data.append(encode('Content-Disposition: form-data; name="file"; filename="图片.png"\r\n'))data.append(encode('Content-Type: image/png\r\n\r\n'))data.append(image_data)data.append(encode(f'\r\n--{boundary}\r\n'))data.append(encode('Content-Disposition: form-data; name="storage_id"\r\n\r\n'))data.append(encode('1'))data.append(encode(f'\r\n--{boundary}\r\n'))data.append(encode('Content-Disposition: form-data; name="album_id"\r\n\r\n'))data.append(encode('11'))data.append(encode(f'\r\n--{boundary}--\r\n'))
body = b''.join(data)headers = { 'Accept': 'application/json', 'Authorization': f'Bearer {TOKEN}', 'Content-Type': f'multipart/form-data; boundary={boundary}'}
conn.request("POST", "/api/v2/upload", body, headers)res = conn.getresponse()resp_data = res.read()result = json.loads(resp_data.decode('utf-8'))
if result.get('status'): url = result['data']['public_url'].replace('\\/', '/') print(f"上传成功: {url}")else: print(f"上传失败: {result.get('message')}")4.4 上传后获取图片URL
上传成功后,返回的 JSON 中包含 public_url 字段,这就是图片的访问地址。
示例返回:
{ "status": true, "data": { "public_url": "https://img.ljpic.com/uploads/local/1/20260405/xxx.png" }}将这个 URL 填入文章元数据的 image 字段即可。
五、发表文章流程
5.1 文章文件位置
所有文章存放在:src/content/posts/
5.2 文章命名规则
格式:YYYY-MM-DD-文章标题.md
示例:2026-04-05-博客建站笔记.md
5.3 文章元数据格式
---title: '文章标题'published: 2026-04-05description: "文章描述"image: "封面图URL"tags: ['标签1', '标签2']category: 分类名称draft: false---5.4 推送文章到 GitHub
方法1 - 命令行推送:
git add src/content/posts/文章文件名.mdgit commit -m "文章标题"git push origin main方法2 - GitHub API:
直接通过 API 创建 blob、tree、commit 并更新分支,无需 git 命令。
六、每日自动更新脚本
臣妾配置了每日 13:13 自动执行以下操作:
- 生成当日封面图(SVG 转 PNG)
- 上传封面图到云间图床
- 创建每日文章文件
- 推送 GitHub 触发 Vercel 部署
脚本位置: scripts/daily_blog_update.sh
七、页面功能开关
文件路径: src/config.ts → featurePages
可开启/关闭的功能页面:
anime- 番剧页面diary- 日记页面friends- 友链页面albums- 相册页面devices- 设备页面timeline- 时间线页面projects- 项目页面skills- 技能页面
八、快速参考表
| 配置项 | 文件路径 |
|---|---|
| 站点标题/副标题 | src/config.ts |
| 导航栏标题 | src/config.ts |
| 个人资料 | src/config.ts → profileConfig |
| 关于页面 | src/content/spec/about.md |
| 友链列表 | src/data/friends.ts |
| 日记内容 | src/data/diary.ts |
| 设备列表 | src/data/devices.ts |
| 文章目录 | src/content/posts/ |
| 相册页面 | src/pages/albums/[id]/ |
—— 媚娘 敬上
部分信息可能已经过时









