第2章 セクション10　GitHubにレポジトリをプッシュ

この章ではGitHubのレポジトリを作成し、すでに作成したmy-blogをアップロードします。 そして、GitHub Pagesの設定をして、インターネット上にブログを公開できるようにします。

GitHubアカウントの作成

アカウントを持っていない方は、まずアカウントを作成します。

GitHubのスタート画面

以下の作業はGitHubにサインイン（サインインとログインは同じです）した状態で行います。

GitHubレポジトリの作成

レポジトリが作成されます。 画面には、次にすべきこと（複数の方法あり）について説明があります。 最下段にある説明が今回のケースに当てはまりますが、いきなりこの説明のようにやらずに、次のサブセクション以降の方法をとってください。

…or push an existing repository from the command line
git remote add origin git@github.com:ToshioCP/my-blog.git
git branch -M main
git push -u origin main

README.mdの作成

いったんここでLinuxの端末に戻ります。 まずは、カレントディレクトリをmy-blogに移動します。

GitHubにmy-blogローカル・レポジトリを上げる（アップロードすること）前に、いくつかやらなければなりません。

まず、README.mdについて説明します。 このファイルはレポジトリについての説明ファイルで、GitHub上では、コード一覧画面（最初に表示される画面）に現れます。 以下の例のような内容のテキストファイルを作り、README.mdという名前でローカル・レポジトリのトップに保存してください。 ただし、<username>は、あなたのGitHubのユーザ名に置き換えてください。

このレポジトリには「ペナン島へ行こう」というタイトルのブログのソースが収められています。
ブログはJekyllとGitHub Pagesの仕組みによって、次のアドレスで見ることができます。

