RIP Norm ❤️

norm-has-a-blog

norm-has-a-blog is a simple, static, and zero config blog built with SvelteKit. It's designed for developers who want to save and share the stuff they're discovering(but can be used by anyone for anything).

Features

This blog comes packed with powerful features out of the box:

• Modern Stack: Built with SvelteKit 2.0 and Vite for blazing-fast performance
• Markdown Support: Write posts in Markdown(GFM is also supported) with MDSveX.
• Syntax Highlighting: Beautiful code blocks powered by Shiki.
• Math Equations: Full support for LaTeX/KaTeX mathematical expressions powered by MathJax.
• Static Site Generation: Deploy anywhere with zero runtime dependencies(and zero cost).
• Table of Contents: Interactive table of contents.
• Responsive Design: Looks great on all devices
• Dark/Light Theme: Built-in theme support.
• SEO Friendly: RSS/Atom feeds, sitemap, OG tags and canonical URLs.
• Tags & Categories: Organize posts with hierarchical categories and tags.
• Featured Posts: Pin important posts to the homepage.
• Enhanced Footer: Customizable footer with projects, blogs, and social links.
• Archives: Browse posts by date.

Preview

• Dev Build
• Production Build

Prerequisites

Before you begin, ensure you have the following installed on your system:

• Node.js (v22 or higher)
• yarn (or any other package manager)
• git
• A code editor.

Getting Started

📚 For a comprehensive guide, check out the Getting Started Guide with detailed setup, configuration, and deployment instructions.

Quick Setup

1. Clone/fork this repository.

   git clone https://github.com/ahampriyanshu/norm-has-a-blog.git my-new-blog
   cd my-new-blog
   

2. Install dependencies:

yarn

3. Start the development server:

yarn dev

Open http://localhost:5173 in your browser.

Build Commands

Build the static site:

yarn build

Preview the production build:

yarn preview

Configuration

Edit src/lib/config.ts to customize your blog:

export const siteConfig = {
  title: 'Your Blog Title',
  description: 'Your blog description',
  author: 'Your Name',
  url: 'https://yourdomain.com',
  subPath: '/your-subdirectory',
  lang: 'en',
  social: {
    github: 'yourusername',
    twitter: 'yourusername',
    email: '[email protected]',
    rss: true
  },
  theme: 'light'
};

Writing a new article

1. Create a new .md file in the src/posts directory
2. Add frontmatter with metadata
3. Write your content in Markdown

Deployment

This blog can be deployed to any static hosting service. But it's recommended to use GitHub Pages for free hosting. In order to deploy to GitHub Pages:

1. Push the changes to a public github repository.
2. Enable GitHub Pages in repository settings.
3. Deploy the site to GitHub Pages.
4. The site will be available at https://<username>.github.io/<repository-name>.

Note: If required, you can add CNAME record to use custom domain.

Customization

Styling

The theme uses SCSS for styling. Main styles are in src/lib/styles/louie.scss.

CSS variables control the theme colors:

• Light theme: defined in :root
• Dark theme: defined in :root[data-mode='dark']

Adding Custom Components

Create Svelte components in src/lib/components/ and import them where needed.

Modifying Layouts

• Main layout: src/routes/+layout.svelte
• Post layout: src/routes/blog/[slug]/+page.svelte
• Markdown layouts: src/lib/layouts/

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

If you encounter any issues or have questions, please open an issue on GitHub.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Acknowledgments

• Built with SvelteKit and Vite
• Markdown processing by mdsvex
• Code highlighting by Shiki
• Math rendering by MathJax
• Deployed on GitHub Pages