SvelteKit Blog Starter

Files that should reside at the root of your finished website (e.g., robots.txt, favicon.ico, or images) should be placed in the static folder.

When referencing these files in your code, use absolute paths from the root. For example, an image in static/images/logo.png should be referenced as /images/logo.png.

You can create new pages in the blog by adding a .md file within the src/routes/ directory. For example, creating src/routes/about/+page.md will generate a route at /about. These files support standard Markdown syntax for text formatting, lists, and links, and they automatically render as page content.

# About

This is an example of how you can have _markdown_ in page content!

- How
- **Cool**
- Is _that_!?

[home link](/)

The src/lib/config.js file is the central configuration hub for the blog. It is critical to update this file before launching, as its values are used for:

• RSS Feeds: Site-specific metadata.
• SEO: Meta tags for search engines and social sharing.
• Navigation: The navItems array controls the links in the header, footer, and mobile menu.
• Pagination: The postsPerPage setting determines when pagination links appear in the blog and category feeds.

To add content, drop a .md file into src/lib/posts. The starter uses mdsvex, allowing you to use Svelte components directly inside your Markdown files.

Required Frontmatter

For optimal functionality, every post should include these properties in its YAML frontmatter:

• date: Used for sorting posts (chronological).
• excerpt: Used for SEO and social media meta tags.

Recommended Frontmatter

• coverWidth and coverHeight: Used to reserve space for images to minimize Cumulative Layout Shift (CLS).

Customizing Post Layouts

If you need to add new frontmatter properties or change how posts are rendered, modify the template in src/routes/blog/[post]/+page.svelte.

The starter uses global vanilla CSS located in static/css (linked via +layout.svelte).

Overriding Colors

To change the site's color palette, modify the CSS variables defined in static/css/vars.css.

Using Tailwind CSS

If you want to use Tailwind, follow the official SvelteKit guide. Note that:

• You may need to delete the existing CSS files in static/css or copy their contents into your Tailwind app.css.
• Tailwind's reset styles may change the appearance of existing elements (like headings) unless you apply specific classes.

The project is designed for static site generation using the SvelteKit static adapter.

Build Commands

• Build for production: Generates a build folder containing static files.

  npm run build

- **Preview built site**: Run this after a build to test the production output locally.
  ```bash
npm run preview

Deployment

• Automated: Connect your repository to Netlify or Vercel for automatic deployment.
• Manual: Upload the contents of the build folder to any static site hosting provider.

# Build and Deploy

npm run build
npm run preview

To set the browser tab title for a Markdown-based page, use the <svelte:head> component within the .md file. This allows you to inject metadata into the document head.

<svelte:head>
	<title>About</title>
</svelte:head>

This starter uses mdsvex to automatically generate anchor links for headings within Markdown files. When you use standard Markdown heading syntax (e.g., ## Heading), the system generates clickable links for those headings, allowing users to link directly to specific sections of a post.

## Here's an h2

Lorem ipsum dolor sit amet

### This is an h3

Lorem ipsum dolor sit amet

Update the following exported constants in src/lib/config.js to change the site's identity. These values are used in <meta> tags, the footer, and the RSS feed.

• siteTitle: The name of your blog.
• siteDescription: A brief description of the site.
• siteURL: The domain of your site (e.g., example.com).
• siteLink: A URL to a related project or repository.
• siteAuthor: The author's name or credit text.

export const siteTitle = 'My Awesome Blog'
export const siteDescription = 'Built with the SvelteKit Static Blog Starter'
export const siteURL = 'example.com'
export const siteLink = 'https://github.com/josh-collinsworth/sveltekit-blog-starter'
export const siteAuthor = '- find and change this text in src/lib/config.js'

Adjust the blog's structure and navigation by modifying these constants in src/lib/config.js:

• postsPerPage: An integer determining how many posts are displayed on each page of the main blog index.
• navItems: An array of objects used to build the main navigation menu, the footer, and the mobile navigation. Each object must contain a title and a route (the path to the page).

// Controls how many posts are shown per page on the main blog index pages
export const postsPerPage = 10

// Edit this to alter the main nav menu. (Also used by the footer and mobile nav.)
export const navItems = [
	{ 
        title: 'Blog',
        route: '/blog'
    }, 
    { 
        title: 'About',
        route: '/about'
    }, 
    { 
        title: 'Contact',
        route: '/contact' 
    }
]

The RSS feed generated at /api/rss.xml uses global site configuration to populate the <title>, <description>, and <link> tags in the XML channel. To ensure your RSS feed displays the correct information, you must update these property values in src/lib/config.js:

• siteTitle: The name of your blog.
• siteDescription: A brief description of your blog.
• siteURL: The base URL of your site (used to construct the atom link and post URLs).
• siteLink: The primary link for the RSS channel.