Zenn
🔩

MovableType.net入門①ウェブサイト立ち上げからGitHub連携まで

2024/10/16に公開
Movable Type
movabletypenet
tech

記事の前提

国産CMSの中でも官公庁・教育機関での高いシェア率を誇るMovableTypeですが、そのSaaS版MovableType.netが2024年6月に発表した新機能『かんたんデザイン編集』を使えるようになることを目標に、初手のセットアップからまとめた記事となります。
ブラウザ上でもサイトデザインから記事執筆までのすべてを完結できますが、一方でVSCodeなどのエディタほどの利便性はないため、今回はセットアップ時点でGitHub連携を済ませる前提です。

本題

1. ウェブサイト立ち上げ

  1. ダッシュボード https://movabletype.net/dashboard にアクセスし、新しくウェブサイトを作成を選びます。
  2. ウェブサイトを作成ページ https://movabletype.net/sites/new で以下を入力します。
    • ドメイン（ユニークである必要があり、後から別途ドメインマッピングができます）
    • 名前
    • 日付の言語
    • タイムゾーン
    • テーマ

テーマは2024年10月現在、公式から25種類のテーマが提供されています。
https://theme.movabletype.net/
テーマを使用せずに、ゼロから始めたい場合はBlankを選択します。
今回は新機能「かんたんデザイン編集」を試したかったためFusion Corporateを選びました。

  • 後からテーマを変更したい場合は、「メニュー＞デザイン＞テーマ」で適用が可能です。
  • 後述のGitHub連携を使用する場合、「テーマ」ページ右上にある「書き出す」ボタンから現在適用されているテーマのエクスポートが可能です。
    • エクスポートしたものを適切なフォルダに格納し、commitとpushを行います。

2. GitHub連携

https://movabletype.net/support/design/GitHub.html

  1. GitHubであらかじめ使用するレポジトリを用意しておきます。
  2. 先ほど作成したウェブサイトの管理画面に入り、「デザイン＞GitHub連携」を選択します。
  3. デザインの自動反映を「有効」にして、「変更を保存」します。
  4. 新たに表示される「レポジトリ」から「レポジトリを選択」します。
    • GitHubの連携画面が開くので、内容を確認の上「Authorize」します。
  5. Movabletype.net画面に戻るので、表示されるレポジトリ候補の中から使用するレポジトリを選択します。
  6. 設定完了通知が出たら、再度「変更を保存」します。

3. ステージング環境の GitHub 連携（スタンダードプラン以上）

https://movabletype.net/support/design/staging-github.html

  1. ステージング環境がない場合はステージングの作成から始めます。
    • 管理画面サイドバーから「ステージング＞新規」を選びます。
    • URL・ラベルを入力し、対象を選択（今回はURLにdevelopと入力・全選択）し、「作成」をクリックします。
  2. GitHubに移動し、staging--[URL]（今回はdevelopと入力したのでstaging--develop）という名前のブランチを作成します。
    • 常にプレフィックスとしてstaging--がつくので注意してください。

設定が完了すれば、あとは通常の感覚でGitHubの対象ブランチにコミットした内容がステージング環境に反映されます。

ステージング環境から本番環境への反映

注意事項

ステージング環境はスタンダードプランで1つ、プロプラン以上で2つ（＋各下層ブログにつき1つ）までしか作成できないため要注意です。
https://movabletype.net/blog/2024/05/staging.html

4. GitHub連携：Webサイトとその配下のブログをまとめて管理する方法

https://movabletype.net/blog/2014/12/github.html
上記公式ブログを参考に、一度サンプルファイルをダウンロードして階層構造を確認するのが良いと思います。

  1. （MT.net上で実行）Webサイト作成後にブログを作成します。
    • ブログの名称は「ブログ」、識別子は「blog」としておきます（その他項目は自由です）。
    • テーマを使用する場合はブログ作成後に、メニュー＞デザイン＞テーマからテーマの書き出し（エクスポート）を行っておきます。
  2. （GitHubレポジトリ上で実行）以下のような状態とし、commitとpushを行い、MT.net上に反映させます。
.
├── _theme
│   ├── blog_static
│   ├── templates
│   └── theme.yaml
└── blog
    └── _theme
        ├── blog_static
        ├── templates
        └── theme.yaml

最後に

続く記事をこちらに公開しました。
https://zenn.dev/morit4ryo/articles/22546135b5b009
まだまだ学習しながらのまとめのため、誤読などもあるかもしれません。
ぜひコメント頂けると嬉しいです！

Discussion