DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

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

Posted on

Starter Kit for Static Websites πŸš€

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. πŸ˜‰

Top comments (5)

Collapse
 
esseifforte profile image
esseifforte

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

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

Collapse
 
esseifforte profile image
esseifforte

ok,
many thanks

Collapse
 
sm0ke profile image
Sm0ke

Nice ..

Collapse
 
insanenaman profile image
Naman Gupta

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

Top Heroku Alternatives (For Free!)

Recently Heroku shut down free Heroku Dynos, free Heroku Postgres, and free Heroku Data for Redis on November 28th, 2022. So Meshv Patel put together some free alternatives in this classic DEV post.