Notion上で内容を追記・編集できるポートフォリオサイトを導入しました。
導入はeasy-notion-blog（このブログ）とほぼ同じでgit clone→Vercelにデプロイという流れです。
詳細は後述します。
導入したポートフォリオ
今回導入したポートフォリオサイトのオリジナルは以下のサイトとリポジトリです。
上記のポートフォリオサイトの作成者の方は、WordPressテーマのSANGOの現開発者です。
私はこのサイトのeasy-notion-blog以外にもWordPressのSANGOでもブログを持っています。
私がこのポートフォリオサイトを知ったのはSANGOがきっかけで開発者の方とやり取りをしたからです。
上記のポートフォリオテンプレートを使って作成した私のポートフォリオは以下です。
ポートフォリオの導入方法
導入方法については、作成者の方が記事にしてくれています。
Zennにはもう少し細かい話も記載されています。
しかし、上記はプログラミング初心者にとっては若干難しめの内容になっています。
もう少し、詳しい導入方法が知りたい場合は、easy-notion-blogの導入方法を参考にしてください。
導入の流れはeasy-notion-blogの導入方法とほぼ同じです。
とは言いつつ、自分のための備忘録として、ざっくりと導入の流れは書いておきます。
Notionのデータベースを用意する
まずはポートフォリオの内容を記載するNotionのデータベースを用意します。
データベースの内容は作成者の記事に載っています。
作成者の方の記事を見ながら一から用意してもいいのですが、作成者がポートフォリオ用のデータベースを公開してくれているので、そのデータベースを複製するのが一番楽です。
データベースを複製出来たら、中身を全て削除します。
そして、1つだけもいいので、ダミーの内容を入れておきましょう。
自分の場合は以下のように2つ、データを入れておきました。
Notionのインテグレーションを取得する
続いて、Notionのインテグレーションを取得して、データベースに登録します。
インテグレーションの取得方法については、作成者の記事、もしくはeasy-notion-blogの導入方法（別の方の記事ですが一番親切）を参考にしてください。
上記の記事にデータベースへの登録まで紹介されています。
上記に加えてNotionのデータベースIDも取得しておいてください。
データベースIDの取得についても上記の記事に記載されています。
リポジトリをgit clone する
以下のリポジトリをローカルにgit cloneします。
クローンした後は、クローンしたフォルダに移動してください。
git clone https://github.com/steelydylan/notion-portfolio-site.git
cd notion-portfolio-site続いて、開発環境（自分のPC上）でポートフォリオサイトを表示するために、自分のNotionのインテグレーションキーとデータベースIDを.env.localに記載します。
自分の場合はVS Codeで作業をするので、VS Codeの画面で説明します。
NOTION-PORTFOLIO-SITEディレクトリの直下に.env.localを追加します。
.env.localに以下を追加します。
NOTION_DATABASE_ID=自分のデータベースID
NOTION_TOKEN=自分のNotionインテグレーションキー追加できたら以下を実行します。
yarn
yarn devターミナルに表示されたURLを表示すると、サイトが表示できました。
リンクなどを自分用に変更する
無事ローカル環境にサイトを表示することができましたが、ツイッターのリンクなどが開発者の方のリンクになっているので、自分用に変更していきます。
ヘッダーの内容を変更する
src\components\header.tsxの内容を変更します。
ポートフォリオの中身を変更する
src\components\portfolio.tsxの内容を変更します。
フッターの内容を変更する
src\components\footer.tsxの内容を変更します。
Contact の内容を変更する
まずは画像を入れ替えます。
入れ替えたい画像をpublicディレクトリの直下に格納し、画像名に合わせてsrc\pages\contact.tsxの以下を変更します。
続いて、本文やツイッターなどのリンクを変更します。
こちらもsrc\pages\contact.tsxの内容を変更します。
サイト名を変更する
最後に、リンクを共有した時やブラウザのタブに表示されるサイト名を変更します。
src\pages\_app.tsxに以下を追加してください。
import React from 'react'
import Head from 'next/head'<Head>
<title>サイト名</title>
</Head>
内容の詳細はNEXT.jsのページを参考にしてください。
GitHubにリポジトリを作成してpushする
上記で作成したローカルリポジトリをGitHubのリポジトリにpushします。
GitHubへのリポジトリの追加 → pushまでの手順は以下の記事が親切で分かりやすいです。
Vercelにデプロイする
GitHubに追加出来たら、Vercelにデプロイします。
Vercelへのデプロイ方法も、またまた上記の記事がしんせつでわかりやすいです。
無事、デプロイ出来たらポートフォリオサイトが見れるようになります。
終わりに
今回使用したポートフォリオサイト、シンプルですが、とても見やすくて美しいデザインです。
ちょっとしたレイアウトや配色だとは思うのですが、このちょっとがめっちゃ難しい。
こんなデザインできるようになりたいです。
このポートフォリオサイトはeasy-notion-blogのような頻繁なアップデートやサポートは無い分、不具合の改善や改造は自分で頑張らないといけない部分が多いと思います。
しかし、easy-notion-blogと同じく、勉強するにはとても良い素材だと思っています。
いずれは自分でもこういうものを作って公開→誰かに使ってもらえるようになりたいです。
以上、ありがとうございました！！