Building My Blog With SvelteKit, Markdown & Tailwind CSS
Вставка
- Опубліковано 26 чер 2024
- This is part 1 of building out my dev blog for coding & workflow related topics. I'm using Neovim, SvelteKit, Typescript, Tailwindcss and Markdown for this project. Hope you enjoy it!
💻 Code: github.com/josean-dev/sveltek...
🚀 My Dot Files: github.com/josean-dev/dev-env...
✍🏽 Live blog site: josean.com
Help Support Me And The Channel: www.buymeacoffee.com/joseanma... 🙏🏽
⏰ Timestamps
00:00 - Introduction
00:55 - Creating Project
01:21 - Initializing Repo
01:37 - Installing Dependencies
02:08 - typescript-svelte-plugin
02:36 - Start dev server
02:59 - Setup tailwindcss
04:19 - Navbar
05:20 - Logo SVG
06:37 - UA-cam & Github Links
10:31 - Darkmode button
20:56 - Darkmode button animation
23:40 - Markdown posts & images
24:26 - Render markdown with mdsvex
28:47 - Style markdown with @tailwindcss/typography
31:03 - Code syntax highlighting
32:15 - Copy code button
40:41 - Post header with frontmatter metadata
47:18 - Conclusion
📧 Email for business inquiries: youtube@josean.com
--------------------------------------------------------------------------------
🖥️ My Desk Setup:
💻 Computer & Monitor
Apple 27” Studio Display for Coding & Video Editing: amzn.to/47YzRZt
2021 M1 Pro Macbook Pro (mine): amzn.to/47XNhoC
2023 M2 Pro Macbook Pro (newest): amzn.to/3qYHG0J
🖱️ Mouse
Apple Trackpad: amzn.to/45P0i1S
Logitech MX Master 3s Mouse: amzn.to/3Z3bXIq
⌨️ Keyboard
Cherry Corne Version 3 Kit: bit.ly/3UJgrjH
Analyst Keyboard Case: bit.ly/3uyjIHQ
Nice!Nano Microcontrollers: bit.ly/3FblL9L
Gateron Ink Black V2 Switches: amzn.to/3YZ3cz9
Batteries for Nice!Nanos: bit.ly/3uBmtrS
Travel Case (Fits Analyst Corne Case): bit.ly/3Hmr7BR
Gateron Ink Black V2 Switches: bit.ly/3VJToX4
My Keycaps: bit.ly/3uHBbgV
Blank PBT Keycaps: bit.ly/3UJhgJ6 or amzn.to/3UNQtLQ
Planck PBT Keycap Set: amzn.to/3HopRhC
You can also find some pre-built options and DIY kits on Etsy: www.etsy.com/search?q=corne
🎧 Headphones
Sony WH-1000XM4 Headphones: amzn.to/3sEJU65
----------------------------------
🎬 My Video Gear:
📹 Camera
My Fuji xt3 Camera (only available used): amzn.to/3P4P1E7
Recommended Cameras:
Fuji xt5 (newest): amzn.to/3P0jMtK
Fuji xt4 (used): amzn.to/3EmeUdt
Fuji 23mm f2 Lens (great for video in smaller spaces): amzn.to/3L2L6pV
Camera Field Monitor: amzn.to/3L2nrpW
🎙️ Audio
Rode VideoMic Pro+: amzn.to/45PecRC
Overhead Camera/Mic Arm: amzn.to/45y8Ryl
💡 Lighting
Aputure Amaran 100d Keylight: amzn.to/47T4Y97
Aputure Light Dome Mini II Softbox: amzn.to/3EstpMM
Aputure Amaran Small RGB Light: amzn.to/3Pl6RnG
IVISII Bright RGB Light: amzn.to/3EmfsA3
---------------------------------------------------------------------------------------------
Links used in the description may be affiliate links. By clicking and/or purchasing from these affiliate links I receive a small commission (at no cost to you). This really helps me out in funding my videos and growing my channel, thank you for the support! - Наука та технологія
I love SvelteKit and Tailwind, thank you for this!
Neatly done, I am sure this will be very helpful when i rewrite my blog in svelte/typescript.
Thanks
Josean- Thank you very much for the care and attention to detail you have put into each video. I especially appreciate the fact that you explain each Neovim plugin, and don't simply point us to NvChad and the like. I'm sure the pre-built configs are useful to some, but I've found following along with you that I have more ownership and understanding adding plugins using your basic structure.
Awesome! Really happy to hear that, glad I can help!
truly underrated, the way you explained each plugin and its usage was awesome!
this is incredible, such a great job! ✨
So greatful for your neovim video! Will like any video on this channel!
Thanks! 🙏🏽
This is quality content.
Hey, still waiting for your next neovim configuration video. Thanks for the neovim series.
Nice! Do you have a video showing how you deployed it?
It would be amazing if you could do a series or even one video of setups for different languages! I am having trouble getting Angular setup and that is the only thing stopping me from being able to use neovim full time for work!
Thanks for the feedback! I’m not sure if or when I’d be able to put something like that together, but appreciate you letting me know, I’m adding it the list. Haven’t worked with Angular before so not sure the specifics of getting everything configured.
Resume at 5:20
Thanks for the tutorial! What keyboard are you using if you don’t mind me asking ?
it's in the description
It’s a custom built split called a corne
Dope video Josean as always! Quick question, I am using LazyVim but my tags don't auto close, i.e. or other tags like that. Am I missing a setting?
It’s not part of lazyvim default config if I remember. You need to add the autopairs plugin.
Yep! I’m using autopairs along with treesitter, though treesitter is optional.
Hey ! Nice video great job!
Just a tip, you may know it but you will gain speed to navigate between next and previous file with C-o and C-i 😅
Hey! Thanks for the tip! I actually use C-o and C-i a lot, I didn't use it as much in this video so that it would be less confusing all of the jumping around.
@@joseanmartinez yeah it’s what I thought.
By the way I used part of your nvim configuration and pumped it a little by using ./after folder but your base configuration is amazing.
That’s really great to hear. Happy to know my config has been a good starting point for your own setup!
what neovim version are you using?
Today I cloned your configuration and it works great, but I can't open the terminal from neovim as well as in this video, could I be forgetting or have something changed?
Ok, I was researching and didn't find anything, so I guess that's with tmux or something similar.
How to get that tailwind and other auto completions ?
Tailwind lsp I guess.
Yep! I’ve configured the lsp in my neovim config, I’ve linked to the config in the description and I have a video on setting up LSPs in Neovim in case you’re interested.
What’s the name of your theme in your Neovim
bro, you are cool
is this supposed to be some tooling demo?
because all these tools feel like a lot of unnecessary complication for a blog.
There are likely simpler approaches to building a blog each with their own set of tradeoffs. I’m showing my personal approach here with SvelteKit, tailwindcss and markdown, which are some the web technologies I enjoy using and I also find provide a lot of flexibility. Any suggestions on a better approach?
please add subtitle
Why do you use npm in 2023?
Any suggestion?
@@ebn7722pnpm or bun
@@ebn7722 pnpm
it's an implicit `bun install` suggestion, i guess.
but as i heard, the main speed gain is caused by bun defaulting to something similar as offline mode, but npm also has an option to behave similarly and then it would be a lot faster too.
@@0netom bun is good, very good, but it's not the same, not yet. In that case, pnpm maybe.