https://github.com/loke-dev/sveltekit-mdsvex-blog-template
MDsveX blog starter template built with Sveltekit & Tailwind
https://github.com/loke-dev/sveltekit-mdsvex-blog-template
blog journal mdsvex playwright portfolio portfolio-website remark starter svelte sveltekit tailwindcss template typescript vite vitest
Last synced: about 1 month ago
JSON representation
MDsveX blog starter template built with Sveltekit & Tailwind
- Host: GitHub
- URL: https://github.com/loke-dev/sveltekit-mdsvex-blog-template
- Owner: loke-dev
- License: mit
- Created: 2019-01-13T11:39:58.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2025-03-15T22:55:28.000Z (about 1 month ago)
- Last Synced: 2025-03-15T23:24:21.313Z (about 1 month ago)
- Topics: blog, journal, mdsvex, playwright, portfolio, portfolio-website, remark, starter, svelte, sveltekit, tailwindcss, template, typescript, vite, vitest
- Language: Svelte
- Homepage: https://loke.dev
- Size: 53.8 MB
- Stars: 38
- Watchers: 1
- Forks: 6
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# SvelteKit MDSvex Blog Template
A modern, fast, and SEO-friendly blog template built with SvelteKit, MDSvex, and TailwindCSS. Perfect for developers, writers, and creators looking to build a personal website with a blog.
## Features
- 📝 MDSvex for writing blog posts in Markdown with Svelte components
- 🎨 TailwindCSS for styling with typography plugin
- 🔍 SEO optimized with meta tags and structured data
- 📱 Fully responsive design
- 🚀 Fast page loads with SvelteKit
- 📊 Vercel Analytics integration
- 🧪 Testing setup with Vitest and Playwright
- 🏷️ Tag-based categorization for posts
## Getting Started
### Using as a Template
1. Click the "Use this template" button on GitHub
2. Clone your new repository
3. Install dependencies:
```bash
npm install
# or
pnpm install
# or
yarn install
```
4. Start the development server:
```bash
npm run dev
# or
npm run dev -- --open
```
### Configuration
1. Update `src/variables.ts` with your personal information
2. Modify the site layout in `src/routes/+layout.svelte`
3. Update the homepage in `src/routes/+page.svelte`
4. Add your own blog posts in `src/posts/`
## Writing Blog Posts
Create new `.svx` files in the `src/posts/` directory. Each post should include frontmatter:
```markdown
---
title: Your Post Title
description: A brief description of your post
date: 2023-06-15
published: true
tag: svelte
---
Your content here...
```
## Testing
```bash
# Run unit tests
npm run test
# Run tests in watch mode
npm run test:watch
# Run tests with coverage
npm run test:coverage
# Run end-to-end tests
npm run test:e2e
```
## Building for Production
```bash
npm run build
```
Preview the production build:
```bash
npm run preview
```
## Deployment
This template is optimized for deployment on Vercel, but can be deployed on any platform that supports SvelteKit.
## License
MIT
## Credits
Created with ❤️ by the SvelteKit community. Based on the original work by [Loke](https://github.com/loke-dev).