ブログ記事投稿ワークフロー

Others
スポンサーリンク

CayTech Lab（caymezon.com）への記事投稿手順書

スポンサーリンク

📋 概要

このドキュメントは、Markdownで記事を作成してから本番環境に公開し、Googleにインデックスさせるまでの完全な手順を記載しています。

📁 リポジトリのフォルダ構成

C:\my-blog\caytech-blog-repo\
├── .github/
│   └── workflows/
│       └── publish-to-wordpress.yml   # GitHub Actions設定（将来）
│
├── posts/                             # 記事フォルダ
│   ├── vscode-aws-ec2-guide/
│   │   ├── post.md                    # 記事本体（Front Matter含む）
│   │   ├── featured.jpg               # アイキャッチ画像
│   │   ├── images/                    # 記事内画像
│   │   │   ├── 01-ec2-dashboard.png
│   │   │   └── 02-vscode-settings.png
│   │   └── assets/                    # 記事専用JS/CSS（必要なら）
│   │       └── command-generator.js
│   │
│   └── aws-lambda-tutorial/
│       ├── post.md
│       ├── featured.jpg
│       └── images/
│
├── scripts/                           # 自動化スクリプト（将来）
│   ├── publish-post.js
│   └── upload-images.js
│
├── shared/                            # 複数記事で共有するアセット
│   ├── css/
│   └── js/
│
├── templates/                         # テンプレート
│   └── post-template.md
│
├── README.md
└── blog-publishing-workflow.md        # この手順書

記事ごとに独立したフォルダで管理することで：

  • 関連ファイルを一箇所に集約
  • 削除・移動が簡単
  • 将来のGitHub Actions自動化に最適

1️⃣ GitHubリポジトリの初回作成（最初の1回のみ）

GitHubでリポジトリ作成

  1. GitHub（https://github.com）にログイン
  2. 右上の「+」→「New repository」
  3. 設定：
    • Repository name: caytech-blog-repo
    • Description: CayTech Lab ブログ記事のMarkdownソース
    • Public または Private（お好みで）
    • README は追加しない
  4. 「Create repository」をクリック

ローカルでGit初期化

コマンドプロンプトまたはPowerShell：

# ディレクトリ移動
cd C:\my-blog\caytech-blog-repo

# Git初期化
git init

# 最初のファイルをステージング
git add .

# 初回コミット
git commit -m "Initial commit"

# リモートリポジトリを追加
git remote add origin https://github.com/cayenne314-sys/caytech-blog-repo.git

# ブランチ名を main に変更
git branch -M main

# プッシュ
git push -u origin main

2️⃣ 記事作成・編集フロー

新規記事の作成

  1. VSCodeで C:\my-blog\caytech-blog-repo を開く
  2. 記事用フォルダを作成
    posts/記事のスラッグ名/
    • 例：posts/aws-lambda-tutorial/
    • スラッグ名 = URL末尾になる部分（英数字・ハイフンのみ）
  3. 必要なファイルを作成
    posts/aws-lambda-tutorial/
├── post.md           # 記事本体
├── featured.jpg      # アイキャッチ画像（後で追加）
└── images/           # 記事内画像フォルダ（後で追加）
  4. post.md でMarkdown記事を執筆

MDファイルの構成（Front Matter使用）

posts/記事名/post.md のテンプレート：

---
title: "【カテゴリ】記事タイトル"
slug: 記事のスラッグ名
category: Cloud & Infra
tags: [AWS, Lambda, Python]
featured_image: featured.jpg
status: publish
date: 2026-01-10
---

## 1. はじめに

本文開始...

### サブセクション

内容...

## 2. 次のセクション

...

Front Matter 各項目の説明：

項目説明例
title記事タイトル"【初心者向け】AWS Lambda入門"
slugURL用スラッグaws-lambda-tutorial
categoryカテゴリーCloud & Infra, Development, Tech Tips, Automation
tagsタグ（配列）[AWS, Lambda, Python]
featured_imageアイキャッチ画像ファイル名featured.jpg
status公開状態publish, draft, private
date公開日2026-01-10

本文の書き方：

  • H1（#）は Front Matter の title を使用するため不要
  • 本文は H2（##）から開始
  • コードブロックには言語指定（bash, javascript など）
  • 行間調整が必要な箇所は   を使用

画像の配置

記事内画像：

posts/記事名/images/
├── 01-screenshot.png     # 番号で順序管理
├── 02-diagram.png
└── 03-result.png

Markdown内での参照：

![スクリーンショット](images/01-screenshot.png)

アイキャッチ画像：

posts/記事名/featured.jpg
  • サイズ推奨：1200×630px（OGP対応）
  • フォーマット：JPG または PNG

3️⃣ GitHubへのコミット・プッシュ

変更を確認

# ディレクトリ移動
cd C:\my-blog\caytech-blog-repo

# 変更されたファイルを確認
git status

# 差分を確認（任意）
git diff posts/記事名/post.md

