边缘开发者平台
  • Pages
    • 产品简介
    • 快速开始
      • 导入 Git 仓库
      • 从模板开始
      • 直接上传
    • 框架指南
    • 项目指南
      • 项目管理
      • edgeone.json
      • 缓存配置
      • 错误码
    • 构建指南
    • 部署指南
      • 概览
      • 触发部署
      • 管理部署
      • 部署按钮
      • 使用 Github Action
      • 使用 CNB 插件
    • 域名管理
      • 概览
      • 自定义域名
      • 配置 HTTPS 证书
      • 如何配置 DNS 的 CNAME 记录
    • Pages Functions
    • KV 存储
    • 边缘 AI
    • API Token
    • EdgeOne CLI
    • Pages MCP
    • 集成指南
      • 数据库
        • Supabase 集成
        • Pages KV 集成
      • 电商
        • Shopify 集成
        • WooCommerce 集成
      • 支付
        • Stripe 集成
        • Paddle 集成
      • CMS
        • WordPress 集成
        • Contentful 集成
        • Sanity 集成
      • 身份验证
        • Supabase 集成
        • Clerk 集成
    • 最佳实践
      • 使用 Deepseek-R1 模型快速搭建对话型AI站点
      • 使用 WordPress + WooCommerce 和 GatsbyJS 搭建电商平台
      • 使用 Supabase 和 Stripe 搭建 SaaS 站点
      • 如何快速搭建公司品牌站点
      • 如何快速搭建博客站点
    • 迁移指南
      • 从 Vercel 迁移至 EdgeOne Pages
      • 从 Cloudflare Pages 迁移至 EdgeOne Pages
      • 从 Netlify 迁移至 EdgeOne Pages
    • 排障指南
    • 常见问题
    • 联系我们
    • 产品动态
当前为国际站中文文档,如需访问中国站文档,请点击这里

如何快速搭建博客站点

本文主要介绍如何快速搭建个人博客站点,包括选择合适的博客框架、部署方案以及具体的操作步骤。通过本文,您将了解到搭建个人博客的完整流程,并能够快速拥有一个属于自己的博客网站。


背景介绍

传统的博客搭建方式,通常依赖于自建服务器、虚拟主机或传统 CMS(如 WordPress),需要用户自行进行环境部署、数据库配置和安全维护,操作门槛较高,且后期维护成本大。而 EdgeOne 基于边缘计算和静态站点技术,结合 Pages 博客模板,为用户带来了革新性的建站体验。通过预置的博客框架,您只需简单修改文本、图片等内容,即可快速上线专属个人博客——真正实现“即开即用,零门槛建站”。

模板主要特性与优势:
极速部署:无需复杂环境配置,几分钟即可上线
高性能与安全:基于边缘节点分发,访问速度快,抗攻击能力强
灵活定制:支持自定义内容结构、页面样式
易于维护:内容与前端分离,支持可视化内容管理


适用场景

轻量化的个人博客站点

对于技术新手、学生、内容创作初学者等人群而言,轻量化的个人博客站点是理想选择。这类方案通过静态网站生成器(如 Nextjs、Hexo),无需数据库和复杂后端,仅需管理 Markdown 文件即可完成内容发布,搭建和维护门槛极低,非常适合用于记录成长、生活、学习笔记等场景。


功能丰富的博客/内容站点

对于有更高内容管理需求的资深个人用户或小团队而言,功能丰富的博客/内容站点更为适合。这类方案通过无头 CMS(如 Contentful)结合静态网站生成器(如 Astro),支持多作者协作、内容分类、标签、富媒体展示、多语言等复杂功能,便于长期运营、内容形式多样、灵活扩展,非常适合知识型网站或需要团队协作的博客项目。


示例场景:轻量化的个人博客站点

如果您的需求属于轻量化的个人博客场景,可以参考以下步骤快速搭建属于自己的博客网站。


1、下载代码

我们提供了一个现成的 Nextjs 作品集和博客模板,包含完整的配置和主题。


2、配置博客内容


首先,来看模板 demo 页面的预览图(如上图)。可以看到该模板包含 Home、Projects、Posts、About 等页面。下载模板后,需将博客的默认内容修改为您的个人内容,此时需要在配置文件目录 src/config 中分别对不同页面的 ts 文件进行设置(如下图)。

