1 Get set up to code
To make a website, all you need is a GitHub account, an app to write code with, and a way to upload your code to GitHub.
Make an account on github.com.
If you’re a student, make sure to use your personal email and not a school address.
Download and install the text editor Visual Studio (VS) Code.
Mac users: drag the downloaded file to your Applications folder, which you can access by pressing COMMAND+SHIFT+A in any Finder window.
Download and install GitHub Desktop.
Mac users: drag the downloaded file to your Applications folder, which you can access by pressing COMMAND+SHIFT+A in any Finder window.
Open GitHub Desktop and do all the setup stuff.
Log in, fill out all the required info, and leave every setting at its default value.
2 Make a GitHub repository
A GitHub repository is a folder that stores your website’s code and other assets (like images, fonts, etc.).
Open up GitHub Desktop.
Open the repository menu in the top-left corner.
Click Add and then Create New Repository...
Give your repository a name.
Your repository name will become its URL later on: [your-github-username].github.io/[your-repository-name]. You can leave the rest of the settings at their default values.
Click Create Repository
You have just made a folder on your computer with the same name you inputted into GitHub Desktop. By default, this folder will be located in Documents > GitHub > [your-repository]. You can also press Mac: COMMAND+SHIFT+F Windows: CTRL+SHIFT+F to view the folder. I don’t recommend moving it out of this location.
Click Publish repository
Make sure that Keep this code private is NOT checked. Then, press Publish Repository
Your repository will now be accessible on github.com. To find it online, open the menu by clicking your profile picture in the top-right corner and then pressing Your repositories. You can also press Mac: COMMAND+SHIFT+G Windows: CTRL+SHIFT+G to open its affiliated webpage.
Alternatively, you can create a repository directly on github.com. If you make your repository online, you’ll need to download it to GitHub Desktop. To do that, click Clone Repository... in Step 2.3 instead of Create New Repository...
3 Code a single-page site
The minimum requirement for making a website is a single HTML file.
Open Visual Studio Code.
Go to File > Open Folder in the menu bar at the top and navigate to the repository you just made.
It should be in Documents > GitHub > [your-repository]. Alternatively, you can just drag your folder into the Visual Studio Code icon, or press Mac: COMMAND+SHIFT+A Windows: CTRL+SHIFT+A in GitHub Desktop.
Press Mac: COMMAND+N Windows: CTRL+N to create a new file.
Alternatively, go to File > New Text File in the menu bar at the top.
Press Mac: COMMAND+SHIFT+S Windows: CTRL+SHIFT+S to save your file. Name it index.html and save it to your repository.
Alternatively, go to File > Save As... in the menu bar at the top.
You HAVE to call your file index.html. Why? When you visit a website, all you’re really doing is downloading and viewing some files from another computer (usually located in a server farm). For example, here is the folder with all the files for babysteps.gdwithgd.com. By going to babysteps.gdwithgd.com, you’re actually accessing this folder. Your computer then knows to look for the index.html file in that folder, which it opens automatically. If you named the file something else, like homepage.html for example, you would get a 404 error visiting babysteps.gdwithgd.com. Instead, you’d have to go to babysteps.gdwithgd.com/homepage.html.
Type ! into your text file and press Mac: RETURN Windows: ENTER. Your file should now contain a template for an HTML document.
Learn more about what this template means here.
In between the <body> and </body> lines of your code, write Hello world!
Save your file again by pressing Mac: COMMAND+S Windows: CTRL+S
Alternatively, go to File > Save in the menu bar at the top.
4 Test your site in a browser
Your website doesn’t need to be live on the internet to view it. In this guide, we’ll learn how to preview your site before publishing it online.
Make sure your repository is open in Visual Studio Code.
If it’s not, open Visual Studio Code and go to File > Open Folder in the menu bar at the top and navigate to your repository. It should be in Documents > GitHub > [your-repository]. Alternatively, you can just drag your folder into the Visual Studio Code icon, or press Mac: COMMAND+SHIFT+A Windows: CTRL+SHIFT+A in GitHub Desktop.
Download and install the Live Server extension.
Open the index.html file from your repository in Visual Studio Code.
You can select it from the Explorer sidebar. If the sidebar is closed, click the icon in the top-left corner of Visual Studio Code or press Mac: COMMAND+B Windows: CTRL+B
Press Go Live in the bottom-right corner. This will open a live preview of your site in your web browser.
Alternatively, press Mac: COMMAND+L+O Windows: ALT+L+O to preview your site. If you ever accidentally close the in-browser preview, you can use this shortcut to reopen it.
Now, whenever you make changes to your site and save your file with Mac: COMMAND+S Windows: CTRL+S, your in-browser preview will automatically update!
You can use Mac: COMMAND+L+O Windows: ALT+L+O to preview any .html file you have open in Visual Studio Code.
You can also drag any .html file into a web browser to preview it, but this won’t always provide an accurate preview of how your site will look once it goes live.
5 Launch your site on GitHub Pages
Open your repository in GitHub Desktop.
If your repository isn’t already open, select it from the drop-down menu in the top-left corner.
Fill out the Summary field with something like “Initial commit” (the exact text doesn’t matter) and press Commit to main.
You’ve just created a code commit, which is like saving a version of your repository’s files. The Summary and Description fields are there to help you keep track of your commits in case you want to roll back to a previous version later on.
Click Push origin.
Pushing your code uploads the most recent commit to your public repository on github.com.
Did you get an error? Sometimes, you might encounter the following error when pushing your repository: The remote disconnected. Check your Internet connection and try again. To fix this error, do the following: i. Open the Terminal application on your Mac. ii. Type git --version and press enter to make sure you have Git installed. If it isn’t installed, you’ll be prompted to install it. iii. Once Git is installed, type git config --global http.postBuffer 157286400. And that’s it! You should be able to push your repository now using GitHub Desktop.
Navigate to your repository on github.com by pressing Mac: COMMAND+SHIFT+G Windows: CTRL+SHIFT+G in GitHub Desktop.
You can also do this by going to github.com, clicking your profile picture to open the menu, and then going to Your repositories.
In the menu at the top, go to Settings. From there, click Pages from the sidebar.
In the Branch section, change the None dropdown to main and click Save
If you’re unable to do this, your repository is likely set to private. To change this, click General from the sidebar, scroll all the way to the bottom, and click Change visibility. A series of scary pop-ups will try to warn you, but ignore them and keep proceeding.
After around a minute, your site should be live! Its URL will be [your-github-username].github.io/[your-repository-name]
To check on the status of your site, go to the Actions tab in the menu at the top. There should be workflow running to deploy your website. Once it’s finished, you’ll find a link to your site’s URL back in the Settings > Pages menu.
A website is just a series of files that you can view in your web browser. What we just did is ask GitHub to load our files when a specific URL is accessed. Now, when you go to your URL, one of GitHub’s computers sends you the right files. This is called static web hosting (because a visitor can’t change any of the files — they can only view them).
6 Add more pages to your site
Every page on your site is a .html file. If you have a single-page website, you have at least one file: the index.html file we made in Step 3.
To add more pages, we’re going to add more folders to our repository, each with its own index.html file.
Here’s an example of the folder structure for a website with a few pages:
What does that all add up to? Let’s see the URLs that would correspond to each folder.
We can link between folders using the <a> HTML element. This element lets you link to other websites or between pages on a single site.
Confused? Let’s try out a demo site! Click here to download the code for a website with multiple pages. Unzip this folder and open it in Visual Studio Code. Then start Live Server to see how the navigation works between pages. One warning: dragging these files into your web browser to test them directly won’t work in this case. Live Server is required for testing proper links. If you’ve done everything right, the demo should look like this.
Let’s summarize how to make a multi-page website:
For each page on your website, create a subfolder.
You can set up a URL structure by putting subfolders in subfolders. For example, by making a projects folder with a subfolder project-1, your URL will be [your-site].com/projects/project-1.
Create an index.html in each of the subfolders you just created.
To link to a subfolder, create an HTML element using the following format: <a href="[folder-name]/">I’m a link!<a>
You can do the same thing to link to multiple nested subfolders: <a href="[folder-1-name]/[folder-2-name]/">I’m a link!<a>
To link to a parent folder, create an HTML element using the following format: <a href="../">I’m a link!<a>
You can do the same thing to link to multiple parent folders: <a href="../../">I’m a link!<a>. If you want to navigate to a parent and then another subfolder, you can combine the previous two steps: <a href="../[parent-subfolder-name]/">I’m a link!<a>
OK, I lied a little bit. Technically, you can name .html files whatever you want and link to them directly. However, then you will end up with .html at the end of your URL. For example, we can have a file called cool-page.html. We can then link to that file with <a href="cool-page.html">Go to a cool page!<a> You’re likely to encounter situations in the real world where organizations have multiple .html files in one folder. Here’s an example from The New York Times, which we can tell uses the folder structure 2024/08/27/arts/music/ from the URL structure.
7 Update your live site
Open your repository in GitHub Desktop.
If your repository isn’t already open, select it from the drop-down menu in the top-left corner.
Fill out the Summary field with something that describes what you changed (the exact text doesn’t matter) and press Commit to main
Click Push origin
Did you get an error? Sometimes, you might encounter the following error when pushing your repository: The remote disconnected. Check your Internet connection and try again. To fix this error, do the following: i. Open the Terminal application on your Mac. ii. Type git --version and press enter to make sure you have Git installed. If it isn’t installed, you’ll be prompted to install it. iii. Once Git is installed, type git config --global http.postBuffer 157286400. And that’s it! You should be able to push your repository now using GitHub Desktop.
That’s it! Once your site is live, it will automatically updates after a few minutes every time you push your commits. Make sure you push your code, because just creating commits won’t update your live site.
8 Connect to a custom URL
Make an account on namecheap.com.
If you’re a student, make sure to use your personal email and not a school address. Namecheap is a marketplace for leasing domains (URLs) from, but there are many other competing services for the same thing. Domain names cannot be purchased outright, so we buy from companies like Namecheap because they handle a lot of the expensive logistics that go into internationally managing domain licenses.
Search for a domain you want to purchase and add it to your cart.
These can vary wildly in price, but most .com domains are below $20 per year.
Buy your domain (no need to purchase any of the extra add-ons advertised at checkout).
Head to your account dashboard on namecheap.com (accessed via the Account dropdown in the navbar).
Find your domain name (the URL you purchased) in the list and click Manage.
Click on the Advanced DNS menu.
In the Host Records section, you’ll find several records (like a “CNAME Record” or something similar). Delete all the existing entries.
These placeholder records provide a temporary “parking” page for your site that shows it has been purchased if you try visiting it.
Add several new records (as indicated by Namecheap’s GitHub Pages tutorial):
Type: A, Host: @, Value: 185.199.108.153
Type: A, Host: @, Value: 185.199.109.153
Type: A, Host: @, Value: 185.199.110.153
Type: A, Host: @, Value: 185.199.111.153
Type: CNAME, Host: www, Value: [your-github-username].github.io
These records point your domain to your GitHub account. Alternatively, you can have your site live on a subdomain of your URL. This is like the “babysteps” part of “babysteps.gdwithgd.com”. To do this, add the following record instead of the “CNAME” record listed above: Type: CNAME, Host: [subdomain-name], Value: [your-github-username].github.io. There is no limit to the number of subdomains you can host on a single domain.
On github.com, go to your repository’s page, click Settings, and then go to the Pages submenu from the sidebar.
You can access your repository’s page by pressing Mac: COMMAND+SHIFT+G Windows: CTRL+SHIFT+G in GitHub Desktop, or by clicking your profile picture on github.com and then going to Your repositories.
In the Custom domain field, add the url of the domain name you are trying to connect (e.g. gdwithgd.com). Press Save.
You must have already launched your site on GitHub Pages to see this field.
Your site will now go through some automatic checks to make sure everything is working properly. Once those checks are complete, check Enforce HTTPS. You may need to refresh the Pages page before checking the option.
HTTPS is a security protocol that all modern sites should have. Learn more about it here.