使用 Dev.to 作为你的博客的 Headless CMS

Source: Dev.to

使用 Dev.to 作为个人博客的 Headless CMS 是目前最聪明、最经济的策略之一。你在一个舒适的编辑器（Dev.to）中撰写文章，而你的个人网站只需“读取”你写的内容并用自己的设计进行展示。

以下是实现步骤的完整指南。

1. 端点（你需要的 URL）

Dev.to 的 API 对读取文章是公开的。展示你的公开文章不需要身份验证（API Key），这让操作非常简便。

只需要这两个 URL：

获取你的文章列表：

https://dev.to/api/articles?username=TU_NOMBRE_DE_USUARIO

获取单篇文章（完整内容）：

https://dev.to/api/articles/TU_NOMBRE_DE_USUARIO/SLUG_DEL_POST

2. 代码实现（通用示例）

假设你使用 JavaScript（可以是 React、Next.js、Vue、Astro，或原生 JS）。逻辑始终相同。

步骤 A：获取文章列表（用于“博客”页面）

这会返回一个数组（列表），包含你最近的 30 篇文章。

const username = 'tu_usuario_devto'; // 替换为你的用户名

async function getMyPosts() {
  const response = await fetch(`https://dev.to/api/articles?username=${username}`);
  const posts = await response.json();
  return posts;
}

// 你得到的（简化示例）:
// [
//   {
//     "id": 12345,
//     "title": "Mi primer post",
//     "slug": "mi-primer-post-xy2",
//     "description": "Resumen del post...",
//     "cover_image": "https://...",
//     "tag_list": ["javascript", "webdev"],
//     "published_at": "2024-05-10T..."
//   },
//   ...
// ]

注意： 该端点通常不返回文章的完整内容（body_html），只返回摘要。适合用来生成博客的“卡片”。

步骤 B：获取单篇文章内容（用于文章详情页）

当用户点击某篇文章时，使用 slug 请求完整内容。

async function getSinglePost(slug) {
  const username = 'tu_usuario_devto';
  const response = await fetch(`https://dev.to/api/articles/${username}/${slug}`);
  const post = await response.json();
  return post;
}

结果使用方式

// React / Astro 示例
const post = await getSinglePost(slug);

// 文章标题
<h1>{post.title}</h1>

// 将来自 Dev.to 的 HTML 内容注入页面
<div className="prose" dangerouslySetInnerHTML={{ __html: post.body_html }} />

样式（CSS）

Dev.to 返回的 HTML 是“干净的”（<p>、<h2>、<ul> 等）。若想快速获得美观效果，可使用 Tailwind Typography（prose）库。只需在父容器上添加 prose 类，博客即可自动呈现专业外观。

4. 该策略的优势

• 免费图片托管： 将图片上传至 Dev.to 编辑器后，它们会存放在其 CDN 上。无需消耗自己服务器的带宽和存储空间。
• 自动备份： 即使个人网站宕机或误删内容，文章仍安全保存在 Dev.to。
• 双重流量：
  • 读者在你的个人网站阅读。
  • 读者在 Dev.to 平台阅读（社交网络）。

5. SEO “专业”建议（规范 URL）

如果希望 Google 知道 你的站点 是原始来源，而 Dev.to 只是副本（从而提升你站点的排名），请按以下步骤操作：

1. 使用 API 将文章发布到你的网站，如 https://misitio.com/blog/mi-post。
2. 前往 Dev.to，编辑对应的文章。
3. 在文章设置中找到 “Canonical URL”（规范 URL）字段。
4. 将 https://misitio.com/blog/mi-post 粘贴进去。

完成！你拥有一个免费、Headless、带图片托管且背靠社区的博客。