https://github.com/adrianmg/static-playground

A boilerplate including hot-reload and HTML templates to prototype static websites with a minimal footprint.
https://github.com/adrianmg/static-playground

css gulp html javascript nunjucks playground prototype static templates web

Last synced: 2 months ago
JSON representation

A boilerplate including hot-reload and HTML templates to prototype static websites with a minimal footprint.

• Host: GitHub
• URL: https://github.com/adrianmg/static-playground
• Owner: adrianmg
• Created: 2021-08-15T04:51:05.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2022-04-08T04:40:40.000Z (over 2 years ago)
• Last Synced: 2024-10-06T19:44:23.945Z (3 months ago)
• Topics: css, gulp, html, javascript, nunjucks, playground, prototype, static, templates, web
• Language: JavaScript
• Homepage:
• Size: 735 KB
• Stars: 6
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Static Playground



A boilerplate including **hot-reload** and **HTML templating** to prototype **static websites** with a minimal footprint. It comes with:

- [Nunjucks](https://mozilla.github.io/nunjucks/) HTML template engine with pages and templates

- [Sass](https://sass-lang.com/) for styling: code in separate files, generate a single CSS file

- An automatic process to compile your site to static HTML

- A webserver with hot-reload

- An external server: test your site on mobile and other devices

- Real-time synchronization between connected devices

- Remote web inspector tools to debug from the different connected devices

- Support for HTML, CSS, JS and other static files

## Installation and Usage

To start using it simply clone this repository and run the following commands on your terminal:

```

npm install

npm start

```

This will generate a `dist` folder with the compiled files so that you can deploy your project to any provider quickly.

It will automatically start a local server at `http://localhost:3000`. You can customize what files are watched and other options in `res/bs-config.js`.

If you visit `http://localhost:3001`, you will see a dashboard to customize other options from [Browsersync](https://browsersync.io).

There's also an external server at `http://:3001` that you can use to test your website directly from other devices sharing the same network. This is great to quickly test things on your phone with hot-reload as well as syncronized scrolling.

## Beyond the basics

Although it's not part of this boilerplate, you can grow the functionality by adding [Parcel] to bundle your JS modules.

## License

The tool is available as open-source under the terms of the [MIT License](http://opensource.org/licenses/MIT).