GitHub Pagesを使ったWebページの公開のしかた

この記事では,基本的な Web ページを,GitHub Pagesを利用してインターネット上に公開する方法をご紹介します.

※本記事では GitHub のアカウントの作成手順についての説明は省略しています.

GitHub Pages とは?

GitHub Pages は,GitHubリポジトリを使用して静的な Web ページを無料でホスティングできるサービスです.GitHub と連携していることから,セットアップや管理が容易なことが魅力です.

サイトの公開までの流れ

全体の大まかな流れは以下のようになります.

  1. GitHubリポジトリを準備
  2. ローカルで Web ページを準備
  3. コミットとプッシュ
  4. GitHub Pages を有効化

GitHubリポジトリを準備

GitHub にログインし,ホーム画面の左上あたりにあるnewボタンから新しいリポジトリを作成します.リポジトリ名を入力(ここでは Sample とします)し,公開設定はPublicを選択します.Public にしないと GitHubPages は利用できないので注意.

ローカルで Web ページを準備

リポジトリを作成したら,ローカルで Web ページを作成します.

まずローカルのディレクトリを用意します. 僕のいつも以下の手順でディレクトリを用意します.

cd
cd  happiness/hc_practice (HappinessChainの課題提出用のディレクトリ)
mkdir sample (GitHubで作成したリポジトリ名)
cd sample

ローカルのディレクトリに入りました.ここから Web ページを作成します. 今回はこちらのテンプレートを使って作成します.

ページに飛んだ後ダウンロードボタンを押すと,zip ファイルがダウンロードされます.ファイルを解凍し,そのフォルダ内にある中身を全てコピーし,現在の sample ディレクトリ直下にペーストします.

この時点で,

open index.html

とすると Bootstrap のテンプレートの Web ページが表示できます.

課題内容はこのテンプレートを名前や写真や文章を差し替えるとのことですので,index.htmlasset/img/profile.pngに少々手を加えます(詳しくは省略).

コミットとプッシュ

こうして ローカルにWeb ページが準備できました.そしたら以下の手順でコミット,プッシュを行います.(正確には template のコードをダウンロードした時点でコミットをしておくのが良いですが,この記事では省略します.)

git init
git remote add origin (GitHubのリポジトリのURL)
git add .
git commit -m "サイトを作成"
git push origin main

GitHub Pages を有効化

GitHubリポジトリに移動し,push できていることが確認できたら,GitHub Pages を有効化する設定を行います.

画面上部にあるSettingsのボタンを押し,次のページの左部にあるPagesのボタンを押します.そしてBranchの項目を main とし,saveボタンで保存します. そしてリロードすると画面上部に

Your site is live at https://(あなたのアカウント名).github.io/sample/

といった形で URL が表示されます.このURLからあなたのWebサイトにアクセスできるということで,これで GitHubPages を使ってページを公開することができました.

おわりに

以上が Web サイトを GitHubPages を使って公開する手順になります.詳しい手順を省略している部分もありますが,内容としてはとてもシンプルなものとなっていることがわかると思いますので,これから GitHubPages を使おうとしている方にとって参考になれば幸いです.

lnコマンドを調べる中で学んだこと

ln コマンドとは,ファイルやディレクトリに対してリンクを作成するコマンドである.

  • リンクを作成?リンクとは?
  • 作成してどうする?

イメージがわかなかったので,調べてみた.その過程のメモ.

リンク

リンクを作成することで,そのリンクから大元のファイルにアクセスすることができる.ハードリンクとシンボリックリンクの二種類あるうちのシンボリックリンクを主に使うとのこと.(よってハードリンクとシンボリックリンクの違いは触れない.)

リンクを作成する目的

  • パス名が長いファイルやディレクトリに簡単にアクセスできる
  • ファイルパスを維持しながらファイルを更新できる
  • 同じ役割のファイルの重複を防ぐ

後半の二つについて,詳しく説明する.

ファイルパスを維持しながらファイルを更新できる

例えば,あるライブラリファイルを参照するシンボリックリンクがあるとする.ここでは,その大元のライブラリファイルをアップデートするケースを考える.

  1. 大元のライブラリファイル(lib_ver1.0.txt)を作成する.

     echo "ver1.0の内容です" > lib_ver1.0.txt
    
  2. 大元のライブラリファイルに対してシンボリックリンク(lib.txt)を作成する.

     ln -s lib_ver1.0.txt lib.txt
    
  3. リンクにアクセスすると,大元のライブラリファイルにアクセスできることを確認する.

     cat lib.txt // "ver1.0の内容です"と表示される
    
  4. アップデートされたライブラリファイル(lib_ver1.1.txt)を作成する.

     echo "ver1.1の内容です" > lib_ver1.1.txt
    
  5. シンボリックリンクを更新する.古いリンクを削除し,新しいライブラリファイルに対して新しいシンボリックリンクを作成する.

     rm lib.txt
     ln -s lib_ver1.1.txt lib.txt
    
  6. リンクにアクセスすると,新しいライブラリファイルにアクセスできることを確認する.

     cat lib.txt // "ver1.1の内容です"と表示される
    

このように,ファイルパスを一貫させたままライブラリのバージョンを更新できる.

同じ役割のファイルの重複を防ぐ

想定シナリオとして,プロジェクトで共通の設定ファイルを複数の場所で使用する場合を考える.

共通の設定ファイル common-config.txt が /project/config/ ディレクトリにある.

プロジェクトの異なるサブプロジェクトでこの設定ファイルを使用したい場合,各サブプロジェクトのディレクトリにシンボリックリンクを作成する.

ln -s /project/config/common-config.txt /project/subproject1/config.txt
ln -s /project/config/common-config.txt /project/subproject2/config.txt

これにより,common-config.txt の内容を更新するとサブプロジェクトのディレクトリにあるリンク経由で自動的に反映され,ファイルの重複を避けることができる.