ステージング・コミット・プッシュ

新規記事の場合（フォルダごと追加）：

# 記事フォルダ全体をステージング
git add posts/記事名/

# コミット
git commit -m "記事を追加: AWS Lambda入門ガイド"

# GitHubへプッシュ
git push origin main

既存記事を更新した場合：

# 変更したファイルのみステージング
git add posts/記事名/post.md

# または、画像も追加した場合
git add posts/記事名/

# コミット
git commit -m "記事を更新: AWS Lambda環境変数の説明を追加"

# プッシュ
git push origin main

すべての変更をまとめて追加：

git add .
git commit -m "複数記事を更新"
git push origin main

コミットメッセージの例

記事追加：

  • "記事を追加: AWS Lambda入門ガイド"
  • "新規投稿: VSCodeでPython開発環境構築"

記事更新：

  • "記事を更新: vscode-aws-ec2-guide - 誤字を修正"
  • "画像を追加: aws-lambda-tutorial - アーキテクチャ図"
  • "コードブロックの説明を追加: github-actions-cicd"

その他：

  • "アイキャッチ画像を更新"
  • "Front Matterのタグを追加"
  • "手順書を更新: blog-publishing-workflow.md"

4️⃣ 本番WordPressへの投稿

ログイン

本番WordPress管理画面：

https://caymezon.com/wp-admin

新規投稿作成

  1. 投稿 → 新規追加
  2. Enable Markdown を ON（右サイドバー）

タイトルと本文の設定

タイトル欄：

  • Front Matterの title をコピー
  • 例：【初心者向け】VSCodeとAWS CLIで始める！AWS EC2環境構築とGit連携の完全ガイド

本文エディタ：

  • post.md の Front Matter部分（--- で囲まれた部分）を除外
  • ## 1. 以降（最初のH2から）をコピペ

例：```markdown

title: "記事タイトル"...

← ここまでは除外

1. はじめに ← ここからコピー

...


### カテゴリー・タグ設定

**カテゴリー：**
- Front Matterの `category` に基づいて選択
  - `Automation`
  - `Cloud & Infra`
  - `Development`
  - `Tech Tips`

**タグ：**
- Front Matterの `tags` に基づいて追加
- 例：`[AWS, EC2, VSCode, GitHub]` → それぞれをタグとして追加

### アイキャッチ画像の設定

1. **投稿画面右サイドバー → アイキャッチ画像 → アイキャッチ画像を設定**
2. **メディアライブラリにアップロード**
   - `posts/記事名/featured.jpg` をアップロード
3. **選択して設定**

### 記事内画像の処理

**画像が記事内にある場合：**

1. **メディアライブラリに画像をアップロード**
   - `posts/記事名/images/` 内の画像を順にアップロード
2. **アップロードした画像のURLをコピー**
3. **Markdown内の画像パスを置き換え**

**例：**
```markdown
# 元のMarkdown
![スクリーンショット](images/01-screenshot.png)

