さて、今回紹介する方法は今時のオシャレなウェブサイトを5分かつ無料で公開する方法です。
サーバーの契約は必要ありません。必要なのは、GithubやGitlab、Bitbucketなどリポジトリを管理するサービスのアカウントのみです。また、少しGitの使い方がわかれば大丈夫です。初心者には嬉しいですね。
使用するサーバー提供先はNetlifyというサービスです。上述したレポジトリ管理サービスでログインできます。
費用が発生するとすれば、独自ドメインで公開する際のドメイン代のみです。
勿論、Netlifyは無料で独自ドメインを設定でき、勝手にLet’s EncryptでHTTPS化してくれます。
必要となる知識
- Git
- (html, css, javascript, jQuery)
実質今回必要となるのはGitのみであり、カスタマイズする場合は（）内の知識が必要なのは説明するまでもありません。
フロー
では、簡単にフローをご紹介します。
- FreeHTML5などでオシャレなテンプレートを探し、ローカルにダウンロードする。
- ローカルにダウンロードしたフォルダに移動し、Git initする。
- Githubなどでリポジトリを作り、Git pushする。
- NetlifyでWebからデプロイする。
- *独自ドメインを設定する（Name serverの反映も加味すると数時間かかる場合もあるが、完了すると勝手にHTTPS化される）
1~4をスムーズに行うと、おおよそ5分程度です。
実践
それでは、実際にやってみましょう。
今回はドメインを取得するのは面倒だったので、独自ドメインを設定していません。設定する場合も、Netlifyの案内する通りにNSを変更するだけなので、非常に簡単です。
まずは、オシャレなテンプレートを探すところからです。僕はFreeHTML5を使いました。
対象のサイトをクリックし、ダウンロードします。
Zipファイルがダウンロードされるので、解凍しましょう。
場所はどこでもいいです。お好きにしてください。
lsコマンドで先程ダウンロード・解凍したフォルダがあるのを確認します。
$ ls
僕は今回、Dropbox内に落としたので、DropboxからFreeHTML5でダウンロードしたフォルダまで移動します。名前をsolution_demoに変更したので、cdで移動します。
$ cd Dropbox
$ ls
.....
.....
$ cd solution_demo/
移動したら、Git initしておきます。
$ git init
では、次にリポジトリを作成しましょう。
僕はGithubを使用します。
一応、Repository nameを分かりやすいようにローカルと同じ名前にしておきました。
では、ローカルでGitの設定を行います。
$ git config --global user.name "Your Name"
$ git config --global user.email [email protected]
設定が完了したら、変更内容を保存しておきます。
$ git add --all
$ git commit -m "first commit"
そして、先程作成したGithubのリポジトリに反映していきましょう。
$ git remote add origin https://github.com/"your name"/solution_demo.git
$ git push -u origin master
そうすると、Githubのアカウント名とパスワードを聞かれますので入力します。
Pushが完了したら、作成したリポジトリをリロードしてみてください。反映されているはずです。
あと少しです。
Netlifyからデプロイするだけです。
「New Site From Git」というボタンがあるのでクリックします。
僕はリポジトリを作成したのがGithubなので、Githubを選択します。クリックすると認証画面になるので承認とします。すると、作成したリポジトリが一覧表示されます。
僕は先程作成したsolution_demoというリポジトリを選択しました。リポジトリの選択が完了すると、「Deploy Site」というボタンが表示されますのでクリックしてください。
数秒でこのようにデプロイが完了します。
独自ドメインを設定する場合、「Set up a custom domain」で案内に従い取得したドメインのNSを変更すれば良いだけです。
以下のURLが今回作成したサイトになっていますので、確認してみてください。
https://romantic-shaw-cf4d64.netlify.com
ここまでの流れをスムーズに行うと、だいたい5分程度でサイトを公開できます。
めっちゃ簡単ですよね。
あとは、自分の好きなようにhtmlやcssなんかをいじったり、すでにテンプレートができているわけですから英文で書かれている箇所を日本語でそれっぽく変えれば良いだけです。
使い方
NetlifyはFormのリクエストを受け取ることができるので、簡単なアプリの紹介ページやポートフォリオ、自己紹介など動的な要素のないWEB全般に使えると思います。
ほか、有効な手段として新規事業や個人開発のComing soon的な感じに使うと有効でしょう。
すでに事業の大枠やサービス名が決定し、ドメインを取得しているとしましょう。
このとき、ただドメインを持っているだけなのは非常にもったいないです。
Titleやdescription、Analytics codeを<header>に記入し、クローラーにインデックスさせておきましょう。Web開発が完了し、実際に本格稼働する際SEO上かなり有利になります。なぜなら、そのドメインとコンテンツ内容は検索エンジンへすでにクロールされているからです。
「〇〇はこんなサービスです。現在鋭意開発中です。」のようなことを、対象となる単語を意識して書いておくだけなので、半日から1日あれば完成します。
Firebase hostingやgithub pagesでも同様のことが可能ですが、選択肢の一つとして参考になれば幸いです。
