ブログを作ってみる

SvelteKitでブログを作ってみるLTです

Transcript

1. ブログを作ってみよう 佐々木　遥人
2. ©Project PLATEAU / MLIT Japan 元々は土木業界にいたのですが、ITが面白すぎ て転職 最近自分の年齢が覚えられなくなってきている 写真は猫カフェ在籍の猫 自己紹介 佐々木 遥人 SASAKi Haruto ソフトウェアエンジニア
3. ©OpenStreetMap contributors 01　なんでブログなの? 02　必要なもの 03　作成 04　発展 目次
4. ©OpenStreetMap contributors 01 なんでブログなの?
5. ©Project PLATEAU / MLIT Japan なんでブログなの? ブログ、作りてぇ〜
6. ©Project PLATEAU / MLIT Japan なんでブログなの? •インターネットに自分の住所が欲しい ◦ きーたとかぜんもいいけど...「場所」が欲しい •自社で利用する技術を勉強したい •ローカルで動くプログラムは普段趣味で書いているから、AWSを使っ てみたい ◦ デプロイするもの自体に手間をかけたくない →それもうSvelteKitでブログ作って、AWS Amplifyでデプロイする しかないじゃん！！
7. ©OpenStreetMap contributors 02 必要なもの
8. ©Project PLATEAU / MLIT Japan 必要なもの •クレジットカード ◦ AWSのサービス料金に支払うために必要 ◦ (Option)ドメインを取得するために必要 •パソコン ◦ WindowsでもMacOSでもLinuxディストリでもなんでもOK! (ちなみにこれくらい)
9. ©OpenStreetMap contributors 03 作成
10. ©Project PLATEAU / MLIT Japan 作成 SvelteKit(記事詳細ページ)
11. ©Project PLATEAU / MLIT Japan 作成 SvelteKit(記事詳細ページ) •mdファイルを直書きしている •mdsvexというライブラリのおか げでSvelteコンポーネントに変換 される •スタイリングも自由にカスタマイズ できる
12. ©Project PLATEAU / MLIT Japan 作成 SvelteKit
13. ©Project PLATEAU / MLIT Japan 作成 SvelteKit(記事一覧ページ) •サーバーサイドで実行 される関数 •posts/*.mdファイル を持ってきて一覧で返 してくれる
14. ©Project PLATEAU / MLIT Japan 作成 AWS Amplify 変更を push 変更を 通知 ソースを取得して ビルド & デプロイ
15. ©Project PLATEAU / MLIT Japan 作成 AWS Amplify •設定がほとんどなく、右記のyml ファイルを一つ配置するとあとは 自動でビルドとデプロイやってく れる •ビルドコマンドを書くだけなの で、もう実質ゼロコンフィグ
16. ©Project PLATEAU / MLIT Japan 作成 AWS Amplify
17. ©OpenStreetMap contributors 04 発展
18. ©Project PLATEAU / MLIT Japan 発展 Google検索結果に載せたい •どうせなら載せたい •でもどうやってやるの...? ◦ GoogleSearchConsoleに登録する
19. ©Project PLATEAU / MLIT Japan 発展 GoogleSearchConsole
20. ©Project PLATEAU / MLIT Japan 発展 GoogleSearchConsole •載った!
21. ©Project PLATEAU / MLIT Japan 発展 その他 •SvelteKitはstatic/以下に静的ファイルを配置することができる ◦ faviconやogp, robots.txt, sitemap.xmlなど ◦ https://www.groovyjovy.dev/sitemap.xml •上記を利用して、prebuild時にsitemap.xmlを生成するコードを 実行してあげれば楽に作成できる •OGPを作成してみたりしたけどこれも面白かった
22. © 地理院地図 全国最新写真（シームレス） •SvelteKit + Amplify Gen2で楽にブログは作れる •皆さんもぜひやってみてください! まとめ