Gitでウェブサイト構築と公開
ウェブサイトを構築し、そのサイトをホスティングするためのプロセスは、初めてウェブ開発に取り組む人々にとっては少し難解に感じられるかもしれません。しかし、Gitを使うことで、バージョン管理をしながらコードの管理を行い、ウェブサイトを公開するプロセスを簡素化できます。このガイドでは、Gitを活用してウェブサイトを構築し、ホスティングするための手順を詳細に解説します。
1. GitとGitHubの基本を理解する
まず最初に、GitとGitHubの基本的な概念を理解することが重要です。Gitは、ソースコードのバージョン管理を行うためのツールであり、コードの変更履歴を追跡することができます。一方、GitHubは、Gitリポジトリをホストするためのサービスで、インターネット上でコードを管理するためのプラットフォームです。
Gitのインストール
まず、Gitを自分のコンピュータにインストールします。以下の手順を実行してください。
-
Git公式サイトからインストーラーをダウンロード。
-
インストールを完了させ、ターミナルまたはコマンドプロンプトで
git --versionと入力して、インストールが正しく行われたか確認します。
GitHubのアカウント作成
次に、GitHubのアカウントを作成します。GitHubに登録すると、自分のリポジトリを管理し、他の開発者とコードを共有できるようになります。
-
GitHub公式サイトにアクセスし、アカウントを作成します。
2. プロジェクトの初期設定
ウェブサイトを作成するために、まずはGitで管理するためのリポジトリを作成します。ここでは、シンプルなHTMLページを作成し、そのコードをGitで管理する方法を示します。
新しいGitリポジトリを作成
-
自分の作業フォルダを決め、ターミナルまたはコマンドプロンプトでそのディレクトリに移動します。
-
git initコマンドを実行し、Gitリポジトリを初期化します。 -
必要なHTML、CSS、JavaScriptファイルを作成します。例えば、
index.htmlファイルを作成します。
-
git add .コマンドで、すべてのファイルをステージングエリアに追加します。 -
git commit -m "初回コミット"で変更をコミットします。
GitHubにリポジトリを作成
GitHubで新しいリポジトリを作成します。このリポジトリにローカルで作成したプロジェクトをプッシュすることで、オンラインで管理できるようになります。
-
GitHubにログインし、右上の「＋」アイコンをクリックして「New repository」を選択。
-
リポジトリ名を入力し、「Create repository」をクリック。
-
リポジトリが作成されたら、GitHubの指示に従ってローカルリポジトリをGitHubリポジトリにリンクします。
これで、GitHubにコードをプッシュする準備が整いました。
3. ウェブサイトのホスティング
GitHubにコードをアップロードしたら、次はウェブサイトをインターネット上で公開します。GitHubでは、GitHub Pagesを利用して、簡単に静的なウェブサイトをホスティングすることができます。
GitHub Pagesでウェブサイトを公開
-
GitHubリポジトリに移動し、「Settings」タブをクリックします。
-
「Pages」セクションにスクロールし、「Source」ドロップダウンメニューから「main」ブランチを選択します。
-
「Save」をクリックすると、数分以内にGitHub PagesのURLが表示されます。これで、あなたのウェブサイトが公開されます。
公開されたウェブサイトは、https://yourusername.github.io/your-repository/というURLでアクセスできます。
4. ドメインを設定する（オプション）
独自のドメインを使用してウェブサイトを公開したい場合、ドメインレジストラからドメインを購入し、GitHub Pagesと連携させることができます。
ドメインをGitHub Pagesに設定
-
ドメインを購入したら、そのドメインのDNS設定でCNAMEレコードを追加します。
-
GitHubリポジトリのルートディレクトリに
CNAMEという名前のファイルを作成し、その中に独自のドメイン名（例:www.example.com）を記入します。 -
数時間以内に、GitHub Pagesがそのドメインを認識し、ウェブサイトが独自ドメインで表示されるようになります。
5. サイトの管理と更新
ウェブサイトを運営していると、コンテンツを更新したり、新しい機能を追加したりすることがあるでしょう。Gitを使えば、コードの変更を管理しやすくなります。
新しい変更を追加する
-
新しい変更を加えた後、
git add .で変更をステージングします。 -
git commit -m "更新内容"で変更をコミットします。 -
git push origin mainでGitHubに変更をプッシュします。
これで、GitHub Pages上のウェブサイトも自動的に更新されます。
まとめ
Gitを使用してウェブサイトを構築し、GitHub Pagesでホスティングする方法を学びました。このプロセスを通じて、Gitを活用したバージョン管理と、簡単にウェブサイトを公開する手段を理解することができました。これで、コードの変更履歴をしっかりと管理しながら、自分のウェブサイトをオンラインで公開することができます。