使用AI工具0代码搭建Astro博客
📝 无代码搭建Astro博客指南 利用AI工具(Midjourney、ChatGPT等)一周内完成现代化个人博客搭建,支持: ✅ 响应式设计+深色模式 ✅ 本地/Algolia双搜索 ✅ 标签分类+文章统计 安装方式: 1️⃣ CLI工具一键初始化(npm/pnpm/yarn) 2️⃣ Astro模板安装 3️⃣ GitHub源码部署 配置亮点: • 可视化TS配置界面 • 自动索引生成 • 命
📢前言
迅猛发展的AI工具,让搭建个人博客难度降低。利用下班时间,不写任何代码,历时1周,成功搭建一个Astro博客站点,特此分享一下
🛠️用到的工具
Midjourney v7
Trae CN
通义千问
ChatGPT
Fork Git
🚀 特性
- 🎨 现代化UI设计
- 🔍 支持本地搜索和Algolia搜索
- 📱 响应式设计
- 🌙 深色/浅色主题切换
- 🏷️ 标签和分类支持
- 📊 文章统计和作者信息展示
🎨主题展示
浅色模式
深色模式
文章页
搜索页
📦 主题安装
方法一:通过CLI工具初始化
主题已同步发布到npm
包管理器 | 建议命令 |
---|---|
pnpm / pnpx | pnpm dlx astro-theme-starread init 或 pnpx astro-theme-starread init |
npm (npx) | npx astro-theme-starread init |
Yarn | yarn dlx astro-theme-starread init (需 Yarn v2+) |
当然,支持create
命令在指定目录创建主题,my-blog也可换成 .
(本目录)../blog
(上级目录中的文件夹blog)
# 使用 pnpm
pnpm create astro-theme-starread my-blog
# 使用 npm
npx create-astro-theme-starread my-blog
# 使用 yarn
yarn create astro-theme-starread my-blog
# 使用 cnpm
cnpm init astro-theme-starread my-blog
方法二:使用astro
模版安装
安装过程需要访问Github
包管理器 | 命令 |
---|---|
pnpm | pnpm create astro@latest --template passwordgloo/astro-theme-starread |
npm | npm create astro@latest -- --template passwordgloo/astro-theme-starread |
yarn | yarn create astro --template passwordgloo/astro-theme-starread |
方法三:源码安装
安装过程需要访问Github
git clone https://github.com/passwordgloo/astro-theme-starread
cd astro-theme-starread
pnpm install
安装完成后,运行开发服务器:
pnpm dev
🔍 搜索
请在content/arrticles里新建文档,否则建立索引找不到文档
本地搜索
默认使用本地搜索,首次使用请运行pnpm local
建立本地索引
Algolia搜索
生产环境中建议使用环境变量方式配置,避免敏感信息暴露在代码中。
- 编辑
starread.config.ts
选择Algolia搜索
export const themeConfig: starreadthemeconfig = {
search: {
// 搜索服务提供商: 'local', 'algolia'
provider: 'algolia',
}
}
- 根目录创建并编辑
.env
文件(或者在netlify、vercel建立环境变量)
如果您没有Algolia账号,需要先注册并创建一个应用。
Algolia搜索需要您的Algolia应用ID、搜索密钥、索引名称和管理员API密钥。
PUBLIC_ALGOLIA_APP_ID=您的Algolia应用ID
PUBLIC_ALGOLIA_SEARCH_KEY=您的Algolia搜索密钥
PUBLIC_ALGOLIA_INDEX_NAME=您的索引名称
ALGOLIA_WRITE_API_KEY=您的Write API密钥(用于索引上传,不是Admin API)
- 推送索引到Algolia
运行pnpm algolia
推送本地索引到Algolia
⚙️ 自定义配置
您可以通过修改根目录下的 starread.config.ts
文件来自定义主题配置,包括网站标题、导航菜单、作者信息、侧边栏组件显示等。
主题自带Typescript提示,不用担心不会填
示例配置项:
// 修改网站标题
site: {
title: '我的博客',
// ...其他配置
}
// 自定义导航菜单
nav: [
{ name: '首页', href: '/' },
{ name: '关于', href: '/about' },
// ...其他菜单项
]
🧞 命令(以pnpm为例)
命令 | 描述 |
---|---|
pnpm install |
安装依赖 |
pnpm dev |
启动本地开发服务器 localhost:4321 |
pnpm preview |
本地预览构建结果 |
pnpm local |
运行自动索引脚本并构建生产站点 |
pnpm algolia |
推送数据到Algolia搜索 |
pnpm changelog |
生成更新日志 |
pnpm release |
版本管理(更新版本号、生成提交等) |
如需本地构建,请一定确保有.env
文件,然后运行pnpm astro build
更多推荐
所有评论(0)