从零开始用AI搭建个人博客:我的完整实操记录,5分钟上线

从零开始用AI搭建个人博客:我的完整实操记录,5分钟上线

搭建个人博客这件事,以前是技术人的专属——买服务器、装系统、配环境、写代码、部署上线,一套流程走下来少说半天。2026年,我用AI走了一遍,整个流程缩短到了5分钟。

这篇文章是我的完整实操记录,每一步都有截图和代码,你照着做就能复制。

AI搭建博客流程

一、方案选择:为什么选Cloudflare Workers?

在开始之前,我对比了几种主流方案:

| 方案 | 搭建时间 | 月成本 | 维护难度 | 自由度 |
|------|---------|--------|---------|--------|
| WordPress + 虚拟主机 | 30-60分钟 | $5-20 | 中等 | 高 |
| Hexo/Hugo + GitHub Pages | 2-4小时 | 免费 | 高 | 最高 |
| Notion + 第三方工具 | 10分钟 | 免费 | 低 | 低 |
| Cloudflare Workers + D1 + R2 | 5分钟 | 免费 | | |
| Vercel + Next.js | 15分钟 | 免费起步 | 中等 | 高 |
| 腾讯云CloudBase AI | 5分钟 | 按量付费 | 低 | 中等 |

最终选择Cloudflare Workers方案,理由很简单:永久免费、全球CDN、零服务器、D1数据库内置、R2存储内置。对于个人博客来说,这就是最优解。

二、环境准备

