1 Get set up to code
To make a website, all you need is an app to write code with, a GitHub account, and a way to upload your code to GitHub.
Download and install the text editor Visual Studio (VS) Code.
Mac users: make sure to drag the downloaded file to your Applications folder, which you can access by pressing COMMAND+SHIFT+A in any Finder window. Don’t run the application from your Downloads folder!
A text editor is an application that lets you write code. It supports the editing of plaintext files, which are special text files that don’t feature the formatting features (like fonts, colors, etc.) of typical documents. We just care about the content of our code, not how it looks, so no matter what programming language we’re using we write it as plaintext files.
Download and install the Live Server extension.
We’ll use this extension in Step 4 to test your website before launching it to the Internet.
Make an account on github.com.
You’ll want to keep this account for a long time, so name this account something you’re proud of and use an email you won’t lose access to! If you’re a student, make sure to use your personal email and not a school address.
GitHub is a popular service for code management. It lets you store your code (and other files) online, collaborate with other coders, see older versions of your files, and even launch websites for free.
Download and install GitHub Desktop.
Mac users: once again, make sure to drag the downloaded file to your Applications folder, which you can access by pressing COMMAND+SHIFT+A in any Finder window. Don’t run the application from your Downloads folder!
GitHub Desktop is an application that lets you easily edit the code (and other files) within GitHub repositories, which you’ll learn more about in Step 2.
Open GitHub Desktop and do all the setup stuff.
I’m being a little vague because the exact log-in experience changes every now and then. Log in and fill out all the required info. If you encounter any confusing questions, you can 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.). There are two methods for creating new repositories: either from the GitHub Desktop app, or from github.com. I’ll explain both methods.
Method 1 Creating a repository using GitHub Desktop
Open up GitHub Desktop.
Mac users: make sure you moved the application into your Applications folder, which you can access by pressing COMMAND+SHIFT+A in any Finder window.
Click File from the title bar at the top of your screen and select New Repository...
You will probably see other buttons that do the same thing. Whichever button you press, a popup should appear that says Create a New Repository
Give your repository a name, making sure you only use lowercase letters and hyphens! Avoid uppercase letters, spaces, or other symbols.
Your repository name will become its URL later on: [your-github-username].github.io/[your-repository-name]. For example, this site’s repository is called baby-steps
Once you’re happy with the name you’ve chosen, leave the rest of the settings at their default values and press Create Repository.
You have just made a folder on your computer with the same name you inputted into GitHub Desktop. With GitHub Desktop open, click Repository > Show in Finder (or Explorer) in the title bar at the top of your screen to locate the folder. Alternatively, you can also press Mac: COMMAND+SHIFT+F or Windows: CTRL+SHIFT+F as a shortcut. By default, your repository’s folder will be located in Documents > GitHub > [your-repository]. Don’t move the repository’s folder once you’ve created it!
Click Publish repository at the top of GitHub Desktop. This will open up a popup with the title Publish Repository
Uncheck the Keep this code private box and keep all other settings at their default values. Then, press Publish Repository
Your repository will now be accessible on github.com. With GitHub Desktop open, click Repository > View on GitHub in the title bar at the top of your screen. Alternatively, can also press Mac: COMMAND+SHIFT+G or Windows: CTRL+SHIFT+G as a shortcut.
Did you forget to uncheck the Keep this code private box when creating your repository? To fix this, first log into github.com. Open up your repository on github.com (Step 2.6 explains how to get here). Click Settings at the top of your repository’s page. Scroll to the bottom of the page, and click Change visibility. Change your repository’s visibility to public and click through all of the (suprisingly scary) screens that GitHub uses to warn you not to do this.
Method 2 Creating a repository using github.com
If you’ve already followed the previous steps, feel free to skip this. These steps show another way of creating a repository from github.com as opposed to GitHub Desktop.
Open github.com in your web browser.
Click your profile picture in the top-right corner and navigate to Your repositories
Click New to create a new repository. This should take you to the New repository page.
You may have seen this button in other locations on github.com. As long as you end up at the New repository page, you can proceed.
Give your repository a name, making sure you only use lowercase letters and hyphens! Avoid uppercase letters, spaces, or other symbols.
Your repository name will become its URL later on: [your-github-username].github.io/[your-repository-name]. For example, this site’s repository is called baby-steps
Leave the rest of the settings at their default values. Make sure that Public is selected for your repository’s visibility setting. Press Create repository.
On your repository’s page, click Set up in Desktop. Give your browser permission to open GitHub Desktop if you’re prompted to do so.
A popup should appear with the title Clone a Repository. Leave all the settings at their default values and click Clone
As an alternative to this and the previous step, open GitHub Desktop and click File from the title bar at the top of your screen. Then click Clone Repository... and search for your repository’s name. Select it and press Clone
And you’re done! No matter the method you picked, you’ll end up with a repository that’s both live on github.com and downloaded to your computer.
3 Code a single-page site
The smallest website contains a single HTML file. This is a plaintext file with the extension .html. Let’s make one!
Open GitHub Desktop.
Make sure your repository is selected from the menu at the top-left corner. If you haven’t created a repository yet, follows the steps from the previous section.
Click Repository from the title bar at the top of your screen and press Open in Visual Studio Code
Shortcuts: Mac: COMMAND+SHIFT+A Windows: CTRL+SHIFT+A
You just opened up your repository in Visual Studio Code. Now, let’s create a new file by clicking File and then New Text File in the title bar at the top of your screen.
Shortcuts: Mac: COMMAND+N Windows: CTRL+N
Save your file by clicking File and then Save As... in the title bar at the top of your screen.
Shortcuts: Mac: COMMAND+SHIFT+S Windows: CTRL+SHIFT+S
Name your file index.html and save it to your repository’s folder (which should be the default location).
You MUST name your file index.html. If you named it something else, you can rename it from the sidebar in Visual Studio Code by right-clicking it.
While editing your new index.html file, type ! and press Mac: RETURN or Windows: ENTER on your keyboard. This will add a HTML template to your document.
Learn more about this template here.
In between the <body> and </body> lines of your code, write Hello world!
This section of your HTML file contains all of the visible content on your website.
Save your file again by File and then Save As... in the title bar at the top of your screen.
Shortcuts: Mac: COMMAND+S Windows: CTRL+S
And you’re done! You’ve just finished coding the first page of your new website!
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. You can learn more about folder structure and file paths in Step 7.
4 Test your site in a browser
Your website doesn’t need to be live on the Internet to view it. In this step, 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, follow Steps 3.1–3.3 from the previous section.
Alternatively, open Visual Studio Code and click File and then Open Folder... in the title bar at the top of the screen. Your repository should be in Documents > GitHub > [your-repository-name]. Select this folder and press Open
One last method: you can just drag your folder into the Visual Studio Code icon!
Make sure you’ve already downloaded and installed the Live Server extension.
You can tell if the extension is installed if there is a button that says Go Live at the bottom-right of Visual Studio Code.
Open the index.html file from your repository in Visual Studio Code by selecting it from the sidebar. (It’s probably already open!)
If the sidebar is closed, click the icon in the top-left corner of Visual Studio Code or press Mac: COMMAND+SHIFT+E or Windows: CTRL+SHIFT+E
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!
If your document contains the “Hello world!” text from the previous section, try editing it and saving your file. Your live preview in your web browser should update automatically.
You can use Mac: COMMAND+L+O Windows: ALT+L+O to preview any .html file you have open in Visual Studio Code.
A (worse) method: 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. Always try to test your sites using Live Server before launching them to get the most accurate preview!
5 Launch your site on GitHub Pages
GitHub Pages is a free service for launching basic websites. You’ll get a unique URL in the format of [your-github-username].github.io/[your-repository-name]. If you want to purchase a custom URL in the future, you can use that too!
Open your repository in GitHub Desktop. You should see a list of changed files.
If your repository isn’t already open, select it from the drop-down menu in the top-left corner.
In the bottom-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 committed your code, 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 in the top-right corner.
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, which should already be installed on your computer (Mac users / Windows users) 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. If you aren’t given the option, you can install Git from here. iii. Once Git is installed, type git config --global http.postBuffer 157286400 in your Terminal and press enter. And that’s it! You should be able to push your repository now using GitHub Desktop.
We’re going to make sure your code uploaded by heading over to your repository on github.com. An easy way to do this is through GitHub Desktop. With the GitHub Desktop open, click Repository and then View on GitHub from the title bar at the top of your screen.
Shortcuts: Mac: COMMAND+SHIFT+G Windows: CTRL+SHIFT+G
You can also do this by going to github.com, clicking your profile picture in the top-right corner to open the menu, going to Your repositories, and selecting your repository from the list.
You should now be on your repository’s page on github.com. On this page, you can see the file(s) you just pushed via GitHub Desktop. Up next, we’re going to launch your site!
Start from your repository’s github.com page. In the menu at the top, click Settings. From there, click Pages in the sidebar.
If you’re not seeing Settings, you are probably not logged into your GitHub account!
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.
Help, I’m not seeing the options to launch my site! This probably means your repository is set to private. To fix this, stay on the Settings page and click the General from the sidebar. Scroll to the bottom and click Change visibility. Change your repository’s visibility to public and click through all of the (suprisingly scary) screens that GitHub uses to warn you not to do this. Once you’ve finished this, try Step 5.6 again to see if the option is working now!
And you’re done! After around a minute, your site should be live at the URL [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 Make changes to your site
If you’ve followed Steps 1–5, then your site is a single page with one line of text: “Hello world!” From this point on, your site can become anything you want it to be.
So far, you’ve written code using the programming language HTML. There are three programming languages that websites use:
- HTML (Hypertext Markup Language) for organizing content, like text and media files (images, videos, sound, etc.). This is the only programming language that websites require.
- CSS (Cascading Style Sheet) for designing that content. Basically every website uses CSS in some capacity, otherwise it’ll look like this.
- JS (JavaScript) for adding deeper functionality to that content. This is the most advanced of the languages and is not necessary for most basic websites. (But it can be super fun!)
I’d recommend learning these languages in order, starting with HTML and CSS and then only proceeding to JavaScript once you feel confident in the first two. If you don’t know where to start, head over to Cheatsheet for a big list of things worth learning (at your own pace)!
Whenever you make changes to your code on your computer, you’ll need to push your updates to the live site using GitHub Desktop again. Let’s learn how to do that!
Make changes to your site’s code or files!
If you’re following this tutorial for the first time, I’d recommend just editing the “Hello world!” text from before. Don’t forget to save your changes!
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
If you’re not seeing this option, this means you didn’t change any of the files since you launched your site, or you forgot to save your changes in Visual Studio Code.
Committing your code 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 in the top-right corner.
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, which should already be installed on your computer (Mac users / Windows users) 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. If you aren’t given the option, you can install Git from here. iii. Once Git is installed, type git config --global http.postBuffer 157286400 in your Terminal and press enter. And that’s it! You should be able to push your repository now using GitHub Desktop.
That’s it! There’s no other setup required since you already launched your site on GitHub Pages. Every time you push your code, your site will automatically update after a minute or so. The bigger the files on your site, the longer it’ll take to update.
7 Add more pages to your site
This section is a little harder to explain, so I’ve split up into two parts:
- Creating new pages
- Adding links to navigate between each page
I’ve also created another website, Pathfinder, to help demonstrate how a website’s folder structure and links work! Pathfinder also contains a template you can download for a multi-page website.
Part 1 Creating new pages
Every page on your site is an HTML (i.e. .html) file. If you’ve followed Steps 1–6, you should have a single HTML file called index.html, which is your site’s homepage.
We can visualize this using a file tree diagram. This shows the structure of folders and files within your repository. Let’s assume your GitHub username is kiki and your repository name is bouba, so that your site’s live URL is kiki.github.io/bouba/. Here is the current file tree for your single-page website:
📁 bouba/ │ └── 📄 index.html
The general rule is that every page on your site requires its own HTML file. If we wanted to add more pages, your file tree might look like this:
📁 bouba/ │ ├── 📄 index.html │ ├── 📄 about.html │ ├── 📄 projects.html │ ├── 📄 branding.html │ ├── 📄 motion.html │ └── 📄 websites.html
While this will technically work, it isn’t great. Organizing your site’s files this way will result in the following URLs:
- kiki.github.io/bouba/ (the homepage, which uses your index.html file)
- kiki.github.io/bouba/about.html
- kiki.github.io/bouba/projects.html
- kiki.github.io/bouba/branding.html
- kiki.github.io/bouba/motion.html
- kiki.github.io/bouba/websites.html
First of all, these URLs are ugly! The average person doesn’t know what an HTML file is, so why do the names have .html in them? And what is the structure of this website? Is the “motion” page a subpage of the “projects” page, or is it a standalone page?
Instead, we’d rather have the following URLs for our site:
- kiki.github.io/bouba/
- kiki.github.io/bouba/about/
- kiki.github.io/bouba/projects/
- kiki.github.io/bouba/projects/branding/
- kiki.github.io/bouba/projects/motion/
- kiki.github.io/bouba/projects/websites/
Much better! Now, someone visiting your site won’t get confused about the .html portion of the URL, and they can easily tell where they are on the site based on the URL’s structure. To achieve this URL structure, we’ll need to update our file tree:
📁 bouba/ │ ├── 📄 index.html │ ├── 📁 about/ │ │ │ └── 📄 index.html │ └── 📁 projects/ │ ├── 📁 branding/ │ │ │ └── 📄 index.html │ ├── 📁 motion/ │ │ │ └── 📄 index.html │ └── 📁 websites/ │ └── 📄 index.html
Instead of giving our HTML files unique names, we create several folders in our repository with unique names. Then, we create an index.html file within each folder. The good news is that when you have multiple files with the same name open in Visual Studio Code, it will label which folder they’re in. That way, you can make sure you’re editing the correct file!
Feeling confused? Check out Pathfinder to see a more in-depth example of how this folder structure works on a live website!
Here’s how to add folders and additional index.html files to your repository:
Start by opening GitHub Desktop. If your repository isn’t already selected, then select it from the menu in the top-left corner.
Open your repository’s folder by clicking File and then New Text File in the title bar at the top of your screen.
Shortcut: Mac: SHIFT+COMMAND+F Windows: SHIFT+CTRL+F. Alternatively, you can navigate to your repository’s folder manually.
In this folder, create folders to represent every page you want to have on your website. You may want to create subfolders if you want multiple pages with a common parent.
Folder names should be all lowercase with no spaces or punctuation except for hyphens. For example, if you wanted a folder with the name “Gabriel's Cool Website", you’d have to call the folder gabriels-cool-website
Open your repository in Visual Studio Code. If you can’t remember how to do this, refer back to Step 3.
Create a new file by clicking File and then New Text File in the title bar at the top of your screen.
Shortcuts: Mac: COMMAND+N Windows: CTRL+N
Save your file by clicking File and then Save As... in the title bar at the top of your screen.
Name your file index.html. Save it to one of your new folders in your repository.
Shortcuts: Mac: COMMAND+SHIFT+S Windows: CTRL+SHIFT+S
In your new HTML file, type ! and press Mac: RETURN or Windows: ENTER to add the HTML template to your file.
Inside the <body></body> section of this file, type something in like “Welcome to the About page!” and save your file. You just want some visible text in your file so that you can tell which page you are on.
Repeat Steps 7.5–7.7 until you have an index.html file in each one of your repository’s subfolders.
And you’re done! As a reminder, your file tree should look something like this:
📁 bouba/ │ ├── 📄 index.html │ ├── 📁 about/ │ │ │ └── 📄 index.html │ └── 📁 projects/ │ ├── 📁 branding/ │ │ │ └── 📄 index.html │ ├── 📁 motion/ │ │ │ └── 📄 index.html │ └── 📁 websites/ │ └── 📄 index.html
Part 2 Adding links to navigate between each page
HTML code uses things called elements to break up the content of your website. A common HTML element is the link element, which looks like this:
<a href="example.com">Click me!</a>
I color-coded the element so that we can break down it’s structure:
- Pink: the opening tag, which marks the start of the element and contains additional information about it.
- Green: an attribute, which in this case is the URL you want your link to go to.
- Blue: the actual URL itself, inside of the attribute.
- Yellow: the element’s visible text when you preview your site.
- Purple: the closing tag, which marks the end of the element.
Link elements let us adds links between the pages on our site. In this example, the link goes to example.com. What if we want the link to go to another page on the site we’re testing, which isn’t live yet?
To do that, we’ll use the relative file path from your current page to the next page. Let’s take a look at our site’s file tree again:
📁 bouba/ │ ├── 📄 index.html │ ├── 📁 about/ │ │ │ └── 📄 index.html │ └── 📁 projects/ │ ├── 📁 branding/ │ │ │ └── 📄 index.html │ ├── 📁 motion/ │ │ │ └── 📄 index.html │ └── 📁 websites/ │ └── 📄 index.html
We want to link to the folder that represents the page we want to go to, not the index.html file. Let’s see all the file paths for each page of our site if we start from the homepage.
📁 ./ this indicates your current folder │ ├── 📁 about/ │ └── 📁 projects/ │ ├── 📁 projects/branding/ │ ├── 📁 projects/motion/ │ └── 📁 projects/websites/
If we wan to link to the “About” page, we could then create a link element with the following URL:
<a href="about/">Click me!</a>
Let’s revisit our file tree. This time, we’ll assume we’re starting from the “About” page:
📁 ../ │ ├── 📁 ./ you are here │ └── 📁 ../projects/ │ ├── 📁 ../projects/branding/ │ ├── 📁 ../projects/motion/ │ └── 📁 ../projects/websites/
Our file paths are a little more complicated now because we’re starting from inside a subfolder. We need to go up one level to the parent folder using the notation ../ and then we can head back down into other subfolders. For example, if we wanted to go to the “Websites” page, our link would look like this:
<a href="../projects/websites/">Click me!</a>
Let’s revisit our file tree one more time, this time assuming we’re starting from the “Websites” page:
📁 ../../ │ ├── 📁 ../../about │ └── 📁 ../projects/ │ ├── 📁 ../branding/ │ ├── 📁 ../motion/ │ └── 📁 ./ you are here
Now, some pages are two folders up from where we are. So, we have to write ../ twice. If we want to go back to the homepage from here, our link will look like this:
<a href="../../">Click me!</a>
Feeling confused? Check out Pathfinder to see a more in-depth example of how these file paths work on a live website!
To summarize, here’s how you add links between pages on your site:
If you haven’t already, create more pages on your site by following Steps 7.1–7.8.
Open one of your page’s index.html files in Visual Studio Code.
Determine the relative file path from your current page to the page you want to go to.
To go up to a parent folder, write ../ as many times in a row as you need. To go down to a subfolder, write the full path of folder names, each folled by a / symbol.
Inside the <body></body> element of your page, add a link element to the page you want to go to. Your link should look something like the following:
<a href="../folder-name-1/folder-name-2/">Click me!</a>
- Pink: opening tag
- Green: refrence attribute
- Blue: relative path to the page you want to navigate to
- Yellow: visible text that gets displayed when you preview your site
- Purple: closing tag
Don’t forget to save your files after you’ve edited them!
Test your site! If you don’t remember how to do this, review Step 4.
One small warning: you have to use the Live Server extension for your links to work correctly! If you’re testing your pages by just dragging the HTML files into your web browser, your links will not work as intended. Instead, they’ll open up a screen that shows you all the files in the folder you’re linking to.
And you’re done! You’ve learned how to add more pages to your site, as well as how to link between the pages on your site. Once you’re ready, follow Step 6 again to update your live site.
If you’re ever confused, you can always check out Pathfinder to see a more in-depth example of how folder structure and file paths work on a live website! Plus, you can download a template to get a head start on making your own multi-page website.
OK, I lied a little bit in this section. Even though it’s ugly, 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.
8 Connect to a custom URL
Are you tired of your long, GitHub-branded URL? Good news — custom URLs are cheap, and it’s easy to connect one to your GitHub repository! They’re also totally optional, so feel free to skip this step if you’d like.
Part 1 Purchasing a URL
First, you should understanding that there are two sides to launching a site:
- You site’s files have to be hosted on a server somewhere. This is literally a computer that stores your code, media, etc. If you’re launching your site using GitHub, that means that one of GitHub’s servers has your site’s files.
- Your site also needs a domain name (a.k.a. URL) that people can use to access your site’s files. GitHub provides URLs for free in the format [your-github-username].github.io/[repository-name]. If you want something more unique, you’ll have to pay a registrar a subscription fee to use a URL of your choosing.
So, we need to pay a registrar some money then! There are dozens of registrars out there, many of which offer good prices and service. I personally use Namecheap for most of my URLs, and I’ve heard good things about Porkbun and Cloudflare. Whatever service you go with, I do NOT recommend GoDaddy because they charge more and have stinky products (personal biased opinion). Also, you’re able to buy a URL from one registrar and switch to another later for a fee.
Domains are subscriptions that typically cost less than $20 per year per domain. Sometimes, if a domain is a short phrase and someone already owns it, they’ll resell it for a high cost, after which the subscription will still be under $20 per year. Domains can go up to tens of thousands of dollars!
There’s also the matter of the top-level domain (TLD). This is the part that comes after the period, like .com or .org. Some TLDs are reserved for things like governmental use only, but most of them are actually owned and sold by specific countries. For example, the .io TLD is owned by the British Indian Ocean Territory! It doesn’t matter who owns the TLD — most of them are fair game when purchasing a URL and you don’t have to worry about the name not working in the future. There are even still TLDs out there for countries that no longer exist. For a full list of TLDs, check out this page.
Part 2 Setting up a custom URL
Here are instructions for connecting a domain purchased from Namecheap to a site hosted on GitHub:
Make an account on namecheap.com.
If you’re a student, make sure to use your personal email and not a school address — you’ll want to keep this account for a long time!
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.
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, go to github.com, click your profile picture in the top-left corner, navigate to Your repositories, and select your repository from the list.
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, select Enforce HTTPS. You may need to refresh the Pages page a few times before that option becomes available.
HTTPS is a security protocol that all modern sites are (generally) required to have. Learn more about it here.
And now your site uses a custom URL!
Part 3 Setting up a subdomain
You can also add as many subdomains to your site as you want. For example, this site’s URL is babysteps.gdwithgd.com, so the subdomain is babysteps (anything that comes before the main URL, separated by a period).
Here’s how to add a subdomain to your URL:
After you’ve purchased a domain, head back to its DNS records (Steps 8.1–8.8).
In addition to the A and CNAME records from before, add the following record: Type: CNAME, Host: [subdomain-name], Value: [your-github-username].github.io
Repeat Steps 8.9–8.11, except put in your desired subdomain in the Custom domain field this time. For example, I might put babysteps.gdwithgd.com in this field.
And now, just like me, you can have as many websites as you want while only paying for one URL!
9 Adding CSS and JavaScript to your site
There are three languages that websites use:
- HTML (Hypertext Markup Language) for organizing content, like text and media files (images, videos, sound, etc.). This is the only programming language that websites require.
- CSS (Cascading Style Sheet) for designing that content. Basically every website uses CSS in some capacity, otherwise it’ll look like this.
- JS (JavaScript) for adding deeper functionality to that content. This is the most advanced of the languages and is not necessary for most basic websites. (But it can be super fun!)
This section will go over the basics of how HTML, CSS, and JavaScript work together. I won’t go too far in-depth, so if you want to learn more then I recommend you check out Cheatsheet!
Hypertext Markup Language HTML
If followed this tutorial so far, then you’ve coded in HTML! At a minimum, a live website requires an index.html file. The file extension .html indicates that your file contains HTML code.
When we made links in Step 7, we learned that HTML code uses things called elements to organize content. Here’s an example of a paragraph in HTML:
<p>I’m a paragraph!</p>
I color-coded the element so that we can break down it’s structure:
- Pink: the opening tag, which marks the start of the element. This part of the element will be invisible on the live site. The opening tag also indicates which kind of element we’re creating, which we know is a paragraph because of the letter p
- Green: the visible content of your element.
- Blue: the closing tag, which copies the opening tag with an additional / symbol.
For a list of possible HTML elements, check out Cheatsheet!
When you make a new HTML file in Visual Studio Code, you can type ! and press enter to generate an HTML template. This file contains two major sections you should know about:
- The <head></head> section, which contains invisible metadata about your site, like what title to display in the tab bar.
- The <body></body> section, which contains your page’s visible content.
Cascading Style Sheets CSS
If you want your site to look prettier, you’ll need to start coding using CSS. By itself, CSS does very little. But when you attach CSS to HTML, you can make a website look like the one you’re currently on (which I think is pretty)! In fact, click this if you want to see what this website looks like without CSS. (You’ll probably have to refresh the page to get back to this section!)
There are three ways to add CSS to an HTML document:
- Inline CSS, which goes inside of HTML elements directly.
- Internal CSS, which goes at the top of the HTML file.
- External CSS, which has its own file using the extension .css
Here’s an example of a paragraph element with inline CSS:
<p style="color: red; font-size: 24px;">Hello!</p>
And here’s how that breaks down:
- Pink: the style attribute, which goes inside of the opening tag of the element. The code inside the quotes " " will be interpreted as CSS.
- Green: a CSS property, which indicates what aspect of the element’s design we want to change. This is always followed by a colon :
- Blue: a value to set each property to. This is always followed by a semicolon ;
For a list of possible CSS properties and values, check out Cheatsheet!
Internal CSS uses its own HTML element, which we indicate using the <style></style> tags. This lets us organize CSS into classes so that we can apply the same styles to multiple elements without repeating our code over and over. For an example of internal CSS and classes, check out this demo. Note that internal CSS should be added right before the </head> tag in your HTML file.
External CSS is stored in an entirely separate file from your HTML code. This file is typically called something like style.css and contains the same formatting as internal CSS. The advantage of external CSS is that you can reference the same classes across multiple pages on your site.
To add external CSS to your website, you’ll need the following element somewhere in your <head></head> section:
<link rel="stylesheet" href="[path-to-css-file]">
The path could be something like assets/code/style.css depending on your folder structure. Also, note that this particular HTML element does NOT have a closing tag.
Check out Pathfinder to see an example of an external CSS file! You can also try downloading a site template to experiment with external CSS yourself.
JavaScript JS
This language is not to be confused with Java, which is an entirely different programming language that websites DON’T use!
JavaScript is a more typical programming language when compared to HTML and CSS. If you learn how to code in JavaScript, then you’ll be able to transfer that knowledge to most other programming languages. Meanwhile, HTML and CSS are more specific to the web.
JavaScript lets you do all sorts of things! You can even dynamically change HTML and CSS code using JavaScript, like on the GD with GD Generator.
There are two main ways of adding JavaScript to your file that are very similar to adding CSS:
- Internal JavaScript, which goes at the bottom of the HTML file.
- External JavaScript, which lives in its own file using the extension .js
I’m not going to talk at all about how to write JavaScript, because it’s much harder to sum up than HTML and CSS. Instead, I’ll just tell you where to put it in your code.
To add internal JavaScript, add a <script></script> right before the </body> tag.
To add external JavaScript, you’ll also want to add a a <script></script> right before the </body> tag. In this case, the new element will look something like the following:
<script src="[path-to-js-file]"></script>
The path could be something like assets/code/script.js depending on your folder structure.
Check out Pathfinder to see an example of an external JS file! You can also try downloading a site template to experiment with external JS yourself.
If you’re interested in learning how to code in JavaScript, check out Cheatsheet!