![画像が読み込まれない場合はページを更新してみてください。](https://prod-files-secure.s3.us-west-2.amazonaws.com/a0f002b4-eec2-4df2-8737-c6ae60d92dd2/fbf86cb4-13f3-47bd-88f6-00f075d9550e/notion-portfolio.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240726%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240726T170657Z&X-Amz-Expires=3600&X-Amz-Signature=bedbd54b1dd40f08751bf922f310af3c973a3338373ca1d177dabf877349c0b5&X-Amz-SignedHeaders=host&x-id=GetObject)
Notion上で内容を追記・編集できるポートフォリオサイトを導入しました。
導入はeasy-notion-blog(このブログ)とほぼ同じでgit clone
→Vercel
にデプロイという流れです。
詳細は後述します。
導入したポートフォリオ
今回導入したポートフォリオサイトのオリジナルは以下のサイトとリポジトリです。
上記のポートフォリオサイトの作成者の方は、WordPressテーマのSANGOの現開発者です。
私はこのサイトのeasy-notion-blog以外にもWordPressのSANGOでもブログを持っています。
私がこのポートフォリオサイトを知ったのはSANGOがきっかけで開発者の方とやり取りをしたからです。
上記のポートフォリオテンプレートを使って作成した私のポートフォリオは以下です。
ポートフォリオの導入方法
導入方法については、作成者の方が記事にしてくれています。
Zennにはもう少し細かい話も記載されています。
しかし、上記はプログラミング初心者にとっては若干難しめの内容になっています。
もう少し、詳しい導入方法が知りたい場合は、easy-notion-blogの導入方法を参考にしてください。
導入の流れはeasy-notion-blogの導入方法とほぼ同じです。
とは言いつつ、自分のための備忘録として、ざっくりと導入の流れは書いておきます。
Notionのデータベースを用意する
まずはポートフォリオの内容を記載するNotionのデータベースを用意します。
データベースの内容は作成者の記事に載っています。
作成者の方の記事を見ながら一から用意してもいいのですが、作成者がポートフォリオ用のデータベースを公開してくれているので、そのデータベースを複製するのが一番楽です。
![画像が読み込まれない場合はページを更新してみてください。](https://prod-files-secure.s3.us-west-2.amazonaws.com/a0f002b4-eec2-4df2-8737-c6ae60d92dd2/499b9858-6adb-4af2-9111-9128bbb545f6/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240726%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240726T170657Z&X-Amz-Expires=3600&X-Amz-Signature=7704470f2d28aa7384fa64cd966681212953d27aed4fe1dbdf65f232b5e4a174&X-Amz-SignedHeaders=host&x-id=GetObject)
データベースを複製出来たら、中身を全て削除します。
そして、1つだけもいいので、ダミーの内容を入れておきましょう。
自分の場合は以下のように2つ、データを入れておきました。
![画像が読み込まれない場合はページを更新してみてください。](https://prod-files-secure.s3.us-west-2.amazonaws.com/a0f002b4-eec2-4df2-8737-c6ae60d92dd2/ac3cab0f-90b3-4450-8a30-d0a0b4c19f9c/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240726%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240726T170657Z&X-Amz-Expires=3600&X-Amz-Signature=54194a40796a5cac7345afdf92fe90bd6ac8f0754281a37cb590b7e900c74323&X-Amz-SignedHeaders=host&x-id=GetObject)
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を表示すると、サイトが表示できました。
![画像が読み込まれない場合はページを更新してみてください。](https://prod-files-secure.s3.us-west-2.amazonaws.com/a0f002b4-eec2-4df2-8737-c6ae60d92dd2/477b3034-2b89-4ba7-8f35-36ee3c9f30cd/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240726%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240726T170657Z&X-Amz-Expires=3600&X-Amz-Signature=f7fe6d3ebb72288c92ed1e5a4c70e86938c161ea89bd27e63d8c341cc803fc5e&X-Amz-SignedHeaders=host&x-id=GetObject)
リンクなどを自分用に変更する
無事ローカル環境にサイトを表示することができましたが、ツイッターのリンクなどが開発者の方のリンクになっているので、自分用に変更していきます。
ヘッダーの内容を変更する
![画像が読み込まれない場合はページを更新してみてください。](https://prod-files-secure.s3.us-west-2.amazonaws.com/a0f002b4-eec2-4df2-8737-c6ae60d92dd2/a1d5e199-d354-44f6-ba1b-4b4314644276/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240726%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240726T170657Z&X-Amz-Expires=3600&X-Amz-Signature=fc3a70c634e7b76ea60fafcf3daa7c77e6322b849c11c9c8ac4a4d6ddba4bd09&X-Amz-SignedHeaders=host&x-id=GetObject)
src\components\header.tsx
の内容を変更します。
![画像が読み込まれない場合はページを更新してみてください。](https://prod-files-secure.s3.us-west-2.amazonaws.com/a0f002b4-eec2-4df2-8737-c6ae60d92dd2/9e5f4139-9b9e-485e-8f0a-040a88f76199/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240726%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240726T170657Z&X-Amz-Expires=3600&X-Amz-Signature=84ad17c35b172e1b397ff91d3fbd5bc9de6954db4e400764b3df96942b2ceb84&X-Amz-SignedHeaders=host&x-id=GetObject)
![画像が読み込まれない場合はページを更新してみてください。](https://prod-files-secure.s3.us-west-2.amazonaws.com/a0f002b4-eec2-4df2-8737-c6ae60d92dd2/2345c3da-20fc-47cf-ad3d-4f6f65e3f235/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240726%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240726T170657Z&X-Amz-Expires=3600&X-Amz-Signature=cfe6a285f86b710ca02d9e40f8064708e8fe3f26ad42178a862917f57bddc36d&X-Amz-SignedHeaders=host&x-id=GetObject)
ポートフォリオの中身を変更する
![画像が読み込まれない場合はページを更新してみてください。](https://prod-files-secure.s3.us-west-2.amazonaws.com/a0f002b4-eec2-4df2-8737-c6ae60d92dd2/8cd80c54-ab8f-4054-9912-42790681929d/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240726%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240726T170657Z&X-Amz-Expires=3600&X-Amz-Signature=149a59d95befc99a3901b8d68bc19a5b51393623d586ad214819a021d91b5969&X-Amz-SignedHeaders=host&x-id=GetObject)
src\components\portfolio.tsx
の内容を変更します。
![画像が読み込まれない場合はページを更新してみてください。](https://prod-files-secure.s3.us-west-2.amazonaws.com/a0f002b4-eec2-4df2-8737-c6ae60d92dd2/dfe27417-999e-42a0-9b76-3359941d78e4/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240726%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240726T170657Z&X-Amz-Expires=3600&X-Amz-Signature=e47663e210309e8b2a1860342f0dc04c45a01022dab1fc4ecc497fc4c9d817bc&X-Amz-SignedHeaders=host&x-id=GetObject)
フッターの内容を変更する
![画像が読み込まれない場合はページを更新してみてください。](https://prod-files-secure.s3.us-west-2.amazonaws.com/a0f002b4-eec2-4df2-8737-c6ae60d92dd2/de7ef85e-afd5-4dd5-b10d-a64f922eee9b/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240726%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240726T170657Z&X-Amz-Expires=3600&X-Amz-Signature=3246724311aee48183f8403ba28f7e3317e13a3e9ae2cc831bf9ef9ce3281911&X-Amz-SignedHeaders=host&x-id=GetObject)
src\components\footer.tsx
の内容を変更します。
![画像が読み込まれない場合はページを更新してみてください。](https://prod-files-secure.s3.us-west-2.amazonaws.com/a0f002b4-eec2-4df2-8737-c6ae60d92dd2/6244ec45-13c3-4a54-aff7-2c222955c9e5/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240726%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240726T170657Z&X-Amz-Expires=3600&X-Amz-Signature=38073064b799646f128c22b0088fbb647145cc76c94932e000ba0da9b790cf4e&X-Amz-SignedHeaders=host&x-id=GetObject)
Contact の内容を変更する
![画像が読み込まれない場合はページを更新してみてください。](https://prod-files-secure.s3.us-west-2.amazonaws.com/a0f002b4-eec2-4df2-8737-c6ae60d92dd2/9c67a18f-3e27-4ca4-b869-d10bcfe5214a/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240726%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240726T170657Z&X-Amz-Expires=3600&X-Amz-Signature=8d811d4456f45db6ef1476704a7b2b80238591e56862461a99cfca6f138a5d84&X-Amz-SignedHeaders=host&x-id=GetObject)
![画像が読み込まれない場合はページを更新してみてください。](https://prod-files-secure.s3.us-west-2.amazonaws.com/a0f002b4-eec2-4df2-8737-c6ae60d92dd2/de655659-e4e3-46b4-9a8a-1e70b62b3eb9/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240726%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240726T170657Z&X-Amz-Expires=3600&X-Amz-Signature=abb98a5376044f0e4a9d9c5d4cc1c2b56a6c19c4f140610c333347c048bba881&X-Amz-SignedHeaders=host&x-id=GetObject)
まずは画像を入れ替えます。
入れ替えたい画像をpublic
ディレクトリの直下に格納し、画像名に合わせてsrc\pages\contact.tsx
の以下を変更します。
![画像が読み込まれない場合はページを更新してみてください。](https://prod-files-secure.s3.us-west-2.amazonaws.com/a0f002b4-eec2-4df2-8737-c6ae60d92dd2/a7b0158a-9a07-4cd6-a647-c13d63e87b53/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240726%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240726T170657Z&X-Amz-Expires=3600&X-Amz-Signature=6acf971e740f83cb90186bc7e5a8d8a640813d0a364eb77a64c7a8968b4cc769&X-Amz-SignedHeaders=host&x-id=GetObject)
続いて、本文やツイッターなどのリンクを変更します。
こちらもsrc\pages\contact.tsx
の内容を変更します。
![画像が読み込まれない場合はページを更新してみてください。](https://prod-files-secure.s3.us-west-2.amazonaws.com/a0f002b4-eec2-4df2-8737-c6ae60d92dd2/273adea7-33c8-458d-816e-0071e759dd97/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240726%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240726T170657Z&X-Amz-Expires=3600&X-Amz-Signature=e4592aa859e424e1ee878bbe999a5d476b935ecbbfa2051e53e85efebfb3a2ff&X-Amz-SignedHeaders=host&x-id=GetObject)
![画像が読み込まれない場合はページを更新してみてください。](https://prod-files-secure.s3.us-west-2.amazonaws.com/a0f002b4-eec2-4df2-8737-c6ae60d92dd2/5b09b8ae-1fcd-4552-9cfb-630a9c9c5321/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240726%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240726T170657Z&X-Amz-Expires=3600&X-Amz-Signature=027d8feee77a70739ad9e8ac4725f3d6b8f8c09f7d1cf054e0a7a8156e8332bf&X-Amz-SignedHeaders=host&x-id=GetObject)
サイト名を変更する
最後に、リンクを共有した時やブラウザのタブに表示されるサイト名を変更します。
src\pages\_app.tsx
に以下を追加してください。
import React from 'react'
import Head from 'next/head'
<Head>
<title>サイト名</title>
</Head>
![画像が読み込まれない場合はページを更新してみてください。](https://prod-files-secure.s3.us-west-2.amazonaws.com/a0f002b4-eec2-4df2-8737-c6ae60d92dd2/714db12f-6eea-4130-8cf1-1ca2ce992a4f/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240726%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240726T170657Z&X-Amz-Expires=3600&X-Amz-Signature=f493a8efc2ff34bcf4dbc3e4592a2af57e9af8fd8a32585353c8c5db42008c42&X-Amz-SignedHeaders=host&x-id=GetObject)
内容の詳細はNEXT.jsのページを参考にしてください。
GitHubにリポジトリを作成してpush
する
上記で作成したローカルリポジトリをGitHubのリポジトリにpush
します。
GitHubへのリポジトリの追加 → pushまでの手順は以下の記事が親切で分かりやすいです。
Vercelにデプロイする
GitHubに追加出来たら、Vercelにデプロイします。
Vercelへのデプロイ方法も、またまた上記の記事がしんせつでわかりやすいです。
無事、デプロイ出来たらポートフォリオサイトが見れるようになります。
終わりに
今回使用したポートフォリオサイト、シンプルですが、とても見やすくて美しいデザインです。
ちょっとしたレイアウトや配色だとは思うのですが、このちょっとがめっちゃ難しい。
こんなデザインできるようになりたいです。
このポートフォリオサイトはeasy-notion-blogのような頻繁なアップデートやサポートは無い分、不具合の改善や改造は自分で頑張らないといけない部分が多いと思います。
しかし、easy-notion-blogと同じく、勉強するにはとても良い素材だと思っています。
いずれは自分でもこういうものを作って公開→誰かに使ってもらえるようになりたいです。
以上、ありがとうございました!!