メインコンテンツへスキップ
← ブログ一覧に戻る
2025-04-14
Devinブログ運営ReactRender.com自動デプロイ

Devin でブログ運営のススメ

Author: Yutaro Iwamoto

はじめに

この記事では、AIアシスタント「Devin」を活用したブログ運営の効率化と、Reactを使ったサイト構築、Render.comでの静的ホスティング、そしてGitHubと連携した自動デプロイの設定方法について解説します。

Devinとは

Devinは、Cognition社が開発した世界初のAIソフトウェアエンジニアです。コードの作成、デバッグ、デプロイなど、ソフトウェア開発の全工程をサポートする能力を持っています。

Devinの特徴：

  • 複雑なソフトウェアプロジェクトの理解と実装
  • リポジトリを読み込んで、プロジェクトの理解可能
  • Slack を経由した自然言語での業務指示

Reactでブログサイトを構築する

Next.jsを使ったブログサイトの構築

Next.jsはReactベースのフレームワークで、静的サイト生成（SSG）や静的サイト再生成（ISR）などの機能を提供し、ブログサイトの構築に最適です。

1# Next.jsプロジェクトの作成
2npx create-next-app@latest my-blog
3cd my-blog
4
5# 必要なパッケージのインストール
6npm install gray-matter remark remark-html

ブログ記事のマークダウン管理

ブログ記事はマークダウン形式で管理すると、執筆と管理が容易になります。

dogyearm/peanuts リポジトリの実装を参考に、マークダウン管理に便利なパッケージを紹介します：

  • gray-matter: マークダウンファイルのフロントマター（メタデータ）を解析
  • react-markdown: Reactでマークダウンをレンダリング
  • remark-gfm: GitHub Flavored Markdownのサポート
  • rehype-raw: HTML要素の処理
  • rehype-sanitize: セキュリティのためのHTMLサニタイズ
  • rehype-highlight: コードブロックのシンタックスハイライト
  • highlight.js: コードのハイライト表示
1// src/utils/markdown.ts
2import fs from 'fs';
3import path from 'path';
4import matter from 'gray-matter';
5
6const contentDirectory = path.join(process.cwd(), 'src/content/blog');
7
8export function getAllPosts() {
9  const files = fs.readdirSync(contentDirectory);
10  
11  const postFiles = files.filter(file => file.endsWith('.mdx') || file.endsWith('.md'));
12  
13  return postFiles.map(file => {
14    const filePath = path.join(contentDirectory, file);
15    const fileContent = fs.readFileSync(filePath, 'utf8');
16    const { data, content } = matter(fileContent);
17    
18    return {
19      id: file.replace(/\.(mdx|md)$/, ''),
20      title: data.title,
21      date: data.date,
22      author: data.author,
23      summary: data.summary,
24      tags: data.tags || [],
25      content,
26    };
27  });
28}

Devinを活用したブログ記事作成

Devinは、ブログ記事の作成から編集、最適化までをサポートします。以下に、Devinを活用したブログ記事作成のワークフローを紹介します。

1. 記事のアイデア出し

Devinに記事のテーマや目的を伝え、アイデアやアウトラインの提案を受けることができます。

1Devinへの指示例：
2「Reactの最新機能について技術ブログ記事を書きたいです。主要なポイントと実装例を含めたアウトラインを提案してください。」

2. 記事の執筆

アウトラインをもとに、Devinに記事の執筆を依頼できます。技術的な正確さと読みやすさを両立した記事を作成してくれます。

1Devinへの指示例：
2「先ほどのアウトラインに基づいて、React Hooksの使い方に関する記事を書いてください。コード例も含めてください。」

3. 記事の編集と最適化

執筆された記事の編集や最適化もDevinに依頼できます。

1Devinへの指示例：
2「この記事をSEO観点で最適化してください。また、技術的な説明をもう少し詳しくしてください。」

4. マークダウンファイルの作成

Devinは完成した記事をマークダウン形式で出力し、必要なメタデータ（タイトル、日付、タグなど）も含めることができます。

1---
2title: "React Hooksの完全ガイド"
3date: "2025-04-14"
4author: "Yutaro Iwamoto"
5summary: "React Hooksの基本から応用まで、実践的なコード例とともに解説します。"
6tags: ["React", "Hooks", "JavaScript", "フロントエンド"]
7---
8
9# React Hooksの完全ガイド
10
11## はじめに
12...

