An opinionated blog starter for SvelteKit + Tailwind + Netlify. Refreshed for 2022!
A lightly opinionated starter for SvelteKit blogs:
Feel free to rip out these opinions as you see fit of course.
/api/rss.xml) with caching
max-age) to 1 minute to cache (consider making it 1-7 days on older posts)
npx degit https://github.com/sw-yx/swyxkit export GH_TOKEN=your_gh_token_here # can skip if just trying out this repo casually npm install npm run start
You should be able to deploy this project straight to Netlify as is, just like this project is.
However, to have new posts show up, you will need to personalize the siteConfig below - take note of
APPROVED_POSTERS_GH_USERNAME in particular (this is an allowlist of people who can post a blog by opening a github issue, otherwise any rando can blog and thats not good).
# these are just untested, suggested commands, use your discretion to hook it up or deploy wherever git init git add . git commit -m "initial commit" gh repo create # make a new public github repo and name it whatever git push origin master ntl init # use the netlify cli to deploy, assuming you already installed it and logged in. can also use `ntl deploy`
As you become ready to seriously adopt this, remember to configure
/lib/siteConfig.js - just some hardcoded vars i want you to remember to configure.
export const SITE_URL = 'https://swyxkit.netlify.app'; export const APPROVED_POSTERS_GH_USERNAME = ['sw-yx']; // IMPORTANT - change this to at least your github username, or add others if you want export const GH_USER_REPO = 'sw-yx/swyxkit'; // used for pulling github issues and offering comments export const REPO_URL = 'https://github.com/' + GH_USER_REPO; export const SITE_TITLE = 'SwyxKit'; export const SITE_DESCRIPTION = "swyx's default SvelteKit + Tailwind starter"; export const DEFAULT_OG_IMAGE = 'https://user-images.githubusercontent.com/6764957/147861359-3ad9438f-41d1-47c8-aa05-95c7d18497f0.png'; export const MY_TWITTER_HANDLE = 'swyx'; export const MY_YOUTUBE = 'https://youtube.com/swyxTV';
Of course, you should then go page by page (there aren't that many) and customize some of the other hardcoded items, for example
Cache-Controlpolicy and SvelteKit
This blog uses GitHub as a CMS - if you are doing any serious development at all, you should give the
GH_TOKEN env variable to raise rate limit from 60 to 5000.
When deploying, don't forget to set it in Netlify: https://app.netlify.com/sites/YOUR_SITE/settings/deploys#environment
Open a new Github issue on your new repo, write some title and markdown in the body, add a
Published tag, and then save.
You should see it refetched in local dev or in the deployed site pretty quickly. You can configure Sveltekit to build each blog page up front, or on demand. Up to you to trade off speed and flexibility.
Published post doesn't show up, you may have forgotten to set
APPROVED_POSTERS_GH_USERNAME to your github username, as above.
If all of this is annoying feel free to rip out the GitHub Issues CMS wiring and do your own content pipeline, I'm not your boss. MDSveX is already set up in this repo if you prefer not having a disconnected content toolchain from your codebase (which is fine, i just like having it in a different place for a better editing experience). See also my blogpost on the benefits of using Github Issues as CMS.
You can read:
[slug].sveltehas precedence over