Getting your first website on the internet is easier than you think!

Just before writing this article, I built a full website and published it online, and it only took 5 minutes!!! You can see the full site in all its glory here: https://zaklaughton.github.io/im-on-the-internet/.

Wow!

Okay, okay, so it's not the most impressive site (see all 3 lines of code in the repo here), but it was incredibly easy to put on the internet.

When I started learning web development, I thought getting my work online would be complicated. I pushed off figuring it out how to do it for way too long. It turns out, as long as you have an HTML file and a git repository, you can publish your site within minutes — you can even get a custom URL!

(This article assumes a basic understanding of git to push to a remote repository. If you're a new web developer unfamiliar with git, you'll need to learn it! Check out some of the training resources here).

GitHub pages

Static files with GitHub Pages

My amazing "I'm on the internet" site above was posted online using Github pages. Github pages is the simplest way to get your repository up on the internet. It's easy, free, and comes built-in with every repository on GitHub.

GitHub pages simply finds an index.html file in the root of your repository, and makes it available at a URL. As long as your repository has an index.html file you can open in a browser on your own computer, then this setup will work for you!

To enable:

1. Go to your repository on GitHub
2. Click "Settings"
3. Under GitHub Pages, select master branch as the source.

That's it! Github will provide you with a URL that you or anyone can use to access your site, and the site will automatically update whenever you update your repository. Pretty cool!

💡Step-by-step guide to getting started with GitHub pages

Framework sites with GitHub Pages

If you're using a framework such as React to build your site, you probably don't have an index.html just laying out there to be served up. These types of frameworks typically require you to build the site — this just means running a command to take all your files written for your framework and turn them into a simple "index.html" site that browsers will understand. Most often, these end up in some sort of "/build" folder.

For GitHub Pages to use this page, you'll need to build the site, put the built site on a new branch, and point Github Pages to the "build" branch. It's a few extra steps, but still should still be relatively quick to get your site online. There are also some great tools out there to automate this for you.

💡Step-by-step guide for publishing a subfolder to GitHub pages
💡If you're using React, check out react-gh-pages
💡An example of a branch built in one of my projects from React to serve a webpage: https://github.com/ZakLaughton/map-project/tree/gh-pages

Custom URL

So what if you don't like having "github.io" in the URL and want to serve your GitHub pages site at your own custom domain name? Turns out, that's pretty easy too! As general steps:

1. Buy a domain name from a domain name provider (typically costs around $12/year).
2. Update the domain name system (DNS) configuration with the provider to point to GitHub.
3. Update the repository settings on GitHub to point to your custom URL.

There are many domain name providers out there, and I recommend doing some research to figure out what works best for you. Personally, I like Google Domains for its low prices and intuitive interface.

Once you purchase the domain name, just update the DNS settings as described in the GitHub Pages documentation. Here are the settings for youneedtocalmdown.fyi, which direct both youneedtocalmdown.fyi and www.youneedtocalmdown.fyi to the same site:

DNS settings in Google domains. (Be sure to consult the GitHub docs for the most up-to-date address to use)

Corresponding GitHub Pages settings on the repository

💡How to setup Google Domain for GitHub pages

Using subdomains

$12/year for a domain name is pretty cheap, but this can get expensive as you start buying more. For many of your personal projects, you probably just want to host them on a subdomain on your site. You can do this by adding CNAME entries into your DNS settings.

Here's the DNS settings which direct to zaklaughton.dev, along with all the GitHub repositories with GitHub Pages settings configured for crossy.zaklaughton.dev, map.zaklaughton.dev, memory.zaklaughton.dev, minesweeper.zaklaughton.dev, and myreads.zaklaughton.dev:

What if my site needs a server?

In building web apps, you may get to a point where you do need a server to help serve the data on the page, such as with a back-end server or a site that is server-side rendered. While this isn't possible with GitHub pages, luckily there are sites that make it easy to host and run this server-side code, too! Both Netlify and Heroku are some of the more popular options.

The finer details are outside the scope of this article, but know that there are also server-side options are out there to automate the deployment process from a git repository.

Examples
🌐 flattenthecurve.zaklaughton.dev (repo) — Server-side rendered site (using Gatsby). Automatically builds and deploys the site when the GitHub master branch updates.
🌐 survivorstats.com (repo) — Front end is hosted on netlify. Back end (responsible for fetching database data) is hosted on Heroku. The back end is updated with simple commands from the Heroku CLI.

Summary

Putting your sites on the internet is a great way to share your work, and it's quick and easy to do! There's no need to wait to share your projects with the world.

• Use GitHub Pages to make the sites in your GitHub repos public.
• For a custom URL, Set up a custom domain with a service like Google domains
• Use hosting services such as Netlify and Heroku if you require any server-side code.

---

Did you find this this article useful? Feel free to follow my profile below or follow me on Twitter for more developer tips and article announcements!

---