SvelteKit MDsvex Blog Starter

sveltekit-blog-mdx

SvelteKit blog starter which helps you hit the ground running when creating a new SvelteKit blog. The project creates a Progressive Web App (PWA) out of the box. You just need to customise with your logos etc.

See the Sveltekit Blog Starter blog post on the Rodney Lab site for some explanation of what's inside and how to customise. Please drop questions into a comment at the bottom of that page. Here's the quick start:

Everything you need to build a Svelte blog site, powered by sveltekit-blog-mdx.

Creating your Own MDsveX Blog Site

If you're seeing this, you've probably already done this step. Congrats!

git clone https://github.com/rodneylab/sveltekit-blog-mdx.git my-new-mdsvex-blog
cd my-new-mdsvex-blog
pnpm install # or npm install
npm run dev

Responsive Images

Currently the repo relies on Imgix to create responsive, NextGen images. Out of the box, it uses static images (non-responsive) stored in static/assets/images. The code in src/lib/BannerImage.svelte and src/lib/BlogPost.svelte shows how you can generate responsive images with Imgix when using this code for your own projects. You just need to create an Imgix account and add your own photos. Next, define VITE_IMGIX_DOMAIN and VITE_IMGIX_SECURE_TOKEN in .env, using your account credentials. Now, for example, the banner image for a post will take whatever you define as the featuredImage in the blog post markdown frontmatter. So if the full Imgix path to an image is my-example-site.imgix.net/folding-camera.jpg, you can refer to the image in post frontmatter as folding-camera.jpg. Let me know if that needs a clearer explanation.

XML Sitemap

If your site is completely static, then you can generate an XML sitemap by running

npm run generate:sitemap

this will be output to static/sitemap.xml. You can work this into your build process by updating the build script in package.json to something like:

    "build": "npm run generate:manifest && npm run generate:sitemap && svelte-kit build",

The generation JavaScript code is in the file generate-sitemap.js in the root folder of the project.

Alternatively, the sitemap is automatically served at https://example.com/sitemap.xml. It is served by the file at src/routes/sitemap.xml.js.

Either way, make sure your site's URL is defined in .env as the VITE_SITE_URL variable so the correct URLs are output to the site map.

Progressive Web App (PWA)

The starter mostly generates PWA config automatically, including service worker for offline availability and adding meta to the HTML head section. A PWA needs a manifest file detailing logos (for favicons) in different sizes, compatible with various devices. The starter can generate the logo in different sizes automatically if you create a 512 px × 512 px logo and save it as static/icon.png. Then run

npm run generate:manifest

The script outputs the manifest file to static/manifest.json and it is then automatically included in your build.

The HTML meta for PWAs is added in the component at src/lib/components/PWA.svelte.

You can customise the manifest (including icon file path) by editing src/lib/config/website.js. The following variables feed into the generated manifest.json file:

siteTitle,
siteShortTitle,
siteUrl,
icon — path to template icon,
backgroundColor,
themeColor.

See article on Progressive Web Apps in SvelteKit for more.

Building

npm run build

You can preview the built app with npm run preview, regardless of whether you installed an adapter. This should not be used to serve your app in production.

What's inside?

.
├── README.md
├── generate-manifest.js
├── generate-sitemap.js
├── jsconfig.json
├── netlify.toml
├── package.json
├── src
│   ├── app.html
│   ├── content
│   │   └── blog
│   │       ├── best-medium-format-camera-for-starting-out
│   │       ├── folding-camera
│   │       └── twin-lens-reflex-camera
│   ├── hooks.js
│   ├── lib
│   │   ├── components
│   │   │   ├── BannerImage.svelte
│   │   │   ├── ...
│   │   ├── config
│   │   │   └── website.js
│   │   ├── constants
│   │   │   └── entities.js
│   │   ├── styles
│   │   └── utilities
│   │       └── blog.js
│   └── routes
│       ├── [slug].json.js
│       ├── [slug].svelte
│       ├── __layout.svelte
│       ├── contact.svelte
│       ├── index.json.js
│       └── index.svelte
└── svelte.config.js

`/`

generate-manifest.js script for generating the PWA manifest.json as well as the icons in different sizes.
generate-sitemap.js script for generating an XML sitemap, only needed for static sites, otherwise SvelteKit creates an endpoint from which the sitemap is served (see src/routes/sitemap.xml.js).

`src/content`

The src/content/blog is where we need to put our blog posts. Just clean out the sample content and replace it with your views on the world! There is a separate folder for each post, which allows you to keep images, video and other related media specific to a post better organised. We set the browser path for the based based on this folder name, so keep that in mind when naming the folders. Write the actual post in a file called index.md within post's folder. Although the file has an .md extension, you can write Svelte in it.

`src`

hooks.js we define Content Security Policy (CSP) and other HTTP security headers in here. More on this later.

`src/components`

src/lib/components these are the components we use in pages.

`src/lib`

src/lib/config/website.js for convenience we define properties for the site here such as the site title, contact email addresses and social media accounts. Some properties feed from environment variables. See a post on getting started with SvelteKit for more on environment variables in SvelteKit.
src/lib/styles does what you expect! We use SCSS for styling and source self-hosted fonts in the layouts.

`src/utilities`

src/utilities/blog.js this file contains some code for helping us transform the markdown in blog posts to Svelte. As well as that they help extract fields in the frontmatter (this is the metadata we include at the top fo the blog post index.md files).

`src/routes`

src/routes/[slug].json.js this is essentially a template for blog post data. One of these file is generated at build for each blog post. It is used to extract data needed in the Svelte file used to generate the post's HTML.
src/routes/[slug].svelte similarly to the previous file, one of these is generated for each blog post. This time it is the Svelte code which SvelteKit uses to generate the HTML for our blog posts.

I mention most of the other files in the Getting Started with SvelteKit blog post, but let me know if I have missed anything which needs more explanation.

fanzihui/sveltekit-blog-mdx