静的なWebサイトをMarkdownで作りたい

やりたかったこと

簡単にWebサイトを作って公開したかった。

ただし

Markdownで書きたい（生のHTMLは書きたくない）
好きなCSSを当てたい

※1 CSSにこだわらなければVS Codeのプラグインを使ってHTMLやPDFを吐き出すのが早くて簡単です。
※2 Blogが書きたいのであればHugoとかJekyll、GatsbyJSを検討してください。

というわけで

Markdownでコンテンツを書いた。
Markdown -> HTML変換するJavaScriptライブラリ(Marked)を選んだ。

悩んだこと

ググってもQiitaみたいに動的にMarkdownをHTMLに変換する方法しか出てこなかった。
Markdownで書かれたコンテンツをHTMLで読み込んで表示する方法がわからない。
ということをぼんやりつぶやいたら神が現れた。圧倒的感謝🙏

https://t.co/zLAByYOKJ3
できました😊
— dtsuji🥑 (@dim0627 ) 2018年12月27日

コードとその内容

教えて頂いたコードとその理解を備忘録として残しておきます。
markedのreadmeに書かれている箇所は割愛させていただきます。

全体

<!doctype html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>Marked in the browser</title>
  </head>
  <body>
    <div id="content"></div>

    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
      axios.get('./content.md')
        .then(response => document.querySelector('#content').innerHTML = marked(response.data));
    </script>
  </body>
</html>

要点１

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Promise based HTTP client for the browser and node.js

axiosは非同期なHTTPクライアントです。

要点2

axios.get('./content.md')

markdownファイルをGET Methodで取得しています。

要点3

.then(response => document.querySelector('#content').innerHTML = marked(response.data));

重要なのは.then();の部分です。
axiosは非同期なのでgetの成功を待つためにthenを使用します。
上記のコードではgetしたresponseからdataを取り出しています。
取得したMarkdownに対して何かを行う場合はthenの中に処理を書きます。
（私はTocbotを使用してtocを自動生成する処理を書きました。）