制作したWebページをGitHubを使って公開する際の手順を記事にしていきます。
つい最近、僕もGitHub使って公開してみたのでその備忘録も兼ねて書きます。
準備するもの
Webページを公開するにあたり事前に準備しておくものはこちらです。
- 自作Webページのソースコード
必要に応じて画像ファイルとかも
公開手順
公開するまでの大まかな流れはこんな感じです。
- 「GitHub」のアカウントを作成する
- 公開用のリポジトリを作成する
- 自作のファイルをアップロードする
- ページが公開されているか確認する
それでは各手順の詳細を書いてきます。
GitHubのアカウント作成
こちらのリンクからGitHubのアカウントを作成します。
リンクを開くとこちらの画面が表示されます。
赤枠の「Sign up for GitHub」をクリックする。
ユーザネームなど入力していって、
赤枠の「Next: Select a plan」をクリックする。
登録プランを選びます。
今回は無料プランを選ぶので赤枠の「Choose Free」をクリックする。
下記のようなセットアップ画面が表示されます。
いろんな項目がありますが無視して「Complete setup」をクリックする。
そうすると登録時に入力したメールアドレスに確認メールが届きます。
メールにあるリンクをクリックすると登録完了です。
公開用のリポジトリ作成
リポジトリってなんだ！って人は、「webページ公開に必要なファイルとかを保管する場所」くらいに思っとけばいいと思います。
登録後にログインすると下記の画面が表示されます。
右上の「＋」を押すとメニューが出るので、
そこの「New repository」クリックする。
リポジトリ作成画面が表示されます。
「ユーザーネーム.github.io」のようにRepository nameを入力する。
※例えば「daique-daique.github.io」
入力したら赤枠の「Create repository」をクリックする。
リポジトリが出来上がります。
次に「README」作成するので赤枠のリンクをクリックする。
※READMEは、リポジトリの説明書みたいなものです。
READMEの編集画面が出てきますが、ここでは何もいじらずに下の方にある赤枠の「Commit new file」をクリックしてファイルを作成する。
自作ページをアップロード
リポジトリが出来たのでローカルにある自作のページをアップロードしていきます。
ソースコードをアップロード
まず自作ページのhtmlをアップロードします。
「Create new file」をクリックする。
ファイル作成画面が表示されます。
上のほうにある空欄にファイル名「index.html」を入力し、
画面真ん中の「Edit new file」に自作ページのコードをコピーする。
下のほうにある「Commit new file」をクリックし、ファイルを作成。
※複数のhtmlファイルがある場合は同様の手順で作成していってください。
cssファイルを作成する場合も同じですが、
もし別ディレクトリにファイルを作成する必要があれば、
「フォルダ名/ファイル名」のように入力すると新たに作られたフォルダの中にファイルが作成されます。
先ほど入力したフォルダ名の中にファイルが作成されていることが確認できます。
画像ファイルをアップロード
次にhtmlで使われている画像ファイルをアップロードします。
「Upload files」をクリックする。
アップロード画面が表示されるので、
画像ファイルを青枠にドラッグ＆ドロップする。
画像ファイルが順次アップロードされていくので、
終わったら「Commit changes」をクリックする。
アップロード済ファイルの編集・削除
ついでにアップロードしたファイルを編集・削除したい場合の手順を紹介します。
対象のファイルをクリックする。
画面右上らへんに下記のアイコンが
表示されるので、処理に応じてクリックする。
：編集する
：削除する
そうすると編集・削除ができます。
終わり次第「Commit changes」をクリックして完了です。
ページの公開状況を確認
最後にページを公開する設定になっているか確認します。
メニューバーの「Settings」をクリックする。
いろんな設定項目がずらーっと表示されるので
下のほうにある「GitHub Pages」の項目を探します。
見つけたら青枠のところをチェックしてください。
「Your site is published at ~~」ってなってたらOKです。
既にWeb上にページが公開されています。
もしダメだった場合は、
赤枠の「Source」が「None」になっているかもしれません。
その場合は「master branch」に変更してください。
以上で公開までの手順は終わりです。
意外と簡単でしたよね
今回のような静的なページを公開するだけならそんなに難しくなったんじゃないでしょうか。
冒頭でも書きましたが備忘録も兼ねてるので割と丁寧にまとめました。
やったことない人はぜひ参考に。
