個人WEBをTailwind CSSで書き直して約半年…
また、書き直してしまいました…

今回は今ホットなAstroで個人WEBをリメイクしました。

テンプレートはAstro公式サイトでビビッと来たFuwariを使用しました。
デザインがとても良く、かゆいところにも手が届いており無料で利用できることに驚いています。

A clean and minimalist blog theme for Astro.

Astroとは#

Astroは、 静的サイトジェネレーター（SSG）とサーバーレンダリング（SSR） の両方をサポートする、次世代のフロントエンドフレームワークです。軽量で高速なWebサイトを構築することを目的とし、 コンテンツ中心のWebサイト（ブログ、ドキュメント、マーケティングサイトなど） に最適です。

表示も早いですが、体感ビルドも早い気がします。

また、Astroは Markdown（.md）とMDX（.mdx） をネイティブサポートしており、ブログやドキュメントサイトの構築が容易です。

Astro

Astro builds fast content sites, powerful web applications, dynamic server APIs, and everything in-between.

astro.build

Fuwariとは#

FuwariはAstroのThemesで公開されているブログテンプレートの1つです。
Fuwariのリポジトリで右上のUse this templateをクリックすることで自分のリポジトリに複製することが出来ます。

AstroとTailwind CSSで設計
Swupで設計されたスムーズなアニメーションとページ遷移
ライト / ダークモード
カスタマイズ可能なテーマカラーとバナー
レスポンシブデザイン
Pagefindによる検索

ユーザ側でテーマカラーを自由に変更できる機能がユニークで面白いですね。

saicaca

fuwari

Waiting for api.github.com...

00K

Waiting...

サイトのカスタマイズ#

サイトの設定を編集する際はsrc/config.tsを直接変更します。
サイトタイトルやプロフィール画像、テーマカラーの変更などが出来ます。

この他に本WEBサイトでは、以下のカスタマイズを入れています。

リンクカード#

FuwariではリンクカードはGithubのみの対応のため、その他のサイトもリンクカードとして表示させるカスタマイズを入れました。
AstroではRemark Pluginが使用できるため、今回は定番のremark-link-cardを使用しました。

以下で記事にしています。

Fuwariでremark-link-cardを使用してリンクカードを実装する - Yuma Shintani

Fuwariでremark-link-cardを使用してリンクカードを実装してみました

www.y-shin.net

Fuwariでremark-link-cardを使用してリンクカードを実装する - Yuma Shintani

ブログページにコメント機能をつける#

コメント機能はこれまでと同様にgiscusを使用しました。

以下の手順でgiscusを使用するための準備をする
giscusの設定
src/components/Comments.astroを作成する

1
<section>
2
  <script src="https://giscus.app/client.js"
3
      is:inline
4
      data-repo={import.meta.env.NEXT_PUBLIC_GISCUS_REPO}
5
      data-repo-id={import.meta.env.NEXT_PUBLIC_GISCUS_REPO_ID}
6
      data-category="Announcements"
7
      data-category-id={import.meta.env.NEXT_PUBLIC_GISCUS_CATEGORY_ID}
8
      data-mapping="pathname"
9
      data-strict="0"
10
      data-reactions-enabled="1"
11
      data-emit-metadata="0"
12
      data-input-position="bottom"
13
      data-lang="ja"
14
      crossorigin="anonymous"
15
      data-theme="preferred_color_scheme"
16
      async>
17
  </script>
18
</section>
19

20
<script is:inline>
21
  function updateGiscusTheme() {
22
    const theme = document.documentElement.classList.contains('dark') ? 'dark' : 'light'
23
    const iframe = document.querySelector('iframe.giscus-frame')
24
    if (!iframe) return
25
    iframe.contentWindow.postMessage({ giscus: { setConfig: { theme } } }, 'https://giscus.app')
26
  }
27

28
  const observer = new MutationObserver(updateGiscusTheme)
29
  observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
30

31
  window.onload = () => {
32
    updateGiscusTheme()
33
  }
34
</script>

.env.localを作成する

1
NEXT_PUBLIC_GISCUS_REPO={repository_name}
2
NEXT_PUBLIC_GISCUS_REPO_ID={repository_id}
3
NEXT_PUBLIC_GISCUS_CATEGORY_ID={category_id}

src/pages/posts/[...slug].astroに作成したCommentsコンポーネントを追加する

1
import Comments from '../../components/Comments.astro';
2
{/* 中略 */}
3
<div class="flex flex-col md:flex-row justify-between mb-4 gap-4 overflow-hidden w-full">
4
    <a href={entry.data.nextSlug ? getPostUrlBySlug(entry.data.nextSlug) : "#"}
5
        class:list={["w-full font-bold overflow-hidden active:scale-95", {"pointer-events-none": !entry.data.nextSlug}]}>
6
        {entry.data.nextSlug && <div class="btn-card rounded-2xl w-full h-[3.75rem] max-w-full px-4 flex items-center !justify-start gap-4" >
7
            <Icon name="material-symbols:chevron-left-rounded" class="text-[2rem] text-[var(--primary)]" />
8
            <div class="overflow-hidden transition overflow-ellipsis whitespace-nowrap max-w-[calc(100%_-_3rem)] text-black/75 dark:text-white/75">
9
                {entry.data.nextTitle}
10
            </div>
11
        </div>}
12
    </a>
13

14
    <a href={entry.data.prevSlug ? getPostUrlBySlug(entry.data.prevSlug) : "#"}
15
        class:list={["w-full font-bold overflow-hidden active:scale-95", {"pointer-events-none": !entry.data.prevSlug}]}>
16
        {entry.data.prevSlug && <div class="btn-card rounded-2xl w-full h-[3.75rem] max-w-full px-4 flex items-center !justify-end gap-4">
17
            <div class="overflow-hidden transition overflow-ellipsis whitespace-nowrap max-w-[calc(100%_-_3rem)] text-black/75 dark:text-white/75">
18
                {entry.data.prevTitle}
19
            </div>
20
            <Icon name="material-symbols:chevron-right-rounded" class="text-[2rem] text-[var(--primary)]" />
21
        </div>}
22
    </a>
23
</div>
24

25
<div class="card-base z-10 px-3 md:px-6 pt-6 pb-4 relative w-full">
26
    <Comments />
27
</div>