「Webページを無料で公開したい」
「簡単にデプロイできるサービスを知りたい」
この記事はそんな方へ向けて書いています。
こんにちは。
エンジニア転職を目指してプログラミング学習をしている、うっちゃんです。
HTML/CSSを学習したあと、Webページを公開したい方も多いと思います。
でも、レンタルサーバーを契約すると料金がかかると悩んでいませんか？
実はGitHub Pagesを使えば無料でかんたんにWebページを公開できます。
この記事ではGitHub Pagesの概要と使い方を紹介します。
目次
GitHub Pagesとは
GitHubはソフトウェア開発府ジェクトのためのソースコード管理サービスです。
（参考：GitHub）
Webページを無料で公開できるサービスとしてGitHub Pagesがあります。
GitHubPagesとは、GitHubが提供するホスティングサービスで、Git/GitHubのリポジトリを用いて簡単に利用できます。
GitHub Pagesには大きく分けて2つの種類があります。
1つはユーザーのWebページを公開するユーザーサイトです。
アカウント1つにつきひとつしか作れないサイトで、公開されるURLは「ユーザー名.github.io」となります。
もう1つはプロジェクトサイトで、いくつでも作れます。
公開されるURLは「ユーザー名.github.io/プロジェクト名」になります。
私はユーザーサイトをまとめページにしており、さまざまなプロジェクトサイトの一覧を掲載しています。
（参考：私のユーザーサイト）
ホスティングサービスとは
インターネットを介してサーバーをレンタルするサービスです。
物理サーバーを仮想的に区分けし、ユーザーごとに領域を割り当てます。
身近に例えると賃貸マンションのようなものです。
マンションを買って、いろんな人に部屋を貸すイメージ。
（参考：ホスティングサービスとは）
静的ページと動的ページ
GitHub Pagesは静的なWebページをホスティングするサービスです。
データベースを用いるような動的なWebページは公開できません。
静的ページとは誰がいつどこで見ても同じページが表示されるものです。
HTML、CSS、JavaScriptが使えます。
一方、動的ページとは文字や画像がアクセスするたびに変わるものです。
ユーザーに適した内容のHTMLを都度サーバー側でつくります。
PHPやRuby、Pythonなどで書かれたサイトを指します。
例えばショッピングサイト、会員ページ、WordPressが該当します。
GitHub Pagesは動的ページが使えないので注意しましょう。
使用上の注意点
上記の通り、GitHub Pagesは静的なWebページのみ公開できます。
また、ファイルをアップロードしてからサイトが更新されるまで時間がかかります。
私は10分程度で更新されましたが、長い方は3時間かかることもあります。
あと、プライベートリポジトリであってもインターネット上で公開されるので注意が必要です。
Webページを公開する方法
Webサイトを公開する手順を解説します。
全体の流れは以下のとおりです。
- GitHubのアカウントを作成する
- リポジトリを作成する
- ファイルをアップロードする
- GitHub Pagesの設定を変更する
初心者でも簡単にできる方法をまとめましたので紹介します。
アカウントの作成
GitHubにアクセスします。
メールアドレスを入力して、sign up fot GitHubを押します。
（参考：GitHub）
パスワード、ユーザー名、メールの受取設定を行い、アカウントを作成します。
メールアドレス宛に認証コードが届くので、コードを確認して認証します。
チームメンバー数や学生/教師を問われます。
今回はJust me、Studentを選択しました。
使用したい機能を問われます。
今回はコードの管理がメインなので、Collaborative codingを選びました。
料金プランを問われます。
無料でサイト公開したいのでFreeを選択しました。
これで管理画面に入れます。
右上のアイコンを開いてYour repositoriesを開きます。
次にリポジトリを作成しましょう。
リポジトリの作成
リポジトリとはファイルやプログラムなどの保管場所です。
リポジトリにHTML、CSSファイルをアップロードすることでWebページを公開できます。
まずはリポジトリを作成しましょう。
RepositoriesのNewを開きます。
ユーザーサイトを作るときはRepository nameを「ユーザー名.github.io」にします。
例えば私のアカウント名はuchida20200808なので、「uchida20200808.github.io」にします。
あとは何も変更せずにCreate repositoryを押します。
次にファイルをアップロードしましょう。
ファイルのアップロード
HTMLやCSS、JavaScriptをアップロードします。
アップロードはGitコマンドを使う方法と、ファイルをドラッグする方法があります。
初心者向けなのでファイルをドラッグしてアップロードする方法を紹介します。
uploading an existing fileを開きます。
HTML、CSS、JavaScript、画像ファイルなどをアップロードしてCommit Changesを押します。
Commit Changesは保存ボタンを意味します。
押し忘れるとアップロードされないのでご注意ください。
設定の変更
Webページを公開するために設定を変更します。
Settingsを開きます。
Pagesを開き、rootになっていることを確認します。
Webページが公開されていればURLが表示されます。
URLを開いてWebページを見てみましょう。
Webページを公開できました。
Webページを更新する方法
Webページを更新するときはファイルをアップロードするだけです。
RepositoriesのAdd fileからUpload filesを選びます。
更新したファイルをアップロードしてCommit Changesを押すだけです。
更新していないファイルも一緒にアップロードしても問題ありません。
Actions画面で更新が完了したかチェックできます。
まとめ
GitHub PagesでWebページを無料で公開する方法を紹介しました。
- アカウントの作成
- リポジトリの作成
- ファイルのアップロード
- 設定の変更
ポートフォリオサイトの公開やビジネスに役立つと嬉しく思います。
この記事がよかったらTwitterやブログで紹介いただけると嬉しいです。