GitHub PagesはGitHubが提供する静的サイトホスティングサービスです。
HTML / CSS / JavaScript のセットをリポジトリに push するだけで、無料でウェブサイトを公開できます。
準備
- GitHubアカウント
- Scoop
PowerShellスクリプトの有効化とsoopのインストールSet-ExecutionPolicy RemoteSigned -Scope CurrentUser irm get.scoop.sh | iex - Git
scoopでインストールscoop install git - VSCode(任意)
scoop install vscode
新規リポジトリの作成
GitHub上でリポジトリを作成します。
- GitHub → New Repository
- Repository name 例：
my-demo-app - Public を選択
- Initialize README は チェックしない
ローカルへクローン
作成したリポジトリをローカルでクローンします
git clone https://github.com/<ユーザー名>/my-demo-app.git
cd my-demo-appGitHub Pages 用のファイルを作る
index.html を作成
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>GitHub Pages Test</title>
</head>
<body>
<h1>Hello GitHub Pages</h1>
<p>ここにコンテンツを追加していきます。</p>
</body>
</html>VSCodeでmy-demo-appフォルダを開きindex.htmlを作成しgitのコミットを行いました。
GitHub Pages を有効にする
GitHub のリポジトリページで以下の手順を実行
- Settings → Pages
- “Build and deployment”
- Source：Deploy from a branch
- Branch：main / root
- Save
設定すると 10〜20 秒で公開されます。
公開URL
https://<ユーザー名>.github.io/my-demo-app/アクセスしてページが表示されれば成功です。
更新方法
git add .
git commit -m "update site"
git pushVSCodeのソース管理からpushすることも出来そうです。
感想
GitHubアカウントがあれば、Webページを即公開することを経験することができました。
使い方を覚えたので、何か有用な使い道を考えてみたいと思います。
コメント