まだまだ早く作れるDocusaurusでWebサイト(その２)
Re:小難しいことは考えずにまずはWebサイト作ろうぜ
音速でWebサイトを立ち上げてみる
(まだ)コードわからん人のために
でも、Wix.comは違うんだ自分で作りたいんだという人のためのリターンズ
前回でも十分早かった(と思う)
前回試したときでもWebサイト立ち上げまでは十分早かったと思うのですが、慣れないツールのインストールから意味不明なコマンドの実行まで、さすがに知らない人には大変だったと思います
そこで！
今回は！
よくわからない部分をすべてショートカットしてWebサイトを作ってみたいと思います！
ヨシ！
ゴール
Webサイトを作って公開する(後悔はしない)
(目標は”音を置き去りにするジャスティス”と同じくらいかな😇)
準備するもの
ブラウザが動く環境
よし、はじめるぞっ
今回はCode Sandboxというサービスを利用してみます
真ん中のCreate SandBoxをクリック
いろいろなサンドボックスが作成できます(どれも楽しそうだ)
しかも秒で環境構築できる・・・
＊サンドボックスとは 簡単に技術の確認ができる練習場です。 ブルペンです。 壊しても安全(だから安心)
少し下にスクロールすると
本題の！Docusaurusがいる！！(思ってたよりメジャー)
できた！(ここまで3秒)
感動的速さであの苦労は何だったのかというレベル
コードエディタを表示しながらプレビューも同時に見れるので
直しながら確認しながらが1画面！
開発環境もいらないのでiPadでもできますね・・・最高かよ
インストールとか準備とか、本質とは異なる部分が0秒です
目的のために最短手順で到達可能！すてき！
でもね
環境構築やインフラの経験は、それはそれでとても重要です
これどうやって動いているんだろう？という仕組みへの疑問を持ったらぜひそちらの世界も見てください
その興味はとても大事です 大発見です インフラエンジニアは世界的に貴重です
と、いうわけで、
あとはこれを公開したら今回の任務は完了です！
(ここまでで半分終了)
公開する
sandbox上で動作確認(というかそもそも動く状態がスタート)
本日のメインはほぼここからの作業になります
作ったWebサイトは世界に公開しよう！
今回のサービスではGitHubと連携して本家にプルリクエスト投げたりできますが、今日は作ったサイトを公開するだけなので、デプロイに対応しているNetlifyというサービスを利用してみます
→GitHub Pagesにはデプロイできません
今回使っているCode Sandboxにサインインする
一番最初に画面の上にも出てきますが、まずはサインインしてくれよと言われます
作ったプロジェクトを保存したりデプロイするにはサインインが必要なのです
画面左下のSign inボタンをクリックして
GitHubかGoogleのアカウントでサインインします
＊GitHubにはデプロイできませんが、GitHubのプロジェクトをForkしたりできるので便利といえば便利かもしれない(が、わざわざGitHub以外の場所でコード触る意味・・・)
DocusaurusをForkする
画面左のロケットアイコンを押すときがやってきました
表示されているソースコードを自分のワークエリアに持ってきます(コピーのイメージ)
Fork Sandboxをクリックします
＊ForkすることでNetlifyにデプロイが可能になります(重要)
＊単に公開するだけなら設定を変更する必要もなにもないです
デプローイ！
Forkが終わったら、Deploy Netlifyを押してみよう！
成功するとVisit Siteが表示されるので押してみます
＊反映されるまで数十秒かかるので、しばらく待ってからアクセスしましょう(速すぎると404エラーが表示されるので、ちょっと待ってからもう一度アクセス)
完成です！！
エディタの右側にプレビューされていた自分のサイトが
無事表示されました！
すてき！
おわりに
ここまで手軽だと完全にコンテンツだけに集中できるのでいいですね
細かい説明を省いていますが、最低限Webサイトを公開するまではこれらの手順でできます
あとは、プロジェクトを自分の好きなようにカスタムして確認したらデプロイして更新していきましょう
Netlifyは無料枠の中でカスタムドメインの設定や、SSLも使えたりするのでGitHub Pagesで何かコードとセットにした公開をする必要がなければこちらでも十分かも
さて、みなさん
音を置き去りにできましたか？
Discussion