HuckMDとGithubの連携、それからNetlifyでの自動デプロイ

このブログは、

  1. 記事をMarkdown形式で書いて保存する。
  2. GitのコマンドをつかってGitHubに上げる。
  3. NetlifyがGithubにファイルがあがったのを検知し、Hugoでhtmlに変換して公開する。

という手順でつくられている。

1.2.は手動だが、3.はすべて全自動で行われる。

ところで、8月6日にHuckMDはGitHubとの同期ができるようになった1

これを活用すると、HuckMDで記事を作成したら、公開まで自動的に行われるということになるし、すでに公開した記事の加筆修正もHuckMD上で行うことができる、ということだ。

つまり、ブログの更新がブラウザだけで完結する。

さっそくHow to Sync with GitHub - HackMDを参照して試してみた(=この記事)ので、その手順と感想をメモしたい。

TL;DR この記事の要点

  • HuckMDとGitHubの連携はスムーズにできる。英語だけど、迷うことはないのでは?
  • 記事の作成や編集をHuckMD上で行うことができるようになる。
  • HuckMDで記事を作成した場合、archeTypesで設定されたfront matterは反映されないので、手動で記述する必要がある。

用語説明

Markdown

ジョン・グルーバー(John Gruber)によって2004年にDaring Fireballに発表された文書の書き方で、

  • 文章の構造を表せる。
  • ルールが簡単。
  • 文書を作成するのに、特別なソフトがいらない

といった特徴がある。

上の文書をmarkdown記法で記述すると、こんな感じになる。


**ジョン・グルーバー**(*John Gruber*)によって2004年に[Daring Fireball](https://daringfireball.net/projects/markdown/)に発表された文書の書き方で、

- 文章の構造を表せる。
- ルールが簡単。
- 文書を作成するのに、特別なソフトがいらない

といった特徴がある。

Markdownのまま用いられることもあるが、下のようなhtmlに変換されることが多い。


<p><strong>ジョン・グルーバー</strong>(<em>John Gruber</em>)によって2004年に<a href="https://daringfireball.net/projects/markdown/">Daring Fireball</a>に発表された文書の書き方で、</p>
<ul>
<li>文章の構造を表せる。</li>
<li>ルールが簡単。</li>
<li>文書を作成するのに、特別なソフトがいらない</li>
</ul>
<p>といった特徴がある。</p>

HuckMD

Markdown書式のテキストをクラウド上で作成・保存・共有できるウェブサービス。

画面の切り替えが可能で、

  • プレビューを確認しながら入力する。
  • 全画面、入力画面にして集中する。
  • 全画面、プレビューにして確認する。

といった使い分けができる。

ログインしなくとも基本的な機能は試せるが、Facebook、Twitter、GitHub、Dropbox、Googleのアカウントからログインするとすべての機能がつかえるようになる。

また、オープン・ソース・ソフトウェアとしても配布しているので、技術があれば、誰でも同様のシステムを構築できる。

Hugo

Markdown書式のテキストを、テンプレートにしたがって整形し、htmlなどを生成する静的サイトジェネレーター。

生成したhtmlなどをレンタルサーバーなどにアップロードすればそのままホームページができるほか、以下のGitやNetlifyと連携させて、Web上でホームページをつくるやり方もある。

このブログは後者のやり方でつくっているし、また、ググッた感じだとそちらの方が多数派。したがって、この記事も主流派にしたがっている。

GitとGitHubとNetlify

ふつう、何をつくるにせよ、1回で、最初から最後まで非の打ち所のない出来のものを完成させることはできない。それどころか、いつまで経っても、どれだけ改訂を繰り返しても、突っ込みどころのなくならないのが人間の仕事だし、たいていは1日の作業で終わることもないし、たった1人で作業するということもない。何日にもわたって、何人かでとりかかるのは仕事の常だろう。

そうすると、さまざまなバージョンのファイルが混在してわけがわからなくなったり、加筆修正削除を繰り返しているうちに昔のバージョンに戻したいということも出てくる。そういうときに、とりかかるバージョンが統一されたり、自在に昔のバージョンに戻せたり、追加した機能を不具合がないか試してから組み込むことのできる機能があるととても便利だ。

Gitは、そういう機能を提供するソフトウェアであり、GitHubはGitの機能をつかったサービスを提供しているプロバイダ(業者)のひとつである。Netlifyはそうしたプロバイダと連携して、Gitの情報をもとに、ウェブサイトを構築し、公開させることのできるウェブサービス。ほかにもさまざまな機能を有しているが、ひとつひとつじっくりと試していきたい。

一般的な動作

HugoやGit、GitHub、Netlifyのセットアップは終わっているものとして、記事を作成したり加筆修正するたびに、

  1. hugo new post/foo.md
  2. git add -A 
  3. git commit -m "記事を作成したよ"
  4. git push origin master

…と、すくなくとも4回は黒い窓でぽちぽちコマンドを叩かないといけない。

ぶっちゃけ、めんどくさいですよね?

シェルスクリプトやバッチファイルをつくってこの作業を簡略化する方法もあるが、今回はその代替になりえる。

HuckMDで記事をつくろう!

  1. ふつうにHackMDでMarkdown書式のテキストをつくる。
  2. HackMDの右上に「・・・」というようなアイコンがあるので、そこをクリック。
  3. Optionの下に、Versionsという項目があるのでクリック。
  4. モーダルウィンドウが出てくるので、「Push to GitHub」というボタンをクリック。
  5. 作成したばかりの記事だと、ほんとにGitHub管理にするのか聞かれるので、よければ「Swich」をクリック。
  6. Push the note to GitHub」というモーダルウィンドウに遷移するので、次の項目を埋める。
    1. Select repo ブログを収容しているリポジトリを選ぶ。
    2. Select branch どのブランチにするのか、それともmasterでプッシュするのか選ぶ。
    3. Select file どのファイルを上書きするのか、新規保存するのか選ぶ。
    4. Choose version(s) to push

まとめ 使いどころ