Astroでブログを作成した

はじめに

この技術ブログについて、思ったことや使用技術を書きます。自分のブログを持ってみたかったのです。

GitHub - pullriku/pullriku-blog-astro: 自分用のブログ

自分用のブログ. Contribute to pullriku/pullriku-blog-astro development by creating an account on GitHub.

GitHub - pullriku/pullriku-blog-astro: 自分用のブログ

良い点

このブログを作って良いと感じたことを紹介します。
まず、Web技術の学習に役立ちます。自分専用のブログであるため、最新のフレームワークが登場しても気軽に試すことができ、使い捨てではなくメンテナンスしやすい設計を意識して作成できる点が魅力です。

また、記事を書くことで考えを整理でき、ポートフォリオとして自分の成果をまとめることができます。Google検索の結果に情報を足すことができます。

さらに、一から作成したため、カスタマイズや機能追加が非常に容易です。細部に至るまで自由に調整できるため、柔軟な拡張が可能です。
例えば、最近では選択式クイズコンポーネントを実装しました。

Q. Astro バージョン5で追加されたContent Layer APIでは、どのようなことが可能になったでしょう？

使用技術・サービス

フレームワーク: Astro

Astroを用いてフロントエンドを一から構築しました。Astroでは、クライアントサイドのJavaScriptがデフォルトで取り除かれるため、高速なページを実現できます。JSX風の独自記法により、Reactなど他のUIライブラリと組み合わせることも可能です。また、Markdown記法で記事を書くと自動的にHTMLに変換されます。
チュートリアルも日本語化されており、非常に丁寧に解説されています。

初めてのAstroブログ

プロジェクトベースのチュートリアルでAstroの基本を学びましょう。始めるために必要なすべての前提知識をお届けします！

docs.astro.build

これのチュートリアルで入門しました。

スタイル: Tailwind CSS、Tailwind CSS Typography、remark-link-card

コンポーネント指向の開発手法により、Tailwind CSSとの相性が良いです。一からスタイルを書くのは大変なので、Tailwind CSS Typographyを使って、記事のスタイルを整えています。hタグを大きくしたり、codeタグをハイライトしたりして、いい感じに綺麗にしてくれます。

記事内のリンクをカード化するために、remark-link-cardを使っています。リンク先の情報を取得して、カードにしてくれますが、スタイルは自分で当てる必要があります。

ホスティング: Cloudflare Pages

ホスティングはCloudflare Pagesを利用しています。GitHubリポジトリと連携して、GitHub Actionsでビルドとデプロイの自動化を実現しています。無料で利用できます。

ドメインもCloudflareで取りました。

ドメイン名の原価販売

を行っているそうで、追加料金がないため、安心感があります。

低価格ドメイン名 | 低価格ドメイン名レジストラ

Cloudflareは、追加手数料なしで低価格ドメイン名を提供しています。手頃な費用でドメイン名を登録したい方は、Cloudflare Registrarが最良の選択肢である理由をご覧ください。

www.cloudflare.com

自動化: `just`、GitHub Actions

記事を書く際には、記事のMarkdownファイルの作成や、画像格納用ファイルの作成が必要です。justというコマンドランナーを使って、コマンド一発で記事を作成できるようにしています。

new-article slug:
    cp template.mdx src/content/posts/{{slug}}.mdx
    mkdir -p src/assets/images/posts/{{slug}}

Cloudflare PagesがGitHub Actionsをサポートしており、ビルド・デプロイを自動化しています。記事を書いたら、GitHubにプッシュするだけで、自動的にビルド・デプロイされます。

WranglerというCLIを使うみたいです。

developers.cloudflare.com

- name: Deploy to Cloudflare Pages
    uses: cloudflare/wrangler-action@v3
    with:
        accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
        apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
        gitHubToken: ${{ secrets.GITHUB_TOKEN }}
        packageManager: yarn
        command: "pages deploy ./dist --project-name=pullriku-blog-astro"

執筆の流れ

just new-article idで記事idのファイルを作成
yarn devコマンドでローカルサーバーを起動
src/content/posts/id.mdxに記事を記述
MDX形式で記述することで、HTMLのdetailsや自分で作ったコンポーネントを利用できます。
画像を挿入する際はsrc以下の適当な場所に保存して保存し、![alt](/path/to/image)のように参照します。
MDXについてのドキュメントが参考になります。
コミットしてプッシュ

おわりに

Astroの導入を検討されている方の参考になれば幸いです。