手作り個人ブログの苦労話

個人ブログを0から作った話です
みなさんもぜひ！

Transcript

1. © 2025 Anti-Pattern Inc. All rights reserved. 
 手作り個人ブログの苦労話
 2025/11/10
 @Hello LT world『みんなで語る！ 
 好きと学びのアウトプット LT Night』 
 
 株式会社アンチパターン 
 穴田竜大

2. © 2025 Anti-Pattern Inc. 穴田竜大 (ryudai) 株式会社アンチパターン • 24卒エンジニア • ソリューションアーキテクト (SA) ◦ お客様のAWS環境構築・設計 ◦ トレーニング • 2025 Japan AWS Jr. Champions に選出 • 好きなAWSサービス: Lambda • これから頑張りたい: Rust🦀 自己紹介
3. © 2025 Anti-Pattern Inc. 今日のテーマ https://blog.bigdragon.tech/ 個人ブログを作ろう！
4. © 2025 Anti-Pattern Inc. ブログのご紹介 ◯設立日 • 2024/03/31 ◯内容 • AWS多め ◯記事数 • 30本 ◯自然流入数 • 月に200クリックくらい • ソース: Google Search Console
5. © 2025 Anti-Pattern Inc. ブログのアーキテクチャ (概念)
6. © 2025 Anti-Pattern Inc. え、ショボい …
7. © 2025 Anti-Pattern Inc. ブログのアーキテクチャ (概念) 個人開発なので、 費用削減を重視！ 全てを静的ファイルに！
8. © 2025 Anti-Pattern Inc. ブログのアーキテクチャ この子が月 0.5ドル あとはドメイン代
9. © 2025 Anti-Pattern Inc. ブログのアーキテクチャ データベースは高い → JSONを置いてがんばる
10. © 2025 Anti-Pattern Inc. 実際のブログ一覧データ (JSON) トップページ (一覧画面 )に 必要なデータだけ持っている
11. © 2025 Anti-Pattern Inc. ブログのアーキテクチャ サーバーも高いから 自前SSGでHTMLを生成
12. © 2025 Anti-Pattern Inc. 自前…SSG…？
13. © 2025 Anti-Pattern Inc. SSGとは SSG: Static Site Generation • ビルド時に静的なHTMLを生成しておくこと • 動的に生成するより高速になる ◦ HTMLをキャッシュすればより高速に ◦ 今回はCloudFrontでキャッシュできる • コンピューティング用のサーバーが不要 ◦ → 安く済むのでありがたい！
14. © 2025 Anti-Pattern Inc. じゃあ自前 SSGって…？ Markdown HTML ブログは Markdown で書きたい
15. © 2025 Anti-Pattern Inc. じゃあ自前 SSGって…？ Markdown HTML 公開する のはHTML
16. © 2025 Anti-Pattern Inc. じゃあ自前 SSGって…？ Markdown HTML 変換
17. © 2025 Anti-Pattern Inc. じゃあ自前 SSGって…？ Markdown HTML ここを Rustで作ろう 🦀 変換
18. © 2025 Anti-Pattern Inc. Markdownパーサー Markdown 変換①
19. © 2025 Anti-Pattern Inc. Markdownパーサー Markdown ASTみたいなもの 変換①
20. © 2025 Anti-Pattern Inc. Markdownパーサー ASTみたいなもの 変換②
21. © 2025 Anti-Pattern Inc. Markdownパーサー ASTみたいなもの HTML 変換②
22. © 2025 Anti-Pattern Inc. Markdownパーサー Markdown 変換 ①&② HTML
23. © 2025 Anti-Pattern Inc. 意外と簡単だな〜
24. © 2025 Anti-Pattern Inc. Markdownパーサーは簡単？
25. © 2025 Anti-Pattern Inc. Markdownパーサーは簡単？
26. © 2025 Anti-Pattern Inc. Markdownパーサーは簡単？
27. © 2025 Anti-Pattern Inc. Markdownパーサーは簡単？ めんどくさ い！！！
28. © 2025 Anti-Pattern Inc. まだまだ実装途中です TODO: imgタグを 直書きしない 実際のブログのMarkdown
29. © 2025 Anti-Pattern Inc. • aタグを使えるようにする • imgタグを使えるようにする 今後やりたいこと
30. © 2025 Anti-Pattern Inc. 今後やりたいこと • aタグを使えるようにする • imgタグを使えるようにする • いいね機能 • コメント欄 • 記事検索機能 • Google Analytics連携 • 英語記事の同時公開 • Webエディター画面の作成 • 一覧画面のページネーション • リンク共有ボタンの作成 • コードブロックにシンタックスハイラ イトをつける • CloudFrontへのアクセス可視化 • 記事のタグ付け 自分でブログを作ると こんなに遊べる！
31. © 2025 Anti-pattern Inc. ということで
32. © 2025 Anti-Pattern Inc. 今日のテーマ https://blog.bigdragon.tech/ 「みんなも」 個人ブログを作ろう！