Categories
Tutorials

How to create a one page website and host for free (WordPress & Netlify)

I found a method to create simple websites that is easy and costs nothing to host.

This method is especially useful if you are a person who needs an easy website just to present your work.

For example, let’s say you’re a journalist who wants to present your work.

You just want a page that has your picture, your contact details and links to your work.

This is perfect.

Or if you are a small business who just needs one page with all of these details.

Yep, this is a good solution too.

If you need a more complicated site, I’m around to help you.

But I also know that a lot of small businesses need to be as frugal as possible, so try this method, and feel free to contact me if you have any questions.

Table of Contents

An overview of how to create your website for free

The way you’d create a site involves using WordPress and Local by Flywheel. This combination allows you to create a website on your desktop.

Then, you will export the site using Simply Static made by WordPress plugin developer Patrick Posner.

Simply Static produces a bunch of HTML files meant to mimic the final output of your website.

You’ll take these files and upload them to Netlify, a free hosting service that is fantastic.

Just a caveat: you do have to pay for your domain if you don’t already have one. Don’t pay more than $10-$30 per year unless it’s a rare or premium domain.

Why WordPress?

The main crux of this method involves building your website in WordPress.

WordPress gets a bad rep in certain circles, but for most people, having a platform which you understand is key to being efficient with it.

I learned this when my previous company started using ProcessWire for a website.

While it probably had a great developer experience, I found the unfamiliarity of my colleagues with it made it a lot harder to get things done.

WordPress is used by a lot of people and therefore there are guides all over that can help you.

How does Simply Static eliminate your hosting costs?

Now, one downside of WordPress is that it almost always requires you to pay for a host.

GoDaddy, HostPapa, Bluehost are all examples of hosts.

You pay them a monthly fee to rent a space on their computers that will serve your website.

WordPress requires a computer to be running all the time because it creates the website “on the fly.”

What Patrick Posner’s Simply Static plugin does is that it takes WordPress PHP-generated pages and turns them into HTML.

PHP pages are basically pages with a bunch of code and formulas. Once those are calculated by the server, they become HTML files.

Why I like this method

The main reason why I like this method is because I do not ever have to pay for hosting fees for simple, low-traffic sites.

Netlify has its bandwidth limits and if you’re actually hitting it, I’d say you’re probably getting great traffic (or you have files that are incredibly large).

Static sites are also very fast to load. This has become quite important due to Google’s search algorithm prioritizing pages with a rapid experience.

Finally, I think WordPress’s Gutenberg editor has made it so much better at creating web pages.

While it was initially created as a blogging platform, they are definitely moving ahead with the times.

Downsides of using Simply Static

Every time you update your website, you will have to regenerate the website files and upload them.

If you’re good with computers, you can probably set up a CI/CD pipeline with Github and Netlify.

Nonetheless, when I created this tutorial, I envisioned that the pages would only get uploaded once every six months at max, so it’s not very onerous to do it.

You can’t use this method if…

If you want to build an ecommerce site, you’re unlikely to be able to use Simply Static.

If you want a website with dynamic functionality such as user authentication, you probably can’t either.

So, if your site falls beyond the bounds of being a brochure or purely informational, then you might need to seek other methods. 

Feel free to contact me; my email is at the bottom of every page.

The tutorial starts here…

Before we start, it would be good if you had some knowledge of WordPress.

You’ll also need to know what you want for your website, as I will only briefly show you how to create a website.

Ultimately, the main focus of this tutorial is to show you how to use Simply Static and upload it to Netlify.

I did this on a Windows 10 computer, but I believe you can do this on any computer whether it’s Windows 7, Mac or Linux.

Step 1: Set up Local

YouTube video chapter: using Local by Flywheel

Local is a great piece of software that allows you to develop WordPress websites on your computer.

You can download the software here. Once installed, open it up and start a new site by clicking the plus sign on the bottom left of the menu.

Fill in the input boxes on the installer. 

None of these boxes are so consequential that if you write the wrong thing, you’re forever doomed, so don’t worry too much about perfection.

Next, click “Admin” (screenshot step 2).

Step 2: Create your WordPress site

YouTube video chapter: Working with WordPress

Here’s where you create your own website.

In the video above, I have done a recording of how I created a Photoshop tutor’s website.

It’s really built as a “proof of concept” website that shows the best practices that you should adopt.

All of these changes can be made by going to:

WordPress sidebar > Appearance> Customize

Here are some things that I did, and the corresponding menu item where you can change these.

  1. Widgets -> Remove all default widgets on the footer (Recent comments, Recent Posts, etc.)
  2. Menu -> Primary/ Secondary Menu: Removed all menu links and all social media icons (you may keep them if you have these links)
  3. Colors & Dark Mode: Changed the background colour (the default theme’s green is really ugly)
  4. Site Identity: Change title and description

Customize content

Once you are done with customizing the footer and header, you can move on to customizing the content.

Go back to your main menu and then go to Pages -> All Pages

Then, find the page that is labelled “Front Page”

Click “Edit”

This is where you’ll change your front page’s content.

On top, you will see the title of your website. Change it to whatever you want.

So, for example, if you are a make-up artist, you can write “Make-up services in [location]”.

Then, create the content that you want.

Top tip: If you want to make something full width…

Click on the block and go to its alignment drop-down menu, then click “full width”

This is especially useful for images. Bigger images are more impressive.

I’ll leave the content development up to you, but here’s what I built.

Step 3: Generate static files using Simply Static plugin

OK, here comes the most critical step.

Before you generate your static files, here’s an optional step that will make your site more complete: 

Go to your Posts and Pages menu and delete all pages that are currently not linked. 

It’s optional but it helps you ensure that people aren’t seeing anything incomplete and irrelevant, plus it reduces your file size.

At the main menu, go to Plugins -> Add New

On the top right, you will see an input box called “Search plugins”

Type in “Simply Static”

The first entry should be the correct one. Make sure it’s made by Patrick Posner.

Once installed, you should see a Simply Static menu item in your sidebar

Click on it, and then click on “Generate Static Files”

You should be able to see the button “click here to download” once the plugin has run through its process.

Download that file and then remember where you stored it. You are going to need it for the next step.

Step 4: Hosting on Netlify

YouTube Video Chapter: Netlify

Netlify allows you to host your site for free and you do that by uploading the files that you have just generated onto their servers.

There are other services that offer the same service including Cloudflare Pages and Github Pages. 

These services allow you to host low-impact websites for free.

Anyway, I am going to show you how to do it with Netlify, since I am most familiar with them. They are really great.

Go to Netlify.com and sign up.

Once you’re logged in, go to the “Sites” link.

You will see a box below that says “want to deploy a new site without connecting to Git”

Drag your folder from your computer into this box.

Give it a minute or two to process, and then you will see your new site. Click on it and you should see a link that says “XXXX.netlify.app”

That’s where your current website is located.

Bonus: custom domain

Here’s how you can buy your domain through Netlify.

Click on the button “Domain settings”

Then go to “Add custom domain”

Type in the custom domain that you want (for example: photoshopcoachvancouver.com)

If it’s available, you can go ahead and buy it. If not, try another domain name.

Next steps

I hope this helps and just before I close off the article, I’d just like to say that if you have any questions, just email me (link below) and I will read what you have to say.

Another thing to note is that every time you update your website, you will have to do the same process to upload the website.

It’s tedious if you have to do it every day, so really, this method is meant for people who update their sites once in a long while.

Otherwise, you can consider uploading it to Github so that it’s constantly synced up.

Hope this helps!