There are many boilerplates. This one is mine.

I never set out to create a boilerplate, but after making sites dozens of times, I realized there were familiar patterns I was reaching for, and I'd always copy that code out of my last project. The most recent time, I decided to strip everything out into a boilerplate.

What is this?

This is the starting point that I (Lemon) use every time I make a new website. It's built using my own aesthetics.

And what aesthetics are those?

I want to have reusable components to help me make a static HTML site, and I want to do that as quickly as possible. At the same time, I don't want to have a whole bunch of boilerplate stuff in the shipped code. The idea here is only when you need it: Making something that's slim and extendable.

This project uses npm for build tooling, with Pug for HTML templating, Sass for CSS, and TypeScript for JavaScript.

This also assumes you want to write in Vue, Sass & Pug.

Prerequisites

You'll need Node.js (v18 or higher) and npm installed. If you don't have them, download Node.js here (npm comes with it).

Alright, how do I get started?

1. Click Use This Template to use this repo as a project template.
2. Clone your new repository locally
3. Run npm install to install dependencies
4. Run npm run setup to configure your project name and details
5. Run npm run dev to start the development server
6. If you see It works. in the middle of the screen, congratulations it's working right.

Commands

• npm install - Install all dependencies
• npm run setup - Initial project setup (prompts for project name, URL, etc.)
• npm run dev - Start development server with live reload
• npm run build - Build all files for production
• npm test - Check for Sass and TypeScript errors

Fundamentals

I'll break this down into three sections, Pug, Sass, & TypeScript.

For detailed information about routing configuration, see the Pug Routing Documentation.

1. Pug - HTML templating with routing configuration in routes/pug.routes.ts
2. Sass - Modern CSS with @use syntax
3. TypeScript - Type-safe JavaScript
4. Development Tools - Prettier, BrowserSync, and other helpful tools

Deploying to GitHub Pages

If you want to deploy this project to GitHub Pages, follow these steps:

1. Navigate to the .github/workflows/ directory.
2. Rename the deploy.yml.example file to deploy.yml.
3. Commit and push the changes to your repository.
4. GitHub Actions will automatically run the workflow to deploy your site to GitHub Pages.

Make sure your repository settings are configured to use GitHub Pages, and the branch is set to github-pages or the branch specified in the workflow file.