How to create a landing page for your project in 30 minutes
Use this Gulp Nunjucks and NPM starter template to create your own landing page for hackathon in less than 30 minutes.
Subscribe to our awesome Newsletter.
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
- Easy to share; we wanted to share a URL within August Labs for reviews across teams
- 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:
|CSS||Sass (Libsass via node-sass), Autoprefixer, CSSNano, Source Maps|
|HTML||Nunjucks, gulp-data, or bring your own|
|Images||Compression with imagemin|
|Icons||Auto-generated SVG Sprites and/or Icon Fonts|
|Fonts||Folder and |
|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 |
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.