SveletKit 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
.
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
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.
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.
.
├── README.md
├── 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
- 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 calledindex.md
within post's folder. Although the file has an.md
extension, you can write Svelte in it.
hooks.js
we define Content Security Policy (CSP) and other HTTP security headers in here. More on this later.
src/lib/components
these are the components we use in pages.
-
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/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 postindex.md
files).
-
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.