記事内で表示するOGP情報の取得

CI／CDを設定して記事ページの自動更新

## はじめに
Jamstackなポートフォリオを作成しました。

 
<a target="_blank" rel="noopener" href="https://portfolio21-56e7e.web.app/" class="link-card"><img src="https://storage.googleapis.com/portfolio21-56e7e.appspot.com/articles/placeholder/lazy_with_icon.png" class="link-card__image">1keiuu's portfolioIkkei Harashima's portfolio 2021</a>
 

気づけば毎年ポートフォリオを作っていてこれで3つ目です。。 
今回はサーバーレスで管理のし易さとパフォーマンスを意識したものになりました。

過去のポートフォリオはこちら 


 
<a target="_blank" rel="noopener" href="https://portfolio21-56e7e.web.app/products/1" class="link-card"><img src="https://storage.googleapis.com/portfolio21-56e7e.appspot.com/products/portfolio19/1.webp" class="link-card__image">Portfolio 2019Ikkei Harashima's Portfolio</a>
 


 

 
<a target="_blank" rel="noopener" href="https://portfolio21-56e7e.web.app/products/5" class="link-card"><img src="https://storage.googleapis.com/portfolio21-56e7e.appspot.com/products/portfolio20/1.webp" class="link-card__image">Portfolio 2020Ikkei Harashima's Portfolio</a>
 


 

## 使用した技術
**FW:** Nuxt.js (TypeScript/composition-api)
**コンテンツ管理:** Nuxt/content , Cloud Storage 
**ホスティング:** Firebase hosting 
**その他API:** Cloud Functions 
**CI/CD:** Github Actions 

 

## 作った理由

**① 去年作ったポートフォリオのパフォーマンスが悪い** 

　React/Go/AWSの勉強を目的とするあまり、ポートフォリオサイトとしての役割を考えずに作ってしまいました。 
　結果的に費用もUXも最低な魔物が生み出されてしまいました。。。
　特にthree.jsの部分はSPで見るとsafariが落ちるくらい重く、やっつけで作ったせいかチューニングも面倒になって放置状態。 
　これに反省して、「Jamstackでパフォーマンス最高なで管理し易いサイトに作り直そう！」と決心しました。 
 
**② 去年作ったポートフォリオは管理画面を作ってないのでコンテンツの更新が面倒** 

またしても2020年度版の欠陥なのですが、当初作る予定だった管理画面を作る気力がなくなってしまい、未だに内容を更新するにはEC2にsshしてSQL叩く必要があるという状況のまま。。 
冷静に考えてもポートフォリオでDB用のEC2インスタンス建ててたのアホすぎる。。。

**③ nuxt/contentを使ってみたくなった** 

はじめはmicroCMSでJamstackを目指して作成していたのですが、たまたま聞いていた[UIT INSIDE](https://uit-inside.linecorp.com/)のポッドキャストでnuxt/contentを知り、コンテンツの管理がめちゃくちゃ便利そうで使ってみたくなりました。 
しかもマークダウンで簡単にブログが作れる、、、！

②の失敗を踏まえても、Githubで管理したjson,マークダウンだけでコンテンツの管理ができるのだから、個人開発のポートフォリオに最適だと思いました。


 

## 工夫した所 

**※ (ここら辺は詳しく別記事を書こうと思います！)**

### OGP画像の動的生成 
　Twitterなどでシェアした時にQiitaっぽいOGPが表示されるようになります。 
　Cloud Functions × Cloud Storageで実装しました。 
　以前まで無料だったCloud Functions(Firebase)もnode v10より有料（従量課金）との事、、 
 
**参考にした記事** 
[絶対にお金を払いたくない精神での動的OGP生成は辛い ](https://blog.ojisan.io/dynamic-ogp) 
 

### 記事内で表示するOGP情報の取得 
　Nuxt/Contentで書かれた記事内で外部ページのOGPを表示する為の実装が必要だったので、URLからOGP情報を取得するAPIをCloud Functionsで作成しました。 
　~~ただ、ここはページ表示の度に都度取得しているので、純粋なJamstackっと言えるのか？と言う気持ち。。~~ 
 
 **1/18更新: OGP情報の取得をビルド時に変更した為改善されました！**
 
 

### CI／CDを設定して記事ページの自動更新 
　このサイトはSSGでビルドしているので、記事などのコンテンツを更新する度にビルドをかける必要があります。 
　そこで、Github Actions × Firebase Hostingを使ってCI/CDを構築しました。 
　この組み合わせは設定もめちゃくちゃ楽なので、短い期間での個人開発ではかなり使えると思います。 

以前Qiitaの記事にしました。 


 
<a target="_blank" rel="noopener" href="https://qiita.com/ikkei12/items/0f0c2d95bdd3b54d6bac" class="link-card"><img src="https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png?ixlib=rb-4.0.0&amp;w=1200&amp;mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZ0eHQ9TnV4dCVFMyU4MiVBMiVFMyU4MyU5NyVFMyU4MyVBQSVFMyU4MiU5MlNTRyVFMyU4MSVBNyVFMyU4MyU5MyVFMyU4MyVBQiVFMyU4MyU4OSVFMyU4MSU5NyVFMyU4MSVBNkNJJTJGQ0QlRTMlODIlOTIlRTMlODElOEElRTYlODklOEIlRTglQkIlQkQlRTMlODElQUIlRTglQTglQUQlRTUlQUUlOUElRTMlODElOTklRTMlODIlOEIlRTMlODAlOTBHaXRIdWIlMjBBY3Rpb25zJTIwJUMzJTk3JTIwRmlyZWJhc2UlMjBIb3N0aW5nJUUzJTgwJTkxJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz00MDM1NTgyYTBjODAzNjZmOTE5ZjczNjBiNzA1ZjY0NQ&amp;mark-x=142&amp;mark-y=112&amp;blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwaWtrZWkxMiZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9MzJkYmE2ZmJkZWNlNzQyMWQ4ODFhM2NmNWQzNTBiNGM&amp;blend-x=142&amp;blend-y=491&amp;blend-mode=normal&amp;s=259057ef690647362da749bea298742f" class="link-card__image">NuxtアプリをSSGでビルドしてCI/CDをお手軽に設定する【GitHub Actions × Firebase Hosting】 - Qiita</a>
 

 


 

## 最後に

修正する点はまだまだ沢山あるのですが、なかなか管理しやすくパフォーマンスも比較的良いサイトが一旦は出来上がったのでは無いかと思います。 
使った技術が最小限かつパワフルでとても使いやすかったと思います。 
特にNuxt/contentが最高でした！ 
あとは相変わらずFirebaseは個人開発の味方ですね。

これからはQiitaやzennに加えてこのブログでちょっとした記事を書いていこうと思うのでよろしくお願いします！

はじめに
Jamstackなポートフォリオを作成しました。

1keiuu's portfolioIkkei Harashima's portfolio 2021


気づけば毎年ポートフォリオを作っていてこれで3つ目です。。今回はサーバー