If you wanna use this site as a base for building your own, I highly recommend basing it off my public SvelteKit blog template instead! It is better documented and there is way less stuff to remove.
This is my own personal website, built with SvelteKit. It also holds my own personal blog.
It was built with a few goals in mind:
I achieved this with the help of SvelteKit. There is almost no JavaScript running, and it actually works with JS disabled! While JS is awesome, it's important to know when it's not needed.
To run it locally, you simply have to run:
# First, install dependencies
npm install
# Then, run it on dev mode
npm run dev
The site should now be available at http://localhost:5173/ on your local machine, and your local machine's IP address on your network—great for testing on mobile OSes.
I've used Histoire, a Vite-based Storybook alternative to be able to see and develop components in isolation. To open it, run npm run story:dev
.
This website uses image-transmutation to automatically optimize images used in the site. This means that even if you use non-optimal image formats (like lossless PNGs), it will go over the images and convert images to WebP and AVIF for you, as long as you use the <Image />
component instead of <img />
. This is done on build, so it doesn't change anything when running the website locally.
All posts are Markdown files that are processed with svelte-markdown so that the renderers can be customized. In order to make it easier to manage posts, I highly recommend the Front Matter VS Code extension, which gives you a nice CMS-like UI.
This site is hosted on Vercel, and uses SvelteKit's adapter-auto
on build. It can also be generated as a static site, and hosted pretty much anywhere. To do that, simply replace adapter-auto
with adapter-static
on svelte.config.js
and package.json
(and re-run npm install
).
I've recently updated the Markdown syntax to match Obsidian's. With a few added goodies.
Effect | Syntax | Example |
---|---|---|
Bold | ** or __ | **example** |
Italic | * or _ | *example* |
Strikethrough | ~~ | ~~example~~ |
Highlight | == | ==example== |
Links | []() | [text](url) |
Blockquotes | > | > Quote |
Sparkling Highlight | @@ | @@example@@ |
Button | [text](url 'button prop=value') | [Example](url 'button color=secondary href=url') |
Callout | > [!type] | > [!info] > Example |
Image | ![Alt text || custom-class](url 'figcaption') | ![Example image || full-bleed](/test.jpg 'A sample image'] |