Explore

Building a free website guide

There are lots of ways to make a website without any code nowadays, from Wordpress to modern website builders like Squarespace and Wix, but all of these can be unnecessarily expensive for a simple website, or have a “Made with X” message.

There are ways to build and host websites completely free (just pay for the domain name), here’s how.

There’s a few steps to get things started, but once the setup is done, it’s easy to make updates. 90% of the steps in this guide only need to be done once.

Tools

1. TeleportHQ

Teleport HQ lets you design and export “static” websites. A static website can be hosted on a hosting platform for free.

⁠

Loading teleporthq.io⁠

2. Github

Github is a place to store code. A hosting platform like Vercel (below) can read from it to host your website. We will take the exports from TeleportHQ and store them here.

⁠

GitHub: Let’s build from here GitHub is where over 100 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review code like a pro, track bugs and fea... github.com⁠

Steps

Sign up for an account on both TeleportHQ and GitHub (both should be free, you shouldn’t need to put in any card details). You might want to use unique passwords so you can share it with other people to help with the design work.

GitHub

Once your account is setup and you’re signed in, go to this page:

https://github.com/settings/tokens⁠

⁠

Click “Generate new token” then “Generate new token (classic)”

⁠

⁠

3. Call it ‘teleport’, set the Expiration to “No expiration”. Tick the ‘Repo’ checkbox, then click Generate Token. Copy the token and paste it somewhere (we’ll need it in the next step).

⁠

⁠

TeleportHQ

The following steps are on TeleportHQ:

1. Click ‘Create Project’ or ‘Start Building’ and choose one of the templates to start from.

⁠

⁠

2. Choosing one will open up the website builder. Here you can design your site. Before we do that, we need to paste the Github token in the settings.

3. Click the menu button in the top-left and go to Project Settings.

⁠

⁠

4. Click ‘Integrations’.

5. Paste in the token you got from Github and click save changes.

6. Click Open Editor to go back to the builder.

7. Edit the homepage template however you want, and create new pages etc.

⁠

⁠

8. Once you’re finished designing and ready to publish, click the export project button

⁠

⁠

9. Choose HTML as the Code type, and then click GitHub. This will copy all the files your website needs to Github, when it’s done it’ll open the Github page.

⁠

⁠

GitHub

We’re now back on Github, which should have opened automatically from the previous step. Go to Settings, then Pages, then under Branch, choose main and click Save.

⁠

⁠

After 1-5 minutes, you’ll see at the top of this page it will say:

‘Your site is live at ...’

You can click the button to Visit site which should load your site, live and hosted for free! All that’s left to do now is link it to your domain name.

Note the address given here is needed for linking your own domain, save this for later.

⁠

⁠

Still on that same page, you’ll see a section called ‘Custom domain’. Type your domain in there, make sure it’s exactly correct. Such as: mywebsite.com

Click Save.

⁠

⁠

You now need to go to wherever you bought your domain name from, login, and go to the DNS settings page.

From there, there will be a place where you can create a new “DNS record”. There, you will want to create a new record. Every domain provider will look different, but it should look something like this:

⁠

⁠

Name: You can name it anything. Type: CNAME Content: yourgithubprofile.github.io/websitename This is the address we saved from the previous step when the site went live. Do not include the https:// at the start, or / at the end.

Save that, your site should now be accessible from that domain (it make take a few hours before it’s live.

Making updates to the website.

90% of the steps we made are one-off and don’t need to be repeated again. To make any changes to your site, simply go to TeleportHQ, open up the website editor, make your changes, and do the export process again (choose HTML and Github).

This will automatically update your live site going forward. Note that it may take upto 5-10 minutes from clicking on the Github button to when your site changes are visible on the live site.

Making updates to the website.

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.