# WordPress用に変更
![スクリーンショット](https://caymezon.com/wp-content/uploads/2026/01/01-screenshot.png)

将来の自動化実装後： 画像は自動アップロード・パス置換されます

パーマリンク設定

投稿設定 → パーマリンク：

  • Front Matterの slug と同じにする
  • 例：vscode-aws-ec2-guide

プレビュー確認

「プレビュー」ボタンをクリック：

  • コードブロックの表示
  • 画像の表示
  • リンク
  • レイアウト
  • アイキャッチ画像

公開

問題なければ「公開」ボタンをクリック

5️⃣ Googleインデックス登録

Google Search Console にアクセス

URL：

https://search.google.com/search-console

サイトマップの確認（初回のみ）

  1. 左メニュー → サイトマップ
  2. 登録済みサイトマップを確認
  3. 未登録の場合：
    • 「新しいサイトマップの追加」
    • 入力欄に sitemap.xml または sitemap_index.xml
    • 「送信」をクリック

確認方法：

https://caymezon.com/sitemap.xml

ブラウザでアクセスして、XMLファイルが表示されればOK

個別記事のインデックス登録

  1. 左メニュー → URL検査
  2. 上部の検索バーに公開した記事のURLを入力
    https://caymezon.com/記事のスラッグ/
  3. 「インデックス登録をリクエスト」をクリック
  4. 1-2分待機
  5. 「インデックス登録をリクエスト済み」と表示されればOK

インデックス確認（数日後）

Google検索で確認：

site:caymezon.com 記事のキーワード

または

site:caymezon.com/記事のスラッグ/

通常 1〜3日でインデックスされます。

6️⃣ 記事の更新フロー

MDファイルを修正

  1. VSCodeで該当の post.md を編集
    • 例：posts/vscode-aws-ec2-guide/post.md
  2. Ctrl+S で保存
  3. 必要に応じてFront Matterも更新
    • タグ追加
    • 日付更新など

画像を追加する場合

  1. posts/記事名/images/ に画像ファイルを追加
  2. 番号付きファイル名推奨
    • 例：03-new-screenshot.png
  3. Markdown内で参照
    ![新しいスクリーンショット](images/03-new-screenshot.png)

GitHubにコミット

cd C:\my-blog\caytech-blog-repo

git add posts/記事名/
git commit -m "記事を更新: セキュリティグループの説明を追加"
git push origin main

WordPress本番を更新

  1. WordPress管理画面 → 投稿一覧
  2. 該当記事を編集
  3. 変更箇所を再度コピペ
    • Front Matter除外
    • 新しい画像があればメディアライブラリにアップロード
  4. 「更新」をクリック

Search Consoleで再リクエスト

URL検査 → インデックス登録をリクエスト
（Googleに更新を通知）

🔧 よくあるトラブルと対処

Git関連

エラー：「changes not staged」

git add .
git commit -m "変更内容"
git push origin main

エラー：「rejected」（リモートが新しい）

git pull origin main
git push origin main

WordPress表示関連

コードブロックの引用符が変換される

  • functions.php に以下が追加されているか確認：
add_filter('the_content', function($content) {
    return html_entity_decode($content, ENT_QUOTES, 'UTF-8');
}, 999);

行間が詰まる

  • MDファイルで   を挿入

画像が表示されない

  • WordPressメディアライブラリに手動アップロード
  • 記事内で画像URLを修正

📊 チェックリスト

記事作成時

  • 記事フォルダを作成（posts/記事名/）
  • post.md にFront Matterを記載
  • 本文を執筆（H2から開始）
  • 誤字・脱字確認
  • コードブロックの動作確認
  • 画像を配置（images/フォルダ）
  • アイキャッチ画像を用意（featured.jpg）

Git操作

  • git status で変更確認
  • git add posts/記事名/ でステージング
  • わかりやすいコミットメッセージ
  • git push origin main でプッシュ
  • GitHubで反映確認

WordPress投稿時

  • Enable Markdown を ON
  • タイトル設定（Front Matterから）
  • 本文貼り付け（Front Matter除外、H2以降）
  • カテゴリー選択（Front Matterに基づく）
  • タグ追加（Front Matterに基づく）
  • アイキャッチ画像をアップロード・設定
  • 記事内画像をメディアライブラリにアップロード
  • 画像パスをWordPress URLに置換
  • パーマリンク設定（Front Matterの slug）
  • プレビュー確認
  • 公開

公開後

  • Search Console でインデックス登録リクエスト
  • 記事URLが正しくアクセスできるか確認
  • アイキャッチ画像が表示されるか確認
  • SNSでシェア（必要に応じて）
  • 数日後にGoogle検索で確認

🚀 将来的な自動化（GitHub Actions）

現在は手動運用ですが、以下の自動化を実装予定：

自動化の概要

GitHubにプッシュ → WordPress自動投稿

  1. 記事フォルダ内の post.md を検知
  2. Front Matterからメタデータを抽出
  3. 画像を自動アップロード
  4. Markdown内の画像パスをWordPress URLに自動置換
  5. WordPress REST API経由で自動投稿

実装後のワークフロー

# 1. 記事を執筆
vim posts/new-article/post.md

# 2. GitHubにプッシュ
git add posts/new-article/
git commit -m "記事を追加: 新しい記事"
git push origin main

# 3. 自動的にWordPressに投稿される（GitHub Actions）
# 4. Search Consoleへのインデックス登録も自動化可能

自動化のメリット

  • ✅ 手動コピペ作業が不要
  • ✅ 画像アップロード・パス置換が自動
  • ✅ Front Matterで一元管理
  • ✅ 記事更新も自動反映
  • ✅ 下書き・予約投稿にも対応

必要な準備

  1. WordPress Application Passwordの取得
  2. GitHub Secretsへの登録
    • WP_URL
    • WP_USER
    • WP_APP_PASSWORD
  3. Node.js投稿スクリプトの作成
  4. GitHub Actions ワークフローの設定

詳細な実装手順は、実装時に別途作成します。

📝 記事テンプレート

templates/post-template.md として保存しておくと便利です。

---
title: "【カテゴリ名】記事のタイトル"
slug: article-slug-name
category: Cloud & Infra
tags: [AWS, Python, VSCode]
featured_image: featured.jpg
status: publish
date: 2026-01-10
---

## 1. はじめに

この記事では、○○について解説します。

### 対象読者

- ○○に興味がある方
- ○○を始めたい方

### 前提条件

- ✅ ○○がインストール済み
- ✅ ○○の基本的な知識

 

## 2. ○○の準備

手順を説明します。

### ステップ1

説明...

コマンド例

## 3. まとめ

この記事では、以下について解説しました：

- ポイント1
- ポイント2
- ポイント3

---

**最終更新：** 2026-01-10

📚 参考リンク

最終更新： 2026年1月10日

Others
WordPress生産性向上
スポンサーリンク
スポンサーリンク
caymezon
スポンサーリンク

コメント