2.8 Setting Up GitHub Pages: Deploying Static Sites for Free

Level Up Your Web Dev Game: Deploying Static Sites for FREE with GitHub Pages

So, you’ve built a cool static website – a portfolio, a landing page, a documentation site, or maybe even your blog. Now what? You need to get it online! And that’s where GitHub Pages comes in.

GitHub Pages is a fantastic, free service provided by GitHub that allows you to host static websites directly from your GitHub repository. That’s right, no need to shell out cash for hosting when you’re just starting out (or even when you’re a pro!).

This guide will walk you through the process, making it super easy to get your site live. Let’s dive in!

What’s a “Static Site” Anyway?

Before we begin, let’s quickly clarify what we mean by “static site.” A static website is one that doesn’t require server-side processing. It’s essentially a collection of HTML, CSS, JavaScript, and image files that are served directly to the user’s browser without modification. Think of it like a digital brochure. If you need dynamic content (like user logins, database interactions, etc.), you’ll need more than just static hosting.

Step 1: Prepare Your Repository

First things first, make sure your website files are in a GitHub repository. If you don’t have one already, create a new one:

1. Go to github.com and log in.
2. Click the “+” icon in the top right corner and select “New repository.”
3. Give your repository a descriptive name (e.g., “my-awesome-portfolio”).
4. Choose either public or private (public is fine for this tutorial).
5. You can optionally add a README file (good practice!).
6. Click “Create repository.”

Now, upload your website files to this repository. You can do this directly through the GitHub website by clicking “uploading an existing file” or, preferably, by using Git from your command line.

Step 2: Organize Your Files (Important!)

GitHub Pages looks for a specific folder or branch to serve your website. The two main options are:

• main (or master) branch: Your website files must be in the root of the main (or master) branch. This is generally the simplest option for smaller websites.

• gh-pages branch: You can create a dedicated branch named gh-pages and put your website files there. This is useful if you want to keep your website code separate from your main project code.

• /docs folder on the main (or master) branch: You can put your website files in a folder named /docs at the root of the main (or master) branch. This is often used for documentation sites.

For this example, let’s keep it simple and assume you’re using the main (or master) branch and putting your files directly in the root of the repository.

Important: Make sure you have an index.html file in the root directory. This is the default file that GitHub Pages will serve as your homepage.

Step 3: Enable GitHub Pages

This is where the magic happens! Follow these steps to enable GitHub Pages:

1. Go to your repository on GitHub.
2. Click on the “Settings” tab.
3. Scroll down to the “Pages” section (usually under “Code and automation”).
4. Under “Source,” select the branch and folder where your website files are located. For our example using the main branch, select the main branch and the / (root) directory. If you put your files in the /docs folder, choose /docs.
   If you opted for the gh-pages branch, select the gh-pages branch.
5. Click “Save.”

Step 4: Wait and Celebrate!

After you click “Save,” GitHub Pages will start building your site. This usually takes a few minutes. You’ll see a banner at the top of the “Pages” settings page indicating that your site is being built.

Once the build is complete, the banner will change to green and display the URL of your live website! It will typically be in the format:

https://<your-github-username>.github.io/<your-repository-name>

Example: If your GitHub username is my-user and your repository name is my-portfolio, your website URL would be: `https://my-user.github.io/my-portfolio`

Click on the link to visit your live website! Congratulations, you’ve successfully deployed a static website using GitHub Pages!

Troubleshooting Tips

• 404 Error: If you see a 404 error, double-check the following:
  • Is your index.html file in the correct location (root directory if using main branch, etc.)?
  • Did you select the correct branch and folder in the GitHub Pages settings?
  • Did you wait long enough for GitHub Pages to build your site? It can take a few minutes.
• Incorrect CSS/JavaScript: If your website looks broken, make sure your CSS and JavaScript files are linked correctly in your HTML. Double-check your file paths.

• Custom Domain: You can even use a custom domain name with GitHub Pages (e.g., www.myawesomewebsite.com). This is a bit more advanced, but GitHub provides clear documentation on how to set this up.

Beyond the Basics

GitHub Pages offers more advanced features:

• Jekyll: You can use Jekyll, a static site generator, to create more complex websites. GitHub Pages has built-in support for Jekyll.
• Custom Domains: Use your own domain name (like mywebsite.com).
• HTTPS: GitHub Pages automatically provides HTTPS encryption for your website.

Conclusion

GitHub Pages is an incredibly useful tool for any web developer. It’s free, easy to use, and perfect for hosting static websites. By following these steps, you can get your website live in minutes and start sharing your creations with the world. So go ahead, give it a try and level up your web dev game! Happy coding!