josh-collinsworth/sveltekit-blog-starter

A preconfigured SvelteKit static blog starter, with Sass, Markdown, MDSvex, Rehype, background preloading, and more. See the README for full details.

SvelteKit static blog starter

This starter contains everything you need to get up and running with SvelteKit as a static site generator for your Markdown (and Svelte)-powered blog. Check out the demo here, or view the GitHub repo here.

Features

• 🎉 Fully up-to-date with SvelteKit 2!
• ⚡️ Super fast static site generation with hydration. Every route is compiled down to static HTML and routed with (optional) JavaScript, thanks to the SvelteKit static adapter (pre-installed)
• 📦 Zero-config preloading for automatic, fast background preloading of all top-level pages
• ✍️ Markdown support with a pre-configured blog
  • 📑 Pagination included (can customize posts per page)
  • ✅ Category pages included
  • 💬 Posts JSON API
• 📝 mdsvex pre-installed--use Svelte components inside Markdown!
  • 🔗 Rehype plugins are included to generate unique heading IDs, for direct linking
• 📱 Responsive and accessible defaults; includes a "skip to content" link and accessible mobile nav menu
• 🔄 Page transitions (fancy!)
• 🔎 Basic SEO for blog posts (strongly recommend checking that out for yourself, though)
• 📰 RSS feed set up and ready to go (though it could also likely benefit from some optimization); just update src/lib/config.js
• 💈 Basic CSS ready to use, customize, or remove! Want to use Sass or Tailwind instead? Just install them! (Directions for Tailwind can be found here.) Prefer to write your own? Delete static/css and add your own links in +layout.svelte.
• ℹ️ Fonts included. (No more built-in Google tracking.)

Quick Start

Clone or download this repo, then install the dependencies and run the dev server:

npx degit https://github.com/josh-collinsworth/sveltekit-blog-starter my-sveltekit-blog
cd my-sveltekit-blog
npm install
npm run dev -- --open

That should get a dev server up and running (assuming you have npm and Node installed already). Any saved changes to components and styles should auto-refresh blazingly fast.

Now all you need to do is:

• Update the src/lib/config.js file
• Drop your Markdown posts into src/lib/posts
• Optionally, customize the styles in static/css

GLHF! Details below. 👇

(Feel free to open an issue if you come across one.)

Customization

Be sure to update src/lib/config.js to reflect your site's domain, preferences, etc. This is also where the nav menu can be updated.

It's very important to update this file with the specific details of your site. Info from this file is used in your RSS feed and SEO meta tags, so don't launch without updating it.

Adding new posts

Adding new posts is as simple as dropping a new .md file into src/lib/posts. New posts will automatically show up on the site, be added to the posts API, and any category pages.

A few demo Markdown posts are included, and highlight some of the features of this starter. These demo posts can be updated or removed, but it may be best to use one as a starting point, just for the frontmatter properties.

If you want to use other frontmatter properties in the template (or just modify the layout), make changes in src/routes/blog/[post]/+page.svelte.

⚠️ Note: posts should have a date and an excerpt defined in the frontmatter. They're sorted by date, and use excerpt in page meta tags (for SEO, social sharing, etc.) There are also other frontmatter properties used to enhance the site experience, like the coverWidth and coverHeight, which are used in the template to reserve space for the image, minimizing cumulative layout shift.

The starter will still work without date properties in your posts, but the sorting won't be right. Similarly, you can have posts without an excerpt, but your SEO/social previews will be sub-optimal.

Also: while there's no link to it by default, /blog/category exists as an archive of all your post categories.

Pagination

Pagination automatically kicks in once you have more posts than the postsPerPage option in src/lib/config.js. This means you won't see the pagination right away unless you either change postsPerPage to a very low number, or add several more Markdown files to the src/lib/posts folder.

Note: both the normal /blog feed and the category feeds at /category/[category] are automatically paginated.

RSS

This starter also includes a basic RSS feed. It's very minimal, so you may want to tweak it depending on your XML feed needs, but it does work out of the box.

Update the config details in src/lib/config.js to get your site's unique info correct. (You could also pull this info in other places, or add to it, to keep things consistent, but that's up to you.)

CSS

By default, all CSS in this starter is global vanilla CSS. It's located in static/css (linked from +layout.svelte).

I didn't use component <style> blocks because, while component-based scoped CSS is very nice, it can also be hard to track down and update. Since this is a starter, I felt it was best to keep all the styles together in one place, and let you, the author, decide whether you want to keep them as they are, move to scoped CSS instead, or use a mixture.

