It is Svelte that the page you’re looking at is powered by. The previous version of it was based on Gatsby, and on Hexo if we keep going ago. But when i came across Svelte, i was amazed at it’s features. So i decided to rewrite my site and take chance to dive into Svelte and it’s ecosystem.
To finished the rewriting process took me five weekends. Now, i will talk about what i did.
Framework and Development
SvelteKit is a framework for building web applications.
SvelteKit for Svelte is similar with Next.js fo React, Nuxt.js for Vue. it brings build tools、filesystem-based routing、rendering practices for us to setup Svelte app quickly.
For Development, SvelteKit integrated Vite, which make both dev and production builds extremely fast.
And I added config to make vite resolve my posts files form project root folder:
The firstname.lastname@example.org files in blog, draw, note and slide folders are index pages for all my posts, draws, notes and slides.
These pages can have a load function, which can fetching my blog posts data before component is created, even on server side with prerender opton:
For post detail page, it is necessary to use a template to dispaly all different pages. So i used dynamic routing. That is the email@example.com file wrapped in [slug] folder. Load function in these page only need to fetching post data via slug:
SvelteKit allows us to set layouts file, even Nested layouts and Named layouts.
I added the following 4 layout files:
__layout.svelte is my root layout, which layout the main structure of my website pages:
The other three files are named layouts, inherited directly from the __layout.svelte.
firstname.lastname@example.org and email@example.com are layouts for blog detail pages.
firstname.lastname@example.org layouts the other pages.
You can see i used names page, draw-page and post-page, and reference different names in different page file, such as email@example.com, firstname.lastname@example.org.
Styling and Typography
I prefer to styling with Less and PostCSS. I was satisfied with the feeling of writing original CSS Code rather than Atomic or Utility-first CSS like Tailwind CSS.
As svelte-preprocess can automatically transforms the code to provide support for PostCSS and Less, so i configure the svelte.config.js:
Post page with Markdown
To render markdown files, i used mdsvex. It can
convert markdown to HTML, allows markdown files to be used as component, even allow
component to be used inside markdown with svx file.
You can see i added uses.svx , combining svelte components, html and markdown syntax:
For normal markdown files, we need to add mdsvex into svelte-preprocess:
rehype-slug plugin can add id attributes to headings, rehype-autolink-headings plugin add links from headings back to themselves.
So we can used them to implement hash anchor for headings.
I customized rehype-urls plugin to fill the empty alt attribute for img tag, the target and rel attributes for outside a tag. Also, i specified all the images as webp format:
I used an endpoint, resolving all my posts and serving a XML file, to implement RSS feed.
SSG means Static Site Generation. I thought it is suitable for my website to pre-render every page.