Use this starter kit to create a viable, good looking, production-ready website whose entire size does not exceed 2 KB compressed when opened in a browser. Ideally, the total size of all assets (HTML, CSS, favicon, etc.) downloaded by the browser when opening the page will be under 2 KB. You can see a live version at MinWiz.com.
Make sure you have Node and npm installed. Any version will do.
If you're doing web development you probably already have gulp-cli globally installed (you can test with gulp -v
). If you don't have it, run npm install --global gulp-cli
- clone the repo
- install the dependencies with
npm install
- build the site (in the dist folder) with
npm run build
- at this point, the dist folder contains all assets in a minified form, ready to be copied/deployed to your web hosting service
If you want to live edit the site, there is a handy-dandy gulp dev
command and the Live Server extension for VS Code is configured to open the site from dist folder. Run the command, click Go Live in the status panel of VS Code and you're good to go.
If you have a creative idea for decreasing the size of the website feel free to submit a PR! You can learn how from this Step-by-step guide to contributing on GitHub.
If it's not obvious how your PR will help, please conceptually explain it. Ex:
As the stylesheet.css already includes the text "section {", rearranging the order in "section, p, h1," to "p, h1, section {" will pick-up more text during gzipping.
Please note that I'm using package-lock with lockfileVersion 2. If you submit a PR and you're using lockfileVersion 1, make sure not to include the package-lock.json file.
- Color scheme inspired from john-doe.neocities.org.
Navigation inspired from Functional CSS Tabs Revisited.- Navigation suggested by /u/trust_me_im_a_turtle on Reddit. Demo here.
For cdk deploy
to work we need to have a Github personal access token in the GITHUB_TOKEN variable:
echo export GITHUB_TOKEN=REPLACE_ME_WITH_THE_REAL_GITHUB_TOKEN >> ~/.bashrc