Astro でブログを作成する！

自分のブログを作りたい理由

• ポートフォリオとして活用するため
• 自分自身を知ってもらう場を作りたかったため
• 技術ブログとして情報を発信するため

なぜ Astro を選んだか

• Astro は Theme が豊富であり、私の好みのものがあったため
• Next.js を使用するほどブログに高機能な要件は不要だったため

使用する Astro の Theme

今回は AstroPaper を使用します。

https://astro.build/themes/details/astro-paper/

Theme を指定して Astro の新規プロジェクトを作成

https://github.com/satnaing/astro-paper

❯ npm create astro@latest -- --template satnaing/astro-paper

╭─────╮  Houston:
│ ◠ ◡ ◠  Initiating launch sequence...
╰─────╯

 astro   v2.10.5 Launch sequence initiated.

   dir   Where should we create your new project?
         ./eunsol-blog
      ◼  tmpl Using satnaing/astro-paper as project template
      ✔  Template copied

  deps   Install dependencies?
         Yes
      ✔  Dependencies installed

    ts   Do you plan to write TypeScript?
         Yes

   use   How strict should TypeScript be?
         Strict
      ✔  TypeScript customized

   git   Initialize a new git repository?
         Yes
      ✔  Git initialized

  next   Liftoff confirmed. Explore your project!

         Enter your project directory using cd ./eunsol-blog
         Run npm run dev to start the dev server. CTRL+C to stop.
         Add frameworks like react or tailwind using astro add.

         Stuck? Join us at https://astro.build/chat

╭─────╮  Houston:
│ ◠ ◡ ◠  Good luck out there, astronaut! 🚀
╰─────╯

対応したこと

• 不要なものを削除または変更
  • 不要なブログ記事を削除
    • Astro の Theme が事前に用意していたブログ記事を削除
  • 不要な assets ファイルを削除（画像など）
• ブログタイトルを変更
• 不要なソーシャルメディアのリンクを非表示に変更
  • Astro の Theme が Facebook, Instagram, LinkedIn を有効化していたが、不要だったため、非表示に変更
• ホーム画面の変更
  • RSSフィードの削除
  • 簡易な自己紹介の文章を追加
• About画面の作成
  • 詳細な自己紹介の文章を追加
• 「Social Links」に Zenn のアイコンを追加し、遷移処理を追加
• Footer のコピーライトの表記を変更
• ブログ記事を作成
• Vercel 環境にデプロイ
• ブログタイトルに半角スペースを含めると改行してしまう問題が発生したため修正
• ブログ投稿時間がUSTになってしまう問題が発生したため修正
• ブログ記事内のリンクが改行しない問題が発生したため修正
• READMEの更新

出来上がったブログサイト

https://eunsol-blog.vercel.app/

Astroを使ってみた感想

• ブログの雛形を作成するところまでは、AstoroのThemeを使用することで簡単にブログを作成することができましたが、そこから調整を加える段階では、知らない知識を都度調べる必要があり、想定していたよりも大変でした。

頑張ったところ

• 「Social Links」機能について、Theme側ではデフォルトで提供されていなかったZennのアイコンとリンクを追加し、自身のZennページへ遷移する導線を作成しました。

大変だったところ

• ブログ記事の投稿時間がUSTになってしまう問題が発生しました。これはローカル開発環境では再現せず、Vercel環境にデプロイした後に発生しました。問題の切り分けが難しく、Vercelのタイムゾーンを制御する方法を調べたり、AstroのReactコンポーネントにconsole.logを差し込み、該当の値をデバッグし、問題を解消しました。
• Themeが生成したTailWindCSSで作られたマークアップに修正を加えるのが難しかったです。

今後ブログに追加してみたい機能

• ブログのタイトルを「EunsolBlog」から「Eunsol Blog」に変更する
• 「Social Links」のアイコン押下時にリンク先が新しいタブで開くようにする
• コメント機能を追加する

参考情報

https://blog.junpeko.com/consider-vercel-timezone

https://qiita.com/suin/items/296740d22624b530f93a