DEV Community

Cover image for Starter Kit for Static Websites πŸš€
Naman Gupta
Naman Gupta

Posted on

Starter Kit for Static Websites πŸš€


A minimalistic(simple) starter kit for Static Websites with out of the box ES6+ and SCSS support. No Config needed. Project On Github

Features πŸš€

1- Compatible with All Static Site like Bootstrap Template

2- Out of the box Uglifying/ Minifying of CSS, HTML, JS

3- SCSS Support

4- ES6+ Support

5- Hot Reloading

6- Runs on a local server

7- Auto prefixing - Support IE10 and last 4 versions of all browsers

When and Why should you use this project? 😯

1- No setup required. Just one command to start developing.

2- Provides out of the box ES6+ and SCSS support. No config needed.

3- If you are a beginner and following some tutorial then you can code on your machine hassle-free.

4- If you want to test something locally and you need a preconfigured environment for a static site.

5- You have a website and want to deploy it on production.

How to use 🧐

Make sure you have node installed. If not, I recommend installing via nvm(Node Version Manager)

1- Clone project -
πŸ‘‰ git clone

Alt Text

2- Navigate to that directory
πŸ‘‰ cd parcel-static-site-starterkit/

3- Install dependencies
πŸ‘‰ npm i or yarn

This would install dependencies (required libraries) under node_modules folder.

4- Run Project
πŸ‘‰ npm run start

Alt Text

πŸŽ‰πŸŽ‰πŸŽ‰πŸŽ‰ That's it. Your website is live on localhost:1234

Alt Text

5- Put/Write your code in src folder

There are sample files already present (feel free to delete them and add yours) to give you an idea about the architecture. You only need to care about just one file i.e, index.html and that you must put/create at the src (src/index.html) folder level.

Ready to build?

πŸ‘‰ npm run build or yarn run build

This will generate dist folder that you can deploy to anywhere like Netlify, Firebase or wherever you like.

Here is a list of Free hosting Services πŸ”₯

Starter Kit On Github

That's it for today. Feel free to provide any type of feedback/report error. I do appreciate that. Meanwhile, you can find me on Twitter @InsaneNaman.

Signing off. See you soon.

For every minute you are angry you lose sixty seconds of happiness. So, keep smiling. πŸ˜‰

Top comments (5)

esseifforte profile image

how can we turn output html into php?

insanenaman profile image
Naman Gupta

Sorry I don't and haven't used PHP yet. So not the right guy to answer. Tho this kit won't convert but there are few tools online which do that.

esseifforte profile image

many thanks

sm0ke profile image

Nice ..

insanenaman profile image
Naman Gupta

Thank you. Glad you like it. Feel free to suggest any feature you will like to see.