Use this Gulp Nunjucks and NPM starter template to create your own landing page for hackathon in less than 30 minutes.
At August Labs (A initiative by Skcript), we have been trying out things that could help us and other people create something stable and faster.
For once, we got tired of the heaviness that Jekyll is carrying with it. So we jumped ship to try out at least 10 other static site generators, but nothing really caught up to what we were looking for.
To sum things up, here’s what we were looking at:
- Speed; the moment we hit the Cmd + S, we wanted the re-generation to happen
- Livereload; all the changes must refresh real-time on the browser
- Re-usability; we wanted to be able to create a template that everyone in the company can re-use and come up with really quick landing pages, either for marketing purposes or any hack project that our engineers would work on
To solve this problem, we came up with Skcript Gulp Starter template. Here’s what we came up with:
| Features | Tools Used |
|---|---|
| CSS | Sass (Libsass via node-sass), Autoprefixer, CSSNano, Source Maps |
| JavaScript | Babel, Webpack |
| HTML | Nunjucks, gulp-data, or bring your own |
| Images | Compression with imagemin |
| Icons | Auto-generated SVG Sprites and/or Icon Fonts |
| Fonts | Folder and .sass mixin for including WebFonts |
| Live Updating | BrowserSync, Webpack Dev Middleware, Webpack Hot Middleware |
| Production Builds | JS and CSS are uglified and minified, filename md5 hashing (reving), file size reporting, local production Express server for testing builds. |
| JS Testing | Karma, Mocha, Chai, and Sinon, Example Travis CI integration |
| Deployment | Quickly deploy public folder to gh-pages with gulp-gh-pages |
The entire starter template is completely customizable and you are free to use it for anything under the roof. One of the best use-cases that I could think of right away, is when you are at hackathons or Startup Weekends. These are the places where you would want to create something real quick and push it out.
Up next
Awesome React Native Components you should checkout this weekend
Skcript
/svr/creating-a-landing-page-in-30-minutes/
/svrmedia/heroes/skcript-gulp-starter.jpg