! 注意 !
この記事はPagesのサービス内容やデプロイ方法などを全く理解しないままの状態でホームページを作ってみた過程のものでして、私の試行錯誤の履歴として投稿記事は残しますが内容自体はおすすめしません。別の記事を投稿する予定なので、そちらを見たほうがよいです。つーことで、そこんとこヨロシクお願いします。
結局はデプロイActionに多少時間がかかるので、ゆっくり待てばSaveをクリックするだけで公開されますし、ソースを更新すれば自動的にデプロイされます。
とりあえずやってみる
Github環境だけで静的コンテンツに限定されるけれど、HTMLを自由に公開することができると聞いて色々やって見ましたが、普段の突撃精神のみでマニュアルもあまり読まず（ってか、英語が主体だし）やってみたら思った通りに動かず、見事に打ちのめされてしまいました。
まあいろいろと勝手なことをやりすぎて、環境がへんてこになってたのも原因なんでしょう。
で、ちょっと気を取り直してGithubが公開している関連のヘルプ記事などを読みながら、色々やってみたら上手くいきましたが、ドキュメントでもPagesでサイト公開するための全体の関連性がよくわからないため、備忘録として残すことで、私のあとに続く初心者がたどる道筋の一つになればと思っとります。
追記）
Github Pagesの作り方に関する日本語の説明が見つかりましたので、リンクを貼っときます。
ポイントはデプロイのやり方
Github Pagesっていうくらいだから、最初にGithubに自分のアカウントを持っておく必要があります。
アカウントは無料でヨイのですが、無料ユーザがPagesで公開するためには対象となるリポジトリをパブリックにしておく必要があるっぽいので注意が必要です。
まあ公開した資源だからパブリックでもヨイ気もしますが、あまり人に見せたくない資源は同じリポジトリには置かない方が無難だと思います。
で、資源を置いとくリポジトリ画面から「Setting」をクリックして、次に左下らへんにでてくる「Pages」をクリックすると出てくるのが下の画面です。
画面の真ん中らへんにある「Build and deployment」というのが今回のキモです。
ここの「Source」指定はなにもしないと「Deploy from a Branch」となっていますが、このままだと上手くデプロイ出来なかったのが私の場合の問題でした。
「簡単に公開できるよ」と説明しているサイトは、ほとんどが「Pages」の画面の「Source」は「Deploy from a branch」のままにして、その下にある「Branch」を「main」「/root」にしたままでオーケーと紹介されてましたが、私はダメ（やり方を間違ってたかもしれないけれど）でした。
一回目は上手く言っても、HTMLを修正後にそれが反映されない状況が続いてました。
なので、試しに画面にあるとおりこいつをクリックして「Github Actions」にします。そうすると２つの選択肢が出て来ますが、私の場合よくわからないまま右側の「Static HTML」の「Configure」を選びました。
そうする下の画面みたくルート配下に ".github/workflows/static.yml"というファイルが自動的に作られます。
ここまでできればオーケーです。
あとはルート配下に表示したいHTMLファイルを「index.html」という名前にして登録すれば、自動的に「Actions」が先程作成されたstatic.ymlファイルを実行してindex.htmlをデプロイしてくれます。
成功したのか失敗したのかは「Actions」のログを見て確認できます。
作成されたサイトのURLは「Pages」のいちばん上にある「Your site is live at」のあとに書いてありますし、その右側の「Visit site」ボタンをクリックすれば表示されますので、表示されればオーケー。失敗すると404だのエラー表示が出てきますので、何が間違っているか地道に探しましょう。多くはデプロイが上手く言ってないと思われるので、「Actions」のログを見ることから始めましょう。
まとめ
Github pages関連の紹介記事を読むと、指定したリポジトリにindex.htmlファイルをおいてからpagesでチョチョイとクリックすれば公開されるっぽい印象を受けますが、実はデプロイ処理が裏で動いています。まあ考えれば当たり前なんですが、初心者にはそこらヘンが上手く理解出来てないのが混乱する原因でしょうね。実際、私がそうだったし。
ymlファイルを認識した瞬間、Twitter botを作った時に同じように自動実行のためにymlファイルを作ったことが思い出されて、それで全体の仕組みがなんとなく理解され、上手く処理できるようになりました。
イメージとしてはindex.htmlを更新するたびに、ymlファイルで指定された処理が実行され毎回コンテナを立ち上げてその上でindex.htmlを表示する仕組み(いわゆるちっさいHTMLファイル公開用の仮想サーバー）が動いているって言う事っぽいです。しらんけど。
詳しい人にわかりやすく仕組みを教えていただきたい、とかなんとか。
おまけ
自動的に作られるstatic.ymlファイルは基本そのままで問題ありませんが、index.htmlファイルの置き場所を変えたいときには以下のソースのうち「path: './doc'」の記述を修正しましょう。
作成直後は「path: '.'」とルートを参照するようになっていますが、この場合はルートにある/docの中にあるindex.htmlを参照するように設定変更してます。
上の方にある「branches: ["main"]」は参照するBranch指定っぽいので、ここを変えればmain以外のBranchからもデプロできる（ハズ）です。
# Simple workflow for deploying static content to GitHub Pages
name: Deploy static content to Pages
on:
# Runs on pushes targeting the default branch
push:
branches: ["main"]
# Allows you to run this workflow manually from the Actions tab
workflow_dispatch:
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
contents: read
pages: write
id-token: write
# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
group: "pages"
cancel-in-progress: false
jobs:
# Single deploy job since we're just deploying
deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v3
- name: Setup Pages
uses: actions/configure-pages@v3
- name: Upload artifact
uses: actions/upload-pages-artifact@v2
with:
# Upload entire repository
path: './doc'
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v2
index.htmlが参照する画像ファイルなどはとりあえずindex.htmlと同じディレクトリに置いとけばそのまま参照してくれました。
分類用のディレクトリの中に置く場合のHTML記述は相対パスを設定すればいいはずだけど、やってないのでやり方については別の方の説明を参照してください。
それからもひとつ、公開用のHTMLファイルを更新すれば自動でデプロイしてくれますので便利です。自動で公開してほしくない場合には「cancel-in-progress: false」の指定をTrueにすれば自動更新しなさっぽいけど、ホンマかどうかは自分で調べましょう。そしてその結果を教えてください。
まあ登録さえしていれば無料会員でも利用可能だし、様々な有名プロジェクトも利用しているしで、とりあえずやってみれば面白いとおもいます。
データ編集などのいろんな処理はバックで動くDjangoやFlaskでしか書けない私はJavascriptが不案内なのですが、そこらあたりが自由自在な方であれば、動的なサイトも公開できるんですね。
なので、もう少し勉強してみよう。