ソースコード

これ

経緯

今まで2度ポートフォリオを作ったことがあった。

1度目はReactで作成

Reactの勝手がそもそもわかっていなくてうまく作れなかった。また、DBを用意していなかったのでコードに記事を直接書き込んでいた(?多分)。→続かず

2度目はFlutterで作成

管理画面を作成して動的に記事を追加できるようにした。DBはFirestoreを使った。一方でFlutterでのSEO対策がわからないのとそもそもWebに向いていない。→続かず

3度目の正直として今回はSEO対策に強い？と言われているNext.jsと自分が愛用しているNotionを使ってポートフォリオを作っていこうと思った。

SEO対策にこだわっている理由は、「検索して上の方に来たらなんか嬉しいから」

使用した技術スタック

Next.js,Notion以外について

Tailwind CSS

バイトで使っていて使いやすかったから採用。最近みんな使っている印象。

Cloudflare

Next.jsをデプロイできる。無料枠でも商用利用できる(?多分)。

Docker

ローカルのNodeのバージョン確認するのが面倒だから。新しくイメージ作成した方が楽だから。

Github

いつも使っているから。自動デプロイができる(けどしない)。

↓今回のポートフォリオのソースコード。シークレットなコード上がってないといいけど。各種バージョンはpackage.json。

↓Dockerで作成したNodeの環境。リポジトリ名がNext.jsかつブランチ名にNextのバージョン書いてあるけどNext関係ないの意味不明(自分)

工夫した点

CMSをNotionにしたこと

Notionを選んだことというより、Notionで実現させたこと。

ただ、自分がNotionをよく使っているっていて、書いた内容をポートフォリオにしたかった。

Notion APIとして使ったものは、ブロック取得とDBクエリ(データ取得)。

ポートフォリオはクライアント側からデータベースの値を変更することは特にない。

APIとして使ったのはデータ取得するだけのことだったからそんなに難しくなかった。

しかもライブラリ使った。↓

Notionで取得したものをマークダウン形式に変換

これもライブラリを使った。工夫というよりは、よく見つけた感。

ここはあまりライブラリに頼りたくなかったが早く完成させたかったから仕方なし。

マークダウンからHTMLに変換

ライブラリでNotionからmdに変換するならこれもライブラリ使えばいいやと↓。

目次作成

これは自作。

↓ここにちょっとコードも載っけた。

修正点

サムネイル

文章(description)変えたい。固い。

サムネイルに画像が表示されていないのなんで。

SEO対策の甘さ

lighthouseってやつ使って確かめたら86点だった。

理由は、「Links do not have descriptive text」と「Document does not have a valid rel=canonical」だった。直す。

改善していくところ

完成品

これ自体。このサイト自体が完成品。

今までのメモ