使用 dev.to 作为后端/CMS 的开发者博客
TLDR
复制这个仓库github.com/gautemo/blog-devto-backend，然后在 script/app.js 文件中将 dev.to 的用户名改成你自己的。现在你就拥有了自己的开发者博客！🥳
这个想法
所以你想拥有自己的开发者博客。原因有很多；
- 分享知识，帮助他人
- 把你学到的东西记录下来，以便将来回顾。
- 你会更好地学习这门学科。
- 提升职业生涯，推销自己
从哪里开始呢？
选择很多，而且每种选择都需要不同的时间、技能学习或金钱投入。
你可以用 HTML 写每篇文章。我也是这么做的。这种方法确实可行，而且如果文章需要，你还可以编写额外的代码来添加功能。比如这篇文章，你可以切换到深色模式。但我必须告诉你，一段时间后，编辑和管理博客文章会变得非常繁琐。
WordPress或其他内容管理系统是另一种简单的解决方案。但是，您能否根据自己的喜好自定义网站并显示代码片段？免费套餐是否满足您的需求，还是需要付费？
您是否使用Gridsome、Gatsby、Sanity和/或Strapi等产品创建无头内容管理系统？这可能是一个非常好的选择，但听起来需要大量的工作和调查来选择合适的产品。
从零开始创建所有内容，包括自己的数据库？这可能是实现目标最费力的方法。
使用dev.to创建文章，并通过其API将文章展示在您自己的博客上。这是一个简单却非常实用的选择，本文将对此进行详细介绍。dev.to 专为撰写开发者文章而设计，因此编辑、添加图片和代码块都非常便捷。代码块至关重要，它能够高亮显示代码，方便读者复制。
让我们开始吧
首先，我们将创建一个主页，列出我们写过的所有博客文章。
我们将使用以下端点：
curl https://dev.to/api/articles?username=gautemeekolsen
在我们的index.html文件中，我们有一个ul元素，我们将使用模板将我们的博客文章填充到该元素中。
<ul id="blog-list"></ul>
<template id="blog-item">
<li>
<a class="url">
<img class="cover" alt="cover image">
<h3 class="title"></h3>
</a>
</li>
</template>
然后app.js会从 API 获取数据，并遍历文章列表，将它们添加到 DOM 中。（您可以使用Vue.js等框架简化代码，但我觉得在代码量如此之少的情况下没有必要。）
const username = 'gautemeekolsen' //change this to your own
const getArticles = async () => {
const response = await fetch(`https://dev.to/api/articles?username=${username}`);
const data = await response.json();
for(article of data){
addArticle(article);
}
}
const addArticle = article => {
const template = document.querySelector('#blog-item');
const clone = template.content.cloneNode(true);
clone.querySelector('.title').textContent = article.title;
clone.querySelector('.url').href = `article.html?id=${article.id}`;
clone.querySelector('.cover').src = article.cover_image;
document.querySelector('#blog-list').appendChild(clone);
}
经过一些样式设置，我们的着陆页就完成了！完整的代码位于index.html、app.js、style.css和home.css。
接下来进入文章页面。要获取特定文章，我们将使用以下接口：
curl https://dev.to/api/articles/259798
article.html文件将包含封面图片、标题和文章正文等元素。
<article>
<img id="cover" alt="cover image">
<h1 id="title"></h1>
<div id="article-body"></div>
</article>
这些数据来自article.js文件。
const searchParams = new URLSearchParams(location.search);
const id = searchParams.get('id');
const response = await fetch(`https://dev.to/api/articles/${id}`);
const data = await response.json();
document.querySelector('#title').textContent = data.title;
document.querySelector('#cover').src = data.cover_image;
document.querySelector('#article-body').innerHTML = data.body_html;
但是现在我们缺少 dev.to 的代码高亮功能。
您可以通过在三个反引号后添加文件扩展名，像这样在 dev.to 文章中添加代码高亮功能。
```js console.log('嗨，朋友');```
为了在我们的网站上实现相同的突出显示效果，我们将使用 dev.to 在其 GitHub 仓库github.com/thepracticaldev/dev.to上所使用的 CSS 文件。由于我们尚未在项目中配置 Sass，因此您可以使用在线Sass 编译器来获取 CSS 文件。
经过一些样式调整，我们的文章页面就完成了。完整的代码在这里：article.html、article.js、style.css、article.css和devto.css。
结论
这样你就能快速搭建并运行自己的开发者博客，而且管理起来也很方便。当然，你的文章会发布在 dev.to 上，你需要依赖他们的 API，这可能存在一些不确定性。
你只需要 fork 我的GitHub 仓库，在 app.js 文件中将用户名改为你的用户名，在dev.to上撰写文章，然后将你的博客托管在GitHub Pages、Netlify或Firebase等平台上。另外，如果你想要使用自己的主题，可能还需要修改样式。
我不知道你是在 dev.to 上还是在我的博客上阅读这篇文章。但为了演示，你可以在这两个地方看到同一篇文章：
dev.to/gautemeekolsen/developer-blog-with-dev-to-as-your-backend-cms-542n和
gautemo.github.io/blog-devto-backend/article.html?id=276324。