MOCHI Tech blogの作り方 著者: tkow

このブログサイトはnetlify-templates/gatsby-starter-netlify-cmsを元に作成しています。
今回はこのテックブログをどのような技術セットで作成したかご紹介します。

netlify cmsの仕組み

netlify cmsはnetlify上のホスティングサイトをnetlifyのマネージドサービスと連携させる機能を持っていて、yamlファイルおよび、cmsのjsライブラリを読ませることによって、netlify上にcmsを構築することができます。

config.ymlの記述にCMS上で入力したいテキストデータやファイルのidを設定すると、その入力フォームをページ上に自動生成し、config.ymlに指定したbackend上でmarkdownファイルの作成を行ってくれます。

config.yamlの例

backend:
  name: git-gateway
  branch: master

media_folder: static/img
public_folder: /img

collections:
  - name: "blog"
    label: "Blog"
    folder: "src/pages/blog"
    create: true
    slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
    fields:
      - {label: "Template Key", name: "templateKey", widget: "hidden", default: "blog-post"}
      - {label: "Title", name: "title", widget: "string"}

生成されたフォームの例

以上はtitleを設定した例です。それぞれのfieldについては、netlify cmsのドキュメントをご覧ください。このブログではbackendをgithub-gatewayにすることで、githubのmasterブランチに自動生成したmarkdownファイルをコミットしてもらうようにしています。commit時にはnetlifyのwebhookと連動して、gatsbyのbuildが走りnetlifyに記事がデプロイされるというフローになっています。

また、このフローで生成したmarkdownをホスティングする仕組みがあれば、gatsbyを利用する必要性はありません。

これはgatsbyのssgの仕組み上初期設定では毎回cache cleanを走らせているので、ビルドの時間が結構かかるので記事が多くなってくるとnetlifyのbuild時間が増えてしまうので、もし記事量が増えてきたらnext.jsのdynamic ssgに移行しようかと思っていますが、gatsbyにはリソースの最適化のプラグインが豊富に揃っているのと、netlifyではまだnext.jsを利用した事例が少ないため、現在ではケースバイケースでフレームワークを選択するのが良さそうです。

netlify forms

netlifyにはformsという機能があり、フォームにdata-netlify=true属性を付与してPOSTするとnetlify上でPOSTした内容がみれるという素晴らしい機能があります。また、webhookのイベントでslackに通知を送ることができたりと、至れり尽くせりです。詳細は公式のドキュメントをご覧ください。無料枠では月300件までの制限がありますが、バックエンドにDBやストアを持たなくてもよいので、とても便利な機能です。スケールしてきたら課金するか、netlify lambdaや外部のエンドポイントのREST経由でstoreに接続させることもできるので用途に合わせて構成を考えると良いかと思います。

テンプレートからの改変点

このブログを作成する過程で初期テンプレートでは、javascriptなので、typescriptへの変更、その他、バージョンが古いライブラリに関しては一斉にアップデートをかけました。

特にremark-images関連とfrontmatter関連でgatsby-node.jsでのcreateSchemaCustomizationでnullable対応を行ったり、gatsby-plugin-sassがバージョンアップによって、node-sassのバージョン互換性が変わっていたり、defaultがsassパッケージになっていたりするので、gatsbyに詳しくない方はtemplateのバージョンを上げずに運用するのが無難です。

netlify-cmsのversion upに伴い変更が必要だった点

    "sass-loader": "^10.1.0",
    "gatsby-plugin-sass": "^3.1.0-next.0",
    "node-sass": "^5.0.0",

    {
      resolve: `gatsby-plugin-sass`,
      options: {
        implementation: require('node-sass'),
      },
    }

nullable対応したGraphQLの設定

exports.createSchemaCustomization = ({ actions }) => {
  const { createTypes } = actions
  const typeDefs = `
    type Mainpitch {
      title: String
      description: String
    }
    type MarkdownRemark implements Node {
      frontmatter: Frontmatter
    }
    type Frontmatter {
      author: String
      mainpitch: Mainpitch
      featuredimage: File @fileByRelativePath
    }
  `
  createTypes(typeDefs)
}

これから直したいところ

• たぶんCodeMillerでマークダウン対応しているのだけどcodeタグにcolor themeが効いていないので調べる ※ prismjsに対応しました
• デフォルトではbuildに1000件以上の記事を巻き込まない設定になっているけどdynamic SSGにしないとbuild時間が馬鹿にならないからだとおもうので検証する
• netlify-cmsにドラフト用の属性を作って見た目上反映されないような仕組みを作る
• styleもっとカッコよくしていきたい

作ってみた所感

私はgatsbyもnetlifyも詳しくなかったのでGraphQLとgatsbyとnetlify-cmsのドキュメントを行ったり来たりして、遊び感覚で作り始めたテックブログでしたが生半可な気持ちで着手したため、結構心が折れそうになりました。

ただ、地道にやっていくと非常によくできたテンプレートでして、GrapiQLを利用して、Gatsbyおよび関連プラグインが生成してくれたQueryを一覧してmarkdownファイルから取得したパラメータを自作のGatsbyページに埋め込むのは簡単で、Gatsby上のReactコンポーネントを書き換えるだけで自由度がかなり高いため、サイトの独自性を出しつつ、ブログ作成はCMSを利用したいと言う方にはとても有難いですね。

netlify自体のDNS接続もAレコードもしくはaliasレコードを登録するだけでしかもサブドメイン含め、5ドメインまではLet's Encryptionで無料でSSL/TSL設定を提供してくれるのでサイト自体の公開もとても簡単でした。その上100GBの転送量まで無料運用できるのはとても太っ腹ですね。

似たようなことはgithub pagesでもできますが、assetをcdn経由にしたりできるのもフレームワーク上でサポートが豊富です。CMSのセルフブログホスティングをしたいなら今のところnetlifyが一番楽なんじゃないかなと思います。

Tags

• gatsby
• netlify