どうも、まさとらん(@0310lan)です。
最近は、無料であるにも関わらず、多彩な機能を提供してくれるホスティングサービスが増えてきました。
そこで今回は、面倒な「契約」や「設定」が不要で、誰でも簡単にWebサイトを即座に公開できる優れたサービスを厳選してご紹介してみようと思います。
これからWebサイトを公開しようと考えている方は、ぜひ参考にしてみてください!
■コマンド1発でホスティングが完了するサービス!
【 PubStorm 】
ブラウザ上に開発環境を構築できるクラウドIDEサービス「Nitrous」のチームが提供しているサービスで、エンジニアが扱いやすいように全てコマンドラインからの操作で完結できるように設計されています。
基本的な使い方としては、Webサイトを構成するファイルを作ったら以下のコマンドを叩くだけです!
$ storm publish
たったこれだけで、【 プロジェクト名.pubstorm.site 】というURLで即座にWebサイトが公開されます。
さらに、「独自ドメイン」「SSL対応」「バージョン管理」「Basic認証」などもすべて無料で対応してくれるスグレモノなんです!
初めて使う人でも、以下3ステップのコマンドを実行するだけで簡単に導入可能です!
$ sudo npm install -g pubstorm $ storm signup $ storm init
「storm init」を実行した後に、公開したいWebサイトのルートフォルダを指定し、URLとなる「プロジェクト名」を設定すれば準備完了です。
あとは、Webサイトのファイルを新規追加・更新する度に「storm publish」を実行するだけというお手軽さが魅力的です。
ちなみに、いくつか便利なコマンドが用意されているのですが、特にオススメのコマンドがこちら!
$ storm config
このコマンドを実行するだけで、なんと「HTML/CSS/JavaScript」ファイルを圧縮・結合してくれて、さらに画像ファイルの最適化や「sitemap.xml」の生成まですべて自動的に対応してくれますよ!
<参考>
■GitHubと連携可能な超お手軽サービス!
【 Netlify 】
海外では注目度が高まっているサービスで、こちらも「独自ドメイン」「SSL対応」「バージョン管理」など、基本的には先ほどご紹介した「PubStorm」とほぼ同じことが出来るようになっています。
そのため、サイトを公開する際も以下のコマンドを実行するだけでOKです。
$ netlify deploy
特徴的なのは、GitHubアカウントでログインして自分の「リポジトリ」と連携できる点で、この「リポジトリ」を更新する度にNetlifyへ公開したWebサイトも自動で反映されるようになるのは便利です。
さらに、初心者でも簡単に扱えるように「ドラッグ&ドロップ」に対応したGUIも提供されています。
Webサイトを構成するファイルを1つのフォルダに収めて、zip圧縮してアップロードするだけで即座に公開することが可能です。
他にも、Webhookによるトリガ設定やSlack・メール通知などの独特な機能も搭載しており、活用次第では強力なパートナーになると思います。
<参考>
■さらに使いやすくなった定番サービス!
【 GitHub Pages 】
GitHubが提供しているホスティングサービスということで、すでに利用されている方も多いのではないでしょうか。
使い方もシンプルで、自分のユーザー名を含めた以下のような「リポジトリ名」を作れば準備完了です。(ユーザー名がsampleであれば、sample.github.ioになる…)
【ユーザー名】.github.io
あとは、このリポジトリにWebサイトを構成するファイルを「プッシュ」すれば公開されるというお手軽さ。(公開手順詳細)
また、上記方法以外にも最近のアップデートにより、どんなリポジトリであっても「docs」フォルダ配下にあるWebページが自動的に公開されるようになりました。
これにより、以下のようなURLでサイトを閲覧できるようになるわけです。
【ユーザー名】.github.io/【リポジトリ名】
ちなみに、「Git操作」に慣れていない人でも、新しくリポジトリを作って「➀Create new file」ボタンから、直接「➁Webページのファイル」を作ってブラウザ上でプログラミングすることも可能です!
もちろんファイルをアップロードしても良いので、Gitコマンドを使わなくてもサイトを公開することが出来るようになるでしょう。
類似サービスとして、「GitLab」が提供するサービス「GitLab Pages」というのもあるので、ご興味ある方はぜひ参考にしてみてください!
<参考>
■Googleが提供する多機能サービス!
【 Firebase 】
「Firebase」は、ユーザー管理やデータベースなどの「バックエンド処理」を簡単に利用できるBaaSのようなサービスですが、ホスティング機能も提供しているのが特徴です。
Googleのアカウントを持っている人であれば、誰でも無料で利用できるようになっています。
コマンドラインからシンプルに使えるように工夫されており、導入は以下のコマンドを叩くだけです。
$ sudo npm install -g firebase-tools $ firebase login
「loginコマンド」実行後に表示されるURLをクリックすれば、Googleアカウントで認証できるようになっています。
もし、ローカル環境での開発でなければ、オプションを付けることで「IDコード」による認証も可能です。
$ firebase login --no-localhost
サイトを公開する前に、初回のみ初期設定を行います。
$ firebase init
コマンド実行後に、「Firebase」で作ったプロジェクト名を選択し、Webサイトを構成するルートフォルダを指定します。
最後に「デプロイ」コマンドを実行すれば、即座にサイトが公開されます!
$ firebase deploy
公開されると、以下のようなURLで閲覧可能!
【プロジェクト名】.firebaseapp.com
「Firebase」の使い方を覚えれば、独自ドメインやSSL対応だけでなく、SNS認証やユーザー管理・データベースといった多彩な機能も一緒に活用できるというのが最大の魅力と言えるでしょう。
また、スマホアプリなどの開発にも利用でき、テストやアナリティクスのような便利機能も活用できるスグレモノです。
<参考>
■おまけ
最後に、ホスティングサービスとはちょっとジャンルが違うのですが、サイトやWebアプリなどをSSL化して簡単に公開できるサービスとして2つご紹介しておきます!
【 Google Apps Script(GAS) 】
以前から、Googleドライブで利用できるようになっていたのでご存知の方も多いと思いますが、今では立派な「開発環境」と言っても良いくらいの存在感があります。
基本的には、JavaScriptによる「Webアプリ開発」が出来るのですが、独自に提供されているAPIを活用することで普通のWebサイトから複雑なWebアプリまで、さまざまなサイトを作って公開できるのが特徴です。
ほとんどのGoogleサービスと連携できるうえ、フロント側で扱うJavaScriptでは取得できないような外部JSONデータを操作したり、プログラムの定期実行をさせたり…など、ユニークな使い方も出来ます。
(使い方の詳細はコチラ!)
■paizaについて
paizaでは、プログラミングスキルチェック問題(14言語に対応)を多数ご用意いたしております。もちろん今回使用しているJavaScriptにも対応しておりますので、「JavaScriptでプログラミング問題を解いてみたい」「自分のスキルを試してみたい」という方にもピッタリです!
paizaでプログラミング問題を解くと、結果によりS・A・B・C・D・Eの6段階で自分のスキルのランクが分かります。問題はレベルごとに分かれており、初心者から上級者の方まで挑戦していただけますので、自分のプログラミングスキルを客観的に知りたいという方は是非チャレンジしてみてください!!
プログラミング問題による学習コンテンツ(paiza Learning)もございますので、「まったくのプログラミング未経験者です」「初心者なのでプログラミング学習から始めたいな」という方もぜひご利用ください。
さらに、paizaが運営する無料オンラインプログラミング実行環境サービス「paiza.IO (パイザ・アイオー)」では、JavaScriptはもちろん、多数プログラミング言語のプログラミングが面倒な環境構築なしに無料でできますのでぜひご利用ください!
■まとめ
ランディングページや企業サイト、ポートフォリオなど、シンプルなWebサイトであれば今回ご紹介したサービスを十分活用できると思います。
また、Webサイトを公開したことがない人や慣れていない方は、手始めに「Netlify」のドラッグ&ドロップによる公開作業を試してみることをオススメ致します。
ちょっとずつ慣れてきたところで、他のサービスも試してみると良いでしょう。
ほとんどのサービスは有料プランも提供されており、大規模なWeb開発にも柔軟に対応できるので、ご興味ある方はぜひ参考にしてみてください!
paizaではITエンジニアとしてのスキルレベル測定や、動画によるプログラミング学習コンテンツ(paiza Learning)を提供しています。テストの結果によりS,A,B,C,D,Eの6段階でランクが分かります。自分のプログラミングスキルを客観的に知りたいという方は是非チャレンジしてみてください。