Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ブログを作ってみる
Search
sasaki MIERUNE
November 28, 2024
0
32
ブログを作ってみる
SvelteKitでブログを作ってみるLTです
sasaki MIERUNE
November 28, 2024
Tweet
Share
More Decks by sasaki MIERUNE
See All by sasaki MIERUNE
huyuyasumi_lt_ssk.pdf
groovyjovy
0
42
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Six Lessons from altMBA
skipperchong
28
3.8k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
A designer walks into a library…
pauljervisheath
207
24k
KATA
mclloyd
29
14k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
17
940
Adopting Sorbet at Scale
ufuk
77
9.4k
Designing Experiences People Love
moore
142
24k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Transcript
ブログを作ってみよう 佐々木 遥人
©Project PLATEAU / MLIT Japan 元々は土木業界にいたのですが、ITが面白すぎ て転職 最近自分の年齢が覚えられなくなってきている 写真は猫カフェ在籍の猫 自己紹介
佐々木 遥人 SASAKi Haruto ソフトウェアエンジニア
©OpenStreetMap contributors 01 なんでブログなの? 02 必要なもの 03 作成 04 発展 目次
©OpenStreetMap contributors 01 なんでブログなの?
©Project PLATEAU / MLIT Japan なんでブログなの? ブログ、作りてぇ〜
©Project PLATEAU / MLIT Japan なんでブログなの? •インターネットに自分の住所が欲しい ◦ きーたとかぜんもいいけど...「場所」が欲しい •自社で利用する技術を勉強したい
•ローカルで動くプログラムは普段趣味で書いているから、AWSを使っ てみたい ◦ デプロイするもの自体に手間をかけたくない →それもうSvelteKitでブログ作って、AWS Amplifyでデプロイする しかないじゃん!!
©OpenStreetMap contributors 02 必要なもの
©Project PLATEAU / MLIT Japan 必要なもの •クレジットカード ◦ AWSのサービス料金に支払うために必要 ◦
(Option)ドメインを取得するために必要 •パソコン ◦ WindowsでもMacOSでもLinuxディストリでもなんでもOK! (ちなみにこれくらい)
©OpenStreetMap contributors 03 作成
©Project PLATEAU / MLIT Japan 作成 SvelteKit(記事詳細ページ)
©Project PLATEAU / MLIT Japan 作成 SvelteKit(記事詳細ページ) •mdファイルを直書きしている •mdsvexというライブラリのおか げでSvelteコンポーネントに変換
される •スタイリングも自由にカスタマイズ できる
©Project PLATEAU / MLIT Japan 作成 SvelteKit
©Project PLATEAU / MLIT Japan 作成 SvelteKit(記事一覧ページ) •サーバーサイドで実行 される関数 •posts/*.mdファイル
を持ってきて一覧で返 してくれる
©Project PLATEAU / MLIT Japan 作成 AWS Amplify 変更を push
変更を 通知 ソースを取得して ビルド & デプロイ
©Project PLATEAU / MLIT Japan 作成 AWS Amplify •設定がほとんどなく、右記のyml ファイルを一つ配置するとあとは
自動でビルドとデプロイやってく れる •ビルドコマンドを書くだけなの で、もう実質ゼロコンフィグ
©Project PLATEAU / MLIT Japan 作成 AWS Amplify
©OpenStreetMap contributors 04 発展
©Project PLATEAU / MLIT Japan 発展 Google検索結果に載せたい •どうせなら載せたい •でもどうやってやるの...? ◦
GoogleSearchConsoleに登録する
©Project PLATEAU / MLIT Japan 発展 GoogleSearchConsole
©Project PLATEAU / MLIT Japan 発展 GoogleSearchConsole •載った!
©Project PLATEAU / MLIT Japan 発展 その他 •SvelteKitはstatic/以下に静的ファイルを配置することができる ◦ faviconやogp,
robots.txt, sitemap.xmlなど ◦ https://www.groovyjovy.dev/sitemap.xml •上記を利用して、prebuild時にsitemap.xmlを生成するコードを 実行してあげれば楽に作成できる •OGPを作成してみたりしたけどこれも面白かった
© 地理院地図 全国最新写真(シームレス) •SvelteKit + Amplify Gen2で楽にブログは作れる •皆さんもぜひやってみてください! まとめ