Rare - Blog Starter

This repository was initially intended for my personal website, but I have since transitioned to using Vitepress for my blog.

Despite this, I decided to make the repository public to support open-source learning. Enjoy exploring the code and features!

Technologies Used

• 11ty/eleventy is used for the static building (v3.0)
• twbs/bootstrap is used for styling (v5.3)
• Shopify/liquid is used as the templating engine

Features

• Fast Build: Assets are built in under 10 seconds... nice!
• Browser Friendly: Four hundos lighthouse score
• Theme Switcher: Light/Dark/System theme switcher based on Alberto Roura's guide.
• Minimal Vanilla JS: Focus on minimal JavaScript usage.
• Optimized Images: Image processing and rendering with srcset for fast loading.
• Markdown Processing: Using Markdown IT for .md file processing.
• Pagination and Breadcrumbs: For better navigation.
• Local Search: Indexed by [MiniSearch](https://github.com/micpst/minisearch.

Local Development

1. Clone the repository

git clone https://github.com/rarechrisclark/rare-blog-starter.git
cd rare-blog-starter

2. Install dependencies

npm install

3. Start the local development server

npm run dev

4. Access the server: The development server will be running at http://localhost:8080.

Note:

• The 11ty configuration is located in the ./config directory for better organisation
• The site metadata can be modified in the ./src/_data/meta.js
• The final built assets will be stored in ./_site

Deployment

This project is set up to be built and hosted as a static site. Recommended hosting services include Cloudflare Pages, GitHub Pages, or AWS S3.

1. Build the static assets

npm run build

2. Deploy the built assets to your chosen hosting service.
3. Have fun with it x

---

Resources

Site Inspiration

• madrilene/eleventy-excellent
• AleksandrHovhannisyan/11ty-sass-images-seo
• mesinkasir/eleventyblog

Helpful Links

• Shopify CheatSheet
• Critical CSS Generator
• HTML Recipes
• Vanilla JS components
• Markdown-IT Sandbox