The spam is strong on this one...

Our requirements for any framework were: MarkDown for blog posts Uses mdsvex Static adapter (100%) Site map Author pages Categories FAST TailwindCSS After looking around we came across the sveltekit blog starter by Josh Collinsworth It didn't cover all of our requirements but it covered using mdsvex, static adapter, categories and being fast. So it seemed like a good foundation. One annoyance: I use Windows, and the way the static rendering works is via an entries list. This list makes use of * wildcard, and this doesn't work when building on Windows. Dev mode works just fine, but you can't build the project. I use Github actions for the build and deploy. This is Linux, and the build works just fine there, so other than occasionally breaking the build, this wasn't a big setback. Getting started I started by adding TailwindCSS, this is a super simple process, just follow the instructions instructions on the Tailwind website for Sveltekit. Adding Author and Category pages I added Author pages, to do this I followed the pattern that Josh had already put in place for blog posts, look at the [post] folder under /blog to see what I mean. In the starter, categories are essentially tags that can be added as a list on a post. I wanted to make categories a little more feature rich. I wanted to associate a colour with each category and I wanted to be able to have some control over the content at the top of each category page. To do this I followed the pattern for Posts and now Authors. So each category has an MD file that get rendered at the top of the category page. I added fetch files for authors and categories, again following the pattern already in place for posts. With this in place, I could quickly get these different pages up and running. I extended posts to pull in the category information from the category pages when a post references a category. Added queries to get all posts for a category as well. I wasn't too concerned about the performance of these queries as this all happens as build time. Table of Content Generation I wanted posts to have a table of content based on the H2 tags within a post. There are lots of way to achieve this, I decided to go with a pre-build step to generate a json file. If you've seen my other post, you will know I was trying to get a site up as quickly as possible, So in my pre-build step I added a call to this code: import fs from 'fs'; import path from 'path'; import { execSync } from 'child_process'; import removeMd from 'remove-markdown'; const directoryPath = path.join(process.cwd(), 'src', 'lib', 'posts'); export function processToc(){ // Loop through all files in the directory fs.readdir(directoryPath, (err, files) => { if (err) { console.error('Could not list the directory.', err); process.exit(1); } files.forEach((file) => { if (path.extname(file) === '.md') { const filePath = path.join(directoryPath, file); const newFilePath = filePath.replace('.md', '.json'); try { // Generate ToC and save to a JSON file const tocJson = JSON.parse(execSync(`markdown-toc --json ${filePath}`)); tocJson.forEach(item => { item.content = removeMd(item.content); }); fs.writeFileSync(newFilePath, JSON.stringify(tocJson)); console.log(`Table of Contents JSON for ${file} has been saved as ${path.basename(newFilePath)}`); } catch (error) { console.error(`Error generating ToC for ${file}: ${error}`); } } }); }); } I then load the table of content for a post in the `/routes/blog/[post]/+page.js` with this line: `const toc = await import(‘../../../lib/posts/${params.post}.json’);` This works pretty well for me, I was able to make use of existing tools (markdown-toc) to get the information to build the table of content. Adding a Sitemap With the different page types in place and the fetch functions created I then worked on the sitemap. To get this to work across the whole site, not just for these pages I did the following: const modules = import.meta.glob(['../**.svelte', '../**/**.svelte', '../**.md','../*/**.md','../*/**.svelte', '!../blog/**' ]) let pages = new Set(); // Use a Set to avoid duplicate entries pages.add({title: siteTitle, path: "/"}); for (let modulePath in modules) { let pathSanitized = modulePath.replace(/^\.\.\//, ""); // Remove the "../" from the beginning let pathParts = pathSanitized.split('/'); // Split the path by "/" // Check if the path has more than one part (indicating a folder) if (pathParts.length > 1) { let folderPath = '/' + pathParts.slice(0, -1).join('/'); // Join the parts back together, excluding the last part (file name) let title = pathParts.slice(-2)[0]; //Lets get the last date the page was edited. const filePath = path.resolve('src', 'routes', ...pathParts); const stats = await fs.stat(filePath); pages.add({title: title, path: folderPath, lastModified: stats.mtime.toISOString()}); // Add the folder path to the set } } This is a subsection from the overall sitemap page list builder. For authors, categories, and posts, I used the fetch functions and constructed the path. Each of the post types has an update date that I used for the lastModified. Performance The site was already very fast, sveltekit and the static adapter are really good. One thing that I didn't like was that modules are set to preload, this is advantageous for an SPA but less so for a static site. It impacted on the results I got from page insights. I wasn't the first person to have issues github.com/vitejs/vite/issue… — Although this is “closed” i found the issue to persist. After much messing about, I landed on the following in hooks.server.js import * as cheerio from 'cheerio'; /** * Modifies the response in-place to fix the link rel="modulepreload" issue. * * Note that this fix causes significant server-side processing time increase - * do not use long term, only proper fix is to fix Vite. * * For the source of the issue of loading times please see github.com/vitejs/vite/issue… * */ function fixLinkModulePreloadIssue(body) { const $ = cheerio.load(body); const header = $("head"); const bodyEl = $("body"); $('link[rel="modulepreload"]').each(function(idx, elem) { const $this = $(elem); const src = $this.attr('href'); $(`<script defer type="module" src="${src}"></script>`).appendTo(bodyEl); $this.remove(); }); return $.html(); } /** @type {import('@sveltejs/kit').Handle} */ export async function handle({ event, resolve }) { const response = await resolve(event); if (response.headers.get('Content-Type') === "text/html") { // Convert the response body to text to process it const body = await response.text(); // Get the modified HTML content const modifiedBody = fixLinkModulePreloadIssue(body); // Create a new Response object with the modified body const newResponse = new Response(modifiedBody, { // Copy the status and headers from the original response status: response.status, headers: response.headers }); return newResponse; } return response; } This is a modified version of an answer on this thread: stackoverflow.com/questions/… You should only do this if you are creating a static site, it will impact performance otherwise, in a static site it only impacts the build time (which is still fine btw). Build & Host As we do for all of our code, we chose to build with github actions. This was very easy to get up and running. We build within the action and at the end push the static output to a branch, making use of ghp-import For hosting we chose Cloudflare pages, its fast, easy and for us, free. So its really a no-brainer. All we had to do was connect it to github and point it at the gh-pages branch. Our github action workflow: name: Build and Release on: push: branches: - main permissions: contents: write issues: write pull-requests: write jobs: build-and-release: runs-on: ubuntu-latest steps: - name: Checkout code uses: actions/checkout@v2 - name: Set up Node.js uses: actions/setup-node@v2 with: node-version: '20.11.0' - name: Install markdown-toc run: npm install -g markdown-toc - name: Install dependencies run: npm install - name: Build project run: npm run build # Deploys the built site to the branch - name: Install ghp-import run: pip install ghp-import - name: Deploy to GitHub Pages run: ghp-import -n -p -f -o build env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} Conclusion With some small modification you can create fast and flexible static sites with Sveltekit and markdown. A huge thanks to Josh for creating and maintaining the starter site, if you go this far please go give him a star on github. github.com/josh-collinsworth… We are super happy with the new TemplateTo website, there is more work to be done but we have a great foundation.