你需要准备的东西:

  • 一个Cloudflare账号(免费)

  • 一个域名(可选,Cloudflare提供免费子域名)

  • AI编程助手(Cursor、Claude Code、或者任何能写代码的AI工具)
  • 零基础准备:如果你没有任何编程基础,可以用腾讯云CloudBase AI Builder,一句描述就能生成博客。但如果你想自己掌控一切,跟着我继续。

    三、第1步:让AI帮你生成项目代码

    打开Cursor(或你喜欢的AI编程工具),输入以下提示词:

    text
    帮我搭建一个基于Cloudflare Workers的个人博客系统,要求:
    1. 使用D1作为数据库,包含posts、categories、tags表
    2. 使用R2存储图片
    3. 支持Markdown渲染
    4. 响应式设计,适配手机和PC
    5. 支持暗黑模式
    6. 包含首页文章列表、文章详情页、分类页、标签页
    7. 使用中文界面
    8. URL结构:/post/slug

    30秒后,AI生成了完整的项目结构。包括:

    text
    blog/
    ├── src/
    │   ├── index.js          # 主入口和路由
    │   ├── handlers.js       # 页面渲染逻辑
    │   ├── database.js       # D1数据库操作
    │   └── utils.js          # Markdown解析等工具函数
    ├── schema.sql            # 数据库表结构
    ├── wrangler.toml         # Cloudflare Workers配置
    └── package.json

    四、第2步:初始化Cloudflare资源

    登录Cloudflare Dashboard,进入Workers & Pages:

    创建D1数据库:

    text
    wrangler d1 create blog-db

    创建R2存储桶:

    text
    wrangler r2 bucket create blog-images

    创建KV命名空间(用于缓存):

    text
    wrangler kv namespace create BLOG_KV

    记录下生成的ID,填入 wrangler.toml 配置文件。

    五、第3步:初始化数据库

    把AI生成的 schema.sql 执行到D1数据库中:

    sql
    CREATE TABLE IF NOT EXISTS posts (
        id TEXT PRIMARY KEY,
        title TEXT NOT NULL,
        slug TEXT NOT NULL UNIQUE,
        content TEXT,
        excerpt TEXT,
        category TEXT,
        tags TEXT,
        status TEXT DEFAULT 'published',
        views INTEGER DEFAULT 0,
        likes INTEGER DEFAULT 0,
        created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
        updated_at DATETIME DEFAULT CURRENT_TIMESTAMP
    );
    
    CREATE TABLE IF NOT EXISTS categories (
        id TEXT PRIMARY KEY,
        name TEXT NOT NULL,
        slug TEXT UNIQUE
    );
    
    CREATE TABLE IF NOT EXISTS tags (
        id TEXT PRIMARY KEY,
        name TEXT NOT NULL,
        slug TEXT UNIQUE
    );

    执行命令:

    text
    wrangler d1 execute blog-db --remote --file=./schema.sql

    六、第4步:部署到Cloudflare Workers

    text
    wrangler deploy

    30秒后,你的博客就上线了。Cloudflare会分配一个 xxx.workers.dev 的免费域名。

    七、第5步:绑定自定义域名(可选)

    如果你有自己的域名,在Cloudflare Dashboard中添加域名,然后在Workers设置中绑定Custom Routes:

    text
    tianliaos.com/*
    *.tianliaos.com/*

    DNS自动配置,SSL证书自动签发,全程零手动操作。

    八、实测过程中遇到的问题和解决方案

    问题1:中文URL的slug处理

    AI生成的代码在处理中文标题的slug时,直接用了原文,导致URL是一长串中文字符,不好看也不利于SEO。

    解决方案: 让AI加一个slugify函数,用pinyin库把中文转成拼音:

    javascript
    import pinyin from 'pinyin';
    
    function slugify(text) {
        return pinyin(text, { style: pinyin.STYLE_NORMAL })
            .flat()
            .join('-')
            .toLowerCase()
            .replace(/[^a-z0-9-]/g, '')
            .replace(/-+/g, '-')
            .slice(0, 80);
    }

    问题2:Markdown渲染中的代码高亮

    默认的Markdown渲染不支持代码高亮,技术博客没有语法高亮体验很差。

    解决方案: 使用marked + highlight.js的组合:

    javascript
    import { marked } from 'marked';
    import hljs from 'highlight.js';
    
    marked.setOptions({
        highlight: function(code, lang) {
            if (lang && hljs.getLanguage(lang)) {
                return hljs.highlight(code, { language: lang }).value;
            }
            return hljs.highlightAuto(code).value;
        }
    });

    问题3:图片加载慢

    博客中的图片如果直接放Workers里,加载速度不理想。

    解决方案: 使用Cloudflare R2存储图片,配合自定义域名实现全球CDN加速。R2的读取流量免费,存储成本极低($0.015/GB/月)。

    问题4:SEO元数据

    AI生成的默认模板没有SEO相关的meta标签。

    解决方案: 让AI添加完整的SEO支持:

    html
    <head>
        <title>${post.title} - 我的博客</title>
        <meta name="description" content="${post.excerpt}">
        <meta property="og:title" content="${post.title}">
        <meta property="og:description" content="${post.excerpt}">
        <meta property="og:image" content="${post.featured_image}">
        <meta property="og:type" content="article">
        <link rel="canonical" href="https://yourblog.com/post/${post.slug}">
    </head>

    九、AI辅助写文章的效率提升

    博客搭好了,AI还能帮你写文章。我的工作流:

  • 用AI生成文章大纲

  • 基于大纲扩展每一段内容

  • AI生成配图

  • 人工审核、修改、润色

  • 转成Markdown格式发布
  • 一篇2000字的技术文章,以前需要2-3小时,现在大约30-40分钟。效率提升了4-5倍。

    十、总结

    用AI搭建个人博客的完整流程:

  • 选方案:Cloudflare Workers(免费、全球CDN、零运维)

  • AI生成代码:30秒

  • 初始化资源:2分钟

  • 部署上线:30秒

  • 绑定域名:1分钟
  • 总计约5分钟,一个完整的、支持Markdown、响应式设计、暗黑模式、SEO优化的个人博客就上线了。

    核心体会: AI不会替你思考"写什么",但它能帮你解决"怎么建"和"怎么发布"的全部技术问题。把精力放在内容创作上,技术细节交给AI。

    从零开始建博客,2026年的最优路径就是:AI生成代码 + Cloudflare免费托管。这个组合免费、快速、可靠,几乎没有任何门槛。

    💬 评论区 (0)

    暂无评论,快来抢沙发吧!