見出し画像

GitHub PagesでWebページを公開する方法

Webサイト作成したら、『さて公開サーバどうしようかな』という問題に直面します。レンタルサーバも安いので(月500円とかで借りれる)、レンタルサーバを契約しても良いのですが、今回はGitHubでサクッと公開してしまうやり方を説明します。

今回はGitHub PagesでWebサイトを公開します。

GitHub Pagesとは?

GitHub Pagesとは、GitHubが提供するホスティングサービスのことです。GitHubが提供しているだけあり、既存のリポジトリを利用して公開することができます。

注意点としては、DBが利用できないので動的なサービスは動きません。静的サイトのみとなりますのでご注意ください。


GitHub Pagesを利用してサイトを公開する

それでは実際にGitHub Pagesを利用してサイト公開してみましょう。

公開手順としては以下の通りです。

1. GitHubにリポジトリを作成する
2. 公開したいファイルをGitHubにプッシュする
3. GitHub Pagesを有効にする

それでは始めます。


1. GitHubにリポジトリを作成する

まずはGitHubにリポジトリを作成します。Githubのページよりリポジトリの「New」をクリックします。

リポジトリ作成画面に遷移しますので、「Repository name」を入力し「Create repository」をクリックします。

以上でリポジトリ完成です。下記のような画面が表示されます。

下記の赤枠内で囲ったURLは次に利用するのでメモしておきましょう。

2. 公開したいファイルをGitHubにプッシュする

次に、1で作成したリポジトリに公開するファイルをプッシュします。

ターミナルでアップしたいファイルのディレクトリまで移動し

cd 【アップしたいファイルがあるディレクトリ】

ファイルをpushします。(以下のようなコマンド実行でできます)

git init
git add .
git commit -m "first commit"
git remote add origin 【先ほど作成したリポジトリURL】
git push -u origin master

※【先ほど作成したリポジトリURL】の箇所は1でメモしたURLです。

これでGitHubにファイルがpushできました。


3. GitHub Pagesを有効にする

次に、GitHub Pagesを有効にします。GitHub画面のタブより「Settings」をクリックします。

画面中央に「GitHub Pages」という箇所がありますので

ここのSourceの箇所が、デフォルトだと「None」になっていますので、「master branch」を選択します。

すると画面がリロードされ、「GitHub Pages」の箇所にURLが表示されます。

こちらをクリックすると、アップされたファイルが表示されます。

以上でGitHub PagesでWebサイトを公開する方法の説明を終わります。


今回は一番簡単なやり方で説明しましたが、他にもGitHub Pages用のブランチを作成する方法などのやり方がありますので、ぜひ他の方法も試してみてください。


参考にしたサイト

以下のサイトを参考にしました。ありがとうございました!



この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

読んでいただきありがとうございます!『スキ』を押してもらうと、長野県松本市のおすすめカフェを紹介します!

『The Storyhouse cafe』 キッズスペースが充実!
3

Koushi Kagawa 😊

Res, Inc. / Web エンジニア担当 / Laravel / PHP / MySQL / Nuxt.js / Vue.js / Contentful / Netlify / Drupal / Wordpress / が出来ます。

技術メモ

サイト制作等のメモです。
1つ のマガジンに含まれています
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。