DEV Community

loading...
Cover image for Starter Kit for Static Websites 🚀

Starter Kit for Static Websites 🚀

insanenaman profile image Naman Gupta ・2 min read

parcel-static-site-starterkit

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 https://github.com/InsaneNaman/parcel-static-site-starterkit.git

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. 😉

Discussion (5)

pic
Editor guide
Collapse
esseifforte profile image
esseifforte

nice!!!!
how can we turn output html into php?

Collapse
insanenaman profile image
Naman Gupta Author

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.

Collapse
esseifforte profile image
esseifforte

ok,
many thanks

Collapse
sm0ke profile image
Sm0ke

Nice ..

Collapse
insanenaman profile image
Naman Gupta Author

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