Hello Dev Community!
Today I'll provide you with a programmatic example of how to convert dev.to articles to a Docusaurus blog. This example will use Node.js to fetch articles from the dev.to API and create Markdown files compatible with Docusaurus blog posts.
First, let's set up the project and install the necessary dependencies:
mkdir devto-to-docusaurus
cd devto-to-docusaurus
npm init -y
npm install axios fs-extra front-matter
Now, create a file named convert.js and add the following code:
const axios = require('axios');
const fs = require('fs-extra');
const frontMatter = require('front-matter');
const path = require('path');
const DEV_TO_API_KEY = 'YOUR_DEV_TO_API_KEY';
const DEV_TO_USERNAME = 'YOUR_DEV_TO_USERNAME';
const OUTPUT_DIR = './blog';
async function fetchDevToArticles() {
const response = await axios.get(`https://dev.to/api/articles/me/published`, {
headers: { 'api-key': DEV_TO_API_KEY }
});
return response.data;
}
function convertToDocusaurusFrontMatter(article) {
const date = new Date(article.published_at);
return {
title: article.title,
authors: [DEV_TO_USERNAME],
tags: article.tag_list,
date: date.toISOString().split('T')[0],
slug: article.slug,
description: article.description,
};
}
async function convertArticleToMarkdown(article) {
const frontMatterContent = convertToDocusaurusFrontMatter(article);
const markdown = `---
${Object.entries(frontMatterContent).map(([key, value]) => `${key}: ${Array.isArray(value) ? `[${value.join(', ')}]` : value}`).join('\n')}
---
${article.body_markdown}`;
const fileName = `${frontMatterContent.date}-${article.slug}.md`;
const filePath = path.join(OUTPUT_DIR, fileName);
await fs.outputFile(filePath, markdown);
console.log(`Created: ${filePath}`);
}
async function main() {
try {
const articles = await fetchDevToArticles();
await fs.ensureDir(OUTPUT_DIR);
for (const article of articles) {
await convertArticleToMarkdown(article);
}
console.log('Conversion completed successfully!');
} catch (error) {
console.error('Error:', error.message);
}
}
main();
Here's how this script works:
- It fetches your published articles from dev.to using the API.
- For each article, it converts the metadata to Docusaurus-compatible front matter.
- It combines the front matter with the article's Markdown content.
- It saves each article as a separate Markdown file in the
blogdirectory.
To use this script:
- Replace
YOUR_DEV_TO_API_KEYwith your actual dev.to API key[1]. - Replace
YOUR_DEV_TO_USERNAMEwith your dev.to username. - Run the script using
node convert.js.
After running the script, you'll find your dev.to articles converted to Docusaurus-compatible blog posts in the blog directory[1][3].
To integrate these posts into your Docusaurus site:
- Copy the generated Markdown files from the
blogdirectory to your Docusaurus project'sblogdirectory. - Ensure your
docusaurus.config.jsfile has the blog plugin configured correctly[1][3].
Here's an example of how your docusaurus.config.js might look:
module.exports = {
// ... other config options
presets: [
[
'@docusaurus/preset-classic',
{
blog: {
path: 'blog',
routeBasePath: 'blog',
blogTitle: 'My Dev.to Blog',
blogDescription: 'A collection of my dev.to articles',
blogSidebarCount: 'ALL',
blogSidebarTitle: 'All Blog Posts',
showReadingTime: true,
editUrl: 'https://github.com/yourusername/your-repo/edit/main/website/',
},
},
],
],
// ... other config options
};
This configuration sets up the blog plugin to use the blog directory and display all posts in the sidebar[1][3].
Remember to customize the editUrl and other options according to your project structure and preferences. With this setup, your dev.to articles will be seamlessly integrated into your Docusaurus blog.
Citations:
[1] https://docusaurus.io/docs/blog
[2] https://dev.to/dreamlogic/how-to-use-the-multi-blog-plugin-for-docusaurus-32a2
[3] https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-blog
[4] https://dev.to/tuenguyen2911_67/inspired-by-docusaurus-2cm6
[5] https://dev.to/dianaiminza/documentation-using-docusaurus-40g5
[6] https://dev.to/seanyasno/starting-a-new-blogging-journey-with-docusaurus-3aap
[7] https://dev.to/lo_victoria2666/build-beautiful-documentation-websites-with-docusaurus-8o2
[8] https://dev.to/katiel/exploring-the-code-behind-docusaurus-pbk
Top comments (0)