1 min read

Hello Gridsome.

nabeen

インターネットにゴミを撒き散らすためのブログを Gridsome で作った。

こういう書き散らかす系のブログははてなブログ(なんと Pro 契約 😇)を使っていたんだけど、はてなブログだと僕のニーズに合わなくなってきたので。

行き着いた先は結局 SSG(Static Site Generator)で、色々候補はあるんだけど今回は Gridsome を選択した。

Gridsome を選んだのは単純に Vue.js がいいなというのと、以前一度触った時と比べるとエコシステムがだいぶ整ってきてるなっていう印象を持ったから。

まぁ SSG の良いところは載せ替えが容易ってところにもあるので、飽きたら Gatsby.js とかにしてもいい。

Gridsome でのブログの作り方

公式で紹介されているテンプレートがあるので、それを使えばそこそこデザインの整ったブログがあっという間に出来上がる。

Gridsome 謹製のブログテンプレートより Bleda ってやつの方が最初っから色々入ってるのでオススメ。

$ npm install --global @gridsome/cli
$ gridsome create my-website https://github.com/cossssmin/gridsome-starter-bleda.git

上記コマンドでブログを作ったら、Getting started | Bledaに沿って変更を加えれば OK。

僕はフォントとか行間が気に食わなかったので、以下の CSS を当てて調整した。個人的に読みやすいサイトの上位にランクインしているnoteで当ててある CSS を拝借している。

.markdown p,
.markdown ul,
.markdown ol {
  line-height: 36px;
  margin-top: 36px;
  margin-bottom: 36px;
  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Segoe UI,
    Hiragino Kaku Gothic ProN, Hiragino Sans, ヒラギノ角ゴ ProN W3, Arial, メイリオ,
    Meiryo, sans-serif;
}

シュッとやりたかっただけなので CSS ファイルに直接記述したが、後々ちゃんと Component 内に移すつもり。

Lint の導入

Bleda には Lint が入っていなかったので、こちらもシュッと対応した。

記事書くだけなら要らないけど、デザイン調整したりとか開発もするので、さすがに Lint がないのはつらい。作者の人どうやって開発したんやろね...?

設定自体は、今業務で書いている Vue.js のプロジェクトから必要そうなものだけ選んで移植した。業務用のはpromise周りも入れてるけど、そのへんを抜いている。

{
  "scripts": {
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "lint:fix": "eslint --fix --ext .js,.vue --ignore-path .gitignore ."
  },
  "devDependencies": {
    "@vue/eslint-config-prettier": "^5.0.0",
    "babel-eslint": "^10.0.3",
    "eslint": "^6.5.1",
    "eslint-plugin-prettier": "^3.1.1",
    "eslint-plugin-vue": "^5.2.3",
    "prettier": "^1.18.2"
  }
}

ルールはこんな感じで。

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  plugins: ['prettier'],
  extends: ['plugin:vue/essential', '@vue/prettier'],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
  },
  parserOptions: {
    parser: 'babel-eslint',
  },
  overrides: [
    {
      files: ['**/__tests__/*.{j,t}s?(x)'],
      env: {
        jest: true,
      },
    },
  ],
};

実はフロントエンドを触り始めたのはここ 2 ヶ月くらいで、.eslintrc.js周りの設定は CLI が作ったのほぼそのまま使っている。つまり、このへん全くわかってないマンなので、後々整備していきたい。

P.S.

はてなブログはさっさと捨ててしまいたいので、ガツッと移植してしまうつもり。

エクスポート自体は「記事データをエクスポートできるようにしました。ブログのバックアップ等にご利用ください」にもある通りできるんだけど、MT 形式というのが難点。

個人的には記事ごとに.mdで落とせるのが最高なのだけど、そううまくも行かないようだ。