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
Svelte/Sapperで自作ブログをやってみる - Create a blog with Svelte/Sapper
Search
Haruki Tazoe
March 28, 2021
Programming
0
140
Svelte/Sapperで自作ブログをやってみる - Create a blog with Svelte/Sapper
https://connpass.com/event/205060/
Haruki Tazoe
March 28, 2021
Tweet
Share
More Decks by Haruki Tazoe
See All by Haruki Tazoe
ゼミ内LT「Web API: The Good Parts」 を読みました - I read "Web API: The Good Parts".
jdkfx
0
43
フレームワークの内部構造を理解するためにフレームワークを作ってみることにした / phpcon-2021
jdkfx
2
1k
陽気なギャングが「行けたら行くぜ」って言ってたよ #23grads / Building a php framework
jdkfx
0
290
hiro-it-35
jdkfx
0
600
PHPのオープンソースフレームワークLaravelについて
jdkfx
0
62
フロントにおけるLaravel Laravel.hiroshima
jdkfx
0
180
Other Decks in Programming
See All in Programming
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
26
7.8k
コードレビューで学ぶ!Kotlinオブジェクト指向デザインパターン
akkie76
2
180
Zero Waste, Radical Magic, and Italian Graft – Quarkus Efficiency Secrets
hollycummins
0
220
Folding Cheat Sheet #1
philipschwarz
PRO
0
210
[技育CAMPアカデミア]アイディアを形に!【超入門】スマホアプリ開発〜リリースまでの流れをご紹介
teamlab
PRO
0
350
プールにゆこう
irof
2
120
スクラムチームと認知負荷 - ニフティのスクラムトーク Vol2. / NIFTY Tech Talk #18
niftycorp
PRO
1
120
1BRC--Nerd Sniping the Java Community
gunnarmorling
0
300
ADRを一年運用してみた/adr_after_a_year
hanhan1978
7
2.2k
Build with AI 2024 Seoul - 제로부터 시작하는 Flutter with Gemini 생활 - 박제창
itsmedreamwalker
0
200
本格ローグライク制作にEbitengineを選んでみた
nagainaganawa
0
290
#phpcon_odawara オープン・クローズドなテストフィクスチャを求めて / open closed test fixtures
77web
3
220
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
15
1.4k
The MySQL Ecosystem @ GitHub 2015
samlambert
242
12k
Done Done
chrislema
178
15k
The Mythical Team-Month
searls
215
42k
Practical Orchestrator
shlominoach
181
9.7k
Learning to Love Humans: Emotional Interface Design
aarron
266
39k
Building Adaptive Systems
keathley
30
1.8k
Fantastic passwords and where to find them - at NoRuKo
philnash
36
2.5k
Embracing the Ebb and Flow
colly
79
4.1k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
What's in a price? How to price your products and services
michaelherold
237
11k
Why You Should Never Use an ORM
jnunemaker
PRO
50
8.6k
Transcript
Svelte/Sapperで ⾃作ブログを やってみる 23卒エンジニア志望学生LT会 vol.1
⾃⼰紹介
• 田添春樹 • 趣味はツーリングや読書、映画鑑賞など • 好きな言語/FWはPHP、Laravel、Vue.js • Twitter/GitHub @jdkfx •
今回の唯一の発表者 ※ • ※日程は未定ですが、次もする予定!発表者を募集しています!
⾃作ブログやってますか?👂🤚
はじめての⾃作ブログ • 技術選定 • デザイン • ホスティング • 他にもいろいろ…
考えることが多い🤔
最近の⾃作ブログ事情ってどうなの?🔍
技術選定 • Nuxt.js • Next.js • Gatsby.js • React •
Hugo • (PHP/Laravel) • などなど…
フロントエンドFWの 使⽤が多いのかなと💭
デザイン • TailwindCSS • Bootstrap5 • (HTML/CSS) • などなど…
TailwindCSSを使っている 知り合いが多いイメージ💭
ホスティング • Vercel • Netlify • GitHub Pages • などなど…
いろいろ使われているけれど 違いがよくわからない💭
なにを使うか結構悩む😟
無難にPHPで⾃作FWを作って 利⽤するのも可能ではある😟
それではつまらないので…😓
Svelte/Sapper
Svelte • Rich Harris氏によって作られたJSFW • https://svelte.dev/ • https://zenn.dev/toshitoma/articles/what-is-svelte
Sapper • SvelteのFW • https://sapper.svelte.dev/ • https://zenn.dev/dictav/articles/sapper-web-app • ちなみにSapperに置き換わるSvelteKitというものがある
余談 • 過去にDocの翻訳もした • https://speakerdeck.com/jdkfx/hiro-it-35
作ってみる🔧
テンプレートの利⽤ • 公式が公開しているブログ用のテンプレートを利用 • https://github.com/sveltejs/sapper-template
src/routes • src/routes • This is the heart of your
Sapper app. There are two kinds of routes — pages, and server routes. • Sapperアプリの心臓部 • 大体のことはこの部分のコードを書き換えたり、 追加すれば良い 👉
Markdownの記事を呼ぶ • ./src/routes/blog/_post.js • 別に作った記事用ディレクトリから .mdファイルを呼ぶように書き換え • 従来の自作ブログのように markedやFront-matterなどを利用 •
参考: https://newcurrent.se/blog/create-markdown-sapper-svelte-blog https://n-ari.tech/blog/2020-02-06-create-portfolio-and-blog-with-sapper-and-netlify-cms/ 👉
そんなわけで、できたものがこちら✨
https://jdkfx.com/blog/created-my-blog
いい…😊
これからやりたいこと🛫
機能⾯ • ブログ記事のカテゴリ分け機能と月別記事機能
デザイン⾯ • tailwindcssの導入 • デザインの調整
環境⾯ • SapperからSvelteKitへの移行 • https://svelte.dev/blog/sveltekit-beta It's time. After five months
and hundreds of commits, you're finally invited to try out the SvelteKit beta. It's not finished — there are a few known bugs and several missing features — but we're really happy with how it's shaping up and can't wait for you to try it.
なんかやってみたい • vercel/og-imageを利用したブログ記事のOGP画像生成 • RSS
ありがとうございました!🙇