はじめに

本記事を読んでほしい方

HTMLやCSSを学び終えた駆け出しエンジニアの方
GitHub Pagesの使い方がわからない方

GitHub Pagesとは？

GitHub Pagesとは、自分で作ったwebサイトを無料で公開できるGitHub公式のサービスです。HTMLやCSSを学んだら、自分でサイトを作成し、全世界へWebサイトを公開してみましょう！本記事では、GitHub Pagesを使って、サイトを公開する方法について説明します。

GitHub Pagesの使い方

1. GitHubアカウントを作成

GitHubのアカウントを作成しましょう。

無料か有料か選択する画面が出てくると思いますが、無料で問題ないです。

2. リポジトリを作成

リポジトリとは、自分が作成するWebサイトやアプリケーションのソースコードを一つひとつ管理するためのものです。サイトやアプリを作るときは、まず最初にGitHub上でリポジトリを作成しましょう。ちなみに、公開するサイトのURLはhttps://[アカウント名].github.io/[リポジトリ名]/となります。

画面右側の+ボタンをクリックし、New repositoryをクリックしましょう。

リポジトリ名を入力し、Publicを選択したらCreate repositoryボタンを押し、リポジトリの作成を完了させましょう。

3. HTML, CSSファイルのアップロード

リポジトリを作成したら、サイト公開用のHTML, CSSファイルをアップロードしましょう。Create repositoryボタンを押した後、以下のような画面に移ります。HTML, CSSファイルの作成がまだの方は、Creating a new fileを、すでにHTML, CSSファイルを作成済みの方はuploading an existing fileを選択しましょう。

4. Webサイトの公開

HTML, CSSファイルのアップロードが完了したら、いよいよサイトの公開です。リポジトリページのSettingsリンクをクリックしましょう。

settingsページに移ったら、Pagesリンクをクリック。

GitHub Pagesに遷移するので、mainブランチとしてsaveをクリックすればWebサイトの公開完了です。(しばらく時間がかかる場合があります。)

公開が完了すると、以下のようにVisit siteと出てくるので、クリックしてサイトを見てみましょう。

以上で説明を終了します。最後まで読んでいただきありがとうございました！

参考文献

より詳細な説明が以下の記事にございますので、ご参照下さい。