Svelkit: Create from scratch

README.md

Create Skeleton Sveltkit app

Instructions heavily based on this article.

Starting from scratch

1. Create project:

   npm init svelte@next app-name

   • Choose Skeleton App
   • Default: say no to the options (or not)
     • Type checking: None
     • ESLint: No
     • Prettier: No
     • Playwright: No
2. Install the things:

   npm install

Initial setup

1. Create global page template (SK layout): src/routes/__layout.svelte.
2. Add global stylesheet(s) to project: src/lib/styles/main.css
   • Styles can go anywhere?
3. Import main.css into __layout.svelte

   <!-- __layout.svelte -->
   <script>
   import '$lib/styles/style.css'
   </script>

Create content

1. Create routes. Examples:
   • src/routes/index.svelte
   • src/routes/about.svelte
   • src/routes/[whatevs]/index.svelte

Markdown support

Best option I can find: mdsvex.

1. Install

   $ npm i -D mdsvex svelte-preprocess

2. Configure

   import sveltePreprocess from 'svelte-preprocess'
   import { mdsvex } from 'mdsvex'
   
   const config = {
   kit: { /* Kit options here */ },
   
   extensions: ['.svelte', '.md'],
   
   preprocess: [
       sveltePreprocess(),
       mdsvex({
       extensions: ['.md']
       })
   ]
   }

Nested markdown layout

1. Add a custom layout that auto adds the date as a level one heading to a blog entry.

   • Create routes/blog/_post.svelte

     // svelte.config.js
     
     /* Imports here */
     
     const config = {
     /* ...Other config properties here */
     
     preprocess: [
         sveltePreprocess(),
         mdsvex({
           extensions: ['.md'],
           layout: {
               journal: 'src/routes/blog/_post.svelte'
           }
         })
     ]
     }

2. To add layout content

   <!-- _post.svelte -->
   <script>
   export let date
   </script>
   
   <h1>{date}</h1>
   
   <slot /> 

---

Attributions

• Let's learn SvelteKit by building a static Markdown blog from scratch