GitHub Pagesを使ったWebページの公開のしかた
この記事では,基本的な Web ページを,GitHub Pagesを利用してインターネット上に公開する方法をご紹介します.
※本記事では GitHub のアカウントの作成手順についての説明は省略しています.
GitHub Pages とは?
GitHub Pages は,GitHub のリポジトリを使用して静的な Web ページを無料でホスティングできるサービスです.GitHub と連携していることから,セットアップや管理が容易なことが魅力です.
サイトの公開までの流れ
全体の大まかな流れは以下のようになります.
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.html
やasset/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 コマンドとは,ファイルやディレクトリに対してリンクを作成するコマンドである.
- リンクを作成?リンクとは?
- 作成してどうする?
イメージがわかなかったので,調べてみた.その過程のメモ.
リンク
リンクを作成することで,そのリンクから大元のファイルにアクセスすることができる.ハードリンクとシンボリックリンクの二種類あるうちのシンボリックリンクを主に使うとのこと.(よってハードリンクとシンボリックリンクの違いは触れない.)
リンクを作成する目的
- パス名が長いファイルやディレクトリに簡単にアクセスできる
- ファイルパスを維持しながらファイルを更新できる
- 同じ役割のファイルの重複を防ぐ
後半の二つについて,詳しく説明する.
ファイルパスを維持しながらファイルを更新できる
例えば,あるライブラリファイルを参照するシンボリックリンクがあるとする.ここでは,その大元のライブラリファイルをアップデートするケースを考える.
大元のライブラリファイル(lib_ver1.0.txt)を作成する.
echo "ver1.0の内容です" > lib_ver1.0.txt
大元のライブラリファイルに対してシンボリックリンク(lib.txt)を作成する.
ln -s lib_ver1.0.txt lib.txt
リンクにアクセスすると,大元のライブラリファイルにアクセスできることを確認する.
cat lib.txt // "ver1.0の内容です"と表示される
アップデートされたライブラリファイル(lib_ver1.1.txt)を作成する.
echo "ver1.1の内容です" > lib_ver1.1.txt
シンボリックリンクを更新する.古いリンクを削除し,新しいライブラリファイルに対して新しいシンボリックリンクを作成する.
rm lib.txt ln -s lib_ver1.1.txt lib.txt
リンクにアクセスすると,新しいライブラリファイルにアクセスできることを確認する.
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 の内容を更新するとサブプロジェクトのディレクトリにあるリンク経由で自動的に反映され,ファイルの重複を避けることができる.