Svelte/Sapperで自作ブログをやってみる - Create a blog with Svelte/Sapper

https://connpass.com/event/205060/

Transcript

1. Svelte/Sapperで ⾃作ブログを やってみる 23卒エンジニア志望学生LT会 vol.1
2. ⾃⼰紹介
3. • 田添春樹 • 趣味はツーリングや読書、映画鑑賞など • 好きな言語/FWはPHP、Laravel、Vue.js • Twitter/GitHub @jdkfx • 今回の唯一の発表者 ※ • ※日程は未定ですが、次もする予定！発表者を募集しています！
4. ⾃作ブログやってますか？👂🤚
5. はじめての⾃作ブログ • 技術選定 • デザイン • ホスティング • 他にもいろいろ…
6. 考えることが多い🤔
7. 最近の⾃作ブログ事情ってどうなの？🔍
8. 技術選定 • Nuxt.js • Next.js • Gatsby.js • React • Hugo • （PHP/Laravel） • などなど…
9. フロントエンドFWの 使⽤が多いのかなと💭
10. デザイン • TailwindCSS • Bootstrap5 • （HTML/CSS） • などなど…
11. TailwindCSSを使っている 知り合いが多いイメージ💭
12. ホスティング • Vercel • Netlify • GitHub Pages • などなど…
13. いろいろ使われているけれど 違いがよくわからない💭
14. なにを使うか結構悩む😟
15. 無難にPHPで⾃作FWを作って 利⽤するのも可能ではある😟
16. それではつまらないので…😓
17. Svelte/Sapper
18. Svelte • Rich Harris氏によって作られたJSFW • https://svelte.dev/ • https://zenn.dev/toshitoma/articles/what-is-svelte
19. Sapper • SvelteのFW • https://sapper.svelte.dev/ • https://zenn.dev/dictav/articles/sapper-web-app • ちなみにSapperに置き換わるSvelteKitというものがある
20. 余談 • 過去にDocの翻訳もした • https://speakerdeck.com/jdkfx/hiro-it-35
21. 作ってみる🔧
22. テンプレートの利⽤ • 公式が公開しているブログ用のテンプレートを利用 • https://github.com/sveltejs/sapper-template
23. src/routes • src/routes • This is the heart of your Sapper app. There are two kinds of routes — pages, and server routes. • Sapperアプリの心臓部 • 大体のことはこの部分のコードを書き換えたり、 追加すれば良い 👉
24. 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/ 👉
25. そんなわけで、できたものがこちら✨
26. https://jdkfx.com/blog/created-my-blog
27. いい…😊
28. これからやりたいこと🛫
29. 機能⾯ • ブログ記事のカテゴリ分け機能と月別記事機能
30. デザイン⾯ • tailwindcssの導入 • デザインの調整
31. 環境⾯ • 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.
32. なんかやってみたい • vercel/og-imageを利用したブログ記事のOGP画像生成 • RSS
33. ありがとうございました！🙇