khrtz Blog

JAMstack(GatsbyJS + Netlify CMS)で高速でブログを立ち上げた

June 13, 2019

当ブログは、GatsbyJS + Netlify + Netlify CMSで出来ている。

https://github.com/khrtz/my-life

  • GatsbyJS(静的サイトジェネレーター)
  • Netlify(ホスティングサービス + GitHub連携による継続的デプロイ + moremore)
  • Netlify CMS(管理画面)

手順にさえ従えば、手っ取り早くブログや静的サイトを立ち上げられる。あまり詳しいことは知らないので、さくっと紹介しようと思う。こんな感じのJavaScript + API + ビルド済みのマークアップという構成のことをJAMstackと呼ぶらしい。

GatsbyJS

静的サイトジェネレーターというやつで、静的ページのため読み込みや遷移が速いのが特徴で豊富なstarterライブラリが用意されている。

https://www.gatsbyjs.org/starters/?v=2

当ブログはhttps://github.com/gatsbyjs/gatsby-starter-blogを利用。

Typography.js

フォント、行間、などの設定が済んでいる既存のテーマを使用することができる。

https://www.gatsbyjs.org/docs/typography-js/

https://kyleamathews.github.io/typography.js/ で好きなテーマを選んで、new Typography()に渡してあげるとテーマが適用される。overrideThemeStylesでスタイルを上書きできる。

import Typography from "typography"
import GrandViewTheme from "typography-theme-grand-view"

// GrandViewTheme.overrideThemeStyles = () => {
//   return {
//     "a.gatsby-resp-image-link": {
//       boxShadow: `none`,
//     },
//   }
// }

const typography = new Typography(GrandViewTheme)

// Hot reload typography in development.
if (process.env.NODE_ENV !== `production`) {
  typography.injectStyles()
}

export default typography
export const rhythm = typography.rhythm
export const scale = typography.scale

あとは好きなようにUIをカスタマイズする。その他にもPluginを使い機能を追加していくことができる。

Netlify

これがかなり便利。Githubと連携し、レポジトリを選ぶとホスティングされ、指定したブランチにpushするとデプロイが走るので、とても気軽に運用できるサイトに向いている。独自ドメインの設定やhttps化の設定、その他にも色々がある。

Netlify CMS

これはさっき入れた。マークダウン書きたくないとか、記事の管理とかに便利。管理画面で記事を保存や削除するとGitにPushされ自動でデプロイされる仕組み。ログインやGithub認証などが用意されている。

CMS導入はこの手順だけで済む。https://www.netlifycms.org/docs/gatsby/

トップ画面

編集画面

とこんな感じです。Netlifyは特に便利なので触ったことないなら触ってみたら良いと思います。


Twitter