Markdownで書いてGitHubにPushするだけの、ビルド不要・無料で公開できる記事サイトの作り方
Markdown形式で記事を管理し、JavaScriptでHTMLに変換し、GitHub Pagesで公開するという、MarkDownを使った無料でビルド不要のWebサイト制作手法を解説するドキュメントサイト。
Markdownは構造が明確で編集しやすく、技術記事の執筆に広く利用されている。一方で、MarkdownをWebページとして公開するには、JekyllやHugoなどの静的サイトジェネレーターを使う必要があり、ビルド環境の構築やコマンド操作が必要になるため、初心者には扱いが難しく、メンテナンス性にも課題がある。
そこで、本プロジェクトでは、GitHub Pages を用いて、「Markdown を書いてGitHub にPush するだけ」でサイトが自動的に更新される仕組みを構築し、それを分かりやすく紹介することで、誰でも手軽ににMarkdown ベースの情報発信が可能になるドキュメントサイトを制作することにした。
Webサイト
ThinkPad (PC)
NeoVim (テキストエディタ)
中間報告の際、JavaScriptを使って、MarkDownでWebページを作るというコンセプトが珍しいため、それをテーマにしたプロジェクトに路線変更してはどうかとの提案をいただいた。それを踏まえて、テーマ変更する際どんなアプローチができるのか探っていきたい。
Markdown形式で記事が管理されているメディア
コードブロックのテーマをCatppuccinのFrappéに変更した。
フレームワーク制作について検討しながらも、MDからHTMLへの変換と表示についての作業は進めていたのだが、コードブロックを実装した段階で、かなり綺麗に整った記事をMDから生成できるようになっていた。
フレームワーク制作は先週、検討の結果断念したのだが、MDからこれだけきちんとしたサイトが作れるならば、Linux関連の誰も知らないテーマにするよりも、「MDを使って手軽に綺麗なサイトを作る方法を解説するWebサイトの制作」にテーマを変更したほうが、より多くの人の役に立てるのではないかと思った。
前期概要集を制作した
目次リンクの見た目を整えた。また、目次のリンクをクリックすると、その見出し部分に飛ぶようにした。
「MDファイルに yaml 形式でタイトル・日付・カテゴリー情報・タグ情報などを埋め込むことで、自動でサイトを生成するフレームワーク」の仕様について検討した。
結果、技術的には可能であるが、"Jekyll" という類似するフレームワークが存在していることと、ユーザーによるサイトの記事以外の箇所のカスタマイズ方法がどうしても複雑になってしまい、「MDだけで簡単にサイトを作る」という本来のコンセプトと、最低限のカスタマイズ機能との両立が非常に困難であるということから、このフレームワーク制作は断念することにした。
MarkDownファイルの「見出し１（#）」と「見出し２（##）」を自動で読み取って、目次が自動生成されるようにした。（画像左部）
中間報告にて、MarkDownファイルをHTMLに変換する機能のほうをテーマにしたほうが良いのではないかというアドバイスを頂いた。
変換機能をテーマとする場合、テーマとしては「MDファイルをJavaScriptを用いてHTMLに変換し、GitHub Pagesで無料公開する方法を解説したWebサイトの制作」や、「MDファイルに yaml 形式でタイトル・日付・カテゴリー情報・タグ情報などを埋め込むことで、自動でサイトを生成するフレームワークの制作」がテーマとして考えられるが、せっかくなので後者のほうをやってみようと思う。
画像のパスを指定することで、画像を埋め込むことができるようにした。
MarkDown記法に則った記法で埋め込めるようにした。
JavaScriptを使って、MarkDownファイルにYouTube動画のリンクをテキストとして貼るだけで、サイト上ではYouTube動画のサムネイルを表示し、再生できる状態で埋め込まれるようにした。
YouTubeリンクをMDファイルに貼り付けHTMLに変換したところ、リンクの文字列がそのまま表示された。学科サイトのように動画枠とサムネイルを表示し、そのまま再生できるようにしたい。
動画URLから自動的に動画を埋め込むプログラムを書いているが、まだうまくいっていない。
highlight.js の実装及び動作検証
Marked の実装及び動作検証
Arch Linuxに関する情報は移り変わりが激しく、サイト情報の頻繁な更新が想定されるため、以下の要件を設定する。
Sway-wmに関する日本語の情報源の調査結果