markdownを活用してテキストを迅速に公開する：markdownファイルをアップロードするだけでブログができる
これまでmarkdownの扱い方をいろいろ解説してきました。今回は、作ったファイルの公開です。そうです、ついに、やっと、ようやく、at last、finally、markdownコンテンツを世界に発信です。
その方法は簡単。
markdownファイルをアップロードするだけで瞬間的にブログを更新できる軽量簡単明快なシステムMDWikiを使ってみます。
MDWikiとは
超シンプルなブログ構築システム
MDWikiとは、公開用フォルダにmarkdownファイルを置くだけで、簡単にブログや一人wikiを作れてしまうお手軽システムです。
MDWikiを入手
何はともあれMDWikiのアーカイブファイルを入手しましょう。
git が使える人は、
git clone https://github.com/Dynalon/mdwiki.git「git? 何のこっちゃ」の人は、https://github.com/Dynalon/mdwiki/releases にアクセスして、zipファイルをダウンロードして展開しましょう。
mdwiki.htmlがそこにあることを確認してください。これが本体であり、MDWikiシステムを使うのに不可欠なファイルはこれだけです。
場所を確保する
当然ながら、MDWikiシステムとmarkdownファイルを保存する場所・公開するための場所が必要です。
公開前に「ローカルな」置き場を確保する
公開について考える前に、markdownを編集して溜めおくための場所を確保しましょう。すでに過去記事をお読みいただいて実践されている方は、そのようなフォルダを作成済みと思いますが、とにかくひとつmarkdown保存専用のフォルダを作って下さい。これ以降、このフォルダのことを単に「保存用フォルダ」と呼ぶことにしましょう。
たくさんのmarkdownページを作りたい方は、保存用フォルダの中に適宜サブフォルダ・サブサブフォルダを作っても構いません。後述の「日記サイト」構築では、Diaryというサブフォルダを作ることにしています。
いずれにせよ、この保存用フォルダの中身を最後にまるごと「公開場所」にコピーすることになります。
公開用の「共用サーバー」・VPSあるいはウェブサービス
次に、「公開するためのスペース」です。HTMLファイルを置いて外部に公開できる場所です。PHPだのwordpressだのが用意されている必要はありません。必要なのは「HTMLファイルを公開できるスペース」だけです。
公開用スペースとしては、いわゆる「共用サーバー」を契約するのが素直な方法でしょうが、無料で簡単にウェブサイトを公開できるNetlifyを使ってみるのもいいと思います。なお、Netlifyについてはgitを使う方法が多く紹介されていますが、大してメリットがないわりに無駄にややこしく感じられますので、私はあまりおすすめしません。下の記事で紹介されている「gitなし」の方法が良いでしょう。
保存フォルダの中を整えていく
前回までに説明した「日記コンテンツ」をMDWiki化していくことにします。
まず、上で作った保存フォルダに、MDWikiのアーカイブの中から取り出したMDwiki.htmlをコピーします。そのままでもいいのですが、このMDWiki.htmlをindex.htmlに改名してしまいましょう。
次に、Diaryという名前のサブフォルダを作ります。この下に`2024`などの年号に対応したサブフォルダを作り、その下にさらに月に対応したサブサブフォルダを作ります。ここは以前の記事で解説したとおりです。
MDWikiの最小限のカスタマイズ
ここまでで最低限の準備は終わっているのですが、公開に向けてちょっとだけ追加作業を行います。具体的には、navigation.mdというファイルに、メニューおよび拡張機能の設定を書き込み、MDWiki.html(index.html)と一緒に置いておきます。
navigation.mdの内容は次のようなものになります。
# MDWiki Test Site
[日記](Diary/index.md)
[gimmick: math]()一行目がサイト全体のタイトルです。ここではTest Siteとしていますが、「ボクの日記」でも何でも、好きなサイト名を設定してください。
空行を挟んで、3行目からのリンクは、各ページのトップメニューに並ぶリンクのリストとなります。ここでは「日記」というリンクだけを書いてあります。URLとしては、index.htmlから見た相対パスを設定すればOKです。もちろん、ここには外部サイトを含めて好きな場所へのリンクを設定できます。
そして最後の行。リンクの形をとっていますが、名前がgimmick:で始まっていた場合、これはメニューアイテムではなく「拡張機能の使用宣言」として扱われます。`gimmick: math`は、以前の記事で説明した「markdownテキスト内への数式の書き込み」を行ないたいときに必要です。このような数式の使用を未来永劫やりませんと断言できる人は、この行を書かなくても結構です。公式ページには、これを含めて6種類のgimmickが使えることが記されています。興味がある人は導入してみると良いでしょう。
月別フォルダの下には、それぞれindex.mdを置きます。これは、そのフォルダ内のページのリストを並べたものです。サイトの規模が大きくなったらpythonやperlを使って自動生成することも考えたいところですが、当面は手動で作ればいいでしょう。
# [Diary](#!diary_contents/index.md)
## 2024/04
* [d20240420.md](index.html#!diary_contents/2024/04/d20240420.md)
* [d20240421.md](index.html#!diary_contents/2024/04/d20240421.md)同じ考え方で、年毎フォルダの下にも月別フォルダへのリンクを並べたindex.mdをつくっておきましょう。
最終的に、保存用ディレクトリの構成は下のような感じになります。
├── about.md
│ ├── 2024
│ │ ├── 04
│ │ │ ├── d20240420.md
│ │ │ ├── d20240421.md
│ │ │ └── index.md
│ │ ├── 05
│ │ │ ├── d20240501.md
│ │ │ ├── d20240505.md
│ │ │ ├── d20240506.md
│ │ │ ├── d20240508.md
│ │ │ └── index.md
│ │ └── index.md
│ ├── index.md
│ └── mdwiki.html
├── index.html
├── mymdwiki.css
├── navigation.md
ここまでに説明していないファイルが幾つか見えていますが、これは私が独自に行った機能拡張を反映したもので、ここでは気になさらなくて構いません。後日これらについても別記事で解説したいと思います。
とりあえずローカルで見てみる
VScodeの拡張機能に「live server」というものがあります。これを導入するとエディタそのものがローカルなウェブサーバーとして機能し、公開後のmarkdownファイルがブラウザからどのように見えるのかをPCの中で検証することができます。
live serverは次のように使います。
VScodeで、保存用フォルダを開く。
その状態で、画面右下にあるスイッチをクリックしてLive Serverをオンにする。
自動的にブラウザ（おそらくEdge）が起動し、MDWikiのトップページが表示される。
自動的にページが開かなかった場合は、手動でブラウザ上で`http://127.0.0.1:5500/#!index.md`をURLとして指定してみてください。
公開スペースにフォルダ毎アップロード
ここまでがうまくできたら、あとは転送ソフトを利用して公開スペースにフォルダを丸ごと転送するだけです。これで、サイトが完成です。
公開スペースのディレクトリがhttps://example.com/だったとすると、MDWikiのルートページのURLは、https://example.com/index.htmlになります。これまでの説明通りにファイルの転送を行なっていたとすると、日記のトップページにはhttps://example.com/#!Diary/でアクセスできるはずです。
MDWikiの強み
ここまでの過程を見ればわかるように、この方法ではローカルとリモートの両方に同じファイル群が存在しています。なんらかの事故で一方が失われても、他方からアップロード・ダウンロードし直すだけで復旧可能。これで安心度が増すし、公開用のサーバーを別の所に乗り換えるのも簡単です。このお手軽感は、wordpressサーバーなどでは享受できないメリットだと思います。
今回紹介したMDWikiによるサイト構築方法は、よく使われているwordpressを使った方法とは明らかに発想が異なります。どちらかというと静的サイトジェネレーター(SSG)の発想に近いでしょう。
MDWikiは「オリジナルソースからHTMLファイル群を生成する」という過程を必要としないため、SSGよりも更に簡便なシステムと言えます。具体的には次のような旨味があります。
pythonだのrubyだの用意する必要がないため、プロジェクト始動の手間が超絶的に小さい。
「サイトが大規模になってくるとアップデートに時間がかかる」という問題に悩む必要がない。
個人や小規模グループにはピッタリ
ここで示した手法は、個人あるいは小規模団体での情報発信にはとても向いています。ややこしい装飾は必要なく、ただとにかく情報共有が出来ればいいというニーズに過不足なく応え得るでしょう。
内輪のウェブサーバーを建ててマニュアルや日報を部署内で共用するという手法もアリと思います。
おわりに
なんとか情報公開の実現まで来ました。markdownベースの情報収集と共有で皆が幸せになれることを期待します。
この記事が気に入ったらサポートをしてみませんか？