【超初心者向け】Markdown（マークダウン）から Web サイトのブログ記事を作成する方法！

「Qiita みたいに Markdown からブログ記事が書きたい」

「できれば JavaScript を使わないで書きたい」

こういった方の悩みの解決策を提案します。

本記事の内容

結局は HTML に変換しなければいけない
問題は「いつ」変換するか
筆者おすすめの解決法を紹介！

結局は HTML に変換しなければいけない

どこかのブログサイトを利用してブログを書く際には、HTML などの知識がなくても書けるようにエディタが用意されていますね。例えばこの TOPVIEW では、下の写真のようなエディタが用意されています。メニューバーを駆使して、フォントの書体や要素の箇条書き、リンクの貼り付け、画像の挿入などができます。

また、技術系記事が集まる Qiita というところでは Markdown 記法からブログ記事の作成が可能になっています。Markdown 記法は読みやすくて書きやすいため、自分のブログでもいちいち HTML を書くよりも Markdown で済むなら導入したいと考える人も多いと思います。

どんなブログサイトでもエディタで書いた内容は、Web ブラウザで見られるように HTML に変換しなければいけません。

問題は「いつ」変換するか

さぁ、では Markdown が HTML に「いつ」変換されているのでしょうか？おそらく２通りのやり方があると思います。

クライアントがその記事をブラウザで見るとき
記事を投稿するとき

クライアントがその記事をブラウザで見るとき

1つ目はクライアントがその記事をブラウザで見るときです。クライアントがその記事を訪れた際に、サーバから一部が Markdown で書かれた HTML ファイルを受け取ります。この HTML ファイルはまだ完成しておらず、Markdown で書かれた内容を HTML に変換することで最終的な HTML ファイルになります。

その HTML ファイルの中には、JavaScript を使って Markdown で書かれた内容を変換するコードが書かれています。つまり、この方法には Markdown を HTML に変換する JavaScript ファイルが必要になってきます。これはあらかじめ自分のサーバにダウンロードしてくるか、他のサーバを参照するかどちらかの方法を取っているはずです。

marked.js というのがよく使われているみたいですね。

記事を投稿するとき

2つ目は記事を投稿するときに HTML にしておく方法です。つまり、クライアントがサーバからデータを受け取るときにはすでに HTML ファイルは完成している状態です。もちろん、JavaScript も一切使っていません。

私のおすすめ解決法を紹介！

では、私のおすすめ解決法を紹介します。今回は【超初心者向け】ということで、JavaScript を使用しない2つ目の方法を使っていきます。すでに使っているエディタによってはパッケージを追加してインストールすることで Markdown を変換することもできるかもしれませんが・・・パッケージ管理ができたらそれはもう「玄人」です。笑

今回は、インストールもしない！無料で利用できる！そんなツールを使っていきます！

それがこちら、【Markdown Blog Editor】です。

このエディタは画面左が Markdown で記事を作成するエリアになっており、画面右がプレビューになっています。実際に記事を書きながらプレビューをリアルタイムで確認できるのでとても使いやすいです。

右下の「HTML をコピー」を押すと、編集した Markdown を HTML に変換したものをコピーできます。あとはそれを用意した HTML ファイルに貼り付けるだけです。ただし~とかは勝手に付いていないので気をつけてください。

これなら HTML だけの知識でなんとかできます！

注意点が1つあります。このエディタには中間保存機能がありません。つまり、ブラウザを閉じてしまうと消えてしまう可能性があります（復元してくれるときもあります）。私は長文を書く際にはこまめに別のファイルに保存しながら作業しています。また、複数のタブで使用していると古い方の記事しか復元できません。

気になった方は使ってみてください！！