Dev.to docusaurus 블로그에 게시(자동화 nodejs)

안녕하세요 개발자 커뮤니티!
오늘은 dev.to 기사를 Docusaurus 블로그로 변환하는 방법에 대한 프로그래밍 방식의 예를 제공하겠습니다. 이 예에서는 Node.js를 사용하여 dev.to API에서 기사를 가져오고 Docusaurus 블로그 게시물과 호환되는 Markdown 파일을 만듭니다.

먼저 프로젝트를 설정하고 필요한 종속성을 설치해 보겠습니다.

mkdir devto-to-docusaurus
cd devto-to-docusaurus
npm init -y
npm install axios fs-extra front-matter

이제, Convert.js라는 파일을 만들고 다음 코드를 추가하세요.

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();

이 스크립트의 작동 방식은 다음과 같습니다.

1. API를 사용하여 dev.to에서 게시된 기사를 가져옵니다.
2. 각 기사에 대해 메타데이터를 Docusaurus와 호환되는 머리말로 변환합니다.
3. 머리말과 기사의 마크다운 내용을 결합합니다.
4. 각 기사를 블로그 디렉토리에 별도의 마크다운 파일로 저장합니다.

이 스크립트를 사용하려면:

1. YOUR_DEV_TO_API_KEY를 실제 dev.to API 키로 바꾸세요[1].
2. YOUR_DEV_TO_USERNAME을 dev.to 사용자 이름으로 바꾸세요.
3. node Convert.js를 사용하여 스크립트를 실행합니다.

스크립트를 실행하면 블로그 디렉토리[1][3]에서 Docusaurus 호환 블로그 게시물로 변환된 dev.to 기사를 찾을 수 있습니다.

이 게시물을 Docusaurus 사이트에 통합하려면:

1. 생성된 마크다운 파일을 블로그 디렉터리에서 Docusaurus 프로젝트의 블로그 디렉터리로 복사하세요.
2. docusaurus.config.js 파일에 블로그 플러그인이 올바르게 구성되어 있는지 확인하세요[1][3].

다음은 docusaurus.config.js의 모습에 대한 예입니다.

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
};

이 구성은 블로그 디렉토리를 사용하고 사이드바에 모든 게시물을 표시하도록 블로그 플러그인을 설정합니다[1][3].

프로젝트 구조와 기본 설정에 따라 editUrl 및 기타 옵션을 맞춤설정하는 것을 잊지 마세요. 이 설정을 사용하면 dev.to 기사가 Docusaurus 블로그에 원활하게 통합됩니다.

인용:
[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

위 내용은 Dev.to docusaurus 블로그에 게시(자동화 nodejs)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!