本サイトは、研究者が最小限のコストで「能力の証明(Proof of Work)」を世界に発信することを目的に構築されています。ここでは、本サイトの設計思想と、同様のサイトを構築・運用するための技術的仕様を記録します。
Markdown内にカスタム属性 data-lang-content を付与したタグを配置し、JavaScriptで表示/非表示を制御しています。これにより、1つのMarkdownファイルで多言語管理が可能になります。
CSS変数(Custom Properties)を使用し、body タグの属性を切り替えることで配色を瞬時に変更します。
新しい実績やプロジェクトを追加する際は、以下の手順のみで完結します。
index.md や achievements.md を開いて内容を追記。git add .
git commit -m "update: 実績の追加"
git push origin main
このサイトの構成を流用する場合、以下の構成を維持することが重要です。
_layouts/: サイトの骨格となるテンプレート。index.md: トップページの内容。blog.md: 記事一覧。posts/: 個別記事の格納先。本サイトのソースコードは、私の GitHubリポジトリ で公開されています。
This site is designed for researchers to showcase their “Proof of Work” globally with minimal overhead. This post documents the design philosophy and technical specifications required to build and operate a similar site.
By using custom attributes like data-lang-content within Markdown and controlling visibility via JavaScript, we manage multiple languages in a single file.
Implemented using CSS Variables (Custom Properties). Color schemes are swapped instantly by toggling attributes on the body tag.
Updating achievements or projects only requires these steps:
index.md or achievements.md.git add .
git commit -m "update: add achievement"
git push origin main
To reuse this setup, maintain the following structure:
_layouts/: Main site templates.index.md: Homepage content.blog.md: Post listings.posts/: Individual blog posts.The source code is available at my GitHub Repository.