The Essential Guide to Creating a Website Landing Page

8 min readMay 6, 2023

With $9.15 and just a little bit of technical know-how

In this Article, I will Tell You:

What a landing page is and why you might want one
Your options for creating one
My preferred approach
The step-by-step process

This article is aimed at people who are at least somewhat familiar with HTML. I will explain each step, but I won’t go into detail on the configuration.

The only cost involved is $9.15 for a domain address for 1 year.

What is a Landing Page?

A landing page is usually a single web page, usually used to give information about a product or company.

I created https://runsapnow.com/ as a single-page website, to validate an idea for a Software as a Service (SaaS) product I thought of.

Options Available for Creating Landing Pages

Hired Help

Hire someone to build it for you (an individual or a company). Fiverr and Upwork are two popular sites (I haven’t had great experiences with either).

There are thousands of individuals/companies offering website expertise — be careful when selecting them, look for evidence of prior work and hidden charges.

Easy-Build Services

There are lots of ‘easy build’ web services, including Carrd, Framer and SquareSpace.

These make creating a landing page easy, but they have a cost and have some restrictions.

WordPress

Hosted or self-hosted, WordPress is a good option if you want to expand your site to include a blog (good for SEO), but it’s overkill for a landing page. Plus, if you host it yourself, you have to keep up with the patching and administration.

Static Site Hosting

Static sites are very fast to load because they don’t have dynamic code or plugins to load and execute.

My Preferred Approach

Having tried most of the popular options and built sites from scratch, my preferred method to create a basic landing page or website is to use a static site hosting provider, namely Cloudflare Pages.

I have used this same approach for websites including Cornish Flora, PerformIT and RunSAPnow.

The Step-by-Step Process

1) Install an Integrated Development Environment (IDE)

Download and install an IDE (a program for writing code).

I use Visual Studio.

2) Download a Website Template

BootstrapMade has a good selection of free templates to choose from. You can demo them online before downloading.

The templates are reactive, meaning they will work well on mobiles, tablets and laptops.

Extract the zip file into a folder on your computer.

3) Edit the Landing Page

From your IDE, open the folder.

Edit the landing page (index.html)

Open the index.html file in a web browser to see your changes.

If you aren’t already familiar with HTML, you will be able to figure most of it out. Learn and get guidance on HTML from W3Schools.

Comment out the sections you don’t want with this syntax before and after:

<!--
SECTION YOU DON'T WANT RIGHT NOW
-->

4) Create a Favicon

The favicon is the image you see in the tab of your web browser or the shortcut to the website on screen of your phone.

Create a basic favicon from favicon.io.

I created one with a white S on a round orange background, using the orange colour value used in the website template.

Copy the code within the head tag of your landing page.

Download the zip file they provide and extract it into the root folder of your website.

5) Find a Domain Name

Use a service such as Namecheckr to find an available domain name — it shows if the name is available on services such as Twitter, Facebook, LinkedIn, etc.

6) Register the Domain Name

I use Cloudflare for registering domains as they are a leading provider and offer a wide range of services. For $9.15/year you can’t complain.

7) Register Social Accounts

8) Push the Code to GitHub

If you don’t already have one, create an account on GitHub.

From your IDE, push your landing page code to GitHub.

9) Create a Project in Cloudflare Pages

From the Cloudflare home page, select:

Pages
Create a project
Connect to Git

Follow the instructions to connect to your GitHub repository.

Once done, your website’s code (in GitHub) will be replicated to Cloudflare Pages, where it will be accessible (as a website) from the Internet, using your chosen domain name.

10) Forward www. to non-www

You should use https://www.example.com or https://example.com — and forward all traffic from the one you are not using to the one you are using. I prefer without the www.

In Cloudflare, add a DNS record:

Type = CNAME
Name = www
Target = xxxx.pages.dev (copy this value from the existing DNS record, which has the name of your domain)
Proxy status = Proxied

Then in the main menu, navigate to:

Rules
Page Rules
Create Page Rule

e.g.:

11) Review all Options in Cloudflare

