GitHub Pagesで簡単にWEBサイトを公開する手順を解説

この記事では、GitHub Pagesの概要、主な特徴、基本的な使い方、そして利用する際の注意点について理解できます。また、リポジトリの作成から公開までの手順、publicとprivateリポジトリの違い、重要なファイルの説明、そしてGitHub Pagesの活用方法までを包括的に学ぶことができます。

GitHub Pagesとは？
リポジトリの作成
リポジトリにアップロード
公開するブランチとフォルダを選択
1. ダウンロード方法
まとめ

GitHub Pagesとは？

GitHubのリポジトリから直接Webサイトを公開できる
HTML、CSS、JavaScriptファイルを公開可能
個人、組織、プロジェクトのサイトを作成できる
無料で利用可能（パブリックリポジトリの場合）

主な特徴

簡単な設定: リポジトリの設定から数クリックで公開可能
自動デプロイ: GitHubにプッシュするだけで自動的にサイトが更新される
カスタムドメイン対応: 独自ドメインの使用が可能
静的サイトジェネレータ対応: Jekyll等のツールと連携可能

使い方の基本手順

GitHubにリポジトリを作成（または既存のリポジトリを選択）
Webサイトのファイル（HTML、CSS等）をリポジトリにアップロード
公開するブランチとフォルダを選択
自動生成されたURLでサイトにアクセス可能

利用上の注意点

パブリックリポジトリの場合、サイトの内容も公開される
大規模なデータベース連携や動的コンテンツには不向き
トラフィック制限あり（月100GB、帯域幅100GB/月）

GitHub Pagesは、個人プロジェクトやポートフォリオサイト、技術文書の公開など、静的コンテンツの公開に適した便利なツールです。

リポジトリの作成

Githubアカウント作成がまだの方はこちら

「Create repository」をクリックします。既存のリポジトリがある場合は、「New」をクリックします。

リポジトリが作られていない場合

既存のリポジトリがある場合

今回は、ポートフォリオサイトを公開するのでリポジトリの設定を以下のようにします。

手順

リポジトリ名は「sample-portfolio」
説明文は「This is a sample portfolio site.」
「Public」を選択
「Add a README file」にチェック
「Add .gitignore」は「HTML,CSS,Javascript」のテンプレートがないので「None」のまま
「Choose a license」で「MIT License」を選択
「Create repository」をクリック

ポートフォリオサイトは通常、「public」に公開することが一般的です。その理由と、プライベートで使用する場合の考慮点は以下の通りです：

「public」公開の利点

幅広い露出: 誰でもアクセスできるため、予期せぬ機会や接点が生まれる可能性があります.
24時間365日のアピール: 常時公開されているため、世界中からいつでも閲覧可能です.
自動営業効果: パブリックに公開することで、自動的に営業活動を行っているのと同じ効果が得られます.
検索可能性: 検索エンジンにインデックスされ、潜在的なクライアントや雇用主に見つけてもらいやすくなります.

「private」使用の考慮点

アクセス制限の手間: 特定の人にのみアクセス権を付与する必要があり、管理が煩雑になる可能性があります。
機会損失: 偶然の出会いや予期せぬ機会を逃す可能性があります。
信頼性の低下: パブリックに公開していないことで、透明性や信頼性が低下する可能性があります。
利便性の低下: 取引先や面接官が閲覧する際に、追加の手順（アクセス権の要求など）が必要になります。

ポートフォリオサイトは、基本的にパブリックに公開することが推奨されます。ただし、特定のプロジェクトや機密情報を含む場合は、サイト内の一部をパスワード保護するなど、部分的なアクセス制限を設けることも検討できます。

リポジトリの作成が完了すると以下のページが表示されます。

READMEファイルとは？

プロジェクトの概要、使い方、インストール方法などを記述するファイル
通常README.mdという名前で作成し、マークダウン形式で記述する
リポジトリのトップページに自動的に表示される
プロジェクトの最初の印象を決める重要な役割を果たす

READMEファイルの内容

# 個人ポートフォリオサイト

