Marp to Netlify sample

Markdown で作ったスライドを
Marp を使って HTML に変換して
Netlify にデプロイしてみる

@saka_it

リソース

このスライドも含めた作成物は、
下記の Github リポジトリに格納しています

https://github.com/SakaITa/MarpToNetlifySample

前提

  • npm コマンドが使用できること
    • Node.js をインストールしておいてください
  • Github が使えること
  • Netlify のアカウントがあること

手順

  1. スライドを作る
  2. package.json を作る
  3. Github にプッシュする
  4. Netlify を設定する

スライドを作る

  • フォルダ構成を下記のようにしておきます
├ images/
│  └ <画像ファイルを入れる>
└ index.md
  • 後は通常通りに作るだけです
  • ちなみに、mdファイルを複数入れて、
    複数スライドを作成することも可能です

package.json を作る(1)

  • 下記コマンドを実行して、package.json を作成します
    • 途中パッケージ名などを求められますが、
      すべてデフォルトでも問題ないです
npm init
  • 続けて、ビルドに必要なライブラリをインストールします
npm install @marp-team/marp-cli
npm install cpx

package.json を作る(2)

  • package.json を開き、scripts にコマンドを追加します
    • コマンドは下記のことをしています
      • Marp を使って、HTML を出力
      • 出力ディレクトリに images ディレクトリの中身をコピー
  "scripts": {
    "build": "marp -I . -o dist && cpx 'images/**' dist/images"
  },

Github にプッシュする

  • Github にリポジトリを作ってプッシュします
  • gitignore は、node.js を流用するか、下記をコピーしてください
# 必要最低限なので、適宜追記してください
dist
node_modules/

Netlify を設定する

  • Netlify の Team overview を開き、「New site from git」を選択します
  • 画面の指示通り、GitHub との連携、リポジトリの選択をします
  • Basic build settings は、下記のように設定してください
    • 「Build command」に、「npm run build」を入れます
    • 「Publish directory」に、「dist」を入れます
  • 設定が終わったら、ビルドが始まるので完了まで待ちます

完成

  • 作成した Web サイトにアクセスすると
    ビルドされたスライドが表示されます

参考資料