[https://<username>.github.io/my-blog/](https://<username>.github.io/my-blog/)

このサイトをローカルで見る方法は以下の通りです。

1. Gitでこのレポジトリをクローンする
2. そのローカルレポジトリのトップにカレントディレクトリを移動する
3. 端末から`bundle install`
4. 端末から`bundle exec jekyll serve`
5. ブラウザで`localhost:4000/my-blog`にアクセスする

以上でローカルでブログを見ることができます。

_config.ymlの設定

Jekyllの設定ファイル_config.ymlを変更します。 変更は以下のようにしてください。これをコピペしても構いません。 なお、この例における、author, emailに対する値は、架空のものです。 また、<username>のところは、GitHubに登録したユーザ名です。

# Site settings
title: ペナン島へ行こう
author: 檳城島人
email: shimato-binjo@example.com
description: >-
  ペナン島には世界歴史遺産のジョージタウンをはじめ、魅力ある観光スポットが点在しています。
  このサイトでは、ペナン島の魅力を伝えるための情報を発信します。
domain: "<username>.github.io"
url: "https://<username>.github.io"
baseurl: "/my-blog"
github_username: <username>
lang: ja

# Build settings
# ---- GitHub Pages requires the following settings ----
lsi: false
safe: true
incremental: false
highlighter: rouge
gist:
  noscript: false
kramdown:
  math_engine: mathjax
  syntax_highlighter: rouge
# ------------------------------------------------------
plugins:
  - jekyll-feed

# Minima theme settings
theme: minima
minima:
  date_format: "%Y年%m月%d日"
show_excerpts: true

# Exclude from processing
exclude:
  - Gemfile
  - Gemfile.lock
  - .git
  - .gitignore
  - README.md
  - mise.toml
  - .ruby-version

上の設定について簡単に解説します。 以下では、一行に収めるために、マッピングを{と}で囲んだスタイル、シーケンス（リスト）を[と]で囲んだスタイルで書きました。

基本情報の設定

現代はスパムメールなどが多く、電子メールの公開はリスクがあります。 非公開を選ぶ場合は、上に書いたようにemailの行全体を削除してください。

URLの設定

GitHub PagesのURLに一致するように設定します。 先ほども書きましたが、<username>のところは、GitHubに登録したあなたのユーザ名です。

言語の設定

GitHub Pagesの要求する設定

GitHub Pagesのドキュメントには、lsi, safe, incremental, hilighter, gist, kramdownの設定について書かれています。 以下の設定は、やや専門的なので、はじめてJekyllを使う人には理解しにくいと思います。 とりあえず、例のように設定しておけば良いでしょう。 以下は簡単な説明ですが、読み飛ばしても構いません。

プラグインに関する設定

テーマ（Minima）に関する設定

ビルドから除くファイルの設定

excludeキーでは、ビルドから除くファイルを指定します。 指定されたファイルについて簡単に説明しますが、ここは読み飛ばしても構いません。

大域的な定数としての利用

上記の例ではでてきませんでしたが、_config.ymlには、すべてのページから参照できる 「グローバル定数」を定義できます。 Liquidテンプレート内では、site というキーワードを使ってアクセスします。

例えば、_config.ymlが次の記述を含んでいるとします。

doc-GitHub: "https://docs.github.com/en/pages"
doc-Jekyll: "https://devdocs.io/jekyll~3/"
doc-Liquid: "https://shopify.github.io/liquid/"

これらのキーは、どのページ（例えばindex.mdやブログ記事）からでもLiquidを使って参照できます。 その際はsite.の後にキーをつなげるだけです。

各ドキュメントは次のリンクをクリックしてみることができます。

- [GitHub Pagesのドキュメント][1]
- [Jekyllのドキュメント][2]
- [Liquidのドキュメント][3]

[1]: {{site.doc-GitHub}}
[2]: {{site.doc-Jekyll}}
[3]: {{site.doc-Liquid}}

重要なルール：サーバの再起動

Jekyllのローカルサーバー（jekyll serve）は、ソースファイルの変更を即座に検知してブラウザに反映してくれますが、_config.yml の変更は反映されません。 Jekyllが_config.ymlを読み込むのは、ビルド開始時のみです。 このファイルの書き換えた内容を反映させるためには、以下の手順が必要です。

  1. ターミナルで Ctrl + C を押して、サーバーを停止する
  2. 再度 bundle exec jekyll serve コマンドを実行してサーバーを再起動する

それでは、あらためて、ローカル・サーバを起動してみましょう。

$ bundle exec jekyll serve

_config.ymlにベースURLを追加したので、ブラウザに入力するアドレスも変わります。

http://localhost:4000/my-blog

このように、ベースURLを付け加えることをわすれないでください。

変更をコミット

README.mdの追加と_config.ymlの変更をGitレポジトリにコミットし、履歴に加えます。 コミットで-mオプションをつけると、エディタで編集しなくてもコミットメッセージを記録できます。

$ git add .
$ git commit -m "Add README.md and change _config.yml"

ローカル・レポジトリとGitHubの接続設定

すでに、my-blogはgit initしてGitのレポジトリになっています。 このレポジトリをさきほど作ったGitHubのmy-blogレポジトリと結びつけます。

$ git remote add origin git@github.com:（ユーザー名）/my-blog.git

（ユーザ名）のところは、GitHubに登録したあなたのユーザ名を当てはめます。 これで、originという名前のリモートレポジトリにGitHubのレポジトリが結びつきました。

結びつきができたら、ローカルの内容をGitHubにアップロード（push）します。 パスフレーズの入力が求められるので、sshの秘密鍵を作った時のパスフレーズを入力します。

$ git push -u origin main
Enter passphrase for key '/home/（Linuxのユーザ名）/.ssh/id_ed25519': 
Enumerating objects: 20, done.
Counting objects: 100% (20/20), done.
Delta compression using up to 8 threads
Compressing objects: 100% (16/16), done.
Writing objects: 100% (20/20), 6.82 MiB | 3.11 MiB/s, done.
Total 20 (delta 0), reused 0 (delta 0), pack-reused 0
To github.com:ToshioCP/my-blog.git
 * [new branch]      main -> main
branch 'main' set up to track 'origin/main'.
$

このコマンドはローカルの内容をリモートにアップロード（push）するものです。 -u origin mainをつけることで、ローカルとリモートのmainブランチが結びつきます。 これにより、次回からはgit pushと打つだけで、自動的にここに送られるようになります

GitHubのレポジトリをブラウザで見ると、ローカルと同じファイルが表示されていることがわかります。

GitHub Pagesの設定

GitHubのmy-blogレポジトリを開きます。 以下の手順でGitHub Pagesの設定をします。

しばらくしてから（1分程度）、そのページをリロードすると、一番上のGitHub Pagesセクションにメッセージとボタンが現れます。

Visit siteボタンをクリックしてサイトに移動します。 すると、ローカルでbundle exec jekyll serveにより見たページと同じものがネット上で確認できます。