2025-01-07 20:22 JST(UTC+9)
#すべて #ブログ #技術
個人サイトあるあるだとは思いますが、ふとサイトをリニューアルしたいと思いました。
個人サイトを運用している方ならきっと理由もなくリニューアルしたくなると勝手に思っています。
雑多メモレベルですが、自分への備忘録と誰かの役に立てばという思いで記事を書きます。
目次
- リニューアル前の構成
- リニューアル後の構成
- リニューアルするにあたってやりたかったこと
- やったこと、参考にした記事、苦戦したこと
- リニューアル後の感想と今後の展望
リニューアル前の構成
もともとはレンタルサーバー上にWordPressを立てて運用していました。
WordPressは本サイト開設以前から別のサイト運用にも使っていたので採用しました。
- サーバーインフラにレンタルサーバー(某社)を採用
- CMSに WordPress を採用
- 別サイト(本サイト開設前から運用)で実績があり個人的ノウハウで構築&運用が楽
- フロントエンドフレームワークに Bootstrap を採用、WordPressカスタムテーマを作成
- いいねボタンの実装に いいねボタン・改 を採用
- お問い合わせフォームは Google Forms を採用
- ドメインとDNSまわりは2024年秋くらいに Cloudflare に引っ越し済み
リニューアル後の構成
脱WordPress & レンタルサーバーで運用することにしました。
CloudflareのWAFのログを見ていて、WordPressの管理系アドレスへの無差別な攻撃が結構来ているのを見て、
それなりに対策はしていたのですがちょっと気持ち悪いなと思い、脱WordPressを決めました。
あとは、本業ではなく趣味で作成している(本業は音声系NWエンジニアです)ので、最近のWeb関連技術のお勉強もかねてチャレンジすることにしました。
(学生時代に授業でHTMLとCSSに触れて興味を持って以来、Web開発は趣味の範囲で独学で勉強している永遠の初心者です。)
- サーバーインフラに Cloudflare Pages を採用
- ソース管理は GitHub のプライベートレポジトリを採用
- フロントエンドフレームワークに Astro を採用
- いいねボタンの実装に Cloudflare D1 を採用
ローカルでサイトを更新して、GitHubにプッシュすることでCloudflareが自動でビルドして公開してくれます。すげぇ(素人の率直な感想)
リニューアルするにあたってやりたかったこと
- Markdownで記事を管理したい
- 記事を一元的・汎用的な形で残したい
- デザイン・コンテンツ(固定ページ・記事)は引き継ぎたい
- とりあえずはBootstrapで作ったデザインを引き継ぎたい
- お問い合わせフォームの実装もそのままにしたい
- サイト内検索を引き続き実装したい
- いいねボタンも引き続き実装したい
やったこと、参考にした記事、苦戦したこと
- 環境構築
- 聞いたことあるけどちゃんとやったことないな…というのが多かったです。
- ローカルとGitHub上にフォルダを作成
- GitHubのリポジトリはプライベートにしました
- Node.jsのインストール
- npmコマンドが打てるようになる！
- Gitのインストール
- GitHubのリポジトリ作成とローカルからリモートへのプッシュ
- ここまでで ローカルでファイル更新→Gitでプッシュ→GitHub側も更新 ができるようになりました
- コマンドライン自体は職業柄慣れているので概念と用語を押さえて問題なく完了しました
- Astroまわり
- 公式ドキュメントが比較的わかやすかったですが、そもそも用語や概念で初めて見たものが多かったです
- SSR？SSG？そんな状態からのスタートなので色々調べました
- 【図解】SPA、SSR、SSGの違いについて #ssr - Qiita
- Astroは基本SSG？だから早いと理解しました
- 【図解】SPA、SSR、SSGの違いについて #ssr - Qiita
- まずはAstroでページを作ってみました
- ヘッダー部分、フッター部分、メイン部分でコンポーネントを分けました
- Markdownの改行がHTMLで改行されない！
- Markdownの外部リンクは新しいタブで開くようにしたい！
- Cloudflareまわり (2025/1/8追記)
- サイト内検索の実装
- Pagefindを実装しようと頑張りましたが、SSRだと動的生成されるページの内容が検索できず・・・
- どなたかいい方法知りませんか？NodeJS APIを使う？
- Fuse.js というライブラリを見つけました
- 一旦は手動で検索用インデックスを用意してそれを読み込ませることにしました
- あいまい検索ができるのすごいですね(あいまい度も設定できる)
- Astro で React を使うことでできました
- React を使うと Cloudflare Pages でなぜかビルド失敗して困りましたが、先人の教えで解決しました
- いいねボタンの実装
- 以前利用していたいいねボタン・改は使えなさそうなので一から実装することにしました
- 素人の考えで、いいね数を記録しておくデータベースとそれを読み書きする仕組みが必要だろうと思いました
- いいねボタンのためだけにレンタルサーバーにDB作る？
- Cloudflare に D1 というデータベースサービスがあることに気づきました
- 調べたら先人がいました(すごい)
- いいねの読み取りはできたのですが、書き込みができない状態で数日悩みました
- 結果的にはコンポーネントを分けて、formでpostすることで何とか実現しました
リニューアル後の感想と今後の展望
なんとかリニューアルできました。知らない用語や技術が多くて難しいですね！
ChatGPT先生にも聞きましたが、先人たちの記事がなんだかんだで助かりました。
調べる→実装→ビルド→うまくいかない→調べる→実装→ビルド→うまくいく の体験はやはりいいですね。達成感が大きいです。
リニューアル自体が勉強するきっかけにもなりました。
今後は下記のような展望があります。少しずつ気が向いたら頑張ります。
- OG画像自動生成
- 記事ごとにサムネ画像をオリジナルにできるのかっこいいですよね
- 先人の記事を見た感じ比較的簡単に実装できそう？と思っています。
- ページを開いたときに検索ボックスが自動的に入力状態になる
- iOSだけなぜかこの動作になります。
<input>でautocomplete="off"を指定してみたのですが改善せず。
- やっぱりSSRでPagefindで検索実装したい
- NodeJS APIをどうにか使えないものか…
- いいねボタンを押した際にページ再読み込みが走らないようにしたい
- SSG/SSRである以上難しい？
というような形で手探りで移行できました。
調べてぱっと出てこなかった部分のソースコードやもう少し詳細を追って追記しようかなと思っています。