Svelte

How to Quickly Build and Deploy a Static Markdown Blog with SvelteKit

Published Feb 6, 2023

Updated Oct 12, 2023

3 min read

This article was written over 18 months ago and may contain information that is out of date. Some content may be relevant but please refer to the relevant official documentation or available resources for the latest information.

Introduction

SvelteKit is an awesome framework for building Server-Side Rendered pages which addresses the performance and search engine optimization issues of single-page JavaScript applications. In contrast to client-side rendering, it generates static content on the server before sending it over to the user's browser. This allows you to spend less time building and more time writing awesome content for your audience. In this tutorial, we are going to use starter.dev to create a SvelteKit application that already provides you with TypeScript, SCSS, and Storybook to allow you to build applications on the go.

Prerequisites

You will need a development environment running Node.js; this tutorial was tested on Node.js version 16.18.0, and npm version 8.19.2.

Development

Setup project with SvelteKit and SCSS starter kit

Create a new starter kit project
```
npm create @this-dot/starter
```
Select SvelteKit and SCSS
Enter the name of the Project. markdown-blog-sveltekit
Run cd markdown-blog-sveltekit
npm install

Let’s get started.

Configuring Markdown

We’re going to use mdsvex, a markdown preprocessor for Svelte, to render our Markdown posts.

    npm i -D mdsvex

Then we will add a mdsvex.config.js in our root folder. This file is responsible for mdsvex config options.

    //mdsvex.config.js

    const config = {
        extensions: ['.svx', '.md'],
        smartypants: {
            dashes: 'oldschool',
        },
    };

    export default config;

Next, we will import mdsvex in our svelte.config.js.

	//svelte.config.js

    import adapter from '@sveltejs/adapter-auto';
    import preprocess from 'svelte-preprocess';
    import { mdsvex } from 'mdsvex'; // 👈 import mdsvex 
    import mdsvexConfig from './mdsvex.config.js'; // 👈import our mdsvex config

    /** @type {import('@sveltejs/kit').Config} */
    const config = {
        // Consult https://github.com/sveltejs/svelte-preprocess
        // for more information about preprocessors
        extensions: ['.svelte', ...mdsvexConfig.extensions],// 👈 add mdsvex file extensions
        preprocess: [
            preprocess({ typescript: true, scss: true }), 
            mdsvex(mdsvexConfig) // 👈 add mdsvex with mdsvex configuration options
        ],

        kit: {
            adapter: adapter(),
        },
    };

    export default config;

Creating posts

Each post is a Markdown file and lives in the /src/lib/posts directory we created before. Now let’s create three blog posts:

	// src/lib/posts/test-1.md
	---
    title: Blog Post 1
    date: "2022-11-27"
    description: Blog Post 1 Description
    ---
    A dog's nose is unique, just like the fingerprints of a human.

	// src/lib/posts/test-2.md
	---
    title: Blog Post 2
    date: "2022-11-28"
    description: Blog Post 2 Description
    ---
    A cat’s nose is unique, just like the fingerprints of a human.

	// src/lib/posts/test-3.md
	---
    title: Blog Post 3
    date: "2022-11-29"
    description: Blog Post 3 Description
    ---
    A dog's nose is unique, just like the fingerprints of a human.

Wonder what the triple dashed lines are? They indicate front matter, which is a way to set metadata for the page. They will be used for storing useful information such as the title, date, author, SEO metadata, etc.

We need to get the posts data rendered on the posts page. We will create a function to get and parse this data in src/lib/server/posts.ts.

	// src/lib/server/posts.ts

    import { parse } from 'path';

    type GlobEntry = {
        metadata: Post;
        default: unknown;
    };

    export interface Post {
        title: string;
        description: string;
        date: string;
    }

    // Get all posts and add metadata
    export const posts = Object.entries(
    import.meta.glob<GlobEntry>('/src/lib/posts/**/*.md', { eager: true })
    )
    .map(([filepath, globEntry]) => {
        return {
        ...globEntry.metadata,

        // generate the slug from the file path
        slug: parse(filepath).name,
        };
    })
    // sort by date
    .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
    // add references to the next/previous post
    .map((post, index, allPosts) => ({
        ...post,
        next: allPosts[index - 1] || 0,
        previous: allPosts[index + 1] || 0,
    }));