配置完成后,接下来需要管理博客文章内容。您可以直接在 src/posts 目录下(如下图)增删或修改 Markdown 文件,通过编辑 md 文件来更新博客文章内容。

对 md 文件列表进行增删改查操作后,需要执行以下命令,对 md 文件进行解析,并将其内容转化为配置文件,生成到 src/config/posts.ts 文件中。
npm run generate-posts
完成内容修改后,执行 npm run dev 可进行本地预览。


3、部署到 EdgeOne Pages

首先将项目提交到 GitHub 仓库:
git add .
git commit -m "Initial commit"
git push origin main
提交完成后,进入 控制台,选择提交的项目,点击"start deployment"开始进行部署。

部署成功后,会得到一个访问地址,点击访问地址即可进入部署的博客页面。




示例场景:功能丰富的博客/内容站点

如果您的需求属于功能丰富的博客或内容网站场景,可以参考以下步骤,搭建基于无头 CMS + 静态网站生成器模式的博客网站。


1、配置 Contentful

首先需要在 Contentful 平台注册账号并创建一个内容空间(Content Space)。注册完成后,您需要了解 Contentful 的核心概念,包括:
Space(空间):内容管理的基本单位,包含所有内容、媒体文件和设置
Content Type(内容类型):定义内容的结构和字段,如博客文章、作者、分类等
Entry(条目):基于内容类型创建的具体内容实例
Asset(资源):媒体文件,如图片、视频、文档等
Environment(环境):内容的版本管理,如开发、测试、生产环境
关于这些概念的详细说明,您可以参考 Contentful 官方文档 进行学习。
管理界面的具体模型配置过程,您可以参考文档指引自行操作。不过,还有另一种更为便捷的方式,那就是通过 JSON 数据直接导入来生成内容模型,无需自己手动创建。
首先,使用导入 JSON 数据来生成 Contentful 的内容配置需要全局安装 Contentful CLI 工具。请在终端中执行以下命令:
npm install -g contentful-cli
下载配置后,执行 Contentful 的登录操作:
contentful login
执行后,系统会提示是否在浏览器进行登录,选择 yes。浏览器会弹出登录认证窗口,选择允许后,会显示登录使用的 token。



请复制该 token 到命令行,即可完成登录,如下图:



登录后,执行从本地导入 JSON 配置的命令:
contentful space import --content-file [/your_path/contentful-blog-model.json]
导入完成后,请回到 Contentful 的管理界面,确认 JSON 数据内容都已经同步到空间内。此时,我们的内容界面应该如下图所示:



接下来,创建 Contentful Delivery API token。在 Contentful 的右上角点击 Setting 图标,然后点击 API Keys。如果没有 Content Delivery API - access token,就创建一个;如果已经存在,直接复制即可。如下图:



我们需要保存以下 3 个值:
CONTENTFUL_SPACE_ID=${your space id}
CONTENTFUL_DELIVERY_TOKEN=${Contentful delivery api token}
CONTENTFUL_PREVIEW_TOKEN=${Contentful preview api token}



2、下载代码

我们同样提供了基于 Astro + Contentful 的解决方案模板,地址是 blog-with-retypeset-and-contentful
项目的 src/utils/contentful.ts 文件会读取之前配置的 3 个 Contentful 环境变量,通过 Contentful SDK 拉取数据并渲染页面。如需本地测试,可以手动设置这 3 个变量的值,然后启动本地预览。



项目的主要前端结构如下:
src/pages/
├── [...index].astro # 首页 - 展示文章列表
├── [...posts_slug].astro # 文章详情页 - 展示单篇文章
├── [...tags].astro # 标签页 - 展示标签列表
└── [lang]/ # 多语言路由
前端页面结构对应之前导入的 JSON 数据结构。如果仅用于测试流程,无需额外修改,保持原始代码文件即可。如需自定义页面布局,可以修改前端代码或调整 JSON 数据结构,开发出符合需求的页面。



3、部署到 EdgeOne Pages

首先将项目提交到 GitHub 仓库:
git add .
git commit -m "Initial commit"
git push origin main
提交完成后,进入 控制台 后选择提交的项目,如图:



这里,我们需要输入 2 个全局变量值,它是配置从 Contentful 拉取数据的配置。配置完毕后,点击"start deployment"开始进行部署。
部署成功后,会得到一个访问地址,如图示:



点击上图中的访问地址即可进入部署的博客页面。