Sveltekit Tailwind Blog Starter

An easily configurable and customizable blog starter for SvelteKit + Tailwind CSS.

Key Features • How To Use • Deploy • Managing the Content • Credits • Support • License

About Sveltekit Tailwind Blog Starter

I've been looking for a good, flexible template for SvelteKit / Tailwind CSS, but all the templates I found were either too simple, missing some needed features, or were too difficult to customize (or both). I loved Timothy Lin's simple but feature-rich Tailwind Nextjs Started Blog, so I decided to port that to SvelteKit, and add a few things I needed, including Netlify CMS, dynamic Open Graph image (og:image) support.

This is my first attempt to write something in SvelteKit. Most probably, I won't be maintaining this template much, and won't be adding features to it. Feel free to grab a copy and use it as you wish.

Key Features

• Written for SvelteKit (latest RC version)
• Easy style customization with Tailwind 3
• Great lighthouse score - Lighthouse report
• Mobile-friendly view
• Blog posts
• Static pages (projects)
• Single or Multiple authors
• Markdown
• Markdown components
  • External Links
  • YouTube Video
• Support for light and dark theme
• Netlify CMS
• Search
• Blog post tags, and tag filtering
• Support for Pre-render
• OpenGraph Information
• SEO-friendly with RSS feed, sitemaps, and Open Graph support
• Open Gram Image (og:image)
• Analytics:
  • Supports Google Analytics
  • Supports plausible
  • Supports simple analytics
• Newsletter / Mailing List
  • Supports Mailchimp
  • Supports Buttondown
  • Supports Convertkit
  • Supports Klaviyo
  • Supports Revue
  • Supports Emailoctopus
• Discussion / Commenting
  • Supports giscus
  • Supports utterances
• Pagination

How To Use

In order to use this template, you need to know the basics of SvelteKit + Tailwind CSS. Below is a quick note on how to install this, and where to look for changes and customizations.

Installation

# Clone this repository
$ git clone https://github.com/akiarostami/sveltekit-tailwind-blog-starter

# Go into the repository
$ cd sveltekit-tailwind-blog-starter

# Install dependencies
$ npm install

# Run the app
$ npm start

Customization

• tailwind.config.cjs and src/app.css contain the tailwind stylesheet and the default css settings which can be modified to change the overall look and feel of the site.
• All tailwind settings and configurations are available in tailwind.config.cjs
• Site-specific basic css settings are available in src/app.css
• All site-related settings, navigation, analytics, mailing list, and commenting system settings are in src/lib/config.js
• Mailing list keys should be set in environment variables. Find the name of the environment variables in .env.example
• Pre-rendering is ON for all pages by default. You can change that from /src/routes/+layout.svelte file by changing setting export const prerender = false;.
• sr/lib/config.js - contains most of the site related information which should be modified for a user's need.
• All contents (Blog Posts, Projects, and Authors) are stored under the content folder.
• All blog and project images are stored under the static/img folder.
• Top navigation menu can be customized in the config.js file.
• By default Multi User feature is on, and each author should have a profile file in content/authors folder. If you only have one user for your blog, you can set multiuser: false in the config.js file, and set the admin user into in the same file in the user section.
• Remember to replace static/logo.svg, static/logo.png, static/favicon.ico, and static/icon-xxx.png with your own logo.
• routes: read the SvelteKit documentation for all routing information.
• Site fonts are included in app.html and linked from Google Fonts, and set in tailwind's config file. For a better site performance and ranking consider hosting your own fonts.
• Please note that Open Graph Image (og:image) needs a local copy of the fonts, which are available under src/lib/fonts.
• Standard markdown is supported in all blog posts and project pages. Markdown configurations are set in mdsvex.config.js file.
• Both rehype and remark Plugins can be used to extend the formatting.
• Two markdown plugins are added by default:
  • rehype-external-links to open all content links in a new tab
  • A custom plugin was made to show how to make custom plugins: the following tag can be used to add a formatted YouTube videos using this format: <youtube id="dQw4w9WgXcQ" title="The Best Cat Video Ever" />.

Deploy

Follow Netlify's Documentation to deploy your site on Netlify, or Vercel's Documentation to deploy on Vercel Platform

Managing the Content

As mentioned before, all content files (Blog Posts, Author Information, and Projects) are saved under the content folder. These content types can simply be modified / extended / removed, and other content types can be added. For that, you can simply modify / add / remove markdown files in these folders.

Netlify CMS is not required for editing the content, but it would make life much easier. After setting up Netlify CMS, you can simply use yoursite.com/admin to manage all your content from a simple web UI. Adding Netlify CMS is as easy as adding a couple of static files to your website. You can find these files under static/admin, and can access the web interface from https://yoursite.com/admin. You can simply delete this folder if you're not using Netlify CMS.

How to install Netlify CMS

After deploying your site on Netlify:

• Go to Site Settings > Identity
• Enable Identity
• Under the Services section of that page, enable Git Gateway
• Make user registration Invitation Only from Settings > Registration > Invite Only
• Invite yourself from Settings > Identity > Invite User
• After you receive the invitation email, click on Accept the Invite. It takes you to your site to a broken link. Add "/admin" to the domain and before "#invite_token"
• Set your password

You're all set, and can access your site admin from yousite.com/admin. You can also invite more users and editors from the same page (Settings > Identity > Invite User);

Credits

Beside all the open-source packages used for this starter, I used or were inspired by the following:

• Timothy Lin's Tailwind Nextjs Started Blog

• Geoff Rich's Creative dynamic social card images with Svelte components

• Ryan Filler's Site

• and of course, HBO's Silicon Valley

Support

Support this template and effort by giving it a star on GitHub, sharing your own blog, and giving a shout-out on Twitter.

License

MIT © Ahmad Kiarostami

@akiarostami on GitHub  ·  > Twitter  ·  > Instagram  ·  > Web