2020/12/29

ポートフォリオを作成しました

#技術

コード

GitHub


技術スタック

  • Next.js
  • Jamstack
  • microCMS
  • TailwindCSS
  • TypeScript
  • Vercel


Blogの箇所について

microCMSで記事を更新すると自動でbuildされるようになっています。
microCMS + Next.jsでJamstackブログを作ってみよう」 を参考にさせていただきました。

Blogのスタイル

Taliwind CSSのtypographyを使用しました。

Qiita, Zennなどの複数サイトから自分の記事を取得

RSSを使用。
team-blog-hubを参考にさせていただきました。
package.jsonでbuildコマンドを以下のようにすることで,buildするタイミングでsrc/builder/posts.tsが走ります。

  "scripts": {
    "build": "run-s build:posts build:next",
    "build:posts": "ts-node --project tsconfig.builder.json ./src/builder/posts.ts",
    "build:next": "next build",
  },


posts.tsの

  fs.ensureDirSync(".contents");
  fs.writeJsonSync(".contents/posts.json", items);


でposts.jsonに記事の内容を吐き出しています。

ロゴ

Google FontsのMajor Mono Displayを使用しています。

アイコン

ネコのアイコンは自分で描きました。

Vercelのデプロイ

  • masterにpushする
  • microCMSで記事を作成・更新する

と自動でデプロイされるように設定しました。ぽちぽちボタン押すだけで連携できて便利だった。神。


後からやりたいこと

  • twinを使ってstyled componenを導入したい
    • https://github.com/ben-rogerson/twin.macro
  • GitHubの草を載せたい
  • google analyticsを入れたい(プラポリも書かなきゃいけない)
  • マークダウンのコードの箇所に色をつけたい
  • 記事の「#技術」から検索できるようにしたい
  • 検索
    • microCMSのやつ
    • Algolia
  • bageleeの記事(社内記事)も載せる
  • 今はプレビューモードがlocalhost:3000になっているのでローカルで立ち上げる必要があるところを修正する
  • 404ページ


DONE

  • ブログのOGPを動的にする
  • 隠しコマンド