EP 10: 作ったサイトを無料で公開してみよう

はじめに

HTML/CSSを学んで既存のサイトを模写したり、オリジナルサイトを制作したりすることができたら、次はそのサイトを公開する方法について学びましょう。
サイトを公開するには、レンタルサーバーを契約しないといけないと思う方もいるかも知れませんが、実は無料で公開する方法はあります。

本記事では、GitHubアカウントがあれば使用できるGitHub Pagesを使ってサイトを無料公開する方法を紹介します。

ファイルの準備

サイトを公開するには、HTMLファイルが必要です。
HTML/CSSといったフロントエンドのフレームワークにBootstrapというものがあります。
詳細については省略しますが、フレームワーク（枠組み）ですのでスタイリッシュなパーツやテンプレートが豊富に用意されています。
そのため、Bootstrapを使ったテーマやテンプレートが世の中に多く存在しています。

今回は、Start Bootstrapというサイトで無料配布されているこちらのテーマをダウンロードして使用します。

こちらのサイトにアクセスしたら、Free Download のボタンをクリックしてファイルをダウンロードします。

次にダウンロードした zipファイルを解凍して、フォルダ名を「freelancer」にリネームします（フォルダ名は別の名前でも構いません）。

では、このフォルダをVisual Studio Code（VS Code）で開いて中身を確認してみましょう。
index.htmlや style.css といったファイルの存在が確認できたかと思います。

これで公開するファイルの準備は整いました。

Git操作

次にダウンロードしたテーマをGitHubに上げるための準備をします。

VS Codeのターミナルを開いて次のコマンドを入力します。

ローカルリポジトリを作成

$ git init

全てのファイルをステージングエリアに追加

$ git add .

初回のコミットの作成

$ git commit -m "first commit"

なお、これらの操作については、こちらの記事で解説しています。 hirologue.hateblo.jp

これでGitHubに上げるための下準備が整いました。

リモートリポジトリの作成

次にGitHub上でリモートリポジトリを作成します。
リモートリポジトリの作成方法については、こちらの記事を参考にしてください。
hirologue.hateblo.jp

今回は、my-web-siteという名前のリモートリポジトリとします。
なお、作成するリモートリポジトリはFreeプランの場合、Publicを選択する必要があります。

Create Repository をクリックして表示されるこちらの画面のURLをコピーします。

リモートリポジトリの作成が済んだので、VS Codeに戻ってターミナルからコマンドを入力します。

リモートリポジトリの追加

$ git remote origin <コピーしたリモートリポジトリのURL>

リモートリポジトリの確認

$ git remote -v

リモートリポジトリにプッシュして内容を反映

$ git push origin main

最後にGitHubのリモートリポジトリにプッシュした内容が反映されていることを確認します。

GitHub Pagesでサイトを公開

いよいよサイトを公開する設定を行います。

次の手順でサイトを公開します。

GitHubのリポジトリページに移動します。
画面上部のSettingsタブを選択します。
画面左側のサイドバーからPagesを選択します。
Build and deploymentセクションで、Sourceが Deploy from a branch となっていることを確認します。
BranchがNoneになっている場合は、main を選択します。
/(root) が選択されていることを確認して Save をクリックします。

デプロイ完了まで数分かかりますので、お茶でも飲んで待ちましょう。

数分経過した後、画面をリロードすると Your site is live at に続いてURLが表示されます。

表示されたリンクをクリックして表示されたら成功です。

メモ

GitHub Pagesは、リモートリポジトリ直下にあるindex.htmlをトップページとして扱います。
仮にindex.htmlファイルがそこにない場合は、README.mdをトップページとして扱う仕様のようです。
トップページにしたいHTMLファイルはリモートリポジトリ直下にあるのが望ましいですが、必須ではありません。
リモートリポジトリ直下の別のフォルダ（例えば hogeフォルダ）にindex.htmlファイルがある場合は、次のようにURLを入力するとページが表示されます。

<表示されたURL>hoge/index.html

【参考】 docs.github.com

いかがだったでしょうか。
これで作成したサイトを公開することができるようになりました。
オリジナルサイトや模写したサイトは、学習した証として立派なポートフォリオとなります。
ぜひとも、公開して自分の実力をアピールしてみましょう！

この記事がHTML/CSSを学んでサイトを公開したいなと思っている方の一助になれば幸いです。

では！✋