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
Speed Design
sergeychernyshev
32
1k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
109
19k
Building an army of robots
kneath
306
45k
Automating Front-end Workflow
addyosmani
1370
200k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Writing Fast Ruby
sferik
628
62k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Optimizing for Happiness
mojombo
379
70k
Balancing Empowerment & Direction
lara
1
500
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
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で楽にブログは作れる •皆さんもぜひやってみてください! まとめ