みやざダニエルズのIT備忘録

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

By miyazaDaniels on Oct 12, 2022
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を見たりしてセットアップするようにしましょう。

Recent Posts
日向美術館とVuetify

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

Nov 29, 2022
v-cardの中にv-cardを入れたらmarginがはみ出てる?暫定的にdivで調整しました..
日向美術館とmicroCMS

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

Nov 27, 2022
日向美術館で作成したmicroCMSのAPIスキーマの設定方法と設定した内容をご紹介します。
microCMSとVue.jsで子供の作品を展示する

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

Nov 25, 2022
子供の作品を箱にしまい込むだけにせずにウェブに載せてみました。Headless CMSであるmicroCMSを使ってみたら使いやすかったです。
Webで縦書きコンテンツ〜Safariには気を付けろ!〜に助けられた話

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

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

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

Oct 31, 2022
本の情報をオープンにしてくれているOpenBDのAPIを使ってISBNの登録数を見てみました
Lighthouseのユーザー補助を100点にする

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

Oct 25, 2022
Lighthouseのユーザー補助を100点にするためにコントラストの警告を解消しました
世界の片隅で愛を叫ぶLINE Bot

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

Oct 15, 2022
AWS Lambda、API Gatewayを使ってLINE Botで愛を伝えてみました
Google Apps Scriptで勤怠管理システム風なものを作る

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

Oct 14, 2022
Google Apps Scriptで勤怠管理システム風なものを作ってみました。
AstroにGoogleアナリティクス4を導入する

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

Oct 13, 2022
AstroにGoogleアナリティクス4を入れてみました。
© Copyright 2022 by みやざダニエルズのIT備忘録. Built with ♥ by CreativeDesignsGuru.