みやざダニエルズのIT備忘録
← Blogs 一覧に戻る

VuePressからAstroにブログを変えてみた

Astroでブログを作る

VuePressで雑多な内容(育児や本のメモや、日本の世界遺産にいく計画など..)のブログを書いていたのですが、この度Astroにブログを乗り換えてみました。

ちなみにこんな見た目です。 miyazadaniels.com

VuePressもAstroも静的サイトジェネレータでマークダウン形式で記事を書くことができます。

なぜ乗り換えたか

乗り換えた理由は以下の通りです。

  • VuePressの見た目が簡素だった(ので、あまり記事を書く気にならなかった.. 自分が選んだテンプレートが簡素(ミニマム)だっただけです。)
  • 新しいものを使ってみたかった.
  • 既存のブログの内容が雑多すぎて、まじめに技術メモを書こうと思った

Astroの良いところ

レスポンスが早いです。ビルド時にJavaScriptを使わないようにHTMLを生成することでレスポンスの高速化を図っているそうです。

いろいろなテンプレートがあリます。テンプレート(テーマ)を見ていて、いいな〜と思うものが何個かあるはずです。

セットアップでつまづいた点

Node.jsのバージョンがv12だとnpm run devでエラーになりました。v18だとエラーなくlocalhostでウェブサイトを確認することができました。Astroのインストールの前提条件を見ると、Node.jsのバージョンがちゃんと書いてありました。

公式サイトのgetting-startedや各テーマのGitHubのREADME.mdを見たりしてセットアップするようにしましょう。

関連記事

AstroにGoogleアナリティクス4を導入する

Googleアナリティクス4の導入(再)

動かなくなったので再度AstroにGoogleアナリティクス4を入れてみました。

日向美術館とVuetify

【Vuetify】v-cardの中にv-cardを入れたときに意図したmarginにならなかったのでdivでレイアウト調整した話

v-cardの中にv-cardを入れたらmarginがはみ出てる?暫定的にdivで調整しました..

日向美術館とmicroCMS

【microCMS】日向美術館で使用しているAPIスキーマ設定方法

日向美術館で作成したmicroCMSのAPIスキーマの設定方法と設定した内容をご紹介します。

microCMSとVue.jsで子供の作品を展示する

microCMSとVue.jsで子供の作品を展示する

子供の作品を箱にしまい込むだけにせずにウェブに載せてみました。Headless CMSであるmicroCMSを使ってみたら使いやすかったです。

Webで縦書きコンテンツ〜Safariには気を付けろ!〜に助けられた話

Webで縦書きコンテンツ〜Safariには気を付けろ!〜に助けられた話

縦書き文字をflexboxを使って並べたときのレイアウト崩れが直りました。

OpenBD coverage

OpenBDに登録されているISBNの数の調査をしてみた

本の情報をオープンにしてくれているOpenBDのAPIを使ってISBNの登録数を見てみました

Lighthouseのユーザー補助を100点にする

Lighthouseのユーザー補助を100点にしたい

Lighthouseのユーザー補助を100点にするためにコントラストの警告を解消しました

世界の片隅で愛を叫ぶLINE Bot

世界の片隅で愛を叫ぶLINE Bot

AWS Lambda、API Gatewayを使ってLINE Botで愛を伝えてみました

Google Apps Scriptで勤怠管理システム風なものを作る

Google Apps Scriptで勤怠管理システム風なものを作る

Google Apps Scriptで勤怠管理システム風なものを作ってみました。

canvaでアイキャッチ画像を作る

canvaでアイキャッチ画像を作る

canvaを使ってアイキャッチ画像を作ることができます。

AstroにGoogleアナリティクス4を導入する

Googleアナリティクス4の導入

AstroにGoogleアナリティクス4を入れてみました。

miyazadanielsの似顔絵

似顔絵メーカーさんで似顔絵を作ってみた

似顔絵メーカーさんで似顔絵を作ってみました。簡単な操作でできるのでおすすめ。