アプリ屋になりたいブログ

アプリ屋になりたいブログ

アプリの開発と仕事の効率化について紹介するブログ

GitHub PagesでJavascriptが動作するWebサイトを無料公開してみた

f:id:bocbocmm6:20200106173723p:plain

Webページを公開してみたい
  • レンタルサーバはお金がかかる
  • Javascriptなどを使用したサイトを簡単に公開したい

ウェブサイトを公開したい。しかしいろいろなハードルがあって、簡単にはいかないですよね。

ブログ公開等なら、はてなブログやWordPressなどを使ってとりあえずどうにかできます。

しかし自分でHTMLやJavascriptをがっつり書いたサイトを公開したいなら少し難しくなりますよね。

そこで今回は、GitHub Pagesを使用した静的なページの公開方法を紹介します。

GitHubの登録~使い方

GitHubの登録方法と簡単な使い方は以下のサイトを参照してください。

www.apnari.com

GitHub Pagesの公開の仕方

さて早速手順を紹介します。

公開するリポジトリの作成

まずは公開する用リポジトリを作成していきます。

GitHubのリポジトリの右上のほうにある「New」をクリックします。

f:id:bocbocmm6:20200106171248p:plain


リポジトリの名前を入力します。
このリポジトリ名は後々のデフォルトURLに影響するので、こだわりがある人はその辺を意識して名づけてください。


f:id:bocbocmm6:20200106171437p:plain

先ほど作成したリポジトリをローカルにクローンします。
ここではTortoiseGitでクローンしてますが、コマンドでもSourceTreeでもなんでもいいです。

f:id:bocbocmm6:20200106171616p:plain

index.htmlのコミット

実際に公開するindex.htmlを用意します。

今回は過去に公開している ヒプノシスマイクのキャラクターソートを公開してみようと思います。

f:id:bocbocmm6:20200106171921p:plain

リポジトリのマスターブランチにコミット&プッシュします。

実際にPagesを公開する

実際に公開する手順を紹介します。

リポジトリのページの右の上のほうにある「Setting」をクリックします。


f:id:bocbocmm6:20200106172249p:plain


ページの中程にあるGitHub Pagesの設定欄にあるNoneを「Master Branch」に変更します。


f:id:bocbocmm6:20200106172339p:plain

公開されたサイトの確認

上記手順後に、URLが表示されます。

f:id:bocbocmm6:20200106172523p:plain

そのURLをコピペしてブラウザに貼り付けます。

無事にサイトが表示されました。
Javascriptも無事に動作しています。

https://imura-moto.github.io/JavascriptPageTest/

f:id:bocbocmm6:20200106172654p:plain

f:id:bocbocmm6:20200106172651p:plain

まとめ

今回はGitHub Pagesを使って静的なWebページを公開してみました。

思った以上に簡単にできたので、正直拍子抜け位です。
こんなに簡単に公開できるのなら、もっと早く手を出しておけばよかった。

これから使い方をいろいろ考えようと思います。