静的なウェブページの無料ホスティングサービス3選

f:id:AsukaOkochi:20180516112917p:plain

こんにちは、あすかです！ 5月も半ばに入り、梅雨が近づいてじめじめした毎日が続いていますね(｡-_-｡)

今回は無料で静的なウェブページがホスティング出来るサービスを3つ紹介します！

また、それぞれの基本的な使い方も紹介するので、ぜひ使ってみてくださいねヽ(=´▽`=)ﾉ

ホスティングサービスとは？

静的なウェブページのホスティングサービスとは、サーバーが無くてもHTMLやCSS、Javascriptなどの静的なリソースだけでウェブページを公開出来るというとっても便利なものです。

対象読者

ウェブページを公開したいけどやり方がわからない人
静的なウェブページの無料ホスティングサービスを知りたい人
ホスティングサービスの使い方を知りたい人

Netlify

www.netlify.com

作ったウェブページをフォルダごとドラックアンドドロップするだけで簡単にウェブページの公開が出来ちゃいます！

また、GitHubやBitbucketと連携して、作ったウェブページのmasterブランチにpushすれば内容の変更も可能です。

デフォルトのURLはhttps://ウェブページの名前.netlify.comとなります。

使い方

今回は一番簡単なフォルダごとアップロードする方法を紹介します。

Netlifyにログインします。
一番下までスクロールし、図の赤枠内にフォルダをドラック&ドロップ。
完成！ウェブページの名前はSiteSettings > Site informationの中にあるSite nameで変更可能です！

詳しい使い方はこちら

GitHubPages

pages.github.com

GitHubが提供する静的ウェブページのホスティングサービスです！ GitHubアカウントがあればすぐに利用することができます！

また、GitHubが使える人ならNetlifyよりも簡単かもしれません。

デフォルトのURLはhttps://ユーザ名.github.io/リポジトリの名前となります。

使い方

今回はmasterブランチの内容を公開する方法を紹介します。

あらかじめGitHubに自分が作ったウェブページを上げておきます。（masterブランチの内容が公開されるので、公開したい内容はmasterブランチへ！）
ウェブページを上げたリポジトリのSettings > GitHub Pages > Sourceでmaster branchを選び、Saveボタンを押します。
完成！

詳しい使い方はこちら

Firebase

firebase.google.com

Googleが提供するクラウドサービスです。

モバイルアプリ開発におけるプラットフォームというイメージが強いですが、実は静的なウェブページを公開することも出来ちゃいます！

デフォルトのURLはhttps://firebaseのプロジェクトID.firebaseapp.com/となります。

使い方

Firebaseでプロジェクトを作成します。「プロジェクトを追加」からプロジェクト名と国名を指定します。このとき、プロジェクトIDを指定をすることで、公開したウェブページのURLを変えることができます。 Netlifyとは違い、プロジェクト作成後に変更することが出来ないので気をつけてください！
Firebase CLIをインストールします。  npm install -g firebase-tools というコマンドを実行してください。 
Firebaseにログインします。   firebase login   と入力するとAllow Firebase to collect anonymous CLI usage and error reporting information?(Y/n)と聞かれるので、Yと入力しましょう。 Googleのログイン画面が開き、「許可」を押してこんな画面が出たら準備完了です。
ターミナルで公開したいプロジェクトのディレクトリに移動し、firebase initで初期化します。私の画面では崩れてしまいましたが、こんな感じで「FIREBASE」と表示されます。下の方で◯ Hosting: Configure and deploy Firebase Hosting sitesを選択すると、プロジェクトを作成するか聞かれるので先ほど作成したプロジェクトを選択し、Enterを押し続ければオッケーです。
このままだと自分のウェブページの内容が反映されないので、3で作成されたpublicフォルダにhtmlやcss、imgフォルダ（あれば）などを全て入れます。
ターミナルでfirebase serve と入力すると、http://localhost:5000/でプレビューされます。
プレビューで大丈夫そうだったら、firebase deployで公開、firebase open hosting:siteで公開されたページを確認できます。
完成！