Staticfy is a lightweight static site boilerplate designed for fast and efficient static site development.
To get started, clone the repository:
git clone https://github.com/eiacc/staticfy.gitOnce cloned, install dependencies and start the development server:
bun i && bun devAll development should be done within the /src directory.
If you want to personalize or customize the setup, review and modify the configuration files under /config/bundle.
During the build process, the following files and directories will be copied directly to the /static directory:
/src/pages/*
/src/pub/*
/src/index.htmlMeanwhile, all JavaScript and CSS files under /src/assets/scripts/ and /src/assets/styles/ will be bundled into a single optimized file each — script.min.js and styles.min.css.
Run the following command to start the development server:
bun devPre-reqiusite: ngrok setup.
For seamless mobile visual testing (also works for desktop preview):
- Start the local tunnel:
bun tunnel- In a separate terminal, generate a QR code:
bun qr- Scan the QR code on your mobile device to access the live preview.
bun bundle| Directory | DescriptionSavings |
|---|---|
| /src | development directory |
| /static | bundled & optimized code from /src ready for hosting |
| /config | configuration files for automzation scripts to process bundling optimize, tunneling, and more. |
- Automatic bundling of all JavaScript and CSS files into a single file each.
- Static assets and pages copied as-is for simplicity.
- Supports mobile testing via ngrok tunnel and QR code generator.
| Development Files | Bundled Output |
|---|---|
| /src/assets/styles/main.css | /static/styles.min.css |
| /src/assets/styles/media.css | |
| /src/assets/styles/accordion.css | |
| /src/assets/styles/fonts.css | |
| /src/assets/scripts/main.js | /static/styles.min.css |
| /src/assets/scripts/animations.js | |
| /src/assets/scripts/canvas.js |
To learn more about bundle mapping. visit here