Astro
このブログのデザインを大幅に変更しました。
変更した経緯としては、2つあります。 以前のブログのデザインは、Astroのfuwariテーマを参考にして作成していたのですが、fuwariベースの派生テーマが公式の方でも増えてきており、ブログのデザインが他の人と被るのが嫌だなとなり思い切ってデザインを大幅に変更してみました。
また、以前は記事にカテゴリーを設定していたのですが、この雑記ブログにはタグのみの方が記事の分類として迷いがなくなって書きやすくなると感じたので、カテゴリーを廃止して一覧性をよくしようと思いました。
この記事では、デザインを変更したAstro製のこのブログについて、サムネイルに記事の一部を表示する方法を紹介します。
このブログのデザインを大幅に変更したいのと、記事の一覧を更新順で表示したいと思ってたのですが、更新日の取得方法に悩んでいました。
Astro の公式のチュートリアルでは更新日は記事のフロントマターに設定する方法が紹介されていましたが、毎回手動で設定するのは面倒です。
そこで自動で取得する方法を考えた結果、Git のコミット日時を取得してその日付を更新日として表示する方法を実装できたので紹介します。
それでは、Git のコミット日時を取得する方法について説明します。
Git 関連の情報はgit logコマンドで取得できます。
次のようにコマンドを打ってみましょう。
# 指定したファイルの最新のコミット日時を取得する
## -1 : 最新の1件のみ取得
## %ai : 日付
## filePath : 調べたいファイル
git log -1 --format=%ai -- filePath
オプションについてはコメントの通りになります。
技術ブログを複数運営しているのですが、CSS などのプロパティで一部のブラウザのみでしか対応していないものがあります。その際に、ブラウザの対応状況を表示するコンポーネントを入れておくと、ブラウザの対応状況が分かるので、ブログを見ている人にも分かりやすいと思います。
↓ 運営している技術ブログ
https://hypb.dev
https://feylo.dev
今回紹介する Baseline Status Web コンポーネントは、ブラウザの対応状況を表示するための Web コンポーネントです。このコンポーネントをブログ内で使用することで、ブラウザの対応状況を簡単に表示することができます。この Web コンポーネントを Astro 製のブログと Nuxt 製のブログで使う方法を紹介します。
使用イメージは ↓ のような感じになります。
<BaseLineStatus featureId="anchor-positioning" />
npm でbaseline-statusをインストールします。
npm install baseline-status
使用する際はそのまま import して表示する featureId を指定するだけで上記のような感じで表示されます。
import "baseline-status";
<baseline-status featureId="anchor-positioning" />
Web クリエイターボックスみたいに読んだ本リストを自分のプラットフォームで管理したいと思い、このブログ内に読んだ本リストを追加しました。サイドバーにリンクがあるので覗いてみてください！
読んだ本の管理に microCMS を使ったので、Astro 製のブログで本の管理を microCMS で行う方法をまとめます。まだ、データ数が少ないのでページネーションは実装してないのですが、実装したら追記します。
microCMS のアカウントを作成して、コンテンツ(API)を作成し API 設定をしましょう。下記のように設定します。
読んだ本リスト API のエンドポイントは book にしました。
本のリストなので、自分は下記のように設定しました。
| フィールド ID | 表示名 | 種類 |
|---|---|---|
| title | タイトル | テキストフィールド |
| review | レビュー | リッチエディタ |
| url | Amazon リンク | テキストフィールド |
| cover | 表紙画像 | テキストフィールド |
| author | 著者 | テキストフィールド |
| publishedDate | 発売日 | 日時 |
| category | カテゴリー | コンテンツ参照 |
| postlink | 紹介記事 | テキストフィールド |
このブログと技術ブログは、Astro の Content Collection を使ってマークダウンでブログを書いていて、記事は GitHub で管理してます。
Astro の Image コンポーネントを使うために、ブログ記事の画像も src/assets/images/配下に配置していました。しかし、ローカルで画像を管理したくないなと思ったので Cloudinary を導入してみました。
Astro での Cloudinary の導入方法について、この記事では紹介します。 Cloudinary の詳しいオプションなどは解説しないのと、Cloudinary のアカウントが既にあるのを前提に説明します。
まだの方は下記 URL からアカウントを作成してください。
https://cloudinary.com/
Astro で使える Cloudinary のコンポーネントが用意されてます。下記コマンドで Astro Cloudinary をインストールしましょう。
npm install astro-cloudinary
インストールできたら、プロジェクトのルートに.envファイルを作成して、Cloudinary のアカウント情報を記述します。
PUBLIC_CLOUDINARY_CLOUD_NAME="<Your Cloud Name>"
Astro で作ったサイトを GitHub Pages にデプロイする方法について紹介します。 GitHub Pages を使うことで簡単に作ったサイトを公開することができます。
基本的には公式サイトのドキュメント通りにやればできるでしょう。 ここではカスタムドメインを使わないリポジトリ名が後ろにつくデプロイ方法を紹介します。
https://docs.astro.build/ja/guides/deploy/github/
astro.config.mjs にsiteとbaseオプションの設定を追加します。
import { defineConfig } from "astro/config";
export default defineConfig({
site: "https://<username>.github.io",
base: "<your-repo-name>",
});
ここでsiteの username にはご自身の GitHub のユーザー名を、baseの your-repo-name にはデプロイするリポジトリ名入れてください。
雑に書ける場所が欲しくなったので、Astro で 2 個目の個人ブログを作成しました。 普段は、👇 の技術ブログで主にフロントエンドに関しての記事を書いています。
https://hypb.dev
上記のブログでは、技術系しか書けない感じになっていたので、こちらではもっと雑にインターネット上に残していきたいと思います。
Aboutページに書いてある通り、音楽・映画・小説などが好きなので、それらに関する記事を書いていきたいです。
デザインに関しては、Astro テーマのFuwariを参考にして作成しました。 ほぼ丸パクリですが、Fuwari テーマを見て雑記ブログを作りたいと思ったのでこれで良しとします。
フォントは日本語はKiwi Maru、英語はIBM Plex Monoを使っています。フォントのおかげで可愛い感じが出て良かったです ✨
Fuwari テーマの方は、Svelte や swup を使ってたりでカスタマイズするのが難しそうな感じですが、自分の作成した本ブログはコードも分かりやすく作成したので、サクサク作成することができました！
kamenono / かめのの
音楽・読書・数学・プログラミングが好き。
SNS 関係は下記です。フォローはお気軽にどうぞ。
私を構成する 42 枚は下記です。
趣味が合う人がいたら仲良くしてください。
