Easy HTTPS landing pages in 2018

If you’re like me, you just purchased a new .app domain name (or any TLD for that matter). You’d love to put up a landing page for the product idea you have, but instead it’s resolving to a blank page. You’d also love to collect emails or other information from visitors. I’m also assuming you’re a developer comfortable with JavaScript, HTML, and CSS.

I’ve been down this path many times before, but .app and the HTTPS requirement makes this a little harder. Here are my ideal requirements.

• I want it to be quick, easy and free (during landing page phase or until I get a little interest/traction)
• I want to have full control of the layout, styling, and navigation of the landing page.
• I want to have some functionality, especially with respect to collecting user information for users interested in my idea/product.
• I want to code locally and not in an online editor
• I need to host my site over SSL preferably with a free LetsEncrypt certificate that is generated and managed on my behalf.

There are an infinite number of ways to approach this by combining technologies. There’s also many landing page services. Here are a few:

• https://unbounce.com
• https://www.producthunt.com/ship
• https://www.launchrock.com/
• https://www.wix.com/
• https://www.squarespace.com/

Each has pros and cons related to cost, free tier limits, developer experience, and features.

In addition, I’m a developer and I like writing code in VIM/Atom, not an online WYSIWYG. I want the power of git, the command line and the ease of a deployment pipeline. Ultimately, I want something simple, cheap (or free) and with no limitations on what I can build.

A Good Landing Page Stack for 2018 (My Rational)

Technology moves fast, so this is my opinion of a good choice in the spring/summer of 2018, particularly if you are comfortable with JavaScript.

I Chose the following stack: GatsbyJS, Bulma, Netlify

CSS Framework

I wanted a quick and easy way to build responsive pages. If I was building a full blown application, I’d probably choose Semantic UI, but in this case, I wanted something lean with a small learning curve. I spend most of my time on backend code, apis and devops, so my front-end skills are lacking. Bulma was perfect for me!

Bulma is an open source CSS framework based on Flexbox

