クリエイト

無料で静的サイト(LP)を公開できる簡単な方法【Github】

無料で静的サイト(LP)を公開できる簡単な方法 サムネイル

「テスト的に公開したいんだけどドメインにアップロードするの面倒くさい。それ以外で何か良い方法はないのかなあ。」

簡単なポートフォリオ的なLPサイト(html/css/JS)、わざわざFTP使ってサブドメインかどっかにアップロードするのって面倒ですよね。

僕も、この記事を書く前日、Firebaseとか使おうかなって思ったんですがそれもちょっと面倒だなって思っていました。

ですがGithubを使うと簡単にサイトを無料で公開できてちゃんと動いたのでポートフォリオ作っている駆け出しの人はみんなGithub使ってアップロードしたらGithub使えるアピールにもなって良いんじゃないかなと思いました。

ノマド体験型ツアーnomaTrip


Githubのサイト公開用URL:https://yoshisansan.github.io/nomaTrip/nomaTrip.html

上のGIF画は僕がノマド観光ツアーという架空のサービスをLPで作ってみた画像です。

Bootstrapの練習ついでに作ってみて、ポートフォリオとして公開しようと思った際にGithubでできました。

この記事を読めばできるようになります。みんなもアップロードしてみてください。

Githubで静的サイトを公開する手順

Githubを扱ったことがない人はちょっと取っつきにくいかもしれませんが初歩的な操作なのでどのみち覚えないといけない範囲なので触ってみてください。

公開までの3つの手順
①Githubにファイルをアップロードする
②アップロードしたらそのGithubページからsettingページへ移動してGitHub Pagesで設定する
③メインページ(index.htmlなど)に合わせたURLへ移動する

一回やり通せばものの数分でアップロードできるかと思います。(ファイルが重くなければ)

①Githubにファイルをアップロードする

※Githubへの登録が済んだ直後を想定しています。登録手順はQiitaの記事を参考にどうぞ。

まずはGithub側で操作が必要です。リポジトリ(repositories)から新規ページを作ります。

画像の通りに進んでいけば簡単に作れます。

リポジトリ作成1

リポジトリ作成2

リポジトリ作成3
リポジトリ名はなんでもOKです

ここまできたら下のコマンドが表記されます。html/css/jsなどのファイルが格納されている階層にターミナル(プロンプト)で移動して、その階層で下のコマンドをコピペします。

リポジトリ作成4

(リポジトリとはいわゆるハードディスクみたいな貯蔵庫のことで、特にバージョン管理するためのものを指すそうです。保存先ですね。)

コマンドを正しく入力できたらページを更新します。すると下記のようなページに切り替わります。

リポジトリ作成5

②アップロードしたらそのGithubページからsettingページへ移動する

SettingsページからGithub Pages項目へ移動して、masterブランチに選択するだけ公開設定が完了します。簡単ですよね。

②アップロードしたらそのGithubページからsettingページへ移動する1
②アップロードしたらそのGithubページからsettingページへ移動する2

③メインページ(index.htmlなど)に合わせたURLへ移動する

あとは、当該URLへ移動してみましょう。オフラインで作業する際に、index.htmlを参照していたのであれば下のようにURLを設定して移動してみましょう。

あなたのアカウント名.github.io/リポジトリ名/index.html

例:taroyamada.github.io/test-github-pages/index.html

僕の公開したサイトの場合:yoshisansan.github.io/nomaTrip/nomaTrip.html

ノマド体験型ツアーnomaTrip

Githubのサイト公開用URL:https://yoshisansan.github.io/nomaTrip/nomaTrip.html

ローカルでみた場合と同じように見れたでしょうか。

Github:https://github.com/yoshisansan/nomaTrip

でhtml/css/JSに加えて1.2MBくらいの動画もアップロードして公開していますが問題ないようです。

ファイル容量が小さくて、ポートフォリオやミニアプリを簡単に公開するならGithubで十分な気がするし簡単なので僕はこれからも使っていこうと思います。

無料で静的サイト(LP)を公開できる簡単な方法 まとめ

Githubはオープンソースとして使っていればずっと無料なのでありがたいですね。

Githubとしてアップロードできてかつ公開もできて一石二鳥なのでオススメの方法です。