何度目かわからぬブログ構築

はじめに

　CMSであるWordPress、静的サイトジェネレーターなどでいままでブログを作っては消しを繰り返して来たが、雑記ブログとして新しく本ブログを構築することとする。

要件

本ブログを構築するにあたり要件は以下の通りである。

• 静的サイトを書き出せること(サーバは借りない)
  私のアウトプットごときにサーバ費用をかけるなど 正気の Saturday night
• Markdownで記事が管理できること(ファイルで管理しておけば後で助かるはず)

CIでの自動ビルドなどは不要で自分でデプロイすることとする。

使用フレームワーク

　上記の要件を踏まえて、今回は、流行りのAstroを用いる。

Astroは、ブログやマーケティング、eコマースなど、コンテンツ駆動のウェブサイトを作成するためのウェブフレームワークです。Astroは、新しいフロントエンドアーキテクチャを開拓し、他のフレームワークと比較してJavaScriptのオーバーヘッドと複雑さを低減することで知られています。高速でSEOに優れたウェブサイトが必要なら、Astroが最適です。
引用元: Astroを選ぶ理由

Astroに関する記事は他に多数存在するので構築方法などは割愛する。

CloudFlareの話

• コンピューティング Workers & Pages コンピューティング Workers & PagesでPagesタブを選択し、“直接アップロードを使用する”をチョイスして”始める”。プロジェクト名を設定する。この設定ページでアップロードは行わずブラウザの戻るボタンでリストのページまでもどっておく。※ コマンドで跡からアップロードする為。
• カスタムドメイン CloudFlareでのpagesのURLをCNAMEで独自のドメインに向けるようにDNSの設定をする。
  • _headersファイル
  重複したサイトになるのを防ぐため、_headersファイルを作成し下記の様にしておく。(これでいいかはわからぬ🤔)

  1
  https://xxxxxxx.pages.dev/*
  2
  X-Robots-Tag: noindex

コンテンツの追加

コンテンツはやっぱりMarkdownで書きたいですよね。画像の扱いとかいまひとつだし、構造化に適した形式ではないと思いますけど。Markdownで書いておけば、切り取ってMarpでスライド作成とか流用しやすそうですし。メリット・デメリットあるけどもうこれは好みの問題ですかね。しらんけど。

デプロイと運用

デプロイは自動にしてもよかったんですが、別に１人で書いているブログだし、ローカルでコマンド実行でよし！ということでwranglerコマンドで。

1
# wranglerインストール
2
npm install -g wrangler
3
# CloudFlareログイン
4
wrangler login
5
# ビルド
6
npm run dev
7
# アップロード(公開)
8
wrangler pages deploy ＜アップロード対象フォルダ＞ --project-name ＜Pagesのプロジェクト名＞

おおよそのイメージ

問い合わせページなど

問い合わせページはGoogleフォームの埋め込みでよくね？ということでGoogleフォームの埋め込みで対応。そもそも問い合わせなど来ぬ。

振り返りとまとめ

とりあえず。Astroを用いたブログを構築するところまでは問題なく完了。コンテンツを増やしていった場合の状況などはこれから注視することとする。