Building a website with a static site generator, part 3: Domain, Analytics and Forms

In this series:

• Part 1: Building a website with a static site generator, part 1: Setup
• Part 2: Building a website with a static site generator, part 2: Eleventy
• Part 3: Building a website with a static site generator, part 3: Domain, Analytics and Forms

In the first post in this series we set up our static site with Eleventy and built a deployment process with GitHub and Netlify and added Netlify CMS for managing our content. In the second post, we learned how to integrate HTML5Up layout and added new content types to our site.

In this post, we look at setting up a domain, simple analytics and collecting data with forms.

Domain

When you create a new site in Netlify, it randomly generates you a [something].netlify.app URL. It works and sometimes it's enough, especially for prototype projects. But for a personal website, blog or portfolio, you probably want something bit more personal and bit more professional.

Custom netlify.app domain

First step you can take to make it more personal and easier to remember is to go to Settings->Domain Management->Custom Domains->Options->Edit site name and give it your site a custom name. That way you'll get a free [custom_name].netlify.app domain.

Custom domain

For a full custom domain, you have a couple of options. The easiest one for this setup is to get your domain directly from Netlify. When you do that, you can manage everything from one place and you don't have to do any manual DNS settings.

You can buy a domain from the same place you change your site name (see above). Click Add custom domain and enter the domain you want. If it's available, you can buy it directly from Netlify with your credit card for an annual fee. If it's not available and you don't own it from another provider, you have to think about a new one. If you do own it somewhere else, you will be given an opportunity to add it to your Netlify site.

Their documentation is pretty good at walking you through all these different options.

I have domains both with Netlify and with Hover.com and so far I've been happy with both.

Analytics

For analytics, you have multiple options depending on what kind of data you want to gather. For many of my sites, I don't collect any data. For my main site, I use Netlify's own analytics tools which is nice as it relies on server logs rather than collecting everything you can from individual users.

Netlify Analytics

Analytics in Netlify is the first paid feature covered in this post. It's not necessary for your site so while I wanted to keep this tutorial mostly free, I figured I'd mention it as well. At the time of writing, adding Netlify Analytics costs you $9/mo and you can enable them from the Analytics tab in your project.

Through their analytics, you get page views, unique visitors, top pages, top sources and the amount of bandwidth used. I've added it to my site mostly out of curiosity: I speak in a lot of events and it's always fun to see if any of those talks leads to a peak in the amount of visitors (spoilers: so far it hasn't).

Google Analytics

If you want to use a 3rd party analytics service or gain more insights, one of the most popular ones is Google Analytics. After creating a project for your site in their site, you need to add a piece of Javascript into your base.njk to add tracking to every page.

Fathom Analytics

Another option for Google Analytics that has been popping up on my radar in Twitter is Fathom. I have never used it so I can't really say anything one way or another but many people seem to like it as an option to giving your users data to Google.

Forms

If you want to collect some data like have a "Contact me" form or a feedback form on your site, Netlify makes that pretty much as simple as possible. By adding netlify attribute into your form, you automatically enable collecting data that you can then read from Netlify's admin panel.

<form name="contact" netlify>
  <p>
    <label>Name <input type="text" name="name" /></label>
  </p>
  <p>
    <label>Email <input type="email" name="email" /></label>
  </p>
  <p>
    <button type="submit">Send</button>
  </p>
</form>

There are two important attributes in this form: name="contact" which defines under which name your form submissions can be found in Netlify admin and netlify which enables the feature in the first place.

After you deploy this, when someone submits the form, you can find the results immediately from your admin page.

Spam is always a factor with online forms. There are bots that crawl the internet and fill in any forms they can find. To prevent them, you can either use a honeypot field (a hidden field bots will fill but humans won't) or reCAPTCHA2 which you might be familiar as a user. Read more from Netlify's documentation on preventing spam.

The free Netlify forms functionality allows you to gather up to 100 submissions per month across all forms in your site and file uploads up to 10MB per month.

Wrap up!

With these three posts, you now have the basic understanding on how to get started building static sites with Eleventy, hosting it at Netlify (with extra goodies like domains and forms), managing your content via Netlify CMS and storing your code and its changes in GitHub.

Next is the hard part: you have to come up with good content and find your own tone and visual style. That's work that never ends. I spend time every month with my website, honing it, testing different things, and changing layouts and copy.

Having a personal blog is one of the most effective ways you can showcase the world what you can do. Write posts about projects you've done, things you have learned and so on. Don't stress too much, just get into the habit of writing as that's the only way to become good at it.

Some of my most popular blog posts over the years have been PHP needs its own ES6 in which I ranted about my frustrations towards the inconsistencies of PHP's standard library and I love writing scripts to solve small problems in which I wrote about a small script that I wrote to automate renaming files.

If you're a junior developer and you have a blog of your own where you write about technical content, tweet a link to it to me. I'll promise to read your posts.