定番ツールを組み合わせて「そこそこの見栄えのサイト」を公開する

## 概要
- 今回使用する定番ツールは以下の通り。
Jelyll（[本家サイト](https://jekyllrb.com/)、[日本語サイト](http://jekyllrb-ja.github.io)）　※日本語サイトは古い記述が多い。
Bootstrap（[本家サイト](https://getbootstrap.com/)、[日本語サイト](https://getbootstrap.jp)）
[Font Awesome](https://fontawesome.com/)
[Google Analytics](https://marketingplatform.google.com/about/analytics/)
[GitHub Pages](https://pages.github.com/)（[英語ドキュメント](https://docs.github.com/en/pages)、[日本語ドキュメント](https://docs.github.com/ja/pages)）

- Jekyllでサイトの構成と最低限のコンテンツを作成し、Bootstrapで見栄えを整えてレスポンシブにし、Font Awesomeのアイコンを使用し、Google Analyticsでアクセス解析に対応させ、GitHub Pagesで公開する。
- 「そこそこの見栄えのサイト」の表示例は[こちら](https://tkhslab.github.io/out-of-jc/sample-site/)。　※[Takahashi Lab](https://tkhslab.github.io)のサイト内に置くため、リンク関係は若干修正されている。
- 「そこそこの見栄えのサイト」のリポジトリは[こちら](https://github.com/tkhslab/sample-site)。　※[Takahashi LabのGitHub](https://github.com/tkhslab)内に置くにあたり、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](https://github.com/simonwhitaker/gibo)はインストールされているものとする。インストールされていない場合は[こちら](https://qiita.com/tkhslab/items/d790d1affe87047fdbb4)を参照してインストールしておく。
- [GitHub CLI](https://cli.github.com)はインストールされているものとする。インストールされていない場合は[こちら](https://qiita.com/tkhslab/items/8f7a612a49261f4dc427)参照してインストールしておく。

## Jekyllでサイトの構成と最低限のコンテンツを作成する。
Rubyをインストールする。　※Jekyllサイトの[Jekyll on macOS](https://jekyllrb.com/docs/installation/macos/)を参考にした。

```shell
% 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との相性に問題あるようなので（例えば、[こちら](https://thoughtfulapps.com/articles/jekyll/ruby/undefined-method-tainted-jekyll-error)）、今回は3.1.3をインストールする。

```shell
% 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](https://jekyllrb.com/docs/step-by-step/01-setup/)を参考にした。

```shell
% gem install bundler jekyll
```

サイト作成の準備をする。

```shell
% mkdir sample-site
% cd sample-site
% bundle init     # Gemfileが作成される
% echo 'gem "jekyll"' >> Gemfile
% bundle     # Gemfile.lockが作成される
```

レイアウトのテンプレートを作成する。

```shell
% mkdir _layouts
% vi _layouts/default.html
```

以下の内容を入力する。

```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で設定するため、ここではファイルを作成するだけ。

```shell
% mkdir _sass
% touch _sass/main.scss
% mkdir -p assets/css
% vi assets/css/styles.scss
```

以下を入力する。

```css
---
---
@import "main";
```

サイト全体の設定ファイルを作成する。

```shell
% vi _config.yml
```

以下を入力する。

```yml
defaults:
  -
    scope:
      path: ""
    values:
      layout: "default"
```

トップページを作成する。

```shell
% vi index.md
```

以下を入力する。

```markdown
---
title: MySite - トップ
---
## トップ

サイトや著者の紹介など・・・
```

テーマＡのページを作成する。

```shell
% vi thema-a.md
```

以下を入力する。

```markdown
---
title: MySite - テーマＡ
---
## テーマＡ

テーマＡのはなし・・・
```

テーマＢのページを作成する。

```shell
% vi thema-b.md
```

以下を入力する。

```markdown
---
title: MySite - テーマＢ
---
## テーマＢ

テーマＢのはなし・・・
```

リンクのページを作成する。

```shell
% vi link.md
```

以下を入力する。

```markdown
---
title: MySite - リンク
---
## リンク

リンクあれこれ・・・
```

ナビゲーションバー用のデータファイルを作成する。

```shell
% mkdir _data
% vi _data/navi.yml
```

以下を入力する。

```yml
- name: トップ
  link: /
- name: テーマＡ
  link: /thema-a.html
- name: テーマＢ
  link: /thema-b.html
```

ナビゲーションバーを含んだヘッダーを作成する。

```shell
% mkdir _includes
% vi _includes/header.html
```

以下を入力する。ただし、`ggggg`と`ttttt`には各自のgithubおよびtwitterアカウントを入れる。

```html
<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>
```

フッターを作成する。

```shell
% vi _includes/footer.html
```

以下を入力する。ただし、`ggggg`には各自のGitHubアカウント、`sssss`にはサイトのオーナー名等を入れる。

```html
<footer>
  <hr>
  <div>
    <p>&copy; 2023 <a href="https://ggggg.github.io/">sssss</a></p>
  </div>
</footer>
```

一時的に別のターミナルを開いて、ローカルサーバーを起動する。

```shell
% cd sample-site
% bundle exec jekyll serve --trace
```

ブラウザで [http://127.0.0.1:4000/](http://127.0.0.1:4000/) にアクセスして、サイトを確認する。以降、サイトを修正したら、ローカルサーバーをCtrl + Cで終了し、再起動して、修正内容を確認する。

元のターミナルに戻り、サイトの構築を続ける。

## Bootstrapで見栄えを整えて、レスポンシブWebデザインにする。
レイアウトのテンプレートを修正する。

```shell
% vi _layouts/default.html
```

以下のように、```<!-- 後ほど、Boostrap関連の・・・・・-->```の行にBoostrap関連のmetaタグ、スタイルシート、スクリプトを設定する３行を挿入する。　※Bootstrapサイトの[Get started with Bootstrap](https://getbootstrap.com/docs/5.3/getting-started/introduction/)を参考にした。

```html
＜修正前＞
.....
    <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>
```

```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を修正する。

```shell
% vi _includes/header.html
```

以下のように全面的に修正する。

```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のコンテナを設定し、上側にマージンを取る。

```shell
% vi _layouts/default.html
```

以下のように修正する。

```html
＜修正前＞
.....
    <main>
      {{ content }}
    </main>
.....
```

```html
＜修正後＞
.....
    <main class="container-fluid mt-2">
      {{ content }}
    </main>
.....
```

フッターにBootstrapのコンテナを設定し、右寄せにする。

```shell
% vi _includes/footer.html
```

以下のように修正する。

```html
＜修正前＞
<footer>
  <hr>
  <div>
    <p>&copy; 2023 <a href="https://ggggg.github.io/">sssss</a></p>
  </div>
</footer>
```

```html
＜修正後＞
<footer>
  <hr>
  <div class="container-fluid text-end">
    <p>&copy; 2023 <a href="https://ggggg.github.io/">sssss</a></p>
  </div>
</footer>
```

## Font Awesomeのアイコンを使用する。

[こちら](https://qiita.com/tkhslab/items/f9abe0424ebd9f73a00c)を参照して、Font Awesomeのアイコンを使用するためのスクリプトをコピーする。

コピーしたスクリプトを使って、レイアウトのテンプレートを修正する。

```shell
% vi _layouts/default.html
```

以下のように、```<!-- 後ほど、Font Awesomeの・・・・・-->```の行にペーストする。ただし、kkkkkには各自のKit Codeが入る。

```html
＜修正前＞
.....
    <link rel="stylesheet" href="{{ '/assets/css/styles.css' | relative_url }}">
    <!-- 後ほど、Font Awesomeのスクリプトを挿入する位置 -->
  </head>
.....
```

```html
＜修正後＞
.....
    <link rel="stylesheet" href="{{ '/assets/css/styles.css' | relative_url }}">
    <script src="https://kit.fontawesome.com/kkkkk.js" crossorigin="anonymous"></script>
  </head>
.....
```

アイコンを設定する。

```shell
$ vi _includes/header.html
```

以下のように修正する。

```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>
.....
```

```html
＜修正後＞
.....
        <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>
.....
```

アイコンの大きさを調整する。またリンクのページが表示されている場合はリンクのアイコンが白くなるように設定する。

```shell
% vi _sass/main.scss
```

以下の内容を入力する。

```css
.menu-icon {
  font-size: 1.25rem;
}

.current {
  opacity: 0.8;
  color: white;
}
```

## Google Analyticsを設定する。
[こちら](https://qiita.com/tkhslab/items/60711ee05e98026cc5b3)を参照して、Google Analyticsを使用するためのGoogleタグをコピーする。

コピーしたGoogleタグを使って、レイアウトのテンプレートを修正する。


```shell
% vi _layouts/default.html
```

以下のように、```<!-- 後ほど、Google Analyticsの・・・・・-->```の行にペーストする。ただし、`G-aaaaa`には各自のタグIDが入る。

```html
＜修正前＞
.....
  <head>
    <!-- 後ほど、Google AnalyticsのGoogleタグを挿入する位置 -->
    <meta charset="utf-8">
.....
```

```html
＜修正後＞
.....
  <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を作成する。

```shell
% gibo update
% gibo dump macOS Ruby Jekyll > .gitignore
% echo "# sample-site" > README.md
```

Gitのリポジトリを作成し、これまで作成したファイルを登録する。

```shell
% git init
% git add .
% git commit -m "first commit"
```

GitHub CLIでGitHubにログインする。　※対話形式でコマンドを実行しており、以下には結果のみが表示されている。

```shell
% 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リポジトリを作成し、ローカルリポジトリをプッシュする。

```shell
% 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リポジトリをブラウザで開く。

```shell
% gh repo view -w
```

上メニューの「Settings」をクリックし、左メニューの「Pages」をクリックする。Branchで「main」を選択して、「Save」をクリックする。

ブラウザで```https://ggggg.github.io/sample-site```を確認する。　※数分かかる場合がある。

以降、ローカル環境でサイトを修正したら、以下のようにGitHubへ修正内容をプッシュする。

```shell
% git add .
% git commit -m "ccccc"     # cccccにはコメントを入れる
% git push
```