無料でGitHubを使ってWEBサイトを公開する方法【最新版】

WEB制作ツール

 

「自分でWEBサイトを作ったから、これからアップロードして自分以外の人にもみて欲しい!だから自分のWEBサイトをサーバーにアップロードしたいと思っている。しかし練習で作ったサイトだから、サーバー代はかけたくない。無料で簡単にWEBサイトを公開する方法はないかな??」

 

と考えている人に向けて、今回は無料で「GitHub Pages」を使ってWEBサイトを公開する方法について、画像を使って解説していきます!

この記事を書いている僕は、現在大阪のWEB制作会社で働いており、実際に個人で制作したポートフォリオサイトも「GitHub Pages」を使って公開してます。

 

今年2020年の6月ほどに、GitHubの画面(UI)の使用が変わり、以前と少しボタンの名称なども変わりました。

僕も最初は「どのようにアップロードしたらいいの??」と悩みました。

しかし、しっかりこれから変更した部分も踏まえて、しっかり解説していきます!

 

このブログを最後まで見たら、あなたは自分で作ったWEBサイトを、世の中に無料で公開することができるようになっています!

 

GitHub Pagesとは?

 

GitHub Pagesは、GitHubが提供するホスティングサービスで、WEBサイトをインターネット上に公開することができます。

自分自身や所属する組織、あるいはプロジェクトのWEBサイトをGit/GitHubのリポジトリを用いて、簡単な手順で公開することが可能。

 

しかし、公開できるWEBサイトと、できないWEBサイトがあります。

あなたが、今からアップロードしているWEBサイトが「公開できるWEBサイトなのか?」一度確認してみてください!

 

公開できるWEBサイト

GitHub Pagesは、静的なWEBサイトをホスティングするサービスです。

HTML ・CSS・JavaScriptだけを使ったサイトであればOK!

例えば、僕が以前制作したポートフォリオサイトは、HTML ・CSS・JavaScriptだけを使っているのでアップロードできました。

GitHub Pagesはあくまで静的なWEBサイトしか公開できません!

 

公開できないWEBサイト

データベースを用いるような動的なWEBサイトは公開できません。

例えば、PHPなどサーバーサイドプログラムを必要とするサイトは公開することができない。

ECサイトなどがまさに当てはまります。

 

無料でGitHub Pagesを使ってWEBサイトを公開する方法【最新版】

これから無料でGitHub Pagesを使ってWEBサイトを公開する方法について、画像を使って紹介していきます!

手順は以下の2ステップ。

① GitHubのアカウントを開設

② GitHub Pagesを使ってWEBサイトを公開する

 

そこまで難しくないので、是非習得してください〜。

 

① GitHubのアカウントを開設

まずはGitHubのアカウントを開設しましょう!

GitHubのページにアクセスします。

 

アクセス出来たら、アカウント開設の作業に入ります。

僕は先にアカウントを開設しているので、GitHubアカウント作成とリポジトリの作成手順で、GitHubアカウントの開設方法を画像をつかって紹介されているので、是非こちらを参考にしてください!

僕の記事ではありませんが、わかりやすかったので。

アカウント開設はそこまで難しくないので、3分ほどあれば終わります。

 

② GitHub Pagesを使ってWEBサイトを公開する

GitHubのアカウントが開設できたら、次はGitHub Pagesを使ってWEBサイトを公開していきましょう!

それでは、以下の僕が作ったデモサイトを例に、公開方法を紹介していきます!

 

アカウントが開設出来たら、GitHubで以下のような画面を開いてください。

そして、赤矢印の先にある丸ボタンをクリック!

 

ボタンをクリックすると、メニューの一覧が出てきます。

この中から、「Your repositories」をクリック!

 

すると、こちらのような画面になります。

そこで緑のボタンの「New」のボタンをクリック!

 

以下のような画面に移動します。

そして記入事項を書いてください。

記入することが出来れば、緑色の「Create repository」をクリック!

 

すると、以下のような画面に移動します。

そこで「uploading an exsiting file」をクリック!

 

