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

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

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