この記事では、当サイトを管理するにあたって最低限必要な知識をお伝えします。

用語

HTML…ウェブページの文章構造を定義する言語。

CSS…ウェブページのデザインを定義する言語。

Javascript…ウェブページの動作を定義する言語。

クライアントサイド…HTML,CSS,Javascriptを表示する場所。ブラウザ。

サーバーサイド…クライアントに対してデータを送る場所。

Node.js…当サイトがサーバーサイドで使っている言語。クライアントサイドと同じJavascript（ES6）がベース。

React…JavascriptとデータからHTMLを生成するツール。

静的ページ…サーバーに置いてあるHTML。

動的ページ…データとJavascriptによって生成されたHTML。

静的サイトジェネレータ

Reactの欠点

ReactはJavascriptとデータからHTMLを生成するツールです。しかし、アクセスがある度にデータを送信していると、

1. サーバーに負担がかかる（＝お金がかかる）。
2. ページの読み込みに少し時間がかかる。

という欠点があります。この2点を解決するのが静的サイトジェネレータです。

GatsbyJS

一般的に、ブログのような記事はデータベースに保存します。そして、必要なときのみデータが取り出され、React等のJavascriptで表示する仕組みになっています。

一方、GatsbyJSはブログ記事が投稿されたときにReactを使ってページを生成し、HTMLとしてサーバーに保存します。

すべてのHTMLを予め生成しておけば、動的にページを生成する必要がありません。一方、記事を投稿する度にサイト全体が再生成されることになるので、記事数が増えるほど反映が遅くなります。また、キーワード検索等のカバーしきれない機能もあります。

Netlify

静的なサイトを無料で生成・ホスティングしてくれる素敵なウェブサービスです。

まとめ

この記事では、当サイトを管理するにあたって最低限必要な知識をお伝えしました。

次の記事では、GitHub上のソースコードが読みやすくなるように、GatsbyJSのデータ構造について説明します。