ブログを作りました。

Angularのプリレンダリングがいい感じになったと聞いたので、その実験として雑にブログを作成しました。
利用したFW・ライブラリ・サービスは👇

• Angular v19
• marked
• hightlight.js
• Amazon Route 53
• Github Pages
• Github Actions
• Googleアナリティクス

所要時間は6～7時間程度

プリレンダリングの感想

Angularのプリレンダリングは非常に便利になっていて以下の様に記述するだけで、簡単にプリレンダリングできて感動しました。

export const serverRoutes: ServerRoute[] = [
  {
    path: '',
    renderMode: RenderMode.Prerender
  },
  {
    path: 'posts/:id',
    renderMode: RenderMode.Prerender,
    getPrerenderParams: () => {
      return Promise.resolve(Posts.map(post => ({ id: post.url })));}
  },
  {
    path: '**',
    renderMode: RenderMode.Client
  }
];

getPrerenderParamsに指定する関数でパラメータリストを渡すことができる。
このブログのポストは全てmarkdownで記述しているため、👇の様にexpress側でmarkedを利用してmarkdownをhtmlに変換・返却する実装を行い、プリレンダリング時にコンポーネントで描画するようにした。

app.get('/posts/:id', (req, res) => {
  // 省略
  res.send({ content: marked.parse(md, { renderer }) })
});

ホスティング

Github ActionsでビルドしてGithub Pagesでホスティングしている。
Route 53で一昨年くらいに取得したドメインを全く利用していなかったので、そのドメインにサブドメインを生やして使っている。

Googleアナリティクス

全てのページをプリレンダリングし、SPAではなく静的なサイトとして公開しているので、アナリティクスの対応が非常に楽になり、index.htmlにスクリプトを埋め込むだけで済んだ。
SPAだとページ遷移やイベントのたびにgtagを呼ぶことになって面倒ですからね。

今後

備忘録的にブログに何か書いていこうと思っている。
デザインなど本当に適当なので、どこかのタイミングで綺麗にするかも。
RSSとか対応したほうがいいのかな。

👋👋👋