Landing page builder with gulp

Every so often I need to make a simple one-off landing page with a custom design that's just HTML, CSS, Javascript and images. I don't want to spin up a WordPress site or try and use React or some other large setup to make one landing page.

I created this gulp tool to provide a robust starting point for creating a webpage that allows me to focus on layout and design. I also wanted something that I could continually add on to as I find better optimizations and best practices change.

View the project on GitHub

Automate common tasks and best practices

There can be a lot of things to remember (see my requirements below) when creating any website whether it is a large CMS website or a single HTML file. I wanted to focus more on developing the responsive layout and design of the site and automate other tasks and details such as meta tags, inlining CSS, and removing comments.

My requirements

  1. High focus on design and content when building pages
  2. SASS for styling and default SASS variables for things like fonts, spacing, colors, breakpoint sizes and more.
  3. Minified HTML, CSS, and JS output for production
  4. Provide minimum HTTP requests and inline CSS and JS
  5. Score 100 on Lighthouse pagespeed test or as close as possible.
  6. Use best practices and knowledge such as

Todo

Automate responsive images

I need to add responsive image generation as well as a way to automate srcset in the markup

Auto optimize images and SVGs

I haven't found a 100% way of automatically doing image optimization because some images look good at 80% and others need to be at 90% quality before they start looking bad. Right now my workflow is to pre-optimize them then use Gulp to generate .webp images.

Optimize video files

I have been using a lot more video screen recordings and animations in my landing pages lately and would like to find a way to automate optimizing these files.

Favicons

Add gulp-favicon plugin.

More common interactive features

I want to keep this starter as minimal as possible but there are a few common Javascript features I use in most projects that I would like to add.

Pardot landing pages

I have been using Pardot marketing automation tool for quite a while now and would like to take this project a step further and automate landing pages with it. Right now, it could be used for this but Pardot landing pages have some other features and requirements. Here are my notes:

To be continued...

I wanted to write out my goals with this tool as a guideline to develop it further. Keep up-to-date on github at rdallaire/gulp-page-builder

Let me know what you think on twitter @rdallaire