#author("2025-11-30T09:25:09+09:00;2025-10-10T08:54:38+09:00","default:member","member") #author("2025-11-30T09:26:10+09:00;2025-10-10T08:54:38+09:00","default:member","member") *マークダウン de Webサイト！ Markdownで書いてGitHubにPushするだけの、ビルド不要・無料で公開できる記事サイトの作り方の紹介サイト #image(main.png) -''角田 雄一'' -'''Keywords：Markdown, JavaScript, GitHub Pages''' -__[[サイトリンク>https://yuichi853.github.io/md-site/]]__ -__[[概要集>https://drive.google.com/file/d/1bErVi3jDlCzyok61E05_YfD0dZ9JRqFl/view?usp=sharing]]__ [[&color(red){__プレゼン用ページ！__};>角田雄一/卒業研究/プレゼン1]] ~ **概要 ***これは何？ 本サイトは、Markdown 形式で記事を管理し、それを JavaScript によって HTML に変換し、GitHub Pages を利用して公開するという、ビルド作業のいらない Web サイト制作手法を解説するドキュメントサイトである。 さらに、Markdown の特徴や活用方法についても解説し、Markdown を使った情報発信の利便性と仕組みを理解できるようにすることを目的としている。 //&color(red){何のサイトかを簡潔にまとめた説明}; ~ ***背景と目的 Markdown（マークダウン）は、見出しや箇条書きといった文書構造をシンプルな記号で表現できる記法であり、HTML のような複雑なタグを使わずに、読みやすく整理された文章を記述できる。この利便性から、[[GitHub>https://github.com/]]、[[Qiita>https://qiita.com/]]、[[Zenn>https://zenn.dev/]]、[[はてなブログ>https://hatena.blog/]]など、さまざまなプラットフォームで採用されている。 一方、Markdown で作成した文章はそのまま Web ページにはならず、HTML 形式へ変換する必要がある。一般的には [[Jekyll>https://jekyllrb.com/]] や [[Hugo>https://gohugo.io/]] といった静的サイトジェネレーターを使用するが、環境構築やコマンド操作が必要で、複数端末での運用や長期的な管理が負担となる場合もある。 そこで本プロジェクトでは、「Markdown を書いて GitHub に Push するだけで Web サイトが更新される」仕組みを構築し、ビルド不要で継続的に管理できる Markdown ベースの Web 発信環境を提供する。 この仕組みをわかりやすくまとめたドキュメントサイトを制作し、Markdown の利便性と Web 公開の流れを整理して提示することを目的とする。 //&color(red){プロジェクトで何を解決しようとしているのか・目的の要点}; ~ ***コンセプト 記事はすべて Markdown 形式で管理する Markdown ファイルを ブラウザ上の JavaScript で HTML に変換する GitHub Pages を用い、GitHub に Push するだけで公開が反映される仕組みを構築する Markdown の特徴や使い方もまとめ、Web サイト運用の基本構造を理解できるようにする -記事はすべて Markdown 形式で管理する -Markdown ファイルを ブラウザ上の JavaScript で HTML に変換する -GitHub Pages を用い、GitHub に Push するだけで公開が反映される仕組みを構築する -Markdown の特徴や使い方もまとめ、Web サイト運用の基本構造を理解できるようにする //&color(red){基本的な思想・仕組みの全体像}; ~ ***成果物の仕様 Web サイト： [[https://yuichi853.github.io/md-site/>https://yuichi853.github.io/md-site/ ]] Web サイト： [[https://yuichi853.github.io/md-site/>https://yuichi853.github.io/md-site/]] Markdown 変換機能・複数レイアウトサンプル・記事テンプレートなどを含む。 //&color(red){成果物の具体的な形を示す}; ~ ***制作ツール ThinkPad（PC） NeoVim（テキストエディタ） //&color(red){ハード／ソフトの使用環境}; ~ ***プロジェクトの期間 2025.04.11 - 2025.10.24 //&color(red){作業期間を記載}; ~ ***まとめ 本プロジェクトでは、Markdown で記述した記事を JavaScript によって HTML に変換し、GitHub Pages で公開する仕組みを構築した。 これにより、従来の静的サイトジェネレーターのような環境構築やビルド作業を必要とせず、軽量で持続的な Web 発信環境を実現できた。 目次生成やコードハイライトにも対応し、視認性の高い記事デザインを実現した。一方で、Markdown の仕組みに馴染みのない人への説明は改善の余地があり、今後は導入部分の強化や全体構成の整理を通して理解しやすさを高めたい。 //&color(red){結果と今後の改善点を簡潔にまとめる}; ~ ~ **調査 ***現状調査 ''Markdown形式で記事が管理されているメディア'' -ITブログサイト 代表的なものとして[[Zenn>https://zenn.dev/]]と[[Qitta>https://qiita.com/]]がある。 どちらも、記事を更新するには[[Web上のエディタ>https://help.qiita.com/ja/articles/qiita-edit]]を用いる仕様であり、自分のエディタでは編集できない。 技術ブログのサイトであるため、当然サイトのカスタマイズはできない。 -一般ブログサイト 調査の結果、[[はてなブログ>https://hatena.blog/]]がMarkdown形式に対応していることがわかった。 [[はてなで使えるMarkdown記法>https://hero-rin.hatenablog.com/entry/2019/03/05/022708]]の記事にあるように、ほとんどのMarkdown記法が使え、コードブロックにまで対応している。 //&color(red){プロジェクトのテーマに関わる社会の現状と問題の洗い出し}; ~ ***先行事例 -[[Jekyll>https://jekyllrb.com/]] Rubyで書かれたMarkdownベースの静的サイトジェネレーター。 ローカル環境でのビルドが必要で、そのためにはRuby環境とJekyllのインストールが必要。 -[[Hugo>https://gohugo.io/]] Goで書かれたMarkdownベースの静的サイトジェネレーター。 Jekyll同様ビルドが必要で、GoとHugoのインストールが必要。 //&color(red){プロジェクトのテーマに該当する先行事例の紹介、傾向分析など}; ~ ***技法・技術情報 -[[Marked>https://github.com/markedjs/marked]]: MarkDownからHTMLへの変換ライブラリ -[[highlight.js>https://highlightjs.org/]]: 構文ハイライトのライブラリ //&color(red){プロジェクトの遂行に必要な技法・技術に関する調査}; ~ ~ **プロジェクト管理 -__[[スケジュール（進行管理表）>https://docs.google.com/spreadsheets/d/1E9fFEPCkIFqWmT_iNE0cEh-c3_qAvQ33HUpLjEOpElE/edit?usp=sharing]]__ //&color(red){計画的な遂行のために、進行管理表を作成してリンクして下さい。}; -__[[TODOリスト>https://github.com/yuichi-853/arch-sway-custom/blob/main/docs/TODO.md]]__ //&color(red){やるべきこと（タスク）を箇条書きにします。}; //&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」}; //***NotToDo //&color(red){やらないこと：何をするかではなく「何をしないか」を考える}; //&color(red){例：10人以上の会議には出ない。苦手なことは誰かに頼む・・}; ~ ~ #hr CENTER:''進捗記録'' //&color(red){最新の情報を一番上に記載して下さい（古い記事が下へ沈む）。}; #hr ~ ~ **2025.11.14 ***テンプレートサイト テンプレートサイトのサンプル画像をよりシンプルなものに差し替えた。 -__[[テンプレートサイト>https://yuichi853.github.io/md-site-template/]]__ ~ ~ **2025.10.31 ***概要集修正 レイアウトの乱れや番号の打ち間違え等、細かい修正を加えた。 -__[[概要集>https://drive.google.com/file/d/1bErVi3jDlCzyok61E05_YfD0dZ9JRqFl/view?usp=sharing]]__ ~ ***第三者によるサイトレビュー Webサイトに関する知識が豊富なクラスメートの方に、サイトのコンテンツの検証とレビューをして頂いた。 サイトの使いやすさに関しては、ターミナルに触れたことのあるような、テクノロジーに詳しい人であればスムーズに使えるだろう、との感想をいただいた。 また、改善案として -ローカルサーバー起動の実行プロンプトの書き方が紛らわしい -サイトテンプレートのコードを編集する項目で、編集箇所の目印があるとよい という２点をご指摘頂き、それに基づき修正を加えた。 ~ ~ **2025.10.24 ***概要集 概要集を制作した。 -__[[概要集>https://drive.google.com/file/d/1fFv73PIHFdTjYHxY0wnpe6_lsp_W8R2M/view?usp=sharing]]__ ~ ~ **2025.10.17 ***記事の加筆・修正 -「マークダウンとは」と「マークダウンでWebサイト制作」の記事を大幅に加筆・修正した。 -「マークダウンとは」の記事では、冗長な説明や、わかりにくい説明を修正した。 -「マークダウンでWebサイト制作」の記事では、テンプレートサイトの導入方法をMac・Windowsの両システムに対応したより詳しい説明を、ステップバイステップ形式で細かく解説するようにした。そして、テンプレートサイトのカスタマイズ方法の詳細な解説も加えた。 ~ ***デバッグ -画面幅に応じた「目次」「記事」「余白」の幅を調整し、完全にレスポンシブ対応させた。 -スマホ画面で、「目次」が「記事」の上に覆い被さって表示されていたため、修正した。 -見出しのレベルと名前が同一の見出しの項目がある場合、それぞれをを区別できず、片方の見出しリンクが機能していなかったため、それぞれを区別できるようにした。 ~ ~ **2025.10.10 ***記事ページデザイン刷新 #image(article.png) -記事ページのデザインをメインページの雰囲気に合うよう刷新した。 -背景色だけでなく、目次や、Markdown記事の表示デザインもサイトの雰囲気に合うよう明るいモダンな印象に調整した。 ~ ***テンプレートページ作成 #image(template.png) -ユーザーにテンプレートを配布するページを制作した。 -「テンプレートサイトのプレビューリンク」「Githubリポジトリへのリンク」「ダウンロードリンク」の３つのボタンを配置した。 -右側でプレビューをざっと確認できるようにした。 ~ ***Aboutページ作成 #image(about.png) -Aboutページを制作した。 -自己紹介と、サイトについての簡単な説明を掲載した。 ~ ~ **2025.10.03 #image(main.png) ***メインページ -メインページを作成した。 -メインページは__[[Bootstrap>https://getbootstrap.com/]]__や__[[TailwindCSS>https://tailwindcss.com/]]__のように、サイトの特徴を簡潔に伝えられるように意識した。 -デザインは__[[Bootstrap>https://getbootstrap.com/]]__のメインページを参考にし、背景に明るいグラデーションをつけ、軽やかでモダンな印象を意識した。 -「シンプルさ」をコンセプトの中心に据えたMarkdownを扱っているため、装飾を最小限に抑え、余白を多く取り、読みやすさを重視した。 -右側のウィンドウ風のオブジェクトは、サイトの特徴を一目で理解できる概要パネルとして配置した。 ~ ***ヘッダー -メインページの雰囲気に合わせて、ヘッダーのデザインも変更を加えた。 ~ ~ **2025.09.26 ***記事執筆 -「マークダウンとは」という記事を書き終えた。 #image(md-site-01.png) -「マークダウンでWebサイト制作」という記事を書き終えた。 #image(md-site-02.png) ~ ***目次の見た目修正 「見出し１」が太字で表示されるようにし、視認性を向上させた。 #image(md-site-03.png) ~ ~ **2025.09.19 ***レスポンシブ対応 サイトをレスポンシブ対応させた。 -__[[サイト>https://yuichi-853.github.io/homepage/]]__ ~ ***サイトマップ サイトマップを作成した。 -__[[サイトマップリンク>https://docs.google.com/presentation/d/1rTnlKvOu-rXqRvH7fiySbvBaltLG416SvN7dr4JXXJI/edit?usp=sharing]]__ ~ ***ワイヤーフレーム -__[[ワイヤーフレームリンク>https://www.figma.com/design/Jza8IG8nDGmcEOjdKcOREd/%E3%83%AF%E3%82%A4%E3%83%A4%E3%83%BC%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0?node-id=0-1&t=3IJK1rVJCJtjWws2-1]]__ ~ ***テンプレート ユーザーが簡単に使用できるようにテンプレートを作成することにした。 現在テンプレートの制作途中である。 -__[[テンプレート サイト>https://yuichi-853.github.io/md-template/]]__ -__[[テンプレート GitHubリポジトリ>https://github.com/yuichi-853/md-template]]__ ~ ~ **2025.07.29 ***ブラッシュアップ 審査の際に「前提知識が無い人にとってわかりにくい」「説明が不十分」とのご指摘を頂いた。それを受けて、背景と目的欄に大幅な変更を加え、Markdown形式にあまり馴染みのない方でもプロジェクトについて理解できるようにした。 ~ ~ **2025.07.18 ***埋め込みYouTubeサムネイルの表示 埋め込んだYouTubeサムネイル欄の縁が丸みを帯びるようにした。 #image(marked_test_12.png) ~ ~ **2025.07.11 ***コードブロックの表示 コードブロック欄の縁が丸みを帯びるようにした。 #image(marked_test_11.png) ~ ~ **2025.07.04 ***目次の固定機能 記事をスクロールするとき、目次が画面上部に固定されて、常に表示できるようにした。 #image(marked_test_10.png) ~ ~ **2025.06.27 ***目次の固定機能 記事をスクロールするとき、目次が画面上部に固定されて、常に表示できるようにしたいのだが、Bootstrapとの兼ね合いもあり、うまくいっていない。 ~ ***概要集 フィードバックを受け、前期概要集に変更を加えた。 -__[[概要集>https://drive.google.com/file/d/1Cq0d1Dj_fSqrNECYRzIJ3gmzhdm_8v_S/view?usp=sharing]]__ ~ ~ **2025.06.20 ***コードブロックのテーマ変更 コードブロックのテーマを__[[Catppuccin>https://github.com/catppuccin/catppuccin]]__の__[[Frappé>https://catppuccin.com/palette/]]__に変更した。 #image(marked_test_9.png) ~ ***プロジェクトテーマの変更 フレームワーク制作について検討しながらも、MDからHTMLへの変換と表示についての作業は進めていたのだが、コードブロックを実装した段階で、かなり綺麗に整った記事をMDから生成できるようになっていた。 フレームワーク制作は先週、検討の結果断念したのだが、MDからこれだけきちんとしたサイトが作れるならば、Linux関連の誰も知らないテーマにするよりも、「MDを使って手軽に綺麗なサイトを作る方法を解説するWebサイトの制作」にテーマを変更したほうが、より多くの人の役に立てるのではないかと思った。 ~ ***概要集 前期概要集を制作した -__[[概要集>https://drive.google.com/file/d/1Cq0d1Dj_fSqrNECYRzIJ3gmzhdm_8v_S/view?usp=sharing]]__ ~ ~ **2025.06.13 ***目次リンク自動生成 目次リンクの見た目を整えた。また、目次のリンクをクリックすると、その見出し部分に飛ぶようにした。 #image(marked_test_8.png) ~ ***プロジェクトテーマ変更について 「MDファイルに yaml 形式でタイトル・日付・カテゴリー情報・タグ情報などを埋め込むことで、自動でサイトを生成するフレームワーク」の仕様について検討した。 結果、技術的には可能であるが、"Jekyll" という類似するフレームワークが存在していることと、ユーザーによるサイトの記事以外の箇所のカスタマイズ方法がどうしても複雑になってしまい、「MDだけで簡単にサイトを作る」という本来のコンセプトと、最低限のカスタマイズ機能との両立が非常に困難であるということから、このフレームワーク制作は断念することにした。 ~ ~ **2025.06.06 ***目次リンク自動生成 MarkDownファイルの「見出し１（#）」と「見出し２（##）」を自動で読み取って、目次が自動生成されるようにした。（画像左部） #image(marked_test_7.jpg) ~ ***プロジェクトテーマ変更について 中間報告にて、MarkDownファイルをHTMLに変換する機能のほうをテーマにしたほうが良いのではないかというアドバイスを頂いた。 変換機能をテーマとする場合、テーマとしては「MDファイルをJavaScriptを用いてHTMLに変換し、GitHub Pagesで無料公開する方法を解説したWebサイトの制作」や、「MDファイルに yaml 形式でタイトル・日付・カテゴリー情報・タグ情報などを埋め込むことで、自動でサイトを生成するフレームワークの制作」がテーマとして考えられるが、せっかくなので後者のほうをやってみようと思う。 ~ ~ **2025.05.23 ***ライブラリ動作検証 画像のパスを指定することで、画像を埋め込むことができるようにした。 MarkDown記法に則った記法で埋め込めるようにした。  #image(marked_test_6.jpg) ~ ~ **2025.05.16 ***ライブラリ動作検証 JavaScriptを使って、MarkDownファイルにYouTube動画のリンクをテキストとして貼るだけで、サイト上ではYouTube動画のサムネイルを表示し、再生できる状態で埋め込まれるようにした。 ~ #image(marked_test_5.png) ~ ~ **2025.05.09 ***コンテンツ書き出し -Arch Linuxのインストール方法の簡単な紹介とSway-wmとその他ツールのインストール方法。 -日本語 IME（入力メソッド）の設定 -Sway-wmの基本的な設定 -Waybar（ステータスバー）の設定 -Gnu Stowを用いた設定ファイルの複数デバイスでの管理法 -wofi（ランチャー・メニュー）の設定 -mako（通知デーモン）の設定 -xkbを用いたキーマップの貼り替え ~ ***ライブラリ動作検証 YouTubeリンクをMDファイルに貼り付けHTMLに変換したところ、リンクの文字列がそのまま表示された。学科サイトのように動画枠とサムネイルを表示し、そのまま再生できるようにしたい。 動画URLから自動的に動画を埋め込むプログラムを書いているが、まだうまくいっていない。 #image(marked_test_4.png) ~ ***プレゼン準備 [[__プレゼン用ページ__>角田雄一/卒業研究/プレゼン1]] ~ ~ **2025.05.02 ***ライブラリ動作検証 ''highlight.js'' の実装及び動作検証 -✅ コードブロックの構文ハイライト機能（画像はbash文） #image(marked_test_3.png) ~ ***プレゼン準備 [[__プレゼン用ページ__>角田雄一/卒業研究/プレゼン1]] ~ ~ **2025.04.25 ***ライブラリ動作検証 ''Marked'' の実装及び動作検証 -✅ MarkDown文書をHTMLに変換する機能 #image(marked_test_1.png) -✅ コードブロック表示機能 #image(marked_test_2.png) ~ ~ **2025.04.18 ***サイトの要件 Arch Linuxに関する情報は移り変わりが激しく、サイト情報の頻繁な更新が想定されるため、以下の要件を設定する。 -記事はMarkDown形式で記述・管理できること。 -Github Pagesを使い、ローカルのGit RepositoryでMarkDownファイルに変更を加えた際、GithubにPushするだけで記事を更新できること。 ~ ***実装予定機能 -ブラウザ上で動作するJavaScriptのMarkDown文書をHTMLに変換する機能 -MarkDownファイルから各章の見出し情報を取得し、目次を生成する機能 -記事をMarkDownからHTMLに変換して表示した際、コードブロックの構文ハイライト機能 -画像表示機能 -YouTube動画リンク埋め込み&表示機能 ~ ***技法・技術調査 -__[[Marked>https://github.com/markedjs/marked]]__という、MarkDown文章をHTMLに変換できるライブラリがあり、CDNか、JavaScript圧縮ファイルをサイトに組み入れることで利用できる。 -__[[highlight.js>https://highlightjs.org/]]__という、構文ハイライトのライブラリがあり、__[[この記事>https://www.nxted.co.jp/blog/blog_detail?id=1]]__によると、上記"Marked"と非常に相性が良いそうである。 ***試作 __[[サイトマップ>https://docs.google.com/presentation/d/1UMsg5QQ3sMK1BGgppFM8X8qStwkTZXpFVh0Ux7-v4BI/edit?usp=sharing]]__ ~ ~ **2025.04.11 ***テーマ決定 -Arch LinuxとSway-wmを使ったデスクトップ環境の構築方法を日本語で解説したWebサイトの制作 ~ ***現状調査 ''Sway-wmに関する日本語の情報源の調査結果'' -Googleで、「arch linux sway 設定」をキーワードとして日本語指定で検索した際、Arch LinuxでのSway-wmの設定方法に関連する''日本語の検索結果はわずか７件''。 -動画サイトYouTubeにおいては、バニラの（追加の設定やテーマ、アプリを含まない、素の状態の）Sway-wmに関する''日本語の動画はひとつも無かった''。 ~ ***先行事例調査 -IT情報共有サイト 代表的なものとして__[[Zenn>https://zenn.dev/]]__と__[[Qitta>https://qiita.com/]]__があり、どちらのサイトもMarkDown記法で、左に記事、右に目次のレイアウト。 左に目次のほうが見やすいかも。 -Sway-wmの設定ファイルの紹介・解説サイト --https://zenn.dev/haxibami/articles/wayland-sway-install 日本語の解説の中で最も詳しい。 --https://zenn.dev/eloy/articles/342e8e390e01b3 ArchLinuxのインストール方法から書かれている。Sway-wmの解説は少しだけ。 --https://zenn.dev/reviq07/articles/5736cb799b3ffc#bluetooth 設定ファイルをGithubで公開し、サイトでは実装コマンドだけ書くスタイル。各設定の詳細な解説はない。 ~ ~ ~