之前老麦のブログの記事を読んで、NextJS から Astro に変えると、静的なブログを構築するのに非常に適していて、使い勝手も複雑ではないと書いてありました。それを読んで、また新しい方向性を見つけました。現在、私のブログは Wordpress を使っていますが、他にも Typecho や Xlog などがあります。静的なブログでは以前にも Hexo や Hugo を試したことがあります（ただし、それはかなり昔のことで、構築や使用方法などはほとんど忘れてしまいました）。もちろん、Ghost や Halo などのバックエンドを持つものも以前使ったことがあります。
Astro がこんなに面白いなら、試してみる価値があります。公式のチュートリアルには日本語のものもあり、手順に従って進めるだけで大丈夫です。ただし、テーマを選ぶ際に注意が必要です。テーマの変更は他のものよりも少し面倒だと言われていますが（他のものほど簡単ではありませんが、私たちの情熱に影響を与えることはありません）、テーマを選んだ後は基本的にデプロイがほぼ完了します。細かい変更などは公式のチュートリアルに従って行えば非常に簡単です。重要な情報を設定したら、自分の Github にアップロードして、Vercel でデプロイすることができます（もちろん、ローカルで確認することもできます）。
Astro で一番困惑したのは、コメントをどう追加するかです。長い間試行錯誤しましたが、解決することができませんでした。最終的には老麦の指導のもとで解決しました。再びお礼を申し上げます。彼は自分の昼休みを犠牲にして教程を書いてくれました。感謝感謝です！それでは、以下に Astro にコメントを追加するプロセスを記録していきます。
- コンポーネントディレクトリの
src/components/の下に新しいファイルを作成します。例えば、Comments.astroというファイルを作成します。ファイル名を覚えておいてください。後で参照します。
- Giscus コメントを追加する場合は、まずGiscus 公式に従って関連するものをデプロイし、対応する設定コードをコピーし、次に作成した
Comments.astroコンポーネントに以下のコードを追加します：
<section class="giscus mx-auto mt-10 w-full"></section>
<script
src="https://giscus.app/client.js"
data-repo="username/repo"
data-repo-id="repo-id"
data-category="Blog Posts Comments"
data-category-id="DIC_kwDOB3LMn84CaXpn"
data-mapping="url"
data-strict="0"
data-reactions-enabled="1"
data-emit-metadata="0"
data-input-position="bottom"
data-theme="preferred_color_scheme"
data-lang="en"
data-loading="lazy"
crossorigin="anonymous"
async
</script>
これは単なるサンプルコードです。実際には Giscus の指示に従ってください。これは参考程度です。
2. Twikoo コメントを追加する場合は、Twikoo のチュートリアルに従って関連するものをデプロイし、以下のコードを具体的に変更します：
<div id="tcomment"></div>
<script>
document.addEventListener('astro:page-load', () => {
function loadTwikoo() {
const commentsContainer = document.getElementById('tcomment');
if (commentsContainer) {
const script = document.createElement('script');
script.src = 'https://cdn.staticfile.org/twikoo/1.6.32/twikoo.all.min.js';
script.async = true;
script.onload = () => {
const initScript = document.createElement('script');
initScript.innerHTML = `
twikoo.init({
envId: 'YourEnvId',
el: '#tcomment',
});
`;
document.body.appendChild(initScript);
};
document.body.appendChild(script);
}
}
loadTwikoo();
});
</script>
- Artalk コメントを追加する場合は、Twikoo を参考にして以下のコードを一部変更します。
- Waline コメントを追加する場合は、以下のコードを参照してください。
<link rel="stylesheet" href="https://unpkg.com/@waline/client@v3/dist/waline.css"/>
<div id="waline"></div>
<script type="module">
import { init } from 'https://unpkg.com/@waline/client@v3/dist/waline.js';
init({
el: '#waline',
serverURL: 'https://waline.vercel.app',
});
</script>
これらのコメントは一時的なものです。Giscus と Waline は自分で試してみたもので、他の 2 つは老麦の指導のもとで実現しました。Comments.astroコンポーネントを定義したら、自分の好きなコメントを追加することができます。src/layouts/PostDetails.astroに以下のコードを追加するだけです：
//その他のコード……
<Content />
</article>
<Comments /> //前に定義したコンポーネントを参照するためにこの行を追加します
</main>
<Footer />
</Layout>
//その他のコード……
これで Astro のコメントが完了しました。試行錯誤による喜びは、時に言葉では言い表せません。Astro をメインで使うかどうかはまだわかりません（楽しみが過ぎると試行錯誤しなくなるかもしれません）