Cover Image for blog-starter-typescript を使って技術ブログを作り直してみた

blog-starter-typescript を使って技術ブログを作り直してみた

シリーズ：技術ブログ制作日記
blogTypeScriptNext.jstailwindcss

概要

Next.js + Tailwind UI を使うとたった6時間で技術ブログのプロトタイプを作れる を参考に技術ブログを作り直してみる

そのためにやったことをメモする

まとめ

  • 2.5時間くらいで最低限必要なことはできて vercel にデプロイできる
  • デフォルトだといろいろデザインがイケてないので、ここからのいじりがいはありそう
  • Next.js の勉強しながら、やったことを記事にすればブログのネタにも困らない

作業ログ

blog-starter-typescript を実行

npx create-next-app --example blog-starter-typescript blog-starter-typescript

生成されたものを yarn dev して問題なさそうだったので github に repository を作る

新しい記事を書いてみる

この記事を書いている。 デフォルトの実装だとカバー画像が必須みたいなので、unsplash から良さげな画像を探しカバー画像に設定してみる。

なんとなく気に入ったのでこれをデフォルトにしてみる

vercel にデプロイしてみる

  • vercel に登録する(github 連携ですぐ登録できる)
  • さっき作ったリポジトリをvercelにimportする
  • nextjsのアプリだとデフォルトの設定から何も変えずにデプロイできる

ここまでで 1.5h (blog-starter-typescriptで作られたコードを読んでる時間が大半)

next lint の導入

  • next lint のページに従って next lint を実行してeslintの設定を行う
  • コマンド打つだけで自動で設定されるので便利
  • yarn add -D prettier eslint-config-prettier で prettier もinstallしておく
  • .prettierrc.js を作成する
/** @type {import('prettier').Config} */

const config = {
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none",
  "arrowParens": "avoid"
};

module.exports = config
  • .eslintrc.json の extends にprettier を追加しておく

(必要ないけど) ディレクトリ構成の変更

  • デフォルトだと、リポジトリ直下にappを構成するためのコードが入ってるディレクトリが直接置かれている
  • 個人的な好みとしては src の下にあって欲しいので移動する

ここまでで約2h (ディレクトリ構成変えたのに合わせて設定変更してる時間が大半)

google analytics の導入

ここまでで約2.5h