このリポジトリは、シンプルで効果的な個人ポートフォリオサイトのテンプレートです。HTML、CSS、JavaScriptを使用して構築されており、初心者からスキルを磨きたい中級者まで幅広く活用できます。

## 特徴

- レスポンシブデザイン
- モダンでクリーンなレイアウト
- カスタマイズ可能なセクション（自己紹介、スキル、プロジェクト、お問い合わせ）
- スムーズスクロール機能
- フォーム送信の基本的な処理

## 構成

- `index.html`: メインのHTMLファイル
- `styles.css`: CSSスタイルシート
- `script.js`: JavaScriptファイル

## カスタマイズ方法

1. `index.html`を開き、個人情報やプロジェクト詳細を更新します。
2. `styles.css`でカラースキームや特定の要素のスタイルを調整します。
3. `script.js`で追加の機能や動的な要素を実装します。

## 使用方法

1. このリポジトリをクローンまたはダウンロードします。
2. `index.html`をブラウザで開いてサイトをプレビューします。
3. 必要に応じてコンテンツとスタイルをカスタマイズします。
4. 変更をコミットし、GitHubページなどでホストします。

## 貢献

バグの報告や機能の提案は、Issueを開いてください。プルリクエストも歓迎します。

## ライセンス

このプロジェクトはMITライセンスの下で公開されています。詳細は[LICENSE](LICENSE)ファイルをご覧ください。

LICENSEファイル（MIT）とは？

柔軟性が高い: MITライセンスは非常に寛容なライセンスで、他の人があなたのコードを自由に使用、修正、配布することを許可します
商用利用可能: ポートフォリオサイトを見た企業や個人が、あなたのコードを商用プロジェクトで使用することも許可されます
シンプルで理解しやすい: MITライセンスは短く、簡潔で、理解しやすいため、法的な複雑さを避けられます
広く認知されている: 多くの開発者や企業がMITライセンスを理解し、受け入れています。
著作権の保護: MITライセンスは著作権を放棄するものではありません。あなたの作品のクレジットは保護されます
通常LICENSEという名前のファイルで、リポジトリのルートに配置する

ポートフォリオサイトの場合、MITライセンスが最も一般的で適切な選択肢となることが多いです。ただし、特定のコンテンツ（画像、テキストなど）に対しては、Creative Commons ライセンスを併用することも検討してください。

リポジトリの設定で選択すると自動で記述してくれます。

LICENSEファイル（MIT）

MIT License

Copyright (c) 2024 make-and-learn

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

.gitignoreファイルとは？

一時的なファイルを無視したいとき
- 例：作業中に自動的に作られる下書きファイルなど
個人的な設定ファイルを共有したくないとき
- 例：パスワードが書かれたファイルなど
大きすぎて共有する必要のないファイルがあるとき
- 例：ビルドした後にできる大きなファイルなど

.gitignoreファイルを使うことで、プロジェクトをきれいに保ち、必要なファイルだけを共有することができます。これは、チームで作業するときや、自分のコードを公開するときにとても役立ちます。

作成手順

「Add file」を選択して、プルダウンメニューを開きます。
「Create new file」をクリックします。

作成手順

ファイル名「.gitignore」
テンプレート選択は「None」のまま
内容を記述
「Commit changes」をクリックしてファイルを作成

以下の「.gitignore」の内容は、HTML、CSS、JavaScriptを使用した基本的なポートフォリオサイトに対してお勧めの設定です。

.gitignoreの内容

# OS generated files (OSが自動的に作成するファイル)
.DS_Store          # Macのシステムファイル
Thumbs.db          # Windowsのサムネイル情報

# Editor directories and files (コードエディタが作成する設定ファイルやバックアップ)
.vscode/           # Visual Studio Codeの設定フォルダ
*.swp              # Vimのスワップファイル
*.swo              # Vimのオフスワップファイル

# Dependency directories (プロジェクトの依存パッケージを格納するフォルダ)
node_modules/      # npmでインストールされたパッケージ

# Build output (コンパイルやビルド時に生成される成果物のフォルダ)
dist/              # ビルド出力用フォルダ
build/             # 別のビルド出力用フォルダ

