Gridsomeでブログを作成しました。cssフレームワークにはUtilify fastで作成されているTailwind CSSを、ホスティングにはNetlifyを利用しました。記事はmarkdown形式で書いています。

ブログを公開するまでの過程をまとめていきます。

Gridsome Blog starterを使う

Gridsomeを始めるには Gridsome CLI toolをインストールして gridsome create site-name とする方法が一番基本です。今回はより楽にブログを作るため予めBlogに必要な機能が揃ったBlog starterを利用しました。

Blog Starterを利用する

ブログを作るのであればBlog Starterを利用することでmarkdownでのファイルのparseや、ルーティング、テンプレートなどが利用できて楽に開発できます。

GraphQLや、Gridsomeのルーティング方法を何も考えなくてもブログの形になるまで一瞬で終わったので良かったんじゃないかなと思っています。

# starterを利用してgirdsomeのブログプロジェクトを作成する
$ yarn global add @gridsome/cli
$ gridsome create my-gridsome-site https://github.com/gridsome/gridsome-starter-blog.git

一応考えられる楽な部分、メリットを簡単に書いておきます。

markdown記事用のルーティングがgridsome.config.jsに書いてくれている
記事データ取得のgraphqlもちょっといじるだけで始められる状態である
コードブロックにスタイルをあてるprismjs導入済み
外部リンクを_blankなども設定済み

逆にデメリットとしては下記ぐらいかなと思います。

自分でコンポーネント分割などをしたい時に既存ファイルを消していくのがめんどくさい

starterの選定

starterは公式サイト上でたくさん公開されています。今回はTailwind CSSを使ってみたいというモチベーションがあったため、下記２つが候補でした。

Bleda: 予めTailwind CSSが組み込まれたstarter
Gridsome Blog Starter: シンプルなBlog starter

Bledaにしようか迷ったのですが、ここは直感でblog starterを選びました。Tailwind CSSを組み込んでいく方法も知っておきたいなぁみたいなモチベーションだった気がします。

参考: Gridsome Starters - Gridsome

シンプルにgridsomeのプロジェクトを作成する場合

ただ、例えば自分でcomponent分けとかを最初からきっちりやりたいという人にはいらないファイルを消していく作業が増えるのでシンプルにgridsome createしましょう。

# シンプルにgridsomeのプロジェクトを作成する方法
$ yarn global add @gridsome/cli
$ gridsome create my-gridsome-site

参考: Getting started - Gridsome

Tailwind CSSを組み込んでいく

(追記)

ここの作業分のみのPRをこのブログではなくデフォルトスターターから作成しているブログにて作成しています。

diffで分かりやすく見れるのでさくっと見たい方はこちらをどうぞ

Tailwind CSSを導入しました by pensuke81 · Pull Request #2 · pensuke81/gridsome-blog

必要なものをインストール

Tailwind CSSをインストールします。ついでに利用していないcssを削減してくれるpurge CSSもインストールしておきます。

$ yarn add tailwindcss --dev
$ yarn add @fullhuman/postcss-purgecss --dev

また、自分のcssファイルをimportしたかったので postcss-import もインストールします。nestした書き方をしたければ postcss-nested も入れておきましょう。

# nestした書き方をするのであれば
$ yarn add postcss-import --dev
# nestした書き方をするのであれば
$ yarn add postcss-nested --dev

gridsome.config.jsにwebpackで設定を記述

gridsome.config.jsに下記のように記述します。

class TailwindExtractor {
  static extract(content) {
    return content.match(/[A-Za-z0-9-_:\/]+/g) || [];
  }
}

module.exports = {
	// ...
	chainWebpack: config => {
    config.module
      .rule('css')
      .oneOf('normal')
      .use('postcss-loader')
      .tap(options => {
        options.plugins.unshift(...[
          require('postcss-import'),
          require('postcss-nested'),
          require('tailwindcss'),
        ])

        if (process.env.NODE_ENV === 'production') {
          options.plugins.push(...[
            require('@fullhuman/postcss-purgecss')({
              content: [
                'src/assets/**/*.css',
                'src/**/*.vue',
                'src/**/*.js'
              ],
              extractors: [
                {
                  extractor: TailwindExtractor,
                  extensions: ['css', 'vue', 'js']
                }
              ],
            }),
          ])
        }

        return options
      })
  },
	// ...
}

Tailwind CSSのGridsome starterである下記のリポジトリの設定をそのまま利用させていただきました。

参考: cossssmin/gridsome-starter-bleda: Gridsome blog starter, built with Tailwind CSS

プロジェクトのcssからTailwind CSSを読み込む

Gridsomeでは main.js から下記のようにcssを読み込んでいると思います。

// Import main css
import '~/assets/style/main.css'

この main.css からTailwind CSSを読み込んであげましょう。この時にbaseについてはPurge CSSで勝手にpurgeされないようにignoreしてあげるといいでしょう。

/*! purgecss start ignore */
@import 'tailwindcss/base';
/*! purgecss end ignore */

@import 'tailwindcss/components';

@import 'tailwindcss/utilities';

// 他にもimportしたいcssファイルがあれば
// @import './components/my-css-file'

@tailwind base; という風に書いていないのは他にも自分のcssファイルを読み込みたいという時に、@tailwindと@importを同時に使うことが出来なかったためです。（あんまりわかってないので強い人教えてください）

ちなみに自分のブログではmarkdown部分のcssと記事内のコードにcssをあてるのにimportしています。

gridsome-plugin-tailwindcssについて

GridsomeにTailwind CSSを導入する場合にpluginが用意されています。今回、プラグインを利用しなかった理由はPurge CSSの設定を書いてもうまいこといかず、cssがうまくあたらなかったためです。

純粋にTailWind CSSを導入するだけであればプラグインを利用すれば簡単に導入できるかと思います。

gridsome-plugin-tailwindcss - Gridsome

ルーティングはpagesとtemplateを使い分ける

Nuxtではpagesによってルーティングが生成されますが、Gridsomeには templates という概念があります。

If url will be /about use a page
If url will be /blog use a page
If url will be /blog/:slug use a template
Pages - Gridsome

つまりブログ一覧はpagesを、ブログの記事ページはtemplateを使いましょうということですね。

おわりに

今回はGridsomeでTailwind CSSを利用しつつブログを作成する過程をまとめてみました。Gridsomeが用意しているStarterを使ったため、GraphQLに苦労することもなく導入することが出来ました。

Gridsomeでブログを構築してNetlifyでホストすることで爆速なブログができるのでみなさんもぜひチャレンジしてみてください。

# Tailwindcss

GridsomeでTailwind CSSを使ってブログを作成しました