(Note: previous versions of this starter came with Sass pre-installed. I've removed it now because it seems like vanilla CSS is almost entirely as powerful as Sass now anyway, and because it's probably easier for people who want it to opt in than for those who don't to opt out.)

Site navigation menus

To add or remove pages from the site's navigation menu (in both the header and footer), edit the navItems array in src/lib/config.js. Items there will be automatically added to the main menu in the header and footer, and the mobile nav menu. They'll also have proper classes and ARIA attributes to show when they're the current page.

Colors

This starter has a default color palette (Credit to coolors.co) but you can easily override those in the CSS. The color variable values can be found in static/css/vars.css.

Fonts

Previously, fonts were loaded from Google Fonts, but now they're hosted locally, for moderately better performance and a 100% reduction in tracking.

The fonts in question are Atkinson Hyperlegible by the Braille Institute, and Fira Code by Nikita Prokopov. The fonts are open-source; please consider supporting the authors.

The font files themselves are hosted in static/fonts. They are linked from the fonts.css file, and set in typography.css.

Components

This starter includes only a handful of structural components, for the header, footer, site nav, posts lists (since lists of posts are repeated in several locations), and pagination (plus a couple that are actually just SVG icons).

You're welcome and encouraged to create your own (using them in Markdown is fun!); I just didn't want to push authors too far in any component direction right off the bat.

Static files

Things that should just live in the site root of the finished site (like a robots.txt file, favicon, or maybe images) should go in the static folder. If you link to them, use the root path (e.g., /images/my.png, not ../static/images/my.png).

(Placeholder images credit Unsplash; photographer names are in the file names.)

Building, deploying and hosting

The build command (from package.json) is simply:

npm run build

You can use that as your build command if your repo is connected to a host like Netlify or Vercel, which automatically deploys.

Or, if you prefer, you can run npm run build locally to generate the static files. That will result in a build folder you can upload anywhere a static site can be hosted.

Use npm run preview after a build to preview the built site locally.

Adding Tailwind

The directions for adding Tailwind can be found in the Tailwind docs, here.

The only thing worth noting is: this starter's existing CSS files won't be in the Tailwind path after following those steps. You can either just delete them and start from scratch; or, you can copy the CSS into your Tailwind app.css file. (Or, move the CSS files into src/lib, and import each one individually.)

It's up to you. Just note that Tailwind automatically applies some defaults, so even if you do choose to keep this starter's default styling, your site might not look the same after installing Tailwind. (Headings, for example, just look like plain text when using Tailwind, unless classes are applied.)

Further documentation

I assume at least a little bit of knowledge of SvelteKit and/or similar static site generators here, but be sure to read the SvelteKit docs for more info.

Contributing

I've tried my best to make sure this starter is up to date with the latest SvelteKit, but I'm sure improvements can be made. Feel free to visit the repo and submit a pull request, or contact me directly.

sveltekit-blog-starter's Issues

github page

when i made it into a github page it did not look at all as the dev version

Category won't fully populate for blog posts

I noticed that under the category section of my blog that it is not fully populated. I believe this is caused by the line below

sveltekit-blog-starter/src/routes/blog/category/+page.server.js

Line 2 in 4563149

const res = await fetch(`${url.origin}/api/posts.json`)

when the posts.json is being fetched, it's being limited with the parameter postsPerPages, which only retrieves the first page of blog posts. However, to properly populate the category page, it needs to retrieve the entirety of posts.

It doesn't currently have a way to accept an argument

Components don't render into built posts

I'm not currently able to render Svelte components inside of the posts that are pre-rendered at the build stage.

The postContent is compiled via an {@html data.postContent} tag, which seems to ignore the script and style tags and simply output the html. Or maybe not quite that, but the end result is that the component isn't functional inside of these post pages, just displayed.

Here is my repo showing this:
https://github.com/lakebayagency/test-boinger

Boinger is a component from the mdsvex playground: https://mdsvex.com/playground

To see the problem in action, go to the home page and observe that the boinger works fine inside of this page, which is rendered using a svelte:component tag.

Click the link below that, which will take you to a post that also references the Boinger component, but doesn't actually work.

Not sure what possible solutions are.

`rss.xml` return `404` in prod

rss.xml returns a 404 ¯_(ツ)_/¯

Could be an issue with Netlify, same happens on mine. (GitHub)

Tried clearing cache and redeploying but same thing. Log says it gets generated so idk.

2:26:54 AM: .svelte-kit/output/server/entries/endpoints/api/rss.xml/_server.js                                 1.52 KiB

I forked this repo and added features

Thanks for creating this repo!

I just wanted you and other people who come across is about my fork which has these features:

• It lives under /blog instead of the top level so you can keep your main website separate.
• Static site generation with hydration. Every route is compiled down to static HTML and routed with (optional) JavaScript, thanks to the SvelteKit static adapter.
• Markdown support with GitHub Flavored Markdown (GFM).
• Styles per component along with a single global stylesheet for general styles (mostly article content styles). With CSS variables and CSS nesting, there's no need for SASS!
• mdvsex support so you can use Svelte components in your Markdown files!
• Automatic page transitions.
• Responsive and accessible defaults including a "skip to content" link, accessible navigation and components, and accessible emojis.
• Basic SEO for blog posts.
• RSS feed for users to easily subscribe to new posts.
• Draft blog post functionality so you can save to the same place but not have the link show up in your listings or counts.
• Footnotes functionality
• Blog excerpt functionality so that you can show the start of your blog posts on the blog homepage instead of the description.
• Tags (categories) functionality which make looking for specific types of posts easy.
• Advanced pagination where only the nearest 5 pages are shown along with "first" and "last" page buttons when applicable.
• Support for year sub-directories within posts. This makes organizing your posts much more pleasant. You could easily add the year to the URL if you'd like.
• Recent posts functionality if you want to show the last X recent posts.
• Archive functionality which is similar to the blog listing but only shows the title and tags with a different layout that focuses on the year it was published. Demo.
• Collapsible sidebar.
• Tweet and CodePen embeds.
• Image lightboxing functionality with built in image serving for high DPI devices.
• High quality search functionality using Pagefind.
• Clickable section headings to make sharing to a particular part of a post a breeze.
• Table of contents for blog posts that outlines the sections of each page.
• Tweet button to let users more easily share to Twitter (X).
• Automatic widow prevention to make your blocks of text look better.
• Email signup functionality. It makes use of Mailchimp, but you could easily switch out the email provider for another of your choice.

can you share how to install tailwind? the standard installation as explained in the tailwind site doesn't work

Quick fix to PostsList component to handle undefined excerpts

Simple fix to skip rendering "undefined" if your post doesn't have an excerpt:

{#if post.excerpt !== undefined}
	{post.excerpt}
{/if}

Categories sort

Hey dude, so, been using your template to learn a bit of Sveltekit, thanks for all the work.

You'll notice the blog/category categories isn't correctly alphabetically sorted, here's the code I used to fix it:

	const sortedUniqueCategories = Object.values(uniqueCategories).sort((a, b) => {
		return a.title.localeCompare(b.title);
	});

Allow plugable themes

Hugo and many other static site generators provide multiple pre-built themes, like https://themes.gohugo.io/ that provides nearly 200 themes. This is really handy to quickly explore different styles and get started. I would be great to provide a plugin-like infrastructure that allows users to create a unified theme, so that people can start to write new themes. Once this is done, one can start to think about creating more themes and publishing them on some web pages.

I'm not sure what would be the best technical way to do this, but we can maybe let the user define an alias called mainTheme to some module (say myGreatTheme, that might either be installed via npm, or that is cloned from some repository, allowing the user to easily tweak minor theme options), maybe via https://www.npmjs.com/package/module-alias or maybe some sveltekit alias like https://medium.com/@rizqyhi/adding-new-path-alias-in-sveltekit-1127a1138e7 (to be honest I know very little about how modules work in js), so that later this library could run:

<script>
  import { Header } from 'mainTheme'; // See that we use `mainTheme` here instead of `$lib/component`
  // …
</script>
…
<Header someOptionalProps="foo">
  …
</Header>

Ideally, you would also:

• document a number of components that are typically needed to be present (possibly refactoring the components provided by this lib to allow greater configurability)
• provide a fallback mechanism, so that if myGreatTheme does not provide, say, Header, then we use some default components for greater backward compatibility
• provide a way to send to the theme with some options, like maybe mainTheme comes in a dark and light style.
• allow the user to easily change a nested component, like maybe a given theme uses some buttons, then the theme might want to be able to allow the user to overwrite the theme of all buttons at once.

I guess that one can get inspired by how flowbite or skeleton work to provide customizable components.

NavBar missing from the display in the footer

Hey, I noticed that in your footer component, the MainNav component is listed there but it doesn't appear in the build. I recently updated the base of my blog on the latest commits, and I noticed that the MainNav component is now missing in my footer as well.

sveltekit-blog-starter/src/lib/components/Footer.svelte

Line 7 in a0e50de

<MainNav />

Any suggestions to fix this?

`font: inherit` overrides heading `--accentFont`

Problem: Changing the --accentFont CSS Variable does not affect heading font-family.

Root cause: Line 7 of _layout.scss is causing the headings to inherit from the body text --primaryFont CSS Variable.

Potential Solutions:

• Remove Line 7. This fixes the heading font-family issue but may cause other problems?
• Increase the specificity of the :where declaration on Line 3 of _typography.scss

Atom link in RSS feed

Hello, thanks for sharing this starter project.

I was looking at the RSS feed code and I saw this:

<atom:link href="https://${siteURL}/rss.xml" rel="self" type="application/rss+xml"/>

Isn't it supposed to point to the feed itself, which I believe is at /api/rss.xml? So should it be:

<atom:link href="https://${siteURL}/api/rss.xml" rel="self" type="application/rss+xml"/>

?

npm run build issue

velte-kit/output/client/_app/immutable/nodes/5.lgHxx4ap.js                                      6.84 kB │ gzip:  2.72 kB
.svelte-kit/output/client/_app/immutable/entry/app.6DZ-rLV4.js                                    6.93 kB │ gzip:  2.36 kB
.svelte-kit/output/client/_app/immutable/chunks/index.T8xtbQjq.js                                 9.97 kB │ gzip:  4.21 kB
.svelte-kit/output/client/_app/immutable/nodes/0.u6SMy1NS.js                                     11.77 kB │ gzip:  4.32 kB
.svelte-kit/output/client/_app/immutable/chunks/README.qbVoyzal.js                               21.19 kB │ gzip:  7.48 kB
.svelte-kit/output/client/_app/immutable/entry/start.dDGYyjlR.js                                 27.86 kB │ gzip: 11.20 kB
✓ built in 2.45s
  301 /blog/page -> /blog
  301 /blog/category/*/page/* -> /blog/category/*
  301 /blog/category/page/* -> /blog
  301 /blog/page/* -> /blog
SvelteKitError: Not found: /eyal.com/api/rss.xml
    at resolve2 (file:///Users/eyal/Code/p_35_blog/.svelte-kit/output/server/index.js:2831:18)
    at resolve (file:///Users/eyal/Code/p_35_blog/.svelte-kit/output/server/index.js:2663:34)
    at #options.hooks.handle (file:///Users/eyal/Code/p_35_blog/.svelte-kit/output/server/index.js:2905:71)
    at respond (file:///Users/eyal/Code/p_35_blog/.svelte-kit/output/server/index.js:2661:43) {
  status: 404,
  text: 'Not Found'
}

node:internal/event_target:1062
  process.nextTick(() => { throw err; });
                           ^
Error: 404 /eyal.com/api/rss.xml (linked from /)
To suppress or handle this error, implement `handleHttpError` in https://kit.svelte.dev/docs/configuration#prerender
    at file:///Users/eyal/Code/p_35_blog/node_modules/@sveltejs/kit/src/core/config/options.js:201:13
    at file:///Users/eyal/Code/p_35_blog/node_modules/@sveltejs/kit/src/core/postbuild/prerender.js:64:25

I'm getting the rss.xml error - any idea why? I do have the rountes/api/rss.xml/+server.js file in place (unchanged)

adapter-auto to help with pre-rendering

Fairly new to the the world of Sveltekit but came up against this a few times today deploying on Vercel.

I don't know how this fits in with your setup, but I found the new adapter-auto did the job fixing my prerendering issues. Maybe it'll work with the static one as well deployed sites?

In svelte.config.js

import adapter from '@sveltejs/adapter-auto';

and adding "@sveltejs/adapter-auto": "next", to package.json.

config.kit.target is no longer required, and should be removed

When npm run dev it fails to start, with this error message:
"config.kit.target is no longer required, and should be removed"

Solution:
In svelte.config.js under "kit" remove target: '#svelte', in line 33

Use with Cloudflare Pages

Hi Josh. Thanks for this excellent repo. I'm a total noob with SvelteKit sorry if this is a dumb question. I am trying to publish my site to Cloudflare Pages.

I have changed

"@sveltejs/adapter-static": "^1.0.0-next.42",

to

"@sveltejs/adapter-cloudflare": "^1.0.0-next.38",

And then also used import adapter from '@sveltejs/adapter-cloudflare' in svelte.config.js.

However, when Cloudflare builds the app it's borking with complaints about the pre-rendering. I guess this is because you've set things up to only support pre-rendering, and when I replaced adapter-static with adapter-cloudflare it's undoing your configuration.

Error: The following routes were marked as prerenderable, but were not prerendered:
--
08:10:15.125 | - api/posts/category/[category],  - api/posts/page/[page],  - blog/category/page/[page],  - blog/page/[page],  - blog/category/[category]/page,  - blog/category/[category]/page/[page]

Please could you shed any light on what I'm doing wrong? Thank you.

Prerendered content generates initial 500 status, then 200 on refresh

I cloned the repo today (the version that includes the PR to update deps to SK 1.0), installed the dependencies, committed and pushed to github.

Then I set up a project in vercel. I did nothing to the settings - build defaults to detecting SvelteKit and I adjusted none of the commands. I deployed.

Home page looks great! :)

But when I click on the blog link, I get a 500 error.

On refresh, the page renders as expected.

The same happens with every post inside of this page - initial 500, then displays.

This doesn't happen locally.

My next step is to test a local build and preview, but I'm running out of time this morning and wanted to get this issue written first.

I'll update with additional findings.

I can't see any markdown posts in the build.

It was stated that I only had to drop a .md file somewhere and it would be available automatically.
The conclusion I'm making is that "npm run build" has to be run every time I publish a new post.
I was hoping this project could be dropped at any file server, like Google Cloud Storage and work directly.
Like this static project, made with svelte:

https://storage.googleapis.com/bildbanken2/index.html

(I had to add index.html to the url, as it is not served by a web server.)

Get svelte components working properly

Hey @josh-collinsworth been trying to get components working properly in the markdown posts.

Currently they're able to import the HTML, but the CSS and JS elements are broken, or just plain don't import.

I've played around with the config - I believe the mdsvex() needs to be preprocessed, but if I do that, it breaks pretty much everything. The blog index, the post page etc.

Any ideas/thoughts on how to get this working without breaking the blog?

error when trying to install NodeJS (modules) dependencies using npm

We are in the process of containerization a NodeJS application and running into an error when trying to install NodeJS (modules) dependencies using npm. The error message says, “ECONNREFUSED” followed by the IP and 443 port number.

We initially thought that it might be due to the proxy configuration and set the proxy configuration to null; however, that has been ruled out and did not resolve the issue.

"npm config set proxy null
npm config set https-proxy null"

Please see the below contents of Dockerfile and the error message.

Any help or guidance you can provide would be greatly appreciated.

Thanks in advance!

---

Dockerfile:

FROM node

Create app directory

RUN mkdir /app
WORKDIR /app

Install app dependencies

A wildcard is used to ensure both package.json AND package-lock.json are copied

where available (npm@5+)

COPY package*.json /app

RUN npm cache clear --force
RUN npm cache verify

#RUN npm config set proxy null
#RUN npm config set https-proxy null

RUN npm config set registry https://registry.npmjs.org/ --global
RUN npm config set strict-ssl false
RUN npm set maxsockets 3
RUN npm -version
RUN node -v

#RUN npm install
RUN npm install -g [email protected]

If you are building your code for production

RUN npm ci --only=production

Bundle app source

COPY . .

EXPOSE 5000
CMD [ "node", "app.js" ]

---

ERROR:

STEP 12/15: RUN npm install -g [email protected]
npm ERR! code ECONNREFUSED
npm ERR! syscall connect
npm ERR! errno ECONNREFUSED
npm ERR! FetchError: request to https://registry.npmjs.org/npm failed, reason: connect ECONNREFUSED 104.16.25.35:443
npm ERR! at ClientRequest. (/usr/local/lib/node_modules/npm/node_modules/minipass-fetch/lib/index.js:130:14)
npm ERR! at ClientRequest.emit (node:events:513:28)
npm ERR! at TLSSocket.socketErrorListener (node:_http_client:488:9)
npm ERR! at TLSSocket.emit (node:events:525:35)
npm ERR! at emitErrorNT (node:internal/streams/destroy:151:8)
npm ERR! at emitErrorCloseNT (node:internal/streams/destroy:116:3)
npm ERR! at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
npm ERR! FetchError: request to https://registry.npmjs.org/npm failed, reason: connect ECONNREFUSED 104.16.25.35:443
npm ERR! at ClientRequest. (/usr/local/lib/node_modules/npm/node_modules/minipass-fetch/lib/index.js:130:14)
npm ERR! at ClientRequest.emit (node:events:513:28)
npm ERR! at TLSSocket.socketErrorListener (node:_http_client:488:9)
npm ERR! at TLSSocket.emit (node:events:525:35)
npm ERR! at emitErrorNT (node:internal/streams/destroy:151:8)
npm ERR! at emitErrorCloseNT (node:internal/streams/destroy:116:3)
npm ERR! at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
npm ERR! code: 'ECONNREFUSED',
npm ERR! errno: 'ECONNREFUSED',
npm ERR! syscall: 'connect',
npm ERR! address: '104.16.25.35',
npm ERR! port: 443,
npm ERR! type: 'system'
npm ERR! }
npm ERR!
npm ERR! If you are behind a proxy, please make sure that the
npm ERR! 'proxy' config is set properly. See: 'npm help config'

npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2022-11-29T18_24_19_209Z-debug-0.log
Error: error building at STEP "RUN npm install -g [email protected]": error while running runtime: exit status 1

Pagination isn't working as expected

hey @josh-collinsworth, I've been working to get my blog up and running but I've noticed that the pagination isn't working as expected. On my blog, I have six entries, the second page is indicated, but when I click it, I get redirected to the first page.

• https://alpha.teonbrooks.com/blog
• https://alpha.teonbrooks.com/api/posts/count

I also tried troubleshooting it with this original repo and I get the same redirect to the first page. any insights?

{#key path} in layout

The purpose of key is to destroy what's inside it. I believe using this in the __layoout is going to lead to some pretty hefty layout thrashing.

npm run build error

When I do a git clone; cd repo; npm i; npm run build... it show the following error on missing file/folder...

.svelte-kit/output/server/index.js 80.14 kB
301 /blog/page -> /blog
301 /blog/category/page/* -> /blog
301 /blog/page/* -> /blog
node:fs:600
handleErrorFromBinding(ctx);
^

Error: ENOENT: no such file or directory, open 'C:\Users\xquis\Documents\develop\sveltekit-blog-starter.svelte-kit/output/prerendered/pages/api/posts/page/'
at Object.openSync (node:fs:600:3)
at writeFileSync (node:fs:2221:35)
at save (file:///C:/Users/xquis/Documents/develop/sveltekit-blog-starter/node_modules/@sveltejs/kit/src/core/prerender/prerender.js:348:4)
at visit (file:///C:/Users/xquis/Documents/develop/sveltekit-blog-starter/node_modules/@sveltejs/kit/src/core/prerender/prerender.js:212:3) {
errno: -4058,
syscall: 'open',
code: 'ENOENT',
path: 'C:\Users\xquis\Documents\develop\sveltekit-blog-starter\.svelte-kit/output/prerendered/pages/api/posts/page/'
}

Node.js v18.13.0
[vite-plugin-sveltekit-compile] Prerendering failed with code 1
error during build:
Error: Prerendering failed with code 1
at ChildProcess. (file:///C:/Users/xquis/Documents/develop/sveltekit-blog-starter/node_modules/@sveltejs/kit/src/exports/vite/index.js:551:15)
at ChildProcess.emit (node:events:513:28)
at ChildProcess._handle.onexit (node:internal/child_process:291:12)
PS C:\Users\xquis\Documents\develop\sveltekit-blog-starter>

Getting error while trying to build the project

Hello, I am pretty new to Svelte world and landed here following your awesome post on how to create a MD blog using sveltekit. Thank you for all the effort, I played around with the project in development mode and the level of time and effort put into this amazing work shows well.

When I try to build the project (after cloning it from github), it errors out with the following message. Any idea what I am doing wrong ?
Error message gives no clue as to what's missing.

Steps executed:

1. Clone the repo

git clone https://github.com/josh-collinsworth/sveltekit-blog-starter.git

2. CD into sveltekit-blog-starter and install the dependencies.

cd sveltekit-blog-starter
npm install

3. Run the project. Everything works fine am able to open every single post and page.

npm run dev

5. Build the project:

npm run build

6. Throws the below error.

. . .
.svelte-kit/output/server/chunks/README.js                                                     11.28 KiB
  301 /blog/page -> /blog
  301 /blog/category/page/* -> /blog
  301 /blog/page/* -> /blog
node:fs:585
  handleErrorFromBinding(ctx);
  ^

Error: ENOENT: no such file or directory, open 'C:\Dev\nodejs\svelte-static-blog\sveltekit-blog-starter\.svelte-kit/output/prerendered/pages/api/posts/category/*'
    at Object.openSync (node:fs:585:3)
    at writeFileSync (node:fs:2155:35)
    at save (file:///C:/Dev/nodejs/svelte-static-blog/sveltekit-blog-starter/node_modules/@sveltejs/kit/src/core/prerender/prerender.js:317:4)
    at visit (file:///C:/Dev/nodejs/svelte-static-blog/sveltekit-blog-starter/node_modules/@sveltejs/kit/src/core/prerender/prerender.js:196:3) {
  errno: -4058,
  syscall: 'open',
  code: 'ENOENT',
  path: 'C:\\Dev\\nodejs\\svelte-static-blog\\sveltekit-blog-starter\\.svelte-kit/output/prerendered/pages/api/posts/category/*'
}
[vite-plugin-svelte-kit] Prerendering failed with code 1
error during build:
Error: Prerendering failed with code 1
    at ChildProcess.<anonymous> (file:///C:/Dev/nodejs/svelte-static-blog/sveltekit-blog-starter/node_modules/@sveltejs/kit/src/exports/vite/index.js:443:15)
    at ChildProcess.emit (node:events:520:28)
    at Process.ChildProcess._handle.onexit (node:internal/child_process:291:12)

If it helps, this is the content of my package.json file:

{
  "name": "sveltekit-blog-starter",
  "version": "1.4.2",
  "scripts": {
    "dev": "vite dev",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
    "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
  },
  "devDependencies": {
    "@sveltejs/adapter-static": "^1.0.0-next.42",
    "@sveltejs/kit": "next",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-svelte3": "^3.2.1",
    "mdsvex": "^0.9.8",
    "prettier": "^2.4.1",
    "prettier-plugin-svelte": "^2.4.0",
    "rehype-autolink-headings": "^6.1.0",
    "rehype-slug": "^5.0.0",
    "sass": "^1.43.4",
    "svelte": "^3.42.6",
    "vite": "^3.1.0"
  },
  "type": "module",
  "dependencies": {
    "just-throttle": "^4.0.1",
    "svelte-preprocess": "^4.9.8"
  }
}

pnpm build failed

Error when building blog

First, I want to say thanks so much for your blog post and this blog starter. It's really helped me with learning more about svelte and sveltekit.

I was trying to build the website but I keep running into this problem below. I've tried troubleshooting but I'm not exactly sure what's going wrong here. Do you have any insights?

  301 /blog/page -> /blog
file:///Users/teonbrooks/codespace/_websites/sveltekit-blog-starter/node_modules/@sveltejs/kit/src/core/prerender/prerender.js:429
		throw new Error(
		      ^

Error: The following routes were marked as prerenderable, but were not prerendered:
  - api/posts/category/[category],  - api/posts/page/[page],  - blog/category/page/[page],  - blog/page/[page],  - blog/category/[category]/page,  - blog/category/[category]/page/[page]

See https://kit.svelte.dev/docs/page-options#prerender-troubleshooting for more info
    at prerender (file:///Users/teonbrooks/codespace/_websites/sveltekit-blog-starter/node_modules/@sveltejs/kit/src/core/prerender/prerender.js:429:9)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

Node.js v18.0.0
[vite-plugin-svelte-kit] Prerendering failed with code 1
error during build:
Error: Prerendering failed with code 1
    at ChildProcess.<anonymous> (file:///Users/teonbrooks/codespace/_websites/sveltekit-blog-starter/node_modules/@sveltejs/kit/src/exports/vite/index.js:438:15)
    at ChildProcess.emit (node:events:527:28)
    at ChildProcess._handle.onexit (node:internal/child_process:291:12)

api routes are not pre-renderable 😕

Just want to point this out because I think the build step is currently broken [with the latest HEAD at time of writing], but I'm curious if you're seeing different results.

Trying to figure out how to get sveltekit's prerendering to ignore all my api/ routes because they're not prerenderable?
I've set:

export const prerender = 'auto'

in my +layout.js hoping that would figure out the difference? true and 'auto' produce the same errors 😕

stack traces

Error: api/rss.xml is not prerenderable
    at render_endpoint (file:///Users/jasonkurian/src/github.com/jakxz/jakxz.github.io/.svelte-kit/output/server/index.js:461:11)
    at resolve2 (file:///Users/jasonkurian/src/github.com/jakxz/jakxz.github.io/.svelte-kit/output/server/index.js:2370:28)
    at async respond (file:///Users/jasonkurian/src/github.com/jakxz/jakxz.github.io/.svelte-kit/output/server/index.js:2429:12)
    at async globalThis.fetch (file:///Users/jasonkurian/src/github.com/jakxz/jakxz.github.io/node_modules/.pnpm/@[email protected]_qevq5tvhizyxp44gfhkn6m3ljq/node_modules/@sveltejs/kit/src/core/prerender/prerender.js:130:21)
    at async load (file:///Users/jasonkurian/src/github.com/jakxz/jakxz.github.io/.svelte-kit/output/server/entries/pages/_layout.js:5:17)
    at async load_data (file:///Users/jasonkurian/src/github.com/jakxz/jakxz.github.io/.svelte-kit/output/server/index.js:1360:16)
    at async file:///Users/jasonkurian/src/github.com/jakxz/jakxz.github.io/.svelte-kit/output/server/index.js:1901:18
Error: api/posts.json is not prerenderable
    at render_endpoint (file:///Users/jasonkurian/src/github.com/jakxz/jakxz.github.io/.svelte-kit/output/server/index.js:461:11)
    at resolve2 (file:///Users/jasonkurian/src/github.com/jakxz/jakxz.github.io/.svelte-kit/output/server/index.js:2370:28)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async respond (file:///Users/jasonkurian/src/github.com/jakxz/jakxz.github.io/.svelte-kit/output/server/index.js:2429:12)
    at async globalThis.fetch (file:///Users/jasonkurian/src/github.com/jakxz/jakxz.github.io/node_modules/.pnpm/@[email protected]_qevq5tvhizyxp44gfhkn6m3ljq/node_modules/@sveltejs/kit/src/core/prerender/prerender.js:130:21)
    at async load (file:///Users/jasonkurian/src/github.com/jakxz/jakxz.github.io/.svelte-kit/output/server/entries/pages/blog/_page.server.js:2:19)
    at async load_server_data (file:///Users/jasonkurian/src/github.com/jakxz/jakxz.github.io/.svelte-kit/output/server/index.js:1301:18)
    at async file:///Users/jasonkurian/src/github.com/jakxz/jakxz.github.io/.svelte-kit/output/server/index.js:1876:18

I think i'm landing here in the build step

I have also tried putting

export const prerender = false;

in a +layout.server.js
and at the top of every one of the api/ +server.js files with no luck.

With a bit of debugging it looks like my state.prerendering object in the render_endpoint method is:

{
  "dependencies": {}
}

essentially empty.

Curious if you've run into this or figured out a way around it? I've asked around on the svelte discord as well but got nothing yet.

`npm run build` fails on tip of main

I noticed that npm run build fails on the tip of main:

user@machine:/tmp$ git clone [email protected]:josh-collinsworth/sveltekit-blog-starter.git
Cloning into 'sveltekit-blog-starter'...
remote: Enumerating objects: 1290, done.
remote: Counting objects: 100% (413/413), done.
remote: Compressing objects: 100% (138/138), done.
remote: Total 1290 (delta 316), reused 275 (delta 275), pack-reused 877
Receiving objects: 100% (1290/1290), 884.28 KiB | 2.26 MiB/s, done.
Resolving deltas: 100% (663/663), done.
user@machine:/tmp$ cd sveltekit-blog-starter/
user@machine:/tmp/sveltekit-blog-starter$ npm install

added 207 packages, and audited 208 packages in 1s

52 packages are looking for funding
  run `npm fund` for details

1 high severity vulnerability

To address all issues, run:
  npm audit fix

Run `npm audit` for details.
user@machine:/tmp/sveltekit-blog-starter$ npm run build

> [email protected] build
> vite build

vite v5.0.12 building SSR bundle for production...
✓ 119 modules transformed.
vite v5.0.12 building for production...
✓ 108 modules transformed.
.svelte-kit/output/client/_app/version.json                                               0.03 kB │ gzip:  0.05 kB
.svelte-kit/output/client/.vite/manifest.json                                             9.13 kB │ gzip:  1.02 kB
.svelte-kit/output/client/_app/immutable/chunks/each.-oqiv04n.js                          0.07 kB │ gzip:  0.09 kB
.svelte-kit/output/client/_app/immutable/chunks/index.oiCz_B55.js                         0.11 kB │ gzip:  0.12 kB
.svelte-kit/output/client/_app/immutable/nodes/11.pJKFA2UM.js                             0.19 kB │ gzip:  0.17 kB
.svelte-kit/output/client/_app/immutable/nodes/8.pJKFA2UM.js                              0.19 kB │ gzip:  0.17 kB
.svelte-kit/output/client/_app/immutable/chunks/config.9TwfRihT.js                        0.30 kB │ gzip:  0.22 kB
.svelte-kit/output/client/_app/immutable/chunks/control.pJ1mnnAb.js                       0.34 kB │ gzip:  0.21 kB
.svelte-kit/output/client/_app/immutable/chunks/Callout.G8ur-app.js                       0.74 kB │ gzip:  0.49 kB
.svelte-kit/output/client/_app/immutable/chunks/preload-helper.0HuHagjb.js                0.91 kB │ gzip:  0.56 kB
.svelte-kit/output/client/_app/immutable/nodes/1.SS8rTGE5.js                              1.42 kB │ gzip:  0.81 kB
.svelte-kit/output/client/_app/immutable/nodes/4._25Q4NZo.js                              1.44 kB │ gzip:  0.77 kB
.svelte-kit/output/client/_app/immutable/nodes/2.jcRJ92rD.js                              1.64 kB │ gzip:  0.87 kB
.svelte-kit/output/client/_app/immutable/nodes/6.CeOQR6v9.js                              1.83 kB │ gzip:  0.97 kB
.svelte-kit/output/client/_app/immutable/nodes/3.QeNnDV5Q.js                              1.99 kB │ gzip:  1.04 kB
.svelte-kit/output/client/_app/immutable/nodes/7.2_yB7NYC.js                              2.19 kB │ gzip:  1.15 kB
.svelte-kit/output/client/_app/immutable/chunks/mdsvex-component-example.11C05Tzm.js      2.34 kB │ gzip:  1.20 kB
.svelte-kit/output/client/_app/immutable/chunks/scheduler.Urk58y9q.js                     2.37 kB │ gzip:  1.12 kB
.svelte-kit/output/client/_app/immutable/nodes/12.fveUTNV4.js                             2.77 kB │ gzip:  1.33 kB
.svelte-kit/output/client/_app/immutable/nodes/10.Ap9OiEwe.js                             2.77 kB │ gzip:  1.33 kB
.svelte-kit/output/client/_app/immutable/chunks/singletons.yiWd7qOr.js                    2.98 kB │ gzip:  1.52 kB
.svelte-kit/output/client/_app/immutable/nodes/9.j_tp534v.js                              3.08 kB │ gzip:  1.47 kB
.svelte-kit/output/client/_app/immutable/nodes/13.B79RsLSY.js                             3.10 kB │ gzip:  1.41 kB
.svelte-kit/output/client/_app/immutable/chunks/heading-links-example.8k5nRDwS.js         3.27 kB │ gzip:  1.28 kB
.svelte-kit/output/client/_app/immutable/chunks/Pagination.qBPI-jEN.js                    4.82 kB │ gzip:  2.06 kB
.svelte-kit/output/client/_app/immutable/chunks/syntax-highlighting-example.QUXGYAwc.js   6.00 kB │ gzip:  1.93 kB
.svelte-kit/output/client/_app/immutable/nodes/5.0y2puOeF.js                              6.15 kB │ gzip:  2.59 kB
.svelte-kit/output/client/_app/immutable/entry/app.DfZb3kKz.js                            6.93 kB │ gzip:  2.37 kB
.svelte-kit/output/client/_app/immutable/chunks/index.GpMQ2F1a.js                         9.97 kB │ gzip:  4.21 kB
.svelte-kit/output/client/_app/immutable/nodes/0.Bp5Y4N42.js                             11.85 kB │ gzip:  4.30 kB
.svelte-kit/output/client/_app/immutable/chunks/README.4z_DNvg3.js                       21.19 kB │ gzip:  7.48 kB
.svelte-kit/output/client/_app/immutable/entry/start.NyYNPe7Q.js                         27.86 kB │ gzip: 11.20 kB
✓ built in 590ms
  301 /blog/page -> /blog
  301 /blog/category/*/page/* -> /blog/category/*
  301 /blog/category/page/* -> /blog
  301 /blog/page/* -> /blog
SvelteKitError: Not found: /example.com/api/rss.xml
    at resolve2 (file:///tmp/sveltekit-blog-starter/.svelte-kit/output/server/index.js:2831:18)
    at resolve (file:///tmp/sveltekit-blog-starter/.svelte-kit/output/server/index.js:2663:34)
    at #options.hooks.handle (file:///tmp/sveltekit-blog-starter/.svelte-kit/output/server/index.js:2905:71)
    at respond (file:///tmp/sveltekit-blog-starter/.svelte-kit/output/server/index.js:2661:43) {
  status: 404,
  text: 'Not Found'
}

node:internal/event_target:1100
  process.nextTick(() => { throw err; });
                           ^
Error: 404 /example.com/api/rss.xml (linked from /)
To suppress or handle this error, implement `handleHttpError` in https://kit.svelte.dev/docs/configuration#prerender
    at file:///tmp/sveltekit-blog-starter/node_modules/@sveltejs/kit/src/core/config/options.js:201:13
    at file:///tmp/sveltekit-blog-starter/node_modules/@sveltejs/kit/src/core/postbuild/prerender.js:64:25
    at save (file:///tmp/sveltekit-blog-starter/node_modules/@sveltejs/kit/src/core/postbuild/prerender.js:399:4)
    at visit (file:///tmp/sveltekit-blog-starter/node_modules/@sveltejs/kit/src/core/postbuild/prerender.js:232:3)
Emitted 'error' event on Worker instance at:
    at [kOnErrorMessage] (node:internal/worker:326:10)
    at [kOnMessage] (node:internal/worker:337:37)
    at MessagePort.<anonymous> (node:internal/worker:232:57)
    at [nodejs.internal.kHybridDispatch] (node:internal/event_target:826:20)
    at exports.emitMessage (node:internal/per_context/messageport:23:28)

Node.js v20.11.0
user@machine:/tmp/sveltekit-blog-starter$

This does not happen with 5360246f6a30efa5ab0895033af7f1815b036aa2.

Update for sveltekit 1.0

This is a great example! Do you have any plans on updating this for the recent release of sveltekit 1.0?

Callout width larger than total screen width, breaks on smaller screens

Problem: The width of the .callout element is larger than the width of the screen, causing a resize and a white bar to appear on the right (visible in the header/footer of the page).

Root cause: Line 5 of _components.scss - the max width is unset.

Potential Solutions:

• Change line 5 to max-width: calc(100vw + 1rem); - fixing the white bar on the right, but now having rounded corners visible only on the right side.
• Change lines 4 and 6 to width: calc(100% + 2rem); and margin: 2rem -1rem 2rem -1rem; accordingly, essentially making the callout fit the size of the screen. *This may require additional changes to the padding, depending on the desired look.