logo-sm

お問い合わせは Webフォームから

ブログ

GitHubPagesでサイトを公開しよう!

2017.10.27

GitHubPagesでサイトを公開する

初めまして、カメヤマです。アウルキャンプに入社して半年が経ちました。入社してからバージョン管理システムのGitの存在を知りました。Gitって便利ですね。現場ではGitHubやGitLabなどのホスティングサービスを利用してウェブサイトの運営を行っています。

Gitについて学んでいくうちに簡単にGitを使ってウェブページを公開、更新する方法はないのか?と探していたところ、GitHubから直接サイトを公開できる機能がありました!それがGitHubPagesです。

今回はGithubPagesを使ってウェブサイトの公開仕方を紹介します。これを使えばGit使って簡単にサイトの更新も行えます。

前提条件

こちらの記事はすでにGitHubアカウントを持っている方を対象にしています。
以下のサイトでログインまたはアカウント登録ができます。

Git Hub

GitHubPagesのメリット

  • 無料で公開できます。
  • 静的サイトを公開できます。JavaScriptも動作します。
  • gitを使用して直接アップできます。
  • 独自ドメインも設定すれば使用できます。

GitHubPagesのデメリット

  • ディレクトリが公開されてしまいます。
  • PHPなどのサーバーサイドプログラムを利用できません。
  • 1ディレクトリあたり1GBまでしか利用できません。

色々と制限はありますが、GitHubPagesは静的な簡易サイトを制作するのにとても向いているのではないかと思います。

公開するまでの手順

    1. 1.GitHubPagesのリポジトリの作成
    1. 2.GitHubからクローン
    1. 3.公開用のウェブページの作成
    1. 4.GitHubへプッシュ
    1. 5.GitHub Pagesでサイトを確認

GitHubPagesのリポジトリの作成

GitHubにログインしてリポジトリの作成をします。Start a projectを選択します。

リポジトリネームをつけ、Create repositoryを選択します。この名前はアドレス(https://ユーザ名か組織名.github.io/リポジトリ名)にも使用されます。

GitHubからクローン

クローンを行い、ローカルにリポジトリを作ります。

表示されているアドレスをコピーします。今回はHTTPS接続でコマンドラインからクローンを行います。(クローンの仕方は好きな方法で行って下さい)

任意のディレクトリに移動して、クローンをします。

git clone https://github.com/ユーザー名/リポジトリ名.git

公開用のウェブページの作成

無事クローンができていればフォルダの中にサイトのデータを作成します。

GitHubへプッシュ

サイトを作成したら、プッシュします。

git add -A
git comit -m “初めてのコミット”
git push -u origin master

GitHub Pagesでサイトを確認

リモートリポジトリが作成されていることを確認して、Settingsを選びます。

GitHub Pagesの項目から、master branchを選びます。選んだらsaveを押します。フォルダ名「docs」を用意し、その中だけをサイト公開することもできます。

GitHub Pagesの項目のところにURLができているのでそれがサイトのアドレスになります。設定すれば任意のドメインにすることも可能です。

テスト用のサイトが公開できました。Javasprictも動いていることがconsoleから確認できます。

最後に

あくまで簡易的なサイトに限りますが、簡単にGitを使って公開することができました。更新する際は作業用ブランチからマスターブランチにマージさせることで公開をしていくことができます。とても便利なので一度試してみてはいかがでしょうか。

関連記事

  • WindowsのWSL2上のDockerでup時に’ContainerConfig’のエラーが出た。
    当社の開発環境はMacとWindowsが混在したDocker上での開発を行っています。なのでMacでOKだけど […]

    2024.04.08

  • VSCode (内のPowerShell)でアドレス設定を切り替え!
    【経緯】 最近携わった案件で大量のNW機器のキッティングをした際、それぞれにSSHでの接続性などを確認するテス […]

    2023.10.13

  • PaloaltoでWindows NTPサーバに同期
    【事象と対処法】 オフライン環境のPaloaltoでNTPの機能確認をする必要があり、Windows標準のNT […]

    2023.10.13

  • パートナー

  • 人材育成・採用情報