サイトをAstroに変更しました

もともとWordPressでSSGを行い、静的サイトを運用していたのですが、WordPressでSSGするぐらいなら、もっとシンプルな構成で良いと考えました。

Astroを選んだ理由は、

ドキュメントがしっかり作成されていること
構成がシンプルそうで、PHPばかりだった自分でも理解しやすそうなこと
最近よく目にすること

などです。

Astroを通して、フロントエンドの近況を少しでも知られればいいなと考えています。

Astroとは#

Astroは、高速なWebサイトを構築することにフォーカスしたWebフレームワークです。Astroは、Webアプリケーションを作成するためのフレームワークというより、コンテンツが豊富なウェブサイトを構築するためのフレームワークであることが、謳われています。

例えば、ブログ、ドキュメントサイト、ポートフォリオサイト、出版サイトなどです。

ブログだけでなく、LPやビジネス向けのマーケティングサイトなどのテンプレートも用意されています。まだまだ、数は少ないですが、今後増えていくことが期待されます。

インストール方法#

Node.jsを事前にインストールしてください、

その後、以下のコマンドを入力し、コマンドの質問に答えていくだけでインストールが完了します。

# インストール
npm create astro@latest

# 実行(http://localhost:3000にアクセス)
npm run dev

既存ブログからのリダイレクト#

最初に述べたとおり、もともとWordPressを静的化して作成していましたので、そこで作成していた記事も新ブログ(Astro)の方へ移設しました。

対応方法としては、以下になります。

Astroのブログに各ページを追加
リダイレクトの設定ファイルを追加

2については、今回Cloudflare Pagesを利用していたので、_redirectsファイルを/public以下に作成し、下記のような設定を行いました。

/blog/144 /blog/2022/06/20/donate_to_php_foundation 301
/blog/144/ /blog/2022/06/20/donate_to_php_foundation 301

実際に私のサイトで、/blog/144にアクセスすると、リダイレクトされるかと思います。

_redirectsの記述内容は、以下のようなものになります。
ステータスコードは、設定しない場合デフォルトで302が設定されます。

[リダイレクト元] [リダイレクト先] [ステータスコード?]

さらに詳しい情報は、Cloudflare ドキュメント: リダイレクトを確認ください。

コードブロックにファイル名を表示する(未対応)#

Astroの普通のマークダウンの機能では実現できていない様子なのですが、Astroのドキュメントではファイル名が表示されています。

中の処理を追ってみたところ、

astro.config.ts内 astroCodeSnippets()
integrations/astro-code-snippets.tsでmdからhtmlに変換する際の処理に差し込んでいる様子
/src/components/CodeSnippet/CodeSnippet.astroで具体的な処理内容が記述されている

追っかけるだけで精一杯でまだ、自分のサイトに実装できていません。時間をかけて実装できればと思っています。(フロントエンド何やってるかわからぬ)

toc生成対応#

以下はプラグインで対応する方法。
もっと自分でカスタマイズするのであれば、AstroドキュメントのGithubが参考になる。

npm i rehype-toc rehype-autolink-headings rehype-slug

export default defineConfig({
  (略...),
  markdown: {
    rehypePlugins: [
        'rehype-slug',
        ['rehype-autolink-headings', { behavior: 'append' }],
        ['rehype-toc', { headings: ['h1', 'h2', 'h3'] }], // 目次に表示したいheaderタグを指定
    ]
  },
});

おわりに#

まだまだやれていないことが、多くありますが、ひとまず見てもらえるレベルの作りにはなりました。

今後も時を見て改築を行っていきます。