SvelteKit MD Blog Static

This is a SvelteKit project which makes a simple blog style site, with posts, topics, and pages. It makes use of the SvelteKit static adapter to build highly performant static HTML, CSS, and JS files. The content for posts can be markdown (.md) files which are parsed into HTML via the mdsvex utility.

Features

• Svelte 5 (Runes)
• SvelteKit 2
• Tailwind CSS 4
• Uses mdsvex to enable markdown files as posts and pages.
• Makes use of Svelte enhanced images to improve perforamce.
• RSS Feed
• SEO Meta Tags
• Analytics Component
• Does not use TypeScript.

Use

1. Clone Repo

   git clone https://github.com/MosDeAtmo/sveltekit-mdblog-static.git
   

2. Install

   npm install
   

3. Edit Config

Edit the /src/lib/config.js file. This file controls the global config of the site such as site name, description, the number of posts to display per page, the main and footer nav menus, and allows you to specify a Google Analytics ID.

4. Create Posts

Use markdown (.md) files in the /src/lib/posts directory. Place any images in the /src/lib/assets/images/posts directory, or use your own location such as a CDN.

Use the markdown image syntax ![alt text](/src/lib/assets/images/posts/example-img.jpg)) to insert images. These get the Svelte enhanced images treatment at build time to improve perforamce.

Frontmatter:

Each post can have frontmatter which are meta attributes related to the post. This should appear at the top of each post between --- as below.

---
active: true/false
title: "A Post With An Image Of A Tiny Tree"
date: "2025-03-18"
categories:
    - "interesting-things"
excerpt: "This post has a beautiful photo of a tiny tree."
---

5. Styles

Changes styles in the app.css file. This project uses Tailwind CSS v4.

6. Build Site

   npm run build
   

This builds the static HTML, CSS, JS files ready to be served to visitors.

7. Deploy

You can deploy to any host which supports static HTML, CSS, JS files.

Credits

This project took inspiration from both Josh Collinsworth's sveltekit-blog-starter and Guandor's minimalistic-sveltekit-blog fork. The major changes I've made are listed below.

• Svelte 5 in Runes Mode.
• Tailwind CSS v4
• Dark Mode
• Added Svelte enhanced images.
• Simplified the way that posts are fetched to use one single API route. This makes it easy to switch to use SSR or prerender = "auto" in case you don't want a static build.
• Added a MorePosts component to display more posts at the bottom of a single post page.
• Added an Analytics component for Google (or other) analytics scripts.