GitHub Pagesで静的サイトを公開する

CUIとGUI混ぜ混ぜで。
GitHub Desktopを使用しています。

まずはGitHubのトップ画面で新規のリモートリポジトリの作成

緑のNewボタン、左のメニューの一番上、どっちでも同じ画面に移動します。

• Repository nameは名前。ローカルでディレクトリ名のイメージ。分かり易ければなんでもよい。
• Descriptionは説明文。必須ではなく任意。READMEに書けば良いので必要はないっちゃない。
• 次のラジオボタンの部分は、公開するならPublic。とっても秘密裏に開発を行う場合はPrivateにする。
• その下のチェックボックスはリポジトリの説明文(README.md)を作成するかどうかのボックス。リポジトリには初期設定が必要でREADMEを追加しておくとその設定を省ける。
• Add .gitignore、Add a licenseについては最下記にて。今回はとりあえずで公開テストをするために作成したので必要がないので無記。

作成するとこんなページに行く。

1段落目にアドレスがあるので右にあるボードボタン押してコピーしたら、ターミナルで

% cd ~/projects
% git clone [アドレスのペースト]
% cd [Repository nameで記述した名前]

ローカルリポジトリを作成し、cdで移動。

2段落目の部分はREADMEあたりで言っていた初期設定とか説明ですね。最初はgit initしてgit管理するように設定とかいうアレ。
READMEは現状必要ないので代わりと言ってはなんですが、Webページ用に本文テキストを入力したindex.htmlを作成

$ echo "Welcome to GitHub Pages !!" > index.html

次に、GitHub Desktopの操作。

ターミナルでgit cloneしましたが、clone Reposirotyでアドレス貼ってもOKですね。あんまり使った事ないけどw

※ 5/8更新
cloneしたいアドレスを上側にコピペ、下側はcloneしたリポジトリを入れる場所を指定。

今回はAdd Existing Repositoryで既にcloneしてあるリポジトリをchooseで選択し、ローカルリポジトリとして設定しました。

変更内容がステージングされているのが確認できたら

上側の小さい入力フォームにコミットメッセージのタイトルを記述。こちらはないとどういった変更をしたのかが分からなくなるので必要です。
具体的に詳細を書く場合は下のDescriptionに記述。
その後は青いボタンを押してcommit。 commit後はFetch originのタブの辺りにpublish branchって出てきますが、これを押す事でリモート側にpushできます。最初はこの表記で以降はpush originって表示されます。少し下にも同じ青いボタンが出てきますが、どっち押しても同じです。
CUIは視覚的に分かりづらいですが、ターミナルで

% git add .
% git commit -m '[コミットメッセージ]'
% git push origin master

と入力して実行すれば同じことが出来るのでこっちのが早いっすね。

pushしたらGitHubのリモートリポジトリにアクセスし、Settingタブをクリック。

下の方に行くとGirHub Pages欄があるのでSourceをmaster branchにすると

切り替わった後にサイトを公開する準備が整ったと出てくる
Your site is ready to be published at https://seramay.github.io/test-pages/

クリックすると

これで公開できるようになった、と。感動した！！
※ 公開数時間後にcss、js適用テスト行ったため、現状は内容が違います。

気をつけなくてはいけないのが、これまで僕が学んできたRailsで作成したサーバーを扱うような動的サイトは違う形(AWSやHeroku)で公開する必要があるってこと。

今回参考にさせていただいた記事
GitHub Pagesでウェブサイト公開
GitHub Pagesを使ってサクッとWebページを公開する

---

.gitignoreファイル

Add .gitignoreは.gitignoreファイルをデフォルトで作成するかというもの。
で、.gitignoreって何なのかですが、git の管理対象から外すファイル名やディレクトリ名を記述する際に使用する。
僕は脳味噌風船野郎なのでこれだけでは「だから何？」って言う感じなのですが、管理対象から外しておく(記述しておく)ことで、例えばアプリなどを制作してローカル側で変更があった内容を全てcommitしてリモートにpushする際に、.gitignoreに記述されているファイル等はcommitされなくなります。
なんでそんなことする必要があるかと言うと、リモートリポジトリ側でPublicにしている場合、pushされたファイル名にアクセスした全てのユーザーが見ることができるわけなので、

• 公開したくない個人情報やパスワードなどの設定ファイル(master.keyや.env)
• 管理する必要がない投稿された画像ファイルを格納するディレクトリなど

を記述しておき、gitの管理対象から外しておく必要があるというわけです。う〜ん、難しい！
注意点としては一度pushしてしまったファイルなどは.gitignoreに記述しても、管理対象から外すことはできず、変更された内容はそのままpushされ更新してしまう事。
最初にpushする前に確認して.gitignoreに書いておかないといけないってことですな。

そういった場合の具体例を備忘録として残しておく(自分のためですw)

sample-appディレクトリで作業していた内容を一度pushしてしまってから.gitignoreで

config/secrets.yml
.env

の2つのファイルを管理対象から外したいってなった場合、ターミナル側で

% cd ~/projects/sample-app
% git rm --cached config/secrets.yml
% git rm --cached .env

まず、管理対象から外したいファイルがあるアプリケーションのディレクトリにcdで移動。
2行目と3行目のコマンドでファイルを消さずに管理対象から外す。
git rm --cached [ファイル名]の形。

--cachedオプションをつけないとファイルごと消えてしまうので注意が必要。

参考にさせていただいた記事
【Git】git rm --cached [ファイル名]：ファイルを管理対象から除外する

Add a license

リポジトリにライセンスを付与するか、というもの。
オリジナルのフレームワークだったり、ライブラリを作る場合は必要なのかもですが、当然今の僕には不要。

もっと公開しやすくなるように色々学ばないといけないですね。

したらな❗️ 👋