2024-09-24こんにちは！今回は、GitHub Pagesという素晴らしい機能を使って、無料で簡単にウェブサイトを公開する方法をご紹介します。エンジニアを目指す方や、プログラミングを勉強している方には特におすすめのツールです。自分のポートフォリオや、プロジェクトの成果をインターネット上に公開するのに最適です。
目次
GitHub Pagesとは？
GitHub Pagesは、GitHubのリポジトリを使って簡単に静的なウェブサイトを公開できるサービスです。静的なHTMLやCSS、JavaScriptで作られたウェブサイトを無料でホスティングすることができます。
特徴
- 無料で使える：GitHubのアカウントがあれば、誰でも使えます。
- 簡単に公開できる：リポジトリを作成し、数ステップでウェブサイトを公開できます。
- カスタムドメイン対応：独自ドメインを使ってサイトを運営することも可能です。
GitHub Pagesを始める手順
1. GitHubアカウントを作成する
まずはGitHubにアクセスして、アカウントを作成します。すでにアカウントがある方はログインしてください。
2. 新しいリポジトリを作成する
次に、GitHubで新しいリポジトリを作成します。
- GitHubのトップページ右上にある「+」ボタンをクリックして「New repository」を選択。
- リポジトリ名は「
HelloWorld」にします。 - リポジトリを**Public（公開）**に設定し、「Create repository」をクリック。
※無料アカウントでPrivate repositoryだと公開できない。
3. index.htmlを作成する
リポジトリを作成したら、次にウェブサイトのファイルを準備します。簡単なindex.htmlファイルを作成しましょう。
例：
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My GitHub Pages Site</title>
</head>
<body>
<h1>Hello, GitHub Pages!</h1>
<p>このページはGitHub Pagesで公開されています。</p>
</body>
</html>4. ファイルをリポジトリにアップロードする
作成したindex.htmlファイルをリポジトリにアップロードします。GitHubのリポジトリページで「Add file」をクリックして、「Upload files」を選びます。ファイルをドラッグ＆ドロップして、「Commit changes」ボタンを押してアップロード完了です。
5. GitHub Pagesを有効化する
- リポジトリの「Settings」タブをクリックします。
- 左側のメニューから「Pages」を選択します。
- 「Source」のドロップダウンメニューから「main」ブランチを選択し、**/（ルート）**ディレクトリを指定して「Save」をクリック。
これで数分待てば、https://<ユーザー名>.github.io/HelloWorld というURLであなたのウェブサイトが公開されます！
6. サイトをカスタマイズする
ここからはお好みに合わせてサイトをカスタマイズしていきましょう。HTMLやCSS、JavaScriptを使って、自分だけのオリジナルなサイトを作ってみてください。
まとめ
GitHub Pagesは、手軽にウェブサイトを公開できる非常に便利なツールです。エンジニアとしてのポートフォリオを作成したり、個人プロジェクトを世界に発信したり、備忘録としてナレッジを溜めたりと、様々な場面で役立ちます。今回のステップを参考に、ぜひ自分のサイトを作成してみてください！