個人ブログを Zenn に移行しました
ことの経緯
前職のお仕事で使っていたテスト用ドメインをうっかり契約更新してしまったため、せっかくなら と思い、HubSpot ブログで個人ブログを運営していました。（2024 年夏ごろから？）
HubSpot CMS のカスタムモジュールやテンプレート制作という面では、勉強になる一方
- お名前ドットコムのサービス維持調整費問題
（値段としては大したことないんですけど、ケアするのがめんどうになってきた）
とか
- 作りこんだテーマのメンテナンスがちょっとめんどくさいな…
とか
- シンプルにHubSpotのエディター画面でブログを書くのがめんどう…
（目的が違う と言われそうだが、HubSpot CLI で記事書けるようにしろ！CMS API でブログ記事が投稿できるではないか👇 と言えるけど、なんかそうじゃないんだよな… ）
とか、思うところもあったので、「記事」という形は Zenn で出せばいいかあ という思いに至りました。
移行方法
以下の記事を参考にし、Markdown にすればいいのか～と安易に考え、、
HubSpot 内のブログ記事については、エクスポート機能で HTML ファイルを取得しました
ただ、ここで微妙な問題が…
カスタムモジュールで埋め込んだ部分は、{% module %} とかの hubl のタグがめちゃくちゃ残っている状態でエクスポートされていました 😿 （まあ、それはそうかあ…）
結局、手作業で色々と直すことにはなるのですが、AI でいくらか作業を軽減してもらうべく HTML -> markdown の変換は Copilot ※ にお願いしました
※ Microsoft 365 のサブスクリプションに付随している Copilot Chat くんを利用しました
Markdown への変換が終われば、Zenn の Github 連携を使ってローカルから公開を進めていくのみです🚀
// 参考になる記事
Copilot のプロンプト例
ちょいちょい指示を忘れていましたが、おおむね変換はできていました
あなたはブログ記事の整形アシスタントです。以下のルールで、与えたHTMLをMarkdownに変換したうえで、mdファイルを出力してください。**重要：本文の日本語は一切意図的に書き換えない／要約しない**こと。
【出力形式】
- 先頭に Front Matter を付ける（必要なら）
- 例（以下はあくまで例です。内容は記事のコンテンツに合わせて作成してください）:
---
title: "<元記事のタイトルをそのまま>"
emoji: "📝"
type: "tech"
topics: [HubSpot, Teams]
published: true
published_at: <元記事の日付があればそのまま>
---
- 以降は Markdown 本文（見出しは原文タイトル・見出しを尊重し、過度な再構成はしない）
【変換ルール（厳守）】
1) 本文テキスト
- 原文の日本語を**そのまま**使用。言い回し・語尾・絵文字・改行なども極力保持。
- 体裁上の連続空白や意味のないタグは適宜削除可（意味が変わる改変は禁止）。
2) HubSpot特有のタグ（削除対象）
- `{% module_block %}`, `{% module_attribute %}`, `{% raw %}{% endraw %}` は**全削除**。
- ただし、その内部にある **フィールド値や `code_snippet`** はコンテンツ扱いとして**取り出し・再配置**する。
3) コード化（重要）
- `code_snippet` の中身は**言語に応じたコードブロック**にする：
- JavaScript/JS → ```js
- JSX/React → ```jsx
- HTML/HubL → ```html
- CSS → ```css
- Bash/CLI → ```bash
- YAML → ```yaml
- GraphQL → ```graphql
- 行番号・ハイライト指定は不要（内容のみ）。
- インラインのコードは `` で囲う。
4) 画像の扱い
- **ChatGPT Image** など **実ファイル名が分かる画像**は、**(1) を含めたファイル名のまま** URL エンコードして埋め込み：
- 例：`ChatGPT Image 2025年4月12日 22_24_27 (1).png`
- 埋め込みは `!ChatGPT Image`
- CDN のベースURLは次を使用：
`https://23823306.fs1.hubspotusercontent-na1.net/hubfs/23823306/AI-Generated%20Media/Images/`
- **画像プレースホルダ**（例：`sns-share 01`, `teams-hubspot_13 (1)` など、URL不明のテキストのみ）は**Markdown画像タグでaltのみ**残す（**B方式**）：
- 例：`!sns-share 01` / `!teams-hubspot_13 (1)`
- 既知でない画像URLの**勝手な推測生成は禁止**。
5) リンク
- 原文にある外部リンクは**そのまま**のURLを保持。
- 不完全なURLの推測生成は禁止。
6) 見出し・段落・テーブル
- 原文構成を尊重。見出しは `#`, `##`, `###` のいずれかにマッピング。
- 原文の箇条書きは `-` か `1.` を使用しMarkdown化。
- テーブルはMarkdownテーブルに変換（コードはテーブル内に書かない）。
7) 注意
- **勝手な注釈・解説・追加文**は基本禁止。原文にある説明・注記の体裁だけ整える。
- 日付・数値は**原文の値**を使用。推測による更新は禁止。
【出力チェック】
- すべての `{% ... %}` ブロックが除去されているか
- `code_snippet` が適切なコードブロック言語で出力されているか
- 画像（ChatGPT Image）のURLは (1) を残したファイル名でエンコードされているか
- 画像プレースホルダが `!alt` 形式で残っているか
- 原文の本文が改変されていないか（ニュアンス・意味の変更なし）
【最終出力】
- 完成した Markdown 全文のみを出力。余計な説明文は不要。
あとやらないといけないこと
地味に残ってますね…ぼちぼちと対応します🐈
リンク遷移を直す- ドメイン更新しない
- HubSpotページのドメインを既定の？（なんていうんだっけ、、）カスタムじゃないやつにする
Discussion