【GitHub】GitHub Pagesについて

記事概要

GitHub PagesというGitHubの機能について、まとめる

前提

• GitHubアカウントは作成済みである

GitHub Pagesとは

GitHubが提供している、静的Webページを公開するためのサービス
GitHubのリポジトリをそのままWebサイトとして公開することができ、公開したWebサイトには誰でもアクセスできる

手順1(サイトを作成)

1. 新規ファイルを作成する
2. 上記フォルダに下記ファイルを作成する
   • style.css
   • index.html
   • その他必要なファイル
3. ファイルを編集し、サイトをサイトを作成する
4. ブラウザで開いて確認する

   # 上記フォルダのディレクトリに移動
   % cd ~/[1.のフォルダ名]
   
   # ローカルサーバーを起動する
   % ruby -run -e httpd . -p 8000
   

5. http://localhost:8000/にアクセスする
6. control + Cでローカルサーバーを停止する

手順2(Gitで管理)

1. ターミナル.appで下記を実行する

   # 上記フォルダのディレクトリに移動
   % cd ~/[手順1のフォルダ名]
   
   # git initコマンドでGit管理できるようにする
   % git init
   

2. GitHub Desktopを開く
3. git initしたディレクトリを選択する
4. commitする
5. pushする(privateにしないように注意)

手順3(公開する)

1. ブラウザでGitHubのリポジトリを開く
2. SettingsからPagesを開く
3. Sourceを「Deploy from a branch」から「Github Actions」に変更する
4. 「Static HTML」の「Configure」をクリックする
5. 「Commit」する
6. URLが発行されるため、URLへ遷移するとサイトが公開されている

手順(コードを修正)

注意点は下記

• pushしてから変更が反映されるまでに20分以上時間かかることがある
• 1時間あたり10回までしか変更反映はされない

1. ローカル環境でコードを修正する
2. commitしてpushする
3. GitHub pagesのURLにアクセスすると、コード修正した内容が反映されている