How to make a website

How to make a website

Making a website by hand is fun,
creative and rewarding, but the process is a
mystery to most folks. This page shows you how to
make and publish a simple website (for the lowest cost
possible, too). No coding experience? No problem!
You can learn all you need along the way.

~ Nathan, June 2023

Contents

  1. What is a website?
  2. Register your domain
  3. Create a repository
  4. Point your domain there
  5. Configure the repository
  6. Upload the template
  7. Editing your website
  8. Resources & next steps

What is a website?

A website is a bundle of files made up of HTML and CSS:

I’ll share template files to get you started. But first, let’s arrange:

Register your domain

  1. Go to Porkbun.com.
  2. Search for a domain that you like that’s still available.
  3. Create an account and pay. Congratulations! This is your only expense.

Create a repository

  1. Sign up to GitHub in a new tab.
  2. After logging in, use the + drop-down menu in the upper-right of any page and select New repository.
  3. Enter username.github.io as the repository name. Replace username with your GitHub username. For example, if your username is gemini, enter gemini.github.io.
  4. Tick “Add a README file”.
  5. Click the green Create repository button.
  6. The repository will appear. This is where you’ll be storing your website files, leveraging GitHub’s servers.

Point your domain there

  1. Back on Porkbun, go to your “Domain Management” page.
  2. Under your domain name, click the little word “DNS”.
  3. Scroll to the bottom of the pop-up window. Under “Current Records”, click the trash can for each entry.
  4. Each time you’re asked “Are you sure you want to delete this DNS record?”, click the OK button.
  5. Scrolling up, under “Here you can configure custom DNS records for your domain”, set Type to A - Address record.
  6. Leave “Host” blank.
  7. Under “Answer”, paste in this IP address: 185.199.108.153
  8. Click the blue Add button on the bottom-right.
  9. Repeat steps 5–8 for each of these IP addresses:
    • 185.199.109.153
    • 185.199.110.153
    • 185.199.111.153
  10. Scroll back up, and this time, enter these settings:
    • Type: CNAME - Canonical name record
    • Host: www
    • Answer: username.github.io (replacing username, of course)
  11. Again, click the blue Add button.
  12. Make sure your five new DNS records match the settings above. Now your domain name will point to GitHub’s servers, with or without www.

Configure the repository

  1. On the GitHub repository page, click Settings. (If you can’t see the “Settings” tab, select the ellipsis dropdown menu and click Settings.)
  2. In the “Code and automation” section of the sidebar, click Pages.
  3. Under “Build and deployment”, under “Source”, make sure Deploy from a branch is selected.
  4. Under “Build and deployment”, under “Branch”, use the dropdown menu to select main as the publishing source, and then click Save.
  5. A section called “Custom domain” will appear. Enter your domain (e.g. dog-pyjamas.com, without https:// or www) and click Save.
  6. Lastly, tick Enforce HTTPS. If the option is disabled, more time is required for the DNS records you created to propagate around the world so that GitHub can detect them. Make some tea then try again.

Upload the template

  1. On your computer, create a folder called username.github.io (replacing username as appropriate).
  2. Download this file called “index.html” to that folder.
  3. Download this file called “style.css” also to that folder.
  4. On the GitHub repository page, select the Add file dropdown menu, then click Upload files.
  5. Add index.html and style.css and wait for them to be uploaded.
  6. Click the green Commit changes button.
  7. Wait a minute for GitHub to publish your site. (You can check its progress by clicking Actions in the same row as the Settings tab.)
  8. The template site will now show at your domain. Hoorah!

Editing your website

You’re ready to make the template your own:

You can edit your website files directly on GitHub:

  1. On the repository page, click the file that you want to edit.
  2. Click the little pen icon at the top-right.
  3. Make your changes.
  4. Click the green Commit changes… button at the top-right, and in the pop-up window, click the second Commit changes button.
  5. After a minute, the site at your domain will reflect the changes.

Alternatively, to preview changes before they go live:

  1. On your computer, edit the files in a text editor such as TextEdit or Notepad.
    • If you want to jump into the deep end, try VS Code.
  2. Preview your edits by double-clicking index.html in your folder so it opens in a web browser.
    • In VS Code, Live Server is a useful extension. Activate it by typing ⌘-P or Ctrl-P then ext install ritwickdey.liveserver, then right-click an HTML file in the Explorer pane and select “Open with Live Server”. The browser preview will refresh every time you save.
  3. When ready to publish, follow steps 4–7 of the previous section.

Resources & next steps

If you’ve played with the template and become curious about what more you can achieve with HTML and CSS:

A few steps above are taken from Derek’s guide to tech independence. If this DIY approach interests you, he outlines further steps you could follow to free you from relying on any particular company or software. Your own website is a good start. If GitHub ever becomes unreliable, you can host your files elsewhere and then point your domain to the new host’s servers.

Have fun!

That’s really all you need to get started. Any questions, holler at me. 🥳