# モチベーション * AngularでBlogコンテンツでも作るかぁー * 他のフレームワークは俺じゃない誰かがたくさん解説しとるやろ… * Firebaseの機能をいろいろ使ってみてーな * なるべくお金かけずにどうにかしてしてーな * データをデザイン分離しときてーな（Headless CMS） * とはいえ、SEOとかOGPも最低限は反映されるようにしてーな できたのがこのサイト。 # フロント Angular13を利用する。テキストデータそのものはmarkdownにしといてprism.jsなどでレンダリングする。 Angularじゃなくてよくね？はまぁそうなんだけど、なんか後で動的なコンテンツとか追加するかもしれんし、ご愛嬌。 # データストア Blogデータの保存には[Cloud Firestore](https://firebase.google.com/docs/firestore?hl=ja) 画像、その他のデータについては[Cloud Storage for Firebase](https://firebase.google.com/docs/storage) #　ホスティング Firebase Hostingにアップロードしている。 ドメイン管理もGoogle domainsに寄せているのでFirebaseのコンソールで設定すると独自ドメイン管理が楽。 # SSG AngularではタイトルタグやOGP用のメタ情報をクローラーに食わせるのに問題があるため、 [Scully](https://scully.io/)を使って、ページ生成。 URLのリスト生成にはFirebase Cloud Functionsを利用。以下のようなAPIを作成し、URLのリストを返すようにした。 ```typescript import * as functions from "firebase-functions"; // The Firebase Admin SDK to access Firestore. import * as admin from "firebase-admin"; admin.initializeApp(); export const blogs = functions.https.onRequest(async (request, response) => { const querySnapshot = await admin.firestore().collection("blog_contents") .select("id") .orderBy("update_date", "desc").get(); const records = querySnapshot.docs.map((elem) => elem.data()); response.set("Content-Type", "application/json"); response.send(JSON.stringify(records)); }); ``` # CD * GitHub Actionを運用するようにしてみた。 *[https://firebase.google.com/docs/hosting/github-integration](https://firebase.google.com/docs/hosting/github-integration) * Pull requestをしたときにPreviewチャンネルを作成、mainにマージするとLiveサーバーにデプロイするようにした。 # lighthouse SSGの効果によりlighthouseのスコアは爆上がりした。あとは画像の幅高さの指定をできるようになれば完璧なはず。