概要
-
今回使用する定番ツールは以下の通り。
Jelyll（本家サイト、日本語サイト） ※日本語サイトは古い記述が多い。
Bootstrap（本家サイト、日本語サイト）
Font Awesome
Google Analytics
GitHub Pages（英語ドキュメント、日本語ドキュメント） -
Jekyllでサイトの構成と最低限のコンテンツを作成し、Bootstrapで見栄えを整えてレスポンシブにし、Font Awesomeのアイコンを使用し、Google Analyticsでアクセス解析に対応させ、GitHub Pagesで公開する。
-
「そこそこの見栄えのサイト」の表示例はこちら。 ※Takahashi Labのサイト内に置くため、リンク関係は若干修正されている。
-
「そこそこの見栄えのサイト」のリポジトリはこちら。 ※Takahashi LabのGitHub内に置くにあたり、README.mdは若干修正されている。
-
ディレクトリ構成は以下の通り。
.
├── .gitignore
├── Gemfile
├── Gemfile.lock
├── README.md
├── _config.yml
├── _data/
│ └── navi.yml
├── _includes/
│ ├── footer.html
│ └── header.html
├── _layouts/
│ └── default.html
├── _sass/
│ └── main.scss
├── assets/
│ └── css/
│ └── styles.scss
├── index.md
├── link.md
├── thema-a.md
└── thema-b.md
前提
- OSはmacOS Venturaを使用する。 ※OSの相違はRubyのインストールにだけ影響
- giboはインストールされているものとする。インストールされていない場合はこちらを参照してインストールしておく。
- GitHub CLIはインストールされているものとする。インストールされていない場合はこちら参照してインストールしておく。
Jekyllでサイトの構成と最低限のコンテンツを作成する。
Rubyをインストールする。 ※JekyllサイトのJekyll on macOSを参考にした。
% brew update # Homebrew本体およびformulaを最新版に更新
% brew upgrade # Homebrewでインストール済みのパッケージを最新版にアップグレード
% brew install chruby ruby-install
% ruby-install # インストールできるRubyのバージョンを確認
Stable ruby versions:
ruby:
2.6.10
2.7.7
3.0.5
3.1.3
3.2.0 # 最新版は3.2.0だが、Jekyllとの相性に問題あり（2023年1月6日時点）
jruby:
9.4.0.0
rbx:
5.0
（以下省略）
2023年1月6日時点では、Ruby 3.2.0はJekyllとの相性に問題あるようなので（例えば、こちら）、今回は3.1.3をインストールする。
% ruby-install ruby 3.1.3 # Ruby 3.1.3をインストール
% echo "source $(brew --prefix)/opt/chruby/share/chruby/chruby.sh" >> ~/.zshrc
% echo "source $(brew --prefix)/opt/chruby/share/chruby/auto.sh" >> ~/.zshrc
% echo "chruby ruby-3.1.3" >> ~/.zshrc # インストールした3.1.3を指定
% exec $SHELL -l # シェルを再起動
Jekyllをインストールする。 ※JekyllサイトのStep by Step Tutorialを参考にした。
% gem install bundler jekyll
サイト作成の準備をする。
% mkdir sample-site
% cd sample-site
% bundle init # Gemfileが作成される
% echo 'gem "jekyll"' >> Gemfile
% bundle # Gemfile.lockが作成される
レイアウトのテンプレートを作成する。
% mkdir _layouts
% vi _layouts/default.html
以下の内容を入力する。
<!doctype html>
<html>
<head>
<!-- 後ほど、Google AnalyticsのGoogleタグを挿入する位置 -->
<meta charset="utf-8">
<!-- 後ほど、Bootstrap関連のmetaタグを挿入する位置 -->
<title>{{ page.title }}</title>
<!-- 後ほど、Bootstrap関連のスタイルシートを挿入する位置 -->
<link rel="stylesheet" href="{{ '/assets/css/styles.css' | relative_url }}">
<!-- 後ほど、Font Awesomeのスクリプトを挿入する位置 -->
</head>
<body>
{% include header.html %}
<main>
{{ content }}
</main>
{% include footer.html %}
<!-- 後ほど、Bootstrap関連のスクリプトを挿入する位置 -->
</body>
</html>
スタイルシートを作成する。ただし、スタイルは後述するBootstrapで設定するため、ここではファイルを作成するだけ。
% mkdir _sass
% touch _sass/main.scss
% mkdir -p assets/css
% vi assets/css/styles.scss
以下を入力する。
---
---
@import "main";
サイト全体の設定ファイルを作成する。
% vi _config.yml
以下を入力する。
defaults:
-
scope:
path: ""
values:
layout: "default"
トップページを作成する。
% vi index.md
以下を入力する。
---
title: MySite - トップ
---
## トップ
サイトや著者の紹介など・・・
テーマＡのページを作成する。
% vi thema-a.md
以下を入力する。
---
title: MySite - テーマＡ
---
## テーマＡ
テーマＡのはなし・・・
テーマＢのページを作成する。
% vi thema-b.md
以下を入力する。
---
title: MySite - テーマＢ
---
## テーマＢ
テーマＢのはなし・・・
リンクのページを作成する。
% vi link.md
以下を入力する。
---
title: MySite - リンク
---
## リンク
リンクあれこれ・・・
ナビゲーションバー用のデータファイルを作成する。
% mkdir _data
% vi _data/navi.yml
以下を入力する。
- name: トップ
link: /
- name: テーマＡ
link: /thema-a.html
- name: テーマＢ
link: /thema-b.html
ナビゲーションバーを含んだヘッダーを作成する。
% mkdir _includes
% vi _includes/header.html
以下を入力する。ただし、gggggとtttttには各自のgithubおよびtwitterアカウントを入れる。
<header>
<nav>
<ul>
{% for item in site.data.navi %}
<li>
<a href="{{ item.link | relative_url }}">{{ item.name }}</a>
</li>
{% endfor %}
</ul>
<ul>
<li>
<a href="{{ '/link.html' | relative_url }}">リンク</a>
</li>
<li>
<a href="https://github.com/ggggg">GitHub</a>
</li>
<li>
<a href="https://twitter.com/ttttt">Twitter</a>
</li>
</ul>
</nav>
</header>
フッターを作成する。
% vi _includes/footer.html
以下を入力する。ただし、gggggには各自のGitHubアカウント、sssssにはサイトのオーナー名等を入れる。
<footer>
<hr>
<div>
<p>© 2023 <a href="https://ggggg.github.io/">sssss</a></p>
</div>
</footer>
一時的に別のターミナルを開いて、ローカルサーバーを起動する。
% cd sample-site
% bundle exec jekyll serve --trace
ブラウザで http://127.0.0.1:4000/ にアクセスして、サイトを確認する。以降、サイトを修正したら、ローカルサーバーをCtrl + Cで終了し、再起動して、修正内容を確認する。
元のターミナルに戻り、サイトの構築を続ける。
Bootstrapで見栄えを整えて、レスポンシブWebデザインにする。
レイアウトのテンプレートを修正する。
% vi _layouts/default.html
以下のように、<!-- 後ほど、Boostrap関連の・・・・・-->の行にBoostrap関連のmetaタグ、スタイルシート、スクリプトを設定する３行を挿入する。 ※BootstrapサイトのGet started with Bootstrapを参考にした。
＜修正前＞
.....
<meta charset="utf-8">
<!-- 後ほど、Bootstrap関連のmetaタグを挿入する位置 -->
<title>{{ page.title }}</title>
<!-- 後ほど、Bootstrap関連のスタイルシートを挿入する位置 -->
<link rel="stylesheet" href="{{ '/assets/css/styles.css' | relative_url }}">
.....
</main>
{% include footer.html %}
<!-- 後ほど、Bootstrap関連のスクリプトを挿入する位置 -->
</body>
</html>
＜修正後＞
.....
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ page.title }}</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="{{ '/assets/css/styles.css' | relative_url }}">
.....
</main>
{% include footer.html %}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>
ナビゲーションバーを設定するため、header.htmlを修正する。
% vi _includes/header.html
以下のように全面的に修正する。
<header>
<nav class="navbar navbar-expand-sm navbar-dark bg-primary">
<div class="container-fluid">
<a class="navbar-brand" href="{{ '/' | relative_url }}">MySite</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav me-auto">
{% for item in site.data.navi %}
<li class="nav-item">
<a class={% if page.url == item.link %}"nav-link active"{% else %}"nav-link"{% endif %} href="{{ item.link | relative_url }}">{{ item.name }}</a>
</li>
{% endfor %}
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="{{ '/link.html' | relative_url }}">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://github.com/ggggg">Github</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://twitter.com/ttttt">Twitter</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
レイアウトのテンプレートに、Bootstrapのコンテナを設定し、上側にマージンを取る。
% vi _layouts/default.html
以下のように修正する。
＜修正前＞
.....
<main>
{{ content }}
</main>
.....
＜修正後＞
.....
<main class="container-fluid mt-2">
{{ content }}
</main>
.....
フッターにBootstrapのコンテナを設定し、右寄せにする。
% vi _includes/footer.html
以下のように修正する。
＜修正前＞
<footer>
<hr>
<div>
<p>© 2023 <a href="https://ggggg.github.io/">sssss</a></p>
</div>
</footer>
＜修正後＞
<footer>
<hr>
<div class="container-fluid text-end">
<p>© 2023 <a href="https://ggggg.github.io/">sssss</a></p>
</div>
</footer>
Font Awesomeのアイコンを使用する。
こちらを参照して、Font Awesomeのアイコンを使用するためのスクリプトをコピーする。
コピーしたスクリプトを使って、レイアウトのテンプレートを修正する。
% vi _layouts/default.html
以下のように、<!-- 後ほど、Font Awesomeの・・・・・-->の行にペーストする。ただし、kkkkkには各自のKit Codeが入る。
＜修正前＞
.....
<link rel="stylesheet" href="{{ '/assets/css/styles.css' | relative_url }}">
<!-- 後ほど、Font Awesomeのスクリプトを挿入する位置 -->
</head>
.....
＜修正後＞
.....
<link rel="stylesheet" href="{{ '/assets/css/styles.css' | relative_url }}">
<script src="https://kit.fontawesome.com/kkkkk.js" crossorigin="anonymous"></script>
</head>
.....
アイコンを設定する。
$ vi _includes/header.html
以下のように修正する。
＜修正前＞
.....
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="{{ '/link.html' | relative_url }}">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://github.com/ggggg">Github</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://twitter.com/ttttt">Twitter</a>
</li>
</ul>
.....
＜修正後＞
.....
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="{{ '/link.html' | relative_url }}"><i class={% if page.url == "/link.html" %}"fas fa-link menu-icon current"{% else %}"fas fa-link menu-icon"{% endif %} title="Link"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://github.com/ggggg"><i class="fab fa-github menu-icon" title="Github"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://twitter.com/ttttt"><i class="fab fa-twitter menu-icon" title="Twitter"></i></a>
</li>
</ul>
.....
アイコンの大きさを調整する。またリンクのページが表示されている場合はリンクのアイコンが白くなるように設定する。
% vi _sass/main.scss
以下の内容を入力する。
.menu-icon {
font-size: 1.25rem;
}
.current {
opacity: 0.8;
color: white;
}
Google Analyticsを設定する。
こちらを参照して、Google Analyticsを使用するためのGoogleタグをコピーする。
コピーしたGoogleタグを使って、レイアウトのテンプレートを修正する。
% vi _layouts/default.html
以下のように、<!-- 後ほど、Google Analyticsの・・・・・-->の行にペーストする。ただし、G-aaaaaには各自のタグIDが入る。
＜修正前＞
.....
<head>
<!-- 後ほど、Google AnalyticsのGoogleタグを挿入する位置 -->
<meta charset="utf-8">
.....
＜修正後＞
.....
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-aaaaa"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-aaaaa');
</script>
<meta charset="utf-8">
.....
GitHubにアップロードして公開する。
.gitignoreとREADME.mdを作成する。
% gibo update
% gibo dump macOS Ruby Jekyll > .gitignore
% echo "# sample-site" > README.md
Gitのリポジトリを作成し、これまで作成したファイルを登録する。
% git init
% git add .
% git commit -m "first commit"
GitHub CLIでGitHubにログインする。 ※対話形式でコマンドを実行しており、以下には結果のみが表示されている。
% gh auth login
? What account do you want to log into? GitHub.com
? What is your preferred protocol for Git operations? HTTPS
? Authenticate Git with your GitHub credentials? Yes
? How would you like to authenticate GitHub CLI? Login with a web browser
! First copy your one-time code: oooo-tttt # GitHubにログインするためのワンタイムコード
Press Enter to open github.com in your browser...
✓ Authentication complete.
- gh config set -h github.com git_protocol https
✓ Configured git protocol
✓ Logged in as ggggg # gggggは各自のGitHubアカウント
GitHubリポジトリを作成し、ローカルリポジトリをプッシュする。
% gh repo create
? What would you like to do? Push an existing local repository to GitHub
? Path to local repository .
? Repository name sample-site
? Repository owner ggggg
? Description sample-site
? Visibility Public
✓ Created repository ggggg/sample-site on GitHub
? Add a remote? Yes
? What should the new remote be called? origin
✓ Added remote https://github.com/ggggg/sample-site.git
? Would you like to push commits from the current branch to "origin"? Yes
Enumerating objects: 23, done.
Counting objects: 100% (23/23), done.
Delta compression using up to 8 threads
Compressing objects: 100% (16/16), done.
Writing objects: 100% (23/23), 4.60 KiB | 2.30 MiB/s, done.
Total 23 (delta 0), reused 0 (delta 0), pack-reused 0
To https://github.com/ggggg/sample-site.git
* [new branch] HEAD -> main
branch 'main' set up to track 'origin/main'.
✓ Pushed commits to https://github.com/ggggg/sample-site.git
GitHubのsample-siteリポジトリをブラウザで開く。
% gh repo view -w
上メニューの「Settings」をクリックし、左メニューの「Pages」をクリックする。Branchで「main」を選択して、「Save」をクリックする。
ブラウザでhttps://ggggg.github.io/sample-siteを確認する。 ※数分かかる場合がある。
以降、ローカル環境でサイトを修正したら、以下のようにGitHubへ修正内容をプッシュする。
% git add .
% git commit -m "ccccc" # cccccにはコメントを入れる
% git push