Astroでブログ作った


ブログ作りました

丸の内ささみスティック。DE-TEIUです。

元々こっちに個人サイトを持ってたんですが、何やらAstroでブログを作るのが面白いらしいとの噂を聞いたので試しに作ってみました。

Astroの話

Astroとは

Astroとは、高速なWebサイトを開発するためのJavaScriptフレームワークです。主に静的サイトジェネレータとして使われることが多いようですが、やろうと思えばSSRもできます。また、Astro特有の記法も存在しつつ、SvelteやReactやVueなど、別のJavaScriptフレームワークを導入してそっちの書き方に寄せることができます。

ということで、このブログは、とりあえずAstro標準の書き方で(というか環境構築時に生成されたブログ用のコンポーネントをベースにして)作成しましたが、後日Svelteで改良する予定です。

環境構築

公式ドキュメント通りに従ってコマンドを叩くだけです。

$ npm create astro@latest

とりあえずこれだけでスターターキットが出てきます。以上。 「How would you like to start your new project?」の質問が出てきた際、“Use blog template” を選ぶといきなりそれっぽいブログが出来上がります。最高。

マークダウンで記事を書ける機能も標準搭載。すごい。 作業イメージ この記事もこんな感じでザーッと書いてます。

98.cssの話

98.cssという 最高のCSSフレームワークがあります。これを導入するとあなたのサイトが一気にWindows 98っぽいデザインになります。良いですね。このサイトにも入れてます。

ちなみにXP.cssというものもあります。こちらもおすすめです。

Cloudflare Pagesの話

Cloudflareのサービスの中に Cloudflare Pagesというものがあります。これを使うと、自分のGitHubアカウントに紐付くリポジトリと連携して、Webサイトの自動ビルドとデプロイができます。無料プランと有料プランがありますが、無料プランでも実質無制限と言っていいほど自由に使えます。便利。 あと無料プランで使う場合、決済情報の登録も不要でした。

Cloudflare

私は普段Vercelを使っているのですが、今回は何となくCloudflare Pagesを使用。どっちも似たような使い方できるので違和感なく利用できました。

このサイトのドメイン

数年前、なんの気なしに何か面白いドメインを取れないか調べていたら、hierophant.greenというドメインが空いていることに気づき衝動的に買いました。それからずっとこのドメインを無駄ァに寝かせていたので、このブログのリリースを機にようやく活用できて良かったです。ちなみにこのドメイン名の元ネタは某バトル漫画に登場するスタンド名です。

Cloudflare Pagesにドメイン設定

ということで、このドメインをCloudflare Pagesにデプロイしたサイトに設定します。

Xserverドメインで取得した独自ドメインをCloudflare Pagesのカスタムドメインに設定する | kshida’s blog を参考にさせていただきました。

ということでCloudflare側のコンソールでドメインの設定を進める。すると設定したいドメインにネームサーバーを指定しろとの指示が。

このドメイン自体はSquarespaceで管理してるので、そっちのコンソールからネームサーバーを指定。

ネームサーバー

15分ぐらい待ったら浸透適用されました。良かった。

ok

あとはCloudflare Pagesの設定でドメインを指定。数分待って完了。簡単。