プログラミング・IT Gatsby Netlify React

Gatsby+Netlify CMSで副サイトの雛形を作ったよ!

プログラミング・IT
この記事は約6分で読めます。
スポンサーリンク
ふらもん
ふらもん

ご訪問ありがとうございます。ふらもんです。

皆様はGatsby.jsNetlify CMSをご存知でしょうか。

Gatsbyは静的サイトジェネレータと呼ばれるもので、HTMLサイトを作ってくれるサービスです。この間紹介したReactで作られています。

HTMLとCSS、Javascriptファイルだけなのでとっても高速です。さらにMarkdownで直に書くことができて便利だそう。

Netlifyはサイトデータ(フロントエンド)の生成(ビルド)、公開(デプロイ、ホスティング)を丸々やってくれるサービスです。Githubからデータを引っ張ってきます。

無料、HTTPS対応、カスタムドメインが使えてロールバック制限なしというステキサービス。

そしてNetlify CMSは文字通りそのNetlifyのCMS(コンテンツマネジメントシステム。ブログとかを簡単に作れるサービス)。

Web上でファイル編集すると自動的にGithubにPushされ、Netlifyがビルド・デプロイしてくれます。

今回はそのGatsby+Netlifyで副サイトの雛形を作ったので、備忘録として書いておきます。

今はまだ雛形ですが、いずれ技術的なことを書いていく別館サイトにしたいなあと!

ふらもん
ふらもん

そしていずれはこっちに移転したい。タダだからね!

ちなみにこれらの技術を総称してJAMStackと言うそうです。

スポンサーリンク

WordPressと比べて何がいいの?

早い

まずこれです。

静的サイトとはHTMLべた書きのサイトのことですが、これは読み込むデータが少ないので表示が早いんです。

表示の速さはユーザー体験に直結するので、これは大きなメリットです。

ちなみに静的サイトに対し動的サイトはWordpressなんかの裏でサーバーサイド言語が動いているサイトのことで、サーバーに負荷がかかって遅いです。

ふらもん
ふらもん

速さは全てを超越する!

安い

次にこれ。信じられないことに、今回のサイトはサーバーを借りなくていいんです。つまり独自ドメイン代だけで運用できてしまうんです。安すぎ!

ふらもん
ふらもん

独自ドメインがいらないならそれすら不要に…!

しかもネットワーク帯域幅は100GB/月。これはエックスサーバーと遜色ありません。おかしい!

ふらもん
ふらもん

エックスサーバーに36000円分もう払っちまったよ…

仕方ないので副サイトに回すことにします。

セキュリティ抜群

WordPressは抜群のシェアを誇りますが、だからこそハッキングにめちゃくちゃ弱いです。

Netlifyはセキュリティも抜群。サーバーにデータがなく、Githubに元データがあるので、セキュリティに関しては心配無用。

WordPressはセキュリティに気を使わなければならないので、これは大きなメリットです。

ふらもん
ふらもん

WordPressはやられたときの被害がねー…

作成過程

ここから作成過程を紹介していきます。

ふらもん
ふらもん

事前にNetlify、Githubのアカウントを作っておこう!

メールアドレス認証を忘れて慌てた

Netlifyを使うにはメールアドレスを認証する必要があるのですが、それを忘れました。メールアドレスを打ち込んでも使えない!

メールボックスを見たらAccept the inviteというそのままのリンクがあるメールを発見。押したら認証できました。良かったー。

ふらもん
ふらもん

英語も学ばないと(何度目だ)

Gitに四苦八苦

先述の通りこのサービスを使うにはGitが必要なのですが、私はGit超初心者。見様見真似で登録し、見様見真似で使っていました。

2段階認証を済ませていたのですが、それのせいでPushもCommitもSourcetreeも使えない、要するにGitが使えないという事態に陥りました。

調べたところpersonal access tokenなるものが必要であることが判明。発行して使ったところ、Gitが使えるようになりましたー!

さらにSourcetree(Gitを簡単に使えるアプリ)の認証もこれで突破。快適なGit生活を手に入れたのです。

参考サイト様↓

Githubの2段階認証入れたらpushできなくなった人へ - Qiita
# githubにも2段階認証 一応やられたら困るので2段階認証化した。 そしたらcloneとかpullとかpushとか諸々全部通らなくなった(当然) 基本的には(
Netlify CMSとGatsbyのTypescript Starterを使ってブログを構築 - Qiita
## はじめに Netlify CMS と Gatsby の Typescript Starter を使って Netlify にブログを構築したのでその記録を残していきます。 今回は Wordpress を使わずに Netlif...

2段階認証したらいろいろ通らなくなるという基本的なことを失念していました。でもSourceTreeも使えるようになってほくほくです!

ふらもん
ふらもん

Gitも勉強するぞー!

TypeScript使用Starterでサイト作成!

あとはTypeScriptとNetlify CMS、ESLintが揃ったスターターでサイトを構築します。

gatsby-starter-typescript-rebass-netlifycms
Gatsby Starter: gatsby-starter-typescript-rebass-netlifycms

ここにアクセスしたあと、右下に「Try this starter Netlify」というリンクがあるので、そこをクリック。あとは指示に従えばサイトの完成!

そのあとはGit Cloneでローカルにクローン。Node.jsとyarnがインストール済みなら、ターミナルで

$npm install
$yarn start

でローカルホストにサイトが立ち上がります。

ふらもん
ふらもん

npmやyarnが使えないなら、Node.jsとyarnをインストールしよう!

nodenv を使って Mac に Node.js の環境を構築する - Qiita
( という Node.js のバージョンマネージャを使う。 Node.js のバージョンマネージャとしては (https...
nodenv経由でインストールしたnodeにyarnをインストール - Qiita
タイトルのとおりです (を使って、yarnを`.nodenv/plugins`以下にインストールします...

ただこのスターター、そのままだとGithubにpushできなんですよね。どうもタスクにエラーがあって、ビルドを監視するツールに引っかかっているらしいです。デバッグしたいところですね。

この場合、オプションに–-no-verifyをつければプッシュできます。

git push -f origin master --no-verify

これに気づかず、いろいろ奔走してしまいました。おかげで1日が吹っ飛びましたが、おかげで「エラーコードはちゃんと見よう」という教訓を得ました。

ふらもん
ふらもん

お恥ずかしい…

これからやること

以後はReactやSass(書きやすく改良されたCSS)をもちいてガンガンカスタマイズしていきます。

WordPressと違ってコードが読みやすく、ページに使われている技術が全開放されているのでカスタマイズし放題です。

ふらもん
ふらもん

さしあたっては今のブログ(Cocoon)をどこまで再現できるかやってみます!

まとめ…Reactの総合演習として楽しみながら!

以上、副サイト作成の最初の最初の部分の備忘録でした。

まだ雛形を作った段階なので、ここからReactを使ってガシガシカスタマイズしていく所存です。

やってみた感想ですが、これはいいReactの総合演習の題材だと思いました。

GitやらSassやら、モダンな技術が目白押し。これがあればしばらくWeb界隈で仕事には困らないでしょう。その後の学習でも使える知識も身につきます。

まだReactやGitについてはProgateをやり終えた程度の知識しかないので、これからバリバリ学習コストをもぐもぐしていきたいです!

ふらもん
ふらもん

Reactはいいぞ!

この記事を書いた人
ふらもん

Webプログラマー(志望)の謎の生物。趣味はお絵かきとゲーム制作。日々の成長記録をここに書き記しています。

ふらもんをフォローする
プログラミング・IT
スポンサーリンク
スポンサーリンク
スポンサーリンク
魔導研究棟

コメント

タイトルとURLをコピーしました