Choice: Bulma ( https://bulma.io/ )
Considered: Boostrap, Foundation, SemanticUI, PureCSS, Materialize

UI Framework(s)

This was a tough one. I want my landing page to be server-side (or pre-generated) to take advantage of SEO and fast loading. I don’t need too much UI power for landing pages. I strongly considered using VUE, but ultimately went with what I already know — React. I used GatsbyJS which is described as :

Blazing-fast static site generator for React

Choice: Gatsby ( https://www.gatsbyjs.org/ )
Considered: Vue, NextJS, Jekyll

Hosting/Deployment

I initially started down Github pages, but wanted to collect user info via a submission form. I also ran into issues trying to host more than 1 landing page. Github recently added HTTPS support for custom domains which makes it a great option.

Since I wanted more than one landing page and access to a little more functionality, I started going down the Docker/Kubernetes route, but an hour into that activity, It just felt like overkill for what I needed.

Finally, I’d heard of Netlify a few times recently and decided to give it a look. I was incredibly impressed with the ease of use and features they provide. I spun up an account and viola, my site was live on a custom domain, over SSL, collecting user input with a automated deployment pipeline! Netlify has an incredibly generous free tier with a reasonable path to upgrade if you’re landing page starts getting traction.

Build, deploy, and manage modern web projects

Choice: Netlify ( https://www.netlify.com/ )
Considered: Github Pages, Zeit, Heroku, Self-manage with Docker+Kubernetes+DigitalOcean

Step-by-Step (build and deploy your landing page)

Pre-requisites:

• You’ll need Git/Github
• NodeJS/NPM installed locally (I’ll be using yarn)
• A Netlify Account
• Come up with a project name :) I’ll be using snacks (so make sure to replace your project name everywhere you see snacks)

Install Gatsby Command Line

# install the command cli node package globally
# You may need to sudo :(
> npm install --global gatsby-cli
# create your gatsby project (replace snacks with your project name)
> gatsby new snacks
# cd into your project
> cd snacks/

Here’s what my project listing looks like now.

You should now be able to run your project. Use the gatsby develop command to run a local webserver with your project.

# your app will be on http://localhost:8000 after this command
snacks> gatsby develop

Install Bulma and Build Dependencies

We are going to use sass in this project as it’s the easiest way to quickly and globally change styles in bulma. Gatsby has a plugin system that we’ll need to utilize to add sass support.

# install bulma via yarn (or via npm install bulma)
snacks> yarn add bulma
# install the gatsby sass plugin
snacks> yarn add gatsby-plugin-sass

Next you’ll want to update the gatsby-config.js file to include the sass plugin. It should look like this.

module.exports = {
  siteMetadata: {
    title: 'Gatsby Default Starter',
  },
  plugins: [
    'gatsby-plugin-react-helmet', 
    'gatsby-plugin-sass'
  ],
}

Define, Reference and spruce up your SASS file

Sass is very powerful and Bulma does a good job of exposing key overridable variables in Bulma. I’ve included a super simple starter sass file that shows how to include a couple google fonts and making it the default, define your own color scheme and map it over to the standard primary, info, success, warning, and danger modifiers. You can override almost anything here, but I’ve provided the two most common overrides (fonts and colors). Check the docs for more info.

Note: don’t modify the index.html file. This file is auto-generated during build time, so anything you add here won’t make it in the production build. Gatsby defines hooks for adding custom assets/scripts.

1. Create a new file called main.scss (can name it anything really). Put it in the layouts directory (can put it anywhere, but you’ll need to modify the relative references accordingly).
2. add this code to your main.scss file

@import url('https://fonts.googleapis.com/css?family=Oswald|Roboto');
// Import the initial variables I'll need, might be a better way to do this
@import "../../node_modules/bulma/sass/utilities/initial-variables";
// override colors
$blue:      #4056A1;
$lightblue: #C5CBE3;
$red:       #F13C20;
$cream:     #EFE2BA;
$yellow:    #D79922;
$primary: $blue;
$info:    $lightblue;
$success: $red;
$warning: $yellow;
$danger:  $cream;
// Override fonts
$family-sans-serif:  "Roboto","Oswald",sans-serif;
$family-primary: $family-sans-serif;
// Import the rest of Bulma
@import "~bulma/bulma";

3. update your primary layout file to reference the scss file instead of the default css file gatsby provides.

snacks/src/layouts/index.js

Great! Now you can use the power of React Components, SASS, and Bulma CSS. Since I’m just building a single landing page, i’m going to remove the header component.

Note: given that this is a landing page with just a single long page, I’ll simplify it accordingly, by removing the components and any files I don’t need. If you’re landing page has multiple pages/sections, then you’d benefit from having the reusable components to share between pages.

Simple page and a form

Great! We now have enough to start building our page and styling it with auto reload enabled. Justs run “gatsby develop” and view your page at localhost:8000. As you update your code, the changes will be reflected automatically in the browser.

I’m going to skip over the HTML and jump straight to the form. Feel free to use whatever HTML you’d like, or just copy mine from the Github project.

Collecting user information is usually a requirement for landing pages. Netlify has a great feature that will automatically decorate your form with the proper functionality to accept form submissions and have them delivered directly to your email (or optionally call a cloud function). For our landing page, we’ll create a simple form.

Note that this is just a standard html form with one key addition. The data-netlify=”true” data attribute. This attribute tells netlify to decorate the form to accept the submission on your behalf. During the deployment process, Netlify will recognize this and provide you a UI option to decide where to send this form.

Here is the final code project if you want to pull down and run locally, or just view the source code.

Deploy to Netlify

Before you continue, you’ll want to create your Netlify account and push your project up to Github.

The UI may change by time your read this article, but the steps should be:
1. New Site From Git
2. Connect to your Git Provider (i.e. Github, BitBucket)
3. Authorize Github and then select your project (mines is snacks)
4. Accept the default build options for your project and click “Deploy Site”

Netflify will now pull your site from Github, build it and deploy it. If there are any errors during building or deploying, it’ll provide the details via an online console. Code deploys usually take between 1–2 minutes.

You can now browse your site via the unique domain that Netlify has provided for you.

After the initial setup, each subsequent time you push to github, Netlify will automatically pick up the new code from master and deploy it to your url. They also have options for branch deployments and a/b testing, but that’s beyond the scope of this article.

Receiving Form Submissions

This is one of the nicest features on the Netlify platform. Saves me from having to put together an api/backend and/or database. Go to the forms tab, then click “Add notification” and select Email (or slack/webhook if you wish). Fill out the information. Done. Easy Peasy.

Custom Domains

Jump back over to your project overview and click the “Domain Settings” button. Click “Add Custom Domain” and add your domain. I’ll add mine Snacks.app

You then have to setup your DNS records. They’ll give you an option to enter using your own DNS provider, but I’m going to use them as a DNS provider as well and click that option.

You can select the default options on each of the following screens. Finally, on the last screen, you’ll be provided with the Netlify name servers that you should point to. Go to your domain registrar (i.e. name.com, godaddy, etc…) and point the name servers to the Netlify name servers from the last step. Once you update the name servers, it can take a few minutes to full propagate over to Netlify.

If you have a non .app domain, then you can stop here and start using your custom domain. However, if you have a .app domain, it’ll need to be secured via a secure connection. Netlify provides free LetsEncrypt certificates and manages the initial provisioning and renewals for you.

Secure your site with LetsEncrypt Certificates

Click on the HTTPS tab option and then “Verify DNS”. After you click it, you’ll receive a warning that says the the DNS zone was created less than an hour ago and to retry later. You’ll need to wait about an hour and then click “Retry DNS Verification”. This is the only step painful step in the entire process simply because you just have to be patient and wait :)

Once you’ve waited long enough, you should see a “Let’s Encrypt Certificate” button. Clicking this will and the subsequent “Provision Certificate” button will trigger Netlify to make the LetsEncrypt request for your domain and install it. It’ll take about 30 seconds for your domain to properly resolve under https. Snacks.app is now available at https://snacks.app

Check out the final project here Just download and run

snacks> gatsby develop

Bonus 1: Adding Google Analytics

You can add Google Analytics to your landing page. Starting from where we left off before, add the google analytics package.

snacks> yarn add gatsby-plugin-google-analytics

Modify your gatsby-config.js file to look like the following. Note: the tick marks, you’ll need to use those in the resolve attribute for it to work properly. Regular single quotes won’t work here.

module.exports = {
  siteMetadata: {
    title: 'Gatsby Default Starter',
  },
  plugins: [
    {
        resolve: `gatsby-plugin-google-analytics`,
        options: {
        trackingId: "YOUR_GOOGLE_TRACKING_ID",
        // Puts tracking script in the head instead of the body
        head: false,
        // Setting this parameter is optional
        anonymize: true,
        // Setting this parameter is also optional
        respectDNT: true,
        // Avoids sending pageview hits from custom paths
      }
    },
    "gatsby-plugin-react-helmet",
    "gatsby-plugin-sass",
  ],
}

Conclusion

Adding a landing page, with form submission, easy styling, a custom domain, and protected via HTTPS for free is a huge win. The entire end-to-end process takes 80 minutes with 60 minutes waiting for the DNS Zone. If any of your landing pages take off, I’m sure you’ll be happy to pay for the extra resources and features provided by Netlify. If you have any questions, or want me to elaborate on any of the above, please post in the comments.

Shout out to Netlify! I couldn’t be more impressed with their offering overall. Also, thanks to the fine folks behind Gatsby and Bumla, they did a really nice job of keeping those tools simple and avoiding the bloat the hampers many others tools and frameworks.

You can also reach me via twitter on https://twitter.com/johnnycon