Technology

[Github] Github pagesを使って、自分で作ったウェブサイトを公開する

2021-01-20

今回、ウェブサイトを初めてgithub pagesを使ってあげてみたので、その手順を整理する。

URL:https://shotaro-kamimura.github.io/cozy-experience/

github: https://github.com/Shotaro-Kamimura/cozy-experience


前提:公開できるのは静的ページのみ

Github pagesでは、静的サイトのみ公開できる。HTML, CSSとあとはJavaScriptも対応している。

なので、サーバーを使った動的ページをアップロードしたい場合は、Github pagesは使えない。


レポジトリを作り、ファイルを保存

まずはレポジトリを作成し、ファイルを保存する。

詳しくはこちらに述べた。


Github pagesの項目でSourceを保存する

Settingのページにいき、Github pagesの項目までスクロールする。

Branchをmainに設定し、select folderでrootかdocsを選択。


/docsを選択する場合は、docsフォルダの下にhtmlやcssやphotoフォルダーがあるように階層を作る。


最後にsaveを押すと、Sourceの上の部分でURLが発行される。


注意点

Github pagesの利用の際には注意点が何点かあるので注意。


メインのファイルは、index.htmlの名前にする

github pagesでは、index.htmlのファイル名を優先的に探す仕組みになっているらしい。

なので、index.htmlファイルがないと、404エラーになる。


README.mdがindex.htmlより優先されて表示される

同じ階層にREADME.mdとindex.htmlある場合、README.mdが優先される。

なので、README.mdを消すとか、何かしらの対処は必要。


コードを変更した時に、反映に少し時間がかかる

コードを変更した時に、すぐに確認したくなるが、反映にちょっと時間がかかる傾向がある。

なので変更したコードが効いたかどうか以前に、ディベロパーツールでそもそも変更したコードがサイトに適用されているかを確認する。

-Technology