はじめに

個人の備忘録としてブログをAstroで作成した。
このブログではフロントエンド技術やWebに関して書いていきたい。

以下はこのブログのGitのリポジトリになります。
未経験からWeb制作会社に転職して半年くらいでこのブログを作成したのだが、ブログの自作は非常に勉強になった。

GitHub - iwasaki-source/hypb-blog

Contribute to iwasaki-source/hypb-blog development by creating an account on GitHub.

github.com

デザインについて

最近のモダンな技術（NextjsやAstro）で作られた個人ブログは洗練されていて格好いいのだが、どれも似たようなレイアウトに感じることもありポップで被らないようにと意識してデザインを作成した。

結果、自作したことで愛着を持つことができたのでこれからコンテンツを増やしていきたい。

機能一覧と実装まとめ

以下はこのブログの機能と実装のまとめになる。

検索機能

トップのみになるがブログ記事のテキスト検索ができるようにした🔎
検索ライブラリーとしてはPagefindを使った。

PagefindではCSS（@pagefind/default-ui/css/ui.css）とJS（@pagefind/default-ui.js）を読み込むだけですぐに検索機能が使用できるようになった。

data-pagefind-bodyを付けることで、その要素以下のコンテツを検索対象にすることができるのでこのサイトではブログ記事の本文以下を検索対象として指定した。

目次機能

画面幅960px以上で閲覧すると記事の左側に目次リンクが表示されるように実装した📔
こちらはTocBotというライブラリーを使用した。

以下⬇️は実装方法になります。

Astroのブログに目次機能をつける | нуль

Astroで作成したブログに目次機能を付けるやり方を紹介してます

hypb.dev

リンクカード

自作で実装しようと思ったが大変だったので、remark用のプラグインremark-link-cardを採用した。

remark-link-cardを使うと、Markdown内のリンクに対して自動でリンクカードに変換してくれます。
リンクカードにはサムネイル、タイトル、概要、favicon、リンク先のURLが表示されます。

Astroの場合には、astro.config.mjsに以下のように追加するだけで実装できます。

import { defineConfig } from 'astro/config';
import remarkLinkCard from 'remark-link-card';
 
// https://astro.build/config
export default defineConfig({
  // ...
  markdown: {
    remarkPlugins: [
      [
        remarkLinkCard, {
          cache: true,
          shortenUrl: true,
        }
      ],
    ]
  }
});

remark-link-cardはデフォルトでは、コンパイル時にリンク情報を取得します。そこでcacheをtrueにすることでリンク情報をキャッシュするようにしました。キャッシュは/public/remark-link-card/に保存されます。

また、shortenUrlをtrueにすることでリンク先のURLを短縮して表示するようにしています。

remark-link-cardではCSSは提供されないので、こちらは自分で実装する必要があります。
👇のREADMEを参考にして実装しました。

GitHub - gladevise/remark-link-card

Contribute to gladevise/remark-link-card development by creating an account on GitHub.

github.com

シンタックスハイライト

Astroでは標準でシンタックスハイライトのShikiを使用しているが、ファイル名や行の強調表現などのやり方が分からなかったのでrehype-pretty-codeを採用した🔮

以下⬇️は実装方法になります。

rehype-pretty-codeを使ったコードハイライトの実装方法 | нуль

Astroでのrehype-pretty-codeを使ったシンタックスハイライトをやり方

hypb.dev

独自記法

当初はZennやQiitaみたいなnote記法で書きたかったが、実装で断念してMDXのコンポーネントで対応した。
使い方としてはMDXファイルでimportして使う事ができる。

---
title: Astroで個人ブログを作成しました
slug: first-post
pubDate: '2024-04-29'
image: ../../assets/images/python.jpg
category: ブログ
tags:
  - Astro
  - Markdown
description: Astroで個人ブログを作成しました。この記事ではこのブログの実装などをまとめています
---
import Note from '../../components/markdown/note.astro';
import Tip from '../../components/markdown/tip.astro';
import Import from '../../components/markdown/import.astro';
import Warning from '../../components/markdown/warning.astro';
import Caution from '../../components/markdown/caution.astro';
 
<Note text="テキストが入りますテキストが入ります" />
 
<Tip text="テキストが入りますテキストが入ります" />
 
<Import text="テキストが入りますテキストが入ります" />
 
<Warning text="テキストが入りますテキストが入ります" />
 
<Caution text="テキストが入りますテキストが入ります" />

👇は確認用になります。

実装予定の機能

以下は今後実装したい機能です。

• 数式（remark-math）
• ページネーション
• サイトマップ
• Twitter,Youtubeの埋め込み