如何快速搭建博客站点
本文主要介绍如何快速搭建个人博客站点,包括选择合适的博客框架、部署方案以及具体的操作步骤。通过本文,您将了解到搭建个人博客的完整流程,并能够快速拥有一个属于自己的博客网站。
背景介绍
传统博客搭建(如自建服务器或 WordPress)操作门槛高,需自行部署、配置和维护,后期成本大。EdgeOne Pages 博客模板基于边缘计算和静态站点技术,带来革新建站体验。通过预置框架,简单修改内容即可快速上线个人博客,真正实现“即开即用,零门槛建站”。
主要特性与优势:
极速部署:无需复杂环境配置,几分钟即可上线
高性能与安全:基于边缘节点分发,访问速度快,抗攻击能力强
易于维护:内容与前端分离,支持可视化内容管理
适用场景
轻量化的个人博客站点
对于技术新手、学生、内容创作初学者等人群而言,轻量化的个人博客站点是理想选择。这类方案通过静态网站生成器(如 Nextjs、Hexo),无需数据库和复杂后端,仅需管理 Markdown 文件即可完成内容发布,搭建和维护门槛极低,非常适合用于记录成长、生活、学习笔记等场景。
功能丰富的博客/内容站点
对于有更高内容管理需求的资深用户或小团队,功能丰富的博客/内容站点更适合。方案采用无头 CMS(如 Contentful)与静态网站生成器结合,支持多作者协作、内容分类、富媒体、多语言等复杂功能。这便于长期运营、内容多样化和灵活扩展,非常适合知识型网站或团队协作博客。
示例场景:轻量化的个人博客站点
如果您的需求属于轻量化的个人博客场景,可以参考以下步骤快速搭建属于自己的博客网站。
1、下载代码
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

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

示例场景:功能丰富的博客/内容站点
如果您的需求属于功能丰富的博客或内容网站场景,可以参考以下步骤,搭建基于无头 CMS + 静态网站生成器模式的博客网站。
1、配置 Contentful
Space(空间):内容管理的基本单位,包含所有内容、媒体文件和设置
Content Type(内容类型):定义内容的结构和字段,如博客文章、作者、分类等
Entry(条目):基于内容类型创建的具体内容实例
Asset(资源):媒体文件,如图片、视频、文档等
Environment(环境):内容的版本管理,如开发、测试、生产环境
管理界面的具体模型配置过程,您可以参考文档指引自行操作。不过,还有另一种更为便捷的方式,那就是通过 JSON 数据直接导入来生成内容模型,无需自己手动创建。
首先,使用导入 JSON 数据来生成 Contentful 的内容配置需要全局安装 Contentful CLI 工具。请在终端中执行以下命令:
npm install -g contentful-cli
安装完成后,我们下载默认的博客配置文件到本地,地址是 https://github.com/TencentEdgeOne/pages-templates/blob/main/examples/blog-with-retypeset-and-contentful/contentful-blog-model.json。
下载配置后,执行 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、下载代码
项目的
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"开始进行部署。
部署成功后,会得到一个访问地址,如图示:


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