Jekyll を使った静的ウェブサイト
2017年11月11日
概要
このウェブサイトは、Jekyll を使って構築しました。Jekyll は HTML と CSS だけで手早く効率的にブログやウェブサイトを作成できる静的サイトジェネレーターです。
フロントエンドには Bootstrap を使用し、モバイルとデスクトップ両方に対応したレスポンシブデザインを実現しています。ナビゲーションバーやジャンボトロンなどの UI コンポーネントも簡単に導入でき、見た目にも洗練されたデザインが得られます。
ナビゲーションバーには Font Awesome を統合し、SNS アイコンを追加することで視覚的な魅力を高めています。
CSS の管理には SASS を使い、スタイルをモジュール化して保守性を向上させています。
また、日英バイリンガル対応のため、英語ページを複製して日本語版を作成し、対応するページを ID で紐づけました。Jekyll の Liquid テンプレート言語を使った簡単なスクリプトにより、英語と日本語のページを動的に対応付け、ナビゲーションバーから言語を切り替えられるようにしています。
このウェブサイトのソースコードは GitHub 上で公開しています。