# Logs (アプリケーションが生成するログファイル)
*.log              # ログファイル（エラーメッセージなど）

# Environment variables (環境変数を含むファイル)
.env               # APIキーやパスワードなどの機密情報

# Backup files (バックアップファイル)
*.bak              # 自動生成されるバックアップファイル

# Temporary files (一時ファイル)
*.tmp              # 作業中に生成される一時的なファイル

# Keep index.html tracked (index.htmlファイルは追跡対象として維持)
!index.html       # 重要なHTMLファイルなので追跡する

# Keep styles.css tracked (styles.cssファイルは追跡対象として維持)
!styles.css       # 共有すべきCSSファイル

# Keep script.js tracked (script.jsファイルは追跡対象として維持)
!script.js        # 重要なJavaScriptファイルも追跡する

# 注意: '!'で始まる行は、上記で指定した無視ルールを打ち消します。
# つまり、これらの特定のファイルは、似たような他のファイルが無視されても追跡されます。

以下に、.gitignoreファイルの記述の決まりごとをまとめました。

.gitignoreファイルの記述方法

規則	説明
基本的な記述方法	1行に1つのパターンを記述。ファイル名やディレクトリ名を直接指定。
コメント	`#`で始まる行はコメントとして扱われる。
ワイルドカード	`*`: 0文字以上の任意の文字列にマッチ。 `?`: 任意の1文字にマッチ。
ディレクトリの指定	`/`で終わる名前はディレクトリを指す。先頭の`/`はルートディレクトリを意味。
否定パターン	`!`で始まるパターンは前の指定を打ち消す。
階層指定	`**`は任意の階層のディレクトリにマッチ。
複数のgitignoreファイル	プロジェクト内の複数の場所に配置可能。より深い階層のgitignoreが優先される。
空行	無視される。
大文字小文字の区別	デフォルトでは区別される。
エスケープ	特殊文字を通常の文字として扱う場合は`\`でエスケープする。

リポジトリにアップロード

「Add file」を選択して、プルダウンメニューを開きます。
「Upload file」をクリックします。

作成したファイルを赤枠の中に、ドラッグ＆ドロップします。今回は以前作成したサンプルポートフォリオサイトを使用します。

ファイルが取り込まれたら、「Commit changes」をクリックしてコミットします。

以上で、ポートフォリオサイトに必要なファイルが揃いました。次の項目でWEB上に公開してみましょう。

公開するブランチとフォルダを選択

リポジトリのページで、「Settings」をクリックします。

左端のサイドバーの「Pages」を選択
「Branch」項目の「None」をクリックしてプルダウンメニューを表示します。
「main」ブランチを選択します。

フォルダは「/(root)」のままで「Save」をクリックして保存します。

「Github Pages source saved」と表示され、ファイルの保存が完了します。

「Pages」の設定画面を更新するとURLが表示されます。URL表示までしばらくかかる場合もあります。「URL」もしくは「Visit site」をクリックするとWEBサイトが表示されます。

以上で、WEBサイトの公開は完了です。

ダウンロード方法

ダウンロードは、「Code」をクリックしてプルダウンメニューを開きます。「Download Zip」を選択するとZipファイルでダウンロードされます。

その他の方法は、Gitコマンドを使用したりGitHubのデスクトップアプリで行うことが出来ます。

まとめ

GitHub Pagesは、GitHubが提供する無料の静的サイトホスティングサービスです。
主な特徴として、無料でウェブサイトを公開できること、Jekyll対応、独自ドメインの使用が可能なことが挙げられます。
利用上の注意点として、商用利用の禁止、容量制限、プライベートリポジトリの制限があります。
リポジトリの作成から公開までの基本的な手順を押さえることで、簡単にサイトを立ち上げることができます。

GitHub Pagesは、個人や小規模プロジェクトのウェブサイト公開に適したツールです。しかし、商用利用や大規模なウェブサイトには向いていないため、用途に応じて適切に選択することが重要です。また、セキュリティや著作権に関する注意点を理解し、適切に利用することで、効果的なウェブ発信が可能となります。