Render.comでの静的ホスティング設定

Render.comは、静的サイトを無料でホスティングできるサービスです。以下に、Next.jsで構築したブログサイトをRender.comにデプロイする手順を説明します。

1. Render.comアカウントの作成

まず、Render.comにアクセスし、アカウントを作成します。GitHubアカウントでのサインアップが便利です。

2. 静的サイトの設定

  1. Renderダッシュボードから「New +」→「Static Site」を選択
  2. GitHubリポジトリを連携
  3. 以下の設定を行います：
    • Name: ブログサイトの名前（例：my-tech-blog）
    • Branch: main（または使用しているブランチ）
    • Build Command: npm run build && npm run export（Next.jsの場合）
    • Publish Directory: out（Next.jsの場合）

3. 環境変数の設定

必要に応じて、環境変数を設定します。Renderダッシュボードの「Environment」タブから追加できます。

4. カスタムドメインの設定（オプション）

  1. Renderダッシュボードの「Settings」→「Custom Domain」を選択
  2. 所有しているドメインを追加
  3. DNSレコードを設定（Renderが提供する指示に従ってください）

GitHubと連携した自動デプロイの設定

GitHubリポジトリとRender.comを連携することで、PRがマージされるたびに自動的にサイトがデプロイされるようになります。

1. GitHubリポジトリの設定

  1. ブログサイトのコードをGitHubリポジトリにプッシュ
  2. ブランチ保護ルールを設定（オプション）：
    • リポジトリの「Settings」→「Branches」→「Branch protection rules」
    • 「main」ブランチに対してレビュー必須などのルールを設定

2. Render.comの自動デプロイ設定

Render.comは、GitHubリポジトリと連携すると、デフォルトで以下のイベントで自動デプロイを行います：

  1. 指定したブランチ（通常はmain）へのプッシュ
  2. PRのマージ

これにより、以下のワークフローが実現できます：

  1. 新しい記事用のブランチを作成
  2. 記事を執筆（Devinを活用）
  3. PRを作成
  4. レビュー後、PRをマージ
  5. 自動的にサイトがデプロイされる

3. デプロイステータスの確認

Renderダッシュボードの「Deploys」タブから、デプロイのステータスと履歴を確認できます。また、GitHubのPRページでもデプロイステータスが表示されます。

実際の活用例：技術メモからブログ記事へ

私自身の実践例として、新しい機能の開発や技術調査が終わった際に、Devinにメモを共有してブログ記事化してもらうというワークフローを採用しています。

例えば、以下のような流れで効率的にブログ記事を作成できます：

  1. 開発や調査中に気づいた点や重要なポイントをメモに残す
  2. 作業完了後、そのメモをDevinに共有する
  3. 「このメモを元にブログ記事を作成してください」と指示する
  4. Devinが構造化された読みやすいブログ記事を生成
  5. 必要に応じて微調整を加え、公開する

Devinへの指示例

このアプローチにより、技術的な知見を失うことなく、効率的に質の高いブログコンテンツを継続的に発信することができます。

まとめ

Devinを活用したブログ運営は、以下のメリットがあります：

  1. 記事作成の効率化：Devinが記事の執筆から編集までサポート
  2. 技術的な正確さ：最新の技術情報を正確に記事に反映
  3. 一貫した品質：高品質な記事を継続的に発信可能
  4. ワークフローの自動化：GitHubとRender.comの連携による自動デプロイ
  5. 技術メモの活用：開発中のメモを有益なブログコンテンツに変換

Reactでのサイト構築、Render.comでの静的ホスティング、そしてGitHubと連携した自動デプロイを組み合わせることで、効率的かつ持続可能なブログ運営が実現できます。

Devinのような高度なAIアシスタントを活用することで、ブログ運営の負担を大幅に軽減しながら、質の高いコンテンツを継続的に発信することが可能になります。ぜひ、あなたのブログ運営にDevinを取り入れてみてください。Devinの招待コードはこちらです：https://app.devin.ai/invite/9z2uG1kDGZ0tSnSe

普段のブログ運営の参考になればと思います！