Go through every page in the Cloudflare menu and select everything to make your website secure and fast.

Most of the options are quite obvious, but you may need to read the online documentation for some. I suggest checking your website after making changes, to ensure that it still looks and behaves how you expect it to.

12) Create a Contact Form

Formspree handles the contact form logic from the requests sent to it from your landing page. It then send you the contents of the forms via email.

The Cloudflare Pages help documentation explains how to configure your landing page’s form code when using Formspree.

13) Get and Optimise Images

Replace any images/videos on your landing page as required.

I primarily use Depositphotos as they have a great range of free and paid-for images and videos.

I use CloudConvert, to convert all images to WEBP format as this produces the smallest file size. With the exception of the image that I want to be displayed when sharing the URL in social media — this needs to be JPG or PNG (I use JPG as this uses lossy compression, with smaller file sizes).

Use Canva if you want to create good looking images.

Use OKZest if you want to offer personalised text within images (may require additional coding).

14) Evaluate the Landing Page with ScreamingFrog

Download and run ScreamingFrog to evaluate your site.

It will tell you which meta data you need to add, highlight any issues, assist you with optimising SEO, etc. It’s a fantastic tool.

You want the ‘Issues’ tab to have no high or medium priorities.

15) Evaluate the Landing Page with Google PageSpeed

Use Google PageSpeed to evaluate how quickly your landing page loads from mobiles and laptops. It will also highlight SEO/code issues and provide suggestions.

16) Index the Landing Page with Search Engines

Inform the Google and Bing search engines about your new website.

17) Add Analytics

Add analytics tracking, using a provider such as Google Analytics.

This allows you to see how many unique visits your landing page is getting, where the people are located, what they searched for to get to your site, etc.

18) Add Microsoft Clarity

Microsoft Clarity allows you to see exactly how people are using your website, by ‘heatmapping’ where they look and scroll.

19) Add Open Graph Image Preview

This presents an image and descriptive text when your website is shared on social media.

Using Open Graph to share an image from a website, on Twitter

The image must be JPG or PNG (I prefer JPG as it’s a smaller file size).

The OpenGraph website is the easiest way to get the configuration you need.

Enter your website address, fill in the details it asks for — and it provides the code you need.

20) Add Uptime Monitoring

I use Hetrixtools to monitor my website. It emails me when they are unreachable for any reason.

21) Create robots.txt

Use Ryte to create a robots.txt file. This file tells search engines which of your pages they can and cannot crawl.

My robots.txt allows everything:

User-Agent: *
Allow: /

Inform the Google and Bing search engines about your robots.txt.

22) Create a sitemap.xml

Use xml-sitemaps to create a sitemap.

Inform the Google and Bing search engines about your sitemap.xml.

23) Add humans.txt

Not essential (very few people will see it), but humans.txt is just a text file (stored in the root folder of your website) where you can add whatever you want, such as details of the people who created the website, other websites you own, etc.

You’ve Made It!

If you’ve reached this section, you should now have a good looking, fully-functional landing page!

Please let me know in the comments how easy you found it and if there’s anything extra you do.

Also, let me know what you’re creating landing pages for and which elements work for you to attract and convert customers.

Want More?

Recommended Services

Sign up to Curve and get £5
Sign up to Crypto.com with referral code qu80wtyk0i This can be used within 5 days from having your account KYC approved. Get $25 when you stake for a card
Sign up to the Crypto.com Exchange with referral code qu80wtyk0i, you will get $10 if you stake at least 1,000 CRO and $50 if you stake at least 5,000 CRO

My Articles

My Other Things

SelfCrypto.com has offers and information on cryptocurrency 🕸️
OKZest add personalised text onto images, for higher engagement in email marketing, social media and websites 😀
RunSAPnow save money and add flexibility to the running of your cloud-based SAP systems 🧑🏻‍💻
Cornish Flora handmade items from my wife Rebecca 🎴
YouTube channel my interests 📺
Newsletter my thoughts 💌
Buy me a coffee ☕
Follow, clap and comment below 👍