個人サイト KeM's Clew の実体となるファイル群を管理しているリポジトリ。
URL はこちら。
下記の URL でもアクセスできる。
すべて https://kems-clew.net へリダイレクトされる。
独自ドメイン kems-clew.net は 2022-11-11 に Xserver Domain で取得したもの。
GitHub Pages の A レコード 及び AAAA レコードを Xserver Domain の DNS レコード設定に追加し、ドメインに問合せが来たら GitHub Pages の IP アドレスを返答するよう設定している。
設定の詳細は 4.1. 独自ドメインと DNS 設定 (詳細) を参照。
サイトの実体は GitHub Pages でホスティングされている。元の URL は下記。
main ブランチに存在する/docs ディレクトリをビルド用ディレクトリとして設定している。
SSL 証明書は Xserver SSL にて発行。ブランドは Let's Encrypt 。
HTTPS での公開は GitHub Pages の Enforce HTTPS 機能を使用している。
当サイトは HTML ソースのテンプレート化や マークダウン記法でのブログ機能 を実装している。
これらは GitHub Pages に組み込まれている静的サイトジェネレータ「Jekyll」の機能を使用している。
初回リリース時点で Jekyll の機能を使用しているのは以下のディレクトリ・ファイル。
/docs/_layouts/- サイト全体で使用するテンプレートファイルを格納するディレクトリ。
- 例えば
default.htmlは<head>タグ及び<body>タグ内のヘッダーとフッター、後述のタグ{{ content }}などが記述された共通テンプレートファイル。
/docs/_posts//docs/_drafts/-
ブログ投稿の下書きファイルを格納するディレクトリ。通常はビルドから除外される。
-
こちらはファイル名から日付を除去して配置する。
title.MARKUP -
jekyll serveへ--draftsオプションを付けて実行すると、ビルドの対象になり表示確認ができるようになる。 -
下書きを保存するためのディレクトリであるため、
.gitignoreにて Git 管理外としている。
-
/docs/_config.yml- Jekyll を使用したサイトのデフォルト設定値を定義するファイル。
- これらの他、ブレースホルダー
{ ... }{{ ... }}や YAML 形式での記述がされたファイル。-
{{ content }}{{ page.title }} -
<ul class="posts"> {% for post in site.posts %} <li> <span class="postDate">{{ post.date | date: "%Y-%m-%d" }}</span> <a href="{{ post.url }}">{{ post.title }}</a> </li> {% endfor %} </ul>
-
<link rel="stylesheet" href="{{ "/css/style.css" | relative_url }}">
-
YAML Front Matter （ファイルの先頭に記述）
--- title: Home layout: default page-category: home ---
-
テンプレートとして利用されるファイルには {{ content }} を始めとしたオブジェクトやタグなどの記述が存在する。
ソースとして利用されるファイルには YAML Front Matter が記述されている。
この YAML Front Matter 上に記述された情報やコンテンツ内容が、テンプレートのブレースホルダー内の変数へ挿入され、HTML ファイルが生成されるイメージ。
詳しくは参考文献の Jekyll 関連ページを参照。
Works ページの画像レイアウト・ライトボックス処理は以下の JavaScript ライブラリを使用している。
なお画像レイアウトの DOM 要素は JavaScript が書き出すため、JavaScript が無効な環境ではコンテンツが正常に表示されない。
このため暫定策として以下の記述を該当するページに配置している。
<!-- JavaScript が無効な環境で表示するコンテンツ -->
<noscript>
<p>
JavaScript が無効のため、コンテンツを正常に表示できませんでした。<br>
お手数ですがブラウザの設定をお確かめの上、ページの再読み込みを行ってください。
</p>
</noscript>v2.0.0 (2024-02-28 リリース) より Minima テーマをベースにした構造へ刷新。
このテーマは GitHub Pages 公式の手順 で作成されたテンプレートを使用している。このため内部構造が大きく変更された。
-
Gemfile,Gemfile.lockなど Ruby 関連ファイルの追加-
Gemfileの中で GitHub Pages がサポートしている Jekyll プラグインを使用するようにしている。gem "github-pages", "~> 231", group: :jekyll_plugins
-
-
反映するスタイルシートを
.cssから.scssへ刷新docs/assets/へmain.scssが配置されている。HTML の<link>タグで読み込まれるのはこちら。docs/minimaへminima.scssを配置する。- この中に配置された
minima.scssがさらに./minima/_***.scssの各ファイルをインポートしている。 - このディレクトリに格納すると、Jekyll 側の仕組みにより
main.scss側でのディレクトリ名指定が不要らしい。
- この中に配置された
- これによりソースコードがだいぶキレイになった。
-
ビルド時の実行コマンドの変更
-
Gemfile.lockに記述されたバージョンの Jekyll を使用しなければならないため、ビルド時は次のコマンドを実行する。bundle exec jekyll serve -
jekyll serveでは環境にインストールされている Jekyll が使用されてしまう。
-
-
その他、各コンポーネントの切り分けやあしらいの調整など全体的にリファクタリング。
より詳しい再現手順やビルド方法は次のリポジトリを参照すること。
下記を参考に環境構築を行う。
- (~ v1.3.0) kenkenpa198/tutorial-jekyll >
2. 環境構築メモ - (v2.0.0 ~) kenkenpa198/helloworld-github-pages-with-jekyll
-
/docsディレクトリへ移動する。$ cd docs -
下記いずれかの
jekyllコマンドでカレントディレクトリをルートディレクトリとしてビルドする。# サイトをビルドし、_site ディレクトリに出力する $ bundle exec jekyll build # ビルド後、変更を加える度に再構築を行う。基本はコレ # あわせて http://localhost:4000 でローカルサーバが立ち上がる $ bundle exec jekyll serve # ブログ投稿の下書きを追加してビルドするオプション # 下書きは _drafts ディレクトリへ配置する $ bundle exec jekyll serve --drafts
-
jekyll serveを使用した場合、以下のように出力される。$ bundle exec jekyll serve Configuration file: /home/.../kems-clew.net-v2/docs/_config.yml To use retry middleware with Faraday v2.0+, install `faraday-retry` gem Source: /home/.../kems-clew.net-v2/docs Destination: /home/.../kems-clew.net-v2/docs/_site Incremental build: disabled. Enable with --incremental Generating... Jekyll Feed: Generating feed for posts done in 0.81 seconds. Auto-regeneration may not work on some Windows versions. Please see: https://github.com/Microsoft/BashOnWindows/issues/216 If it does not work, please upgrade Bash on Windows or run Jekyll with --no-watch. Auto-regeneration: enabled for '/home/.../kems-clew.net-v2/docs' Server address: http://127.0.0.1:4000/ Server running... press ctrl-c to stop.
-
/docs配下に_siteディレクトリが生成され、その配下にビルドされたウェブサイトのソースが配置される。$ tree --dirsfirst -L 2 . # /docs/ ├── _drafts ├── _layouts │ ├── default.html │ └── post.html ├── _posts │ ├── 2022-11-18-hello-world.md │ ├── ... │ └── 2022-11-23-whats-clew.md ├── _site # _site ディレクトリ。ビルドされたウェブサイトのソースが配置される │ ├── 2022 │ ├── assets │ ├── 404.html │ ├── CNAME │ ├── index.html │ ├── notes.html │ └── works.html ├── assets │ ├── css │ ├── data │ ├── images │ └── js ├── 404.html ├── CNAME ├── _config.yml ├── index.html ├── notes.html └── works.html
-
Server address:に表示されているローカルホストアドレス (http://127.0.0.1:4000/) へブラウザでアクセスする。 -
/docs/_siteに配置されたindex.htmlが表示される。 -
/docs配下のソースファイルを上書き保存すると、自動で再ビルドされる。
2022-11-11 当時、ドメインの取得後に Xserver Domain で対応した設定。
GitHub Pages の A レコード 及び AAAA レコードを Xserver Domain の DNS レコード設定に追加する。
- A レコードを作成するには、apex ドメインが GitHub Pages の IP アドレスを指すようにします。
185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153
- AAAA レコードを作成するには、apex ドメインが GitHub Pages の IP アドレスを指すようにします。
2606:50c0:8000::153 2606:50c0:8001::153 2606:50c0:8002::153 2606:50c0:8003::153
www サブドメインは kenkenpa198.github.io の CNAME レコードを DNS レコード設定へ追加して利用できるようにしている。
ご利用の DNS プロバイダーに移動し、サブドメインがサイトの既定のドメインを指す CNAMECNAME レコードを作成します。 たとえば、ユーザー サイトのサブドメイン www.example.com を使用する場合は、www.example.com が .github.io を指す CNAME レコードを作成します。 組織サイトのサブドメイン another.example.com を使用する場合は、another.example.com が .github.io を指す CNAME レコードを作成します。 CNAME レコードは常に、.github.io または .github.io (リポジトリ名を除く) を指す必要があります。 正しいレコードの作成方法に関する詳しい情報については、DNSプロバイダのドキュメンテーションを参照してください。 サイトの既定のドメインの詳細については、「GitHub Pages について」を参照してください。
これらをまとめると下表の対応となる。
実際の XServer Domain > DNSレコード設定 画面上でもこの内容で設定している [^1] 。
| ホスト名 | 種別 | 内容 |
|---|---|---|
| kems-clew.net | A | 185.199.108.153 |
| kems-clew.net | A | 185.199.109.153 |
| kems-clew.net | A | 185.199.110.153 |
| kems-clew.net | A | 185.199.111.153 |
| kems-clew.net | AAAA | 2606:50c0:8000::153 |
| kems-clew.net | AAAA | 2606:50c0:8001::153 |
| kems-clew.net | AAAA | 2606:50c0:8002::153 |
| kems-clew.net | AAAA | 2606:50c0:8003::153 |
| www.kems-clew.net | CNAME | kenkenpa198.github.io |
これにより、ドメインに来た通信が GitHub Pages の IP アドレスへ転送される。
なお公開情報のため nslookup コマンドで確認できる。
$ nslookup kems-clew.net
Server: 192.168.3.1
Address: 192.168.3.1#53
Non-authoritative answer:
Name: kems-clew.net
Address: 185.199.109.153
Name: kems-clew.net
Address: 185.199.108.153
Name: kems-clew.net
Address: 185.199.110.153
Name: kems-clew.net
Address: 185.199.111.153
Name: kems-clew.net
Address: 2606:50c0:8002::153
Name: kems-clew.net
Address: 2606:50c0:8001::153
Name: kems-clew.net
Address: 2606:50c0:8003::153
Name: kems-clew.net
Address: 2606:50c0:8000::153$ nslookup www.kems-clew.net
Server: 192.168.3.1
Address: 192.168.3.1#53
Non-authoritative answer:
www.kems-clew.net canonical name = kenkenpa198.github.io.
Name: kenkenpa198.github.io
Address: 185.199.108.153
Name: kenkenpa198.github.io
Address: 185.199.109.153
Name: kenkenpa198.github.io
Address: 185.199.110.153
Name: kenkenpa198.github.io
Address: 185.199.111.153
Name: kenkenpa198.github.io
Address: 2606:50c0:8000::153
Name: kenkenpa198.github.io
Address: 2606:50c0:8001::153
Name: kenkenpa198.github.io
Address: 2606:50c0:8003::153
Name: kenkenpa198.github.io
Address: 2606:50c0:8002::153_site ディレクトリをルートとして別の Web サーバを立てることもできる。
この場合、Jekyll を使用せずに作成した通常のウェブサイトのように扱うことができる。
WSL で開発を行う場合、スマートフォンなどの外部端末で表示確認をする際の代替手段となる (※) 。
例えば VS Code の拡張機能「Live Server」の場合、下記の手順になる。
-
3.2. ビルド・Web サーバの立ち上げ・表示 の工程 2 まで進め、
_siteディレクトリと配下のファイルをビルドする。 -
Windows 環境側で 新規の VS Code を開く。WSL 拡張機能 は使用しない。
-
例)
# WSL 側で _site が次の場所の場合…… $ pwd /home/.../kems-clew.net/docs/_site
# Win 側では次の場所を VS Code で開く。 PS > pwd Path ---- Microsoft.PowerShell.Core\FileSystem::\\wsl.localhost\Ubuntu\home\...\kems-clew.net\docs\_site
-
-
_siteディレクトリをルートとして Live Server を実行する。 -
初期設定だとポート
5500でサーバが構築されるので、http://127.0.0.1:5500へアクセスする。- 外部端末からアクセスする場合は
ipconfigで表示した<<IPv4 アドレス>>:5500でアクセスする。要ポート開放。
- 外部端末からアクセスする場合は
(※) 3.2. ビルド・Web サーバの立ち上げ・表示 を WSL 環境で行った場合、同ネットワーク内の別端末からのアクセスが難しい。WSL バージョン 2 は仮想ネットワーク上での実行であることにより、Linux ディストリビューションの IP アドレスの取得など手順がやや煩雑なため。
上記記事のとおり回避策はあるが難易度高めなので、現状は前述の手順で表示確認を行っている。
-
Font Awesome
License: CC BY 4.0 License
About: Free License | Font Awesome -
Noto Sans Japanese (Google Fonts)
License: SIL Open Font License (OFL)
About: Noto Sans Japanese - Google Fonts -
jQuery
License: MIT License
About: Download jQuery | jQuery -
imagesLoaded
License: MIT License
About: MIT License | imagesLoaded -
Masonry
License: MIT License -
Colorbox
License: MIT License
- Jekyll • シンプルで、ブログのような、静的サイト | プレーンテキストを静的サイトやブログに変えましょう
- Jekyllには投稿予約機能がある＆Jekyllにタイムゾーンを設定 | 為せばnull
- jekyll/minima: Minima is a one-size-fits-all Jekyll theme for writers.
- Neos21/neos21.net: Repository of Neo's World
- JekyllのCategories一覧をアルファベット順にする
- Jekyllのテーマを自作する 基本編 - 第4回 - Sass（CSS）でスタイルを作成する | e-joint.jp
- Code Block Highlighter Copy/Paste (Jekyll)
- CSS 最近のWebページやアプリのレイアウトに適した、ラッパーの実装テクニックを徹底解説 | コリス
- CSSでメディアクエリ(Media Queries)の基本的な書き方、記述の意味を理解し、「何となく使う」を卒業する。 | WEMO
- 【2022年】レスポンシブデザインのブレイクポイントまとめ｜どのデバイスでも綺麗に見える秘訣とは ｜caroa design magazine
- スクロールバーの出現によるガタつきを防ぐCSS | q-Az
- width,heighとpaddingの同時指定によるレイアウト崩れをbox-sizingdで防ぐ - Qiita
- 【CSS】display:flexでmax-widthが効かない時の対処法。calcやflex-basisの活用 #CSS - Qiita
- Flexbox からコンテンツはみ出る問題を完全に解決する #CSS - Qiita
- 【簡単】CSSでスクロールバーのデザイン変更【カスタマイズ可能】 | ジトサイト