How to make a website

What is a website?

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

• HTML is the structure of each page, with words like “header” and abbreviations like “p” (for “paragraph”) and “img” (for “image”).
• CSS is the styling, with words like “text-shadow” and “background-color” (you have to spell like a Yank). This makes your site pretty.
• Many web pages also contain JavaScript, a programming language used to add functionality. You won’t need it for now (or maybe ever).

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

• a server to host the files, and
• a domain (your online address; for example, mifsud.org) to point requesting browsers to the server.

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:

• Change the content in index.html to anything you want. This will be your home page.
• If you need a new page, copy the template, call it “about.html” or whatever, and link to it from the home page.
• To change the look of your site, edit the style.css file.

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.
• Optionally, use GitHub Desktop to streamline the upload process.

Resources & next steps

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

• Look through introductory resources like this and this.
• Search for instructions (e.g. “HTML embed video”, “CSS multiple columns” or “CSS gradient background”).
• Peek at the raw code of websites that you like! Just right-click the page and select “View Page Source” (⌘-U or Ctrl-U).

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.