こちらの画面に移動するので、赤矢印の部分に自分がアップロードしたいと思っているWEBサイトのファイルを、ドラックアンドドロップしてください!

 

ファイルがアップロードされると、以下のような画面になります。

「Commit changes」は実際の開発ではしっかり記入する必要がありますが、今回は画像のように文字を入れておいてもらえたらOKです!

そしてファイルがアップロードでき、「Commit changes」に文字を入れたら、緑色のボタンをクリック!

 

するとこちらの画面になります。

ファイルが読み込まれているので、「Setting」のボタンをクリック!

ページが移動し、下の方へスクロールしていくと、「GitHub Pages」という項目があります。

「None」の部分の「main」を選択し、「Save」のボタンをクリック!

 

保存すると、以下の画像のようにURLを取得できます。

URLをクリックし、あなたがアップロードしたWEBサイトがブラウザに表示されたら完了です!

 

これであなたのWEBサイトを世界中の人が見れるようになりました!

 

GitHub PagesでWEBサイトを公開するときの2つの注意点

GitHub Pagesを使って、WEBサイトを公開することはできましたでしょうか?

次は、GitHub PagesでWEBサイトを公開するときの2つの注意点について紹介していきます!

2つの注意点は以下になります。

① index.htmlじゃないと公開できない点

② URLにGitHub固有の名前が入る点

 

GitHub Pagesは無料で静的なWEBサイトを公開できる反面、使い方に少し縛りがある。

無料で使わせてもらっている立場なのでしょうがないですが、、。

 

① index.htmlじゃないと公開できない点

まずHTMLファイルが「index.html」の名前になっていないと、上手く表示されません。

理由は、GitHub Pagesは「index.html」をブラウザに表示するような仕組みになっているからです。

「HTMLファイルの名前をどうしても変えたい!」と思っている人は、GitHub Pagesではなく、しっかり有料サーバーを使用するようにしましょう!

 

② URLにGitHub固有の名前が入る点

GitHub Pagesを使うと、URLにGitHub固有の名前が入ってしまいます。

例えば、僕のポートフォリオサイトはGitHub Pagesでアップロードしましたが、以下のようなURLになりました。

https://yujiron.github.io/yujiro.portfoliosite/

このURLの途中に入っている「.github.io」が、GitHub PagesでアップロードしたWEBサイトを意味します。

 

「URLにもこだわりたい!」と考えている人は、やはり有料サーバーを使用することをおすすめします。

GitHub Pagesはあくまで練習で制作したWEBサイトを、テストでアップロードするくらいに考えておいた方がいいですね!

 

GitHub Pagesで公開したWEBサイトを消す方法

次はGitHub Pagesで公開したWEBサイトを消す方法について紹介します。

僕は消し方が分からず、1時間くらい詰まった経験があります、、。

だから、あなたにも同じ経験をして欲しくないので、先ほど作った「デモページ」を例に紹介していきます!

 

まずは消したいWEBサイトを選択したいので、「Your repositories」をクリック!

 

すると、以下の画面のように、これまで作ってきたWEBサイトの一覧に移ります。

今回は「demo」を消したいので、こちらをクリック!

 

こちらのような画面に移動すると思うので、「Setting」のボタンをクリック!

 

そして、表示されたページの一番下までスクロールすると、以下の画像のように「Danger Zone」の項目が出てきます。

そして「Delete this repository」をクリック!

 

すると、以下のような画面が表示されます。

こちらにあなたの「GitHubのアカウント名」と「消したいサイトの名前」を「/」で囲って記入します。

そして記入したら、下の赤色のボタンが光るので、こちらをクリックすると、WEBサイトを消すことができました!

 

これでGitHub Pagesで公開したWEBサイトを消す方法を理解することができたでしょうか??

 

まとめ

以上が、「GitHub Pages」を使ってWEBサイトを公開する方法についての紹介でした!

もしあなたが自分で作ったWEBサイトがあるならば、是非今回の方法を使って公開してみましょう。

そうすれば、友達など周りからの反応をもらえるので、やる気が更に湧きますよ!

 

これからもブログで「WEB制作」、「WordPress」、「ITスキル」について発信していくのでよろしくお願いします〜。