There’s a bit going on so let’s break it down.

SvelteKit has a feature that any lib in $lib/server can only be imported into server-side code and throws an error: Cannot import $lib/server/data/posts.ts into public-facing code:. To learn more about this feature, visit SvelteKit server-only-modules.

Then, we collect all the post modules in the $lib/posts directory:

export const posts = Object.entries(import.meta.glob('/src/lib/posts/**/*.md', { eager: true }))
  .map(([filepath, post]) => {
    return {
      ...post.metadata,

      // generate the slug from the file path
      slug: parse(filepath).name,

    };
  })

Then, we sort the posts by date:

    // sort by date
    .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
    // add references to the next/previous post
    .map((post, index, allPosts) => ({
        ...post,
        next: allPosts[index - 1] || 0,
        previous: allPosts[index + 1] || 0,
    }));

Posts Page

We then need to render all the posts on one page. We will add the src/routes/+page.server.ts file and the src/routes/+page.svelte file

	// src/routes/+page.server.ts
    import { posts } from '$lib/data/posts';
    import type { PageServerLoad } from './$types';

    export const load: PageServerLoad = async () => {
        return {
            posts, // make posts available on the client
        };
    };

    <!-- src/routes/+page.svelte -->

    <script lang="ts">
        import type { PageServerData } from './$types';

        export let data: PageServerData;
    </script>

    <div class="container">
        <h1>Markdown Blog</h1>

        <ul class="links">
            {#each data.posts as post}
            <li>
                <a href={`blog/${post.slug}`}>{post.title}</a>
            </li>
            {/each}
        </ul>
    </div>

    <style lang="scss">
        .container {
            width: 60%;
            margin: 1.25rem auto;
            text-align: center;

            h1 {
            font-size: 1.5rem;
            line-height: 2rem;
            font-weight: 600;
            color: #ffffff;
            padding: 1rem;
            border-radius: 0.25rem;
            background-color: #2563eb;
            }

            .links {
            margin: 0.625rem 0;
            padding: 0;
            list-style-type: none;

            a {
                text-decoration-line: underline;
                color: #2563eb;
                font-size: 1.25rem;
                line-height: 1.75rem;
                :hover {
                color: #1e40af;
                }
            }
            }
        }
    </style>

Single Post Page

Finally, we need to render the layout of each individual post.

We will create a blog/[slug] directory in routes, and create a new src/routes/blog/[slug]/+page.server.ts file. This will check the slug params against the post filename located in our posts directory src/lib/posts and return the post data to the client.

	// src/routes/blog/[slug]/+page.server.ts

    import { posts } from '$lib/data/posts';
    import { error } from '@sveltejs/kit';
    import type { PageServerLoad } from './$types';

    export const load: PageServerLoad = async ({ params }) => {
        const { slug } = params;

        // get post with metadata
        const post = posts.find((post) => slug === post.slug);

        if (!post) {
            throw error(404, 'Post not found');
        }

        return {
            post,
        };
    };

Then we create src/routes/blog/[slug]/page.ts, which loads the markdown file based on the slug.

	// src/routes/blog/[slug]/page.ts

	import type { PageLoad } from './$types';

    export const load: PageLoad = async ({ data }) => {
        // load the markdown file based on slug
        const component = await import(`../../../lib/posts/${data.post.slug}.md`);

        return {
            post: data.post,
            component: component.default,
            layout: {
            fullWidth: true,
            },
        };
    };

Finally, we render the blog layout with src/routes/blog/[slug]/page.svelte.

	<!-- src/routes/blog/[slug]/page.svelte -->

    <script lang="ts">
        import type { PageData } from './$types';

        export let data: PageData;
    </script>

    <div>
        <article>
            <header>
            <h1>{data.post.title}</h1>
            </header>
            <!-- render the post -->
            <div>
            <svelte:component this={data.component} />
            </div>
        </article>
    </div>

Conclusion

Want to start building your blog with SvelteKit today? Check out our https://starter.dev/kits/svelte-kit-scss/ to help you get started!

Thanks for reading!

If you have any questions or run into any trouble, feel free to reach out on Twitter.

This Dot is a consultancy dedicated to guiding companies through their modernization and digital transformation journeys. Specializing in replatforming, modernizing, and launching new initiatives, we stand out by taking true ownership of your engineering projects.

We love helping teams with projects that have missed their deadlines or helping keep your strategic digital initiatives on course. Check out our case studies and our clients that trust us with their engineering.

About the author(s)

Ian Sam Mungai
@iansamz @iansamz

Harnessing the Power of Threlte - Building Reactive Three.js Scenes in Svelte

Introduction Web development has evolved to include immersive 3D experiences through libraries like Three.js. This powerful JavaScript library enables the creation of captivating 3D scenes within browsers. Three.js: The 3D Powerhouse Three.js democratizes 3D rendering, allowing developers of all skill levels to craft interactive 3D worlds. Svelte Ecosystem: Svelte Cubed and Svelthree The Svelte ecosystem presents solutions like Svelte Cubed and Svelthree, which bridges Svelte with Three.js, offering streamlined reactivity for 3D web experiences. Introducing Threlte v6: Uniting SvelteKit 1.0, Svelte 4, and TypeScript Threlte v6 is a rendering and component library for Svelte that seamlessly integrates Three.js. By harnessing TypeScript's types, it provides a robust and delightful coding experience. In this tutorial, we'll showcase Threlte's capabilities by building an engaging website header: an auto-rotating sphere that changes color on mouse down. Using Threlte v6, SvelteKit 1.0, and Three.js, we're set to create a visually stunning experience. Let's dive in! Setting up Threlte Before building our scene, we need to set up Threlte. We can scaffold a new project using the CLI or manually install Threlte in an existing project. Option 1: Scaffold a New Threlte Project Create a new SvelteKit project and install Threlte with: ` Option 2: Manual Installation For an existing project, select the necessary Threlte packages and install: ` Configuration adjustments for SvelteKit can be made in the "vite.config.js" file: ` With Threlte configured, we're ready to build our interactive sphere. In the next chapter, we'll lay the groundwork for our exciting 3D web experience! Exploring the Boilerplate of Threlte Upon scaffolding a new project using npm create threlte, a few essential boilerplate files are generated. In this chapter, we'll examine the code snippets from three of these files: lib/components/scene.svelte, routes/+page.svelte, and lib/components/app.svelte. 1. lib/components/scene.svelte: This file lays the foundation for our 3D scene. Here's a brief breakdown of its main elements: - Perspective Camera: Sets up the camera view with a specific field of view and position, and integrates OrbitControls for auto-rotation and zoom management. - Directional and Ambient Lights: Defines the lighting conditions to illuminate the scene. - Grid: A grid structure to represent the ground. - ContactShadows: Adds shadow effects to enhance realism. - Float: Wraps around 3D mesh objects and defines floating properties, including intensity and range. Various geometrical shapes like BoxGeometry, TorusKnotGeometry, and IcosahedronGeometry are included here. 2. routes/+page.svelte: This file handles the ui of the index page and imports all necessary components we need to bring our vibrant design to life. 3. lib/components/app.svelte: This file is where you would typically define the main application layout, including styling and embedding other components. Heading to the Fun Stuff With the boilerplate components explained, we're now ready to dive into the exciting part of building our interactive 3D web experience. In the next section, we'll begin crafting our auto-rotating sphere, and explore how Threlte's robust features will help us bring it to life. Creating a Rotating Sphere Scene In this chapter, we'll walk you through creating an interactive 3D sphere scene using Threlte. We'll cover setting up the scene, the sphere, the camera and lights, and finally the interactivity that includes a scaling effect and color changes. 1. Setting Up the Scene First, we need to import the required components and utilities from Threlte. ` 2. Setting Up the Sphere We'll create the 3D sphere using Threlte's and components. ` 1. : This is a component from Threlte that represents a 3D object, which in this case is a sphere. It's the container that holds the geometry and material of the sphere. 2. : This is the geometry of the sphere. It defines the shape and characteristics of the sphere. The args attribute specifies the parameters for the sphere's creation: - The first argument (1) is the radius of the sphere. - The second argument (32) represents the number of width segments. - The third argument (32) represents the number of height segments. 3. : This is the material applied to the sphere. It determines how the surface of the sphere interacts with light. The color attribute specifies the color of the material. In this case, the color is dynamic and defined by the sphereColor variable, which updates based on user interaction. The roughness attribute controls the surface roughness of the sphere, affecting how it reflects light. 3. Setting Up the Camera and Lights Next, we'll position the camera and add lights to create a visually appealing scene. ` 1. : This component represents the camera in the scene. It provides the viewpoint through which the user sees the 3D objects. The position attribute defines the camera's position in 3D space. In this case, the camera is positioned at (-10, 20, 10). The fov attribute specifies the field of view, which affects how wide the camera's view is. - makeDefault: This attribute makes this camera the default camera for rendering the scene. 2. : This component provides controls for easy navigation and interaction with the scene. It allows the user to pan, zoom, and orbit around the objects in the scene. The attributes within the component configure its behavior: - enableZoom: Disables zooming using the mouse scroll wheel. - enablePan: Disables panning the scene. - enableDamping: Enables a damping effect that smoothens the camera's movement. - autoRotate: Enables automatic rotation of the camera around the scene. - autoRotateSpeed: Defines the speed of the auto-rotation. 3. : This component represents a directional light source in the scene. It simulates light coming from a specific direction. The attributes within the component configure the light's behavior: - intensity: Specifies the intensity of the light. - position.x and position.y: Define the position of the light source in the scene. 4. : This component represents an ambient light source in the scene. It provides even lighting across all objects in the scene. The intensity attribute controls the strength of the ambient light. 4. Interactivity: Scaling and Color Changes Now we'll add interactivity to the sphere, allowing it to scale and change color in response to user input. First, we'll import the required utilities for animation and set up a spring object to manage the scale. ` We'll update the sphere definition to include scaling: ` Lastly, we'll add code to update the color of the sphere based on the mouse's position within the window. ` We have successfully created a rotating sphere scene with scaling and color-changing interactivity. By leveraging Threlte's capabilities, we have built a visually engaging 3D experience that responds to user input, providing a dynamic and immersive interface. Adding Navigation and Scroll Prompt in app.svelte In this chapter, we'll add a navigation bar and a scroll prompt to our scene. The navigation bar provides links for user navigation, while the scroll prompt encourages the user to interact with the content. Here's a step-by-step breakdown of the code: 1. Importing the Canvas and Scene The Canvas component from Threlte serves as the container for our 3D scene. We import our custom Scene component to render within the canvas. ` 2. Embedding the 3D Scene The Canvas component wraps the Scene component to render the 3D content. It is positioned absolutely to cover the full viewport, and the z-index property ensures that it's layered behind the navigation elements. ` 3. Adding the Navigation Bar We use a element to create a horizontal navigation bar at the top of the page. It contains a home link and two navigation list items. The styling properties ensure that the navigation bar is visually appealing and positioned correctly. ` 4. Adding the Scroll Prompt We include a "Give a scroll" prompt with an element to encourage user interaction. It's positioned near the bottom of the viewport and styled for readability against the background. ` 5. Styling the Components Finally, the provided CSS styles control the positioning and appearance of the canvas, navigation bar, and scroll prompt. The CSS classes apply appropriate color, font, and layout properties to create a cohesive and attractive design. ` Head to the github repo to view the full code. Check out the result: https://threlte6-spinning-ball.vercel.app/ Conclusion We've successfully added navigation and a scroll prompt to our Threlte project in the app.svelte file. By layering 2D HTML content with a 3D scene, we've created an interactive user interface that combines traditional web design elements with immersive 3D visuals....

Aug 14, 2023

6 mins

Svelte

State of Svelte Wrap-up

In this State of Svelte event, our panelists discussed updates, LTS releases, and APIs, with Node.js maintainers, technical steering committee members, and collaborators. In this wrap-up, we will take a deeper look into these latest developments, and explore what is on the horizon for Svelte. You can watch the full State of Svelte event on the This Dot Media YouTube Channel. Here is a complete list of the host and panelists that participated in this online event. Hosts: - Tracy Lee, CEO, This Dot Labs, @ladyleet - Rob Ocel, Team Lead & Software Architect, @robocell Panelists: - Scott Spence, Svelte Society, Developer Relations Engineer at Storyblok, @spences10 - Brittney Postma, Founder Svelte Sirens & Software Engineer Design Systems at Provi, @BrittneyPostma - Geoff Rich, Senior Software Engineer, Ordergroove | Svelte Core Team, @geoffrich_ - Simon Holthausen, Software Engineer at Vercel | Full-time Svelte maintainer, @dummdidumm_ - Kevin Åberg Kultalahti, Co-founder & Technical Community Builder at Svelte Society, Main Organizer at Svelte Summit, @kevmodrome Svelte 4 The chat got off to a great start with a discussion about Svelte 4, and what we can expect with that release. Simon spoke about how it will be more of a maintenance update than anything else. This version of Svelte will raise the minimum required Node version and use newer versions of Typescript as well. There will also be other minor breaking changes, but the release will mainly be focused on internally updating the repository by converting it to a mono-repo. As soon as these updates are done, Simon said they will immediately begin work on Svelte 5. Typescript and Svelte Scott brings up the reasons for not using Typescript in Svelte. Simon said a decision was made to transition the Svelte repository from using Typescript to using Javascript. There were questions about why types and type safety were being taken away from the repository. Simon clarified that the repository will be getting rid of .TS files, but they are not getting rid of type checking with Typescript, and the code will still be fully typed checked at the same level as before. The plan is to do it through JS Docs. JS Docs provides the same level of type safety you get through Typescript, but there is no longer a need for a compile step when using JS Docs. There is also no need to ship any Source Maps, and it should be easier to debug. Kevin also wanted to be clear that Typescript can still be used when building a Svelte app. Why Svelte? Rob notes that the official release of Svelte happened about 4 months ago, and asks the panelists how the launch has been going so far. Kevin goes first, talking about how everyone with whom he has talked about it has been very excited about it. He talks about how the form actions and data loading are very popular. In other frameworks, you have to attach event listeners, and then do the fetching on clients. Svelte simplifies all of that, and allows you to get rid of a lot of code by using the features in Svelte. Svelte REPL Kevin talks about the Svelte REPL, and how it plays into why Svelte is getting so big. Svelte isn’t just easy, it’s the fact that it is social in the fact that you can share a REPL and show someone how to do something with Svelte. If you have an issue, you can usually find a solution in the Svelte REPL. Server and Client Geoff talks about this aspect of Svelte. He says that they were treated as two separate entities, and there was talk about how to make them more interconnected so that it’s easier to use the server data, and get it into components. In SvelteKit, you have a load function in a separate file that defines how that data is loaded. Svelte also calls a JSON endpoint and then that component in the JSON data. State Management Geoff brings up the simple state management model that Svelte has, and they really don’t want to give that up by implementing too many things like short syntax. Simon adds that there is no real reason to bloat the syntax in the Svelte files. He doesn’t want the interoperability that Svelte currently offers. Signals vs Store A question is brought up about Signals vs Store, and if they are the same. Simon talks more about how they are related, but they are not necessarily the same. He explains that the API for Store is a little more settled right now where the API for Signals is a little more in exploration. Usability is also different because Signals is more primitive, and everything is composed of functions which you call in a certain way. With Stores, you wrap a store and map the values that are pushed into something different. How the panelists found out about Svelte The latter part of this event focused on how each panelist found Svelte and got involved with it. It was a very interesting part of the conversation to hear the backgrounds of each panelist, and why they got more and more involved with Svelte and everything that was going with it. It went very in depth, and would be worth exploring more by watching the conversation unfold on the event video. Conclusion The panelists were very engaged, and there was a lot of dialogue about Svelte and the exciting things being done. The panelists also finished by bringing up ways to get involved with the Svelte community. You can watch the full State of Svelte event on the This Dot Media Youtube Channel....

Apr 28, 2023

4 mins

Svelte

Avoiding Null and Undefined with NonNullable<T> in TypeScript

Use Cases Use Case 1: Adding Two Numbers Scenario: A function that adds two numbers and returns their sum. But if one of the numbers is undefined or null, it returns the other number as-is. ` In this code snippet, the addNumbers() function takes two parameters, a and b. a is a required parameter of type number, while b is an optional parameter of type number or null. The function uses the NonNullable<T> conditional type to ensure that the return value is not null or undefined. If b is null or undefined, the function returns the value of a. Otherwise, it adds a and b together and returns the sum. To handle the case where b is null or undefined, the code uses the nullish coalescing operator, ??, which returns the value on its left-hand side if it is not null or undefined, and the value on its right-hand side otherwise. Use Case 2: Checking Contact Information Scenario: A class representing a person, but with optional email and phone properties. The contact() function logs the email and phone numbers if they are defined and not null. Otherwise, it logs a message saying that no contact information is available. ` Explanation: In this code snippet, the Person class has a name property and optional email and phone properties. The contact() function checks if both email and phone are not undefined and not null before logging the details. Otherwise, it logs a message saying that no contact information is available. To initialize the properties with null, the constructor uses the nullish coalescing operator, ??. When creating a new Person, you can pass null or undefined as arguments, and the class will interpret them as null. Conclusion Understanding and correctly implementing conditional types like NonNullable<T> in TypeScript is crucial to reduce potential code pitfalls. By reviewing examples of numerical operations and contact information handling, we've seen how this conditional type helps reinforce our code against null or undefined values. This highlights the utility of TypeScript's conditional types not only for enhancing code stability, but also for easing our coding journey. So keep experimenting and finding the best ways to deploy these tools for creating robust, secure, and efficient programs!...

Jun 9, 2023

2 mins

NextJSAWS

AI Leadership: Data-Driven Decision Making & Avoiding "Analysis Paralysis" with Jerry Reghunadh

In this episode of Leadership Exchange, host Rob Ocel chats with Jerry Reghunadh, Senior Director of Enterprise Architecture at Data Nimbus, about leadership, AI adoption, and data-driven decision-making. Jerry shares his career journey, insights on leveraging tools like ChatGPT and Copilot, and strategies for building effective data pipelines. They explore how companies can avoid "analysis paralysis," adopt AI strategically, and evaluate new technologies to solve real-world problems. Tune in for practical advice on aligning innovation with business goals and staying competitive in a rapidly evolving tech landscape. Chapters 00:00 – Introduction 00:31 – Jerry’s Leadership Journey 02:01 – Discussing AI in Leadership 03:59 – Experimenting with AI Tools 06:24 – Overcoming Analysis Paralysis 09:18 – Importance of Early AI Adoption 13:12 – AI’s Impact on Efficiency 14:30 – Sponsor Message 16:26 – Setting Realistic Goals for AI 19:41 – Data Management and AI 23:09 – Is AI Just a Fad? 27:22 – Testing New Technologies 29:56 – Final Thoughts on AI 30:25 – Connect with Jerry 30:44 – Closing Remarks 31:20 – Outro Follow Jerry on Social Media Linkedin: https://www.linkedin.com/in/jerrymannel/ Sponsored by This Dot: thisdot.co...

Nov 18, 2024

1 min

AIEngineering Leadership

Let's innovate together!

We're ready to be your trusted technical partners in your digital innovation journey.

Whether it's modernization or custom software solutions, our team of experts can guide you through best practices and how to build scalable, performant software that lasts.

How to Quickly Build and Deploy a Static Markdown Blog with SvelteKit

Introduction

Prerequisites

Development

Setup project with SvelteKit and SCSS starter kit

Configuring Markdown

Creating posts

Posts Page

Single Post Page

Conclusion

Ian Sam Mungai

You might also like

Harnessing the Power of Threlte - Building Reactive Three.js Scenes in Svelte

State of Svelte Wrap-up

Avoiding Null and Undefined with NonNullable<T> in TypeScript

AI Leadership: Data-Driven Decision Making & Avoiding "Analysis Paralysis" with Jerry Reghunadh

Let's innovate together!

You might also like

Harnessing the Power of Threlte - Building Reactive Three.js Scenes in Svelte

State of Svelte Wrap-up

Avoiding Null and Undefined with NonNullable<T> in TypeScript

AI Leadership: Data-Driven Decision Making & Avoiding "Analysis Paralysis" with Jerry Reghunadh