How to Publish a Website for Free with GitHub Pages (Static Site Intro)

In this Git/GitHub introductory series, we've learned the entire flow, from creating an account and basic command operations to the fundamental workflow of team development using branches.

In this final installment of the series, we'll introduce a fantastic feature called GitHub Pages, which allows you to actually publish the project you're managing on GitHub as a website for the whole world to see for free. It's the perfect way to publish portfolio sites, demo pages for web apps you've created, and more. Let's master this final step and get your work out to the world!

What is GitHub Pages? What's So Great About It?

GitHub Pages is a static site hosting service provided by GitHub. A static site is a website composed only of files that don't require server-side processing, such as HTML, CSS, and JavaScript. While it can't handle PHP or database integration, it's more than powerful enough for many uses, including portfolios, blogs, and project documentation sites.

The main benefits of GitHub Pages are as follows:

• Completely Free: For public repositories, there are no hosting costs whatsoever.
• Incredibly Easy to Set Up: You can publish your site with just a few clicks from the repository's settings screen.
• Custom Domains Are Also Available: You get a `github.io` domain for free, but you can also configure your own custom domain.
• Smooth Integration with Git: Simply `git push` your local changes, and the content is automatically reflected on your live website.

Two Types of Publishing! User Sites and Project Sites

GitHub Pages offers two types of publishing methods depending on the use case.

1. User Site (or Organization Site)
   • URL: `your-username.github.io`
   • Features: You can only create one per account. The repository name must be exactly " `username.github.io` ". It's perfect for use as a personal portfolio or blog's top page.
2. Project Site
   • URL: `your-username.github.io/repository-name/`
   • Features: You can create one for each of your regular repositories. There is no limit to how many you can create. It's suitable for use as a demo page for an individual project or a documentation site.

This time, we'll explain how to publish a "Project Site," which you can easily try with any repository.

In Practice! Steps to Publish a Project Site

Let's try publishing the `my-first-repo` repository we created in the previous articles as a website.

Step 1: Go to the "Settings" of the Repository You Want to Publish

First, open the page of the repository you want to publish on GitHub, and click on "Settings" from the tabs.

[Image: The "Settings" tab is highlighted in the list of GitHub repository tabs.]

Step 2: Select the Publishing Source in the "Pages" Section

From the left-side menu on the Settings page, click on "Pages." Pay attention to the "Source" setting under the "Build and deployment" section.

[Image: "Deploy from a branch" is selected as the source for GitHub Pages.]

Confirm that "Deploy from a branch" is selected. This is the most basic method, which means "publish the site based on a specific branch."

Step 3: Select the Branch to Publish and Save

In the "Branch" section, you'll configure which branch to publish. Since we want to publish the code from the `main` branch, set it up as follows:

• Branch: Select `main`
• Folder: Select `/(root)`

Once you've set it, click the "Save" button.

[Image: `main` is selected as the branch, `/(root)` as the folder, and the "Save" button is being pressed.]

Step 4: Check the Published URL

After pressing the Save button, the page will reload, and a green banner saying "Your site is live at ..." will appear at the top. It may take a minute or two for the site to be published on the internet.

[Image: The green "Your site is live at..." banner displayed at the top of the GitHub Pages settings.]

Try clicking the displayed URL. If the "Hello, World!" page you created earlier is displayed as a website accessible to anyone on the internet, you've succeeded!

How to Update Your Site

The great thing about GitHub Pages is that updating is extremely simple. Just modify your files locally, and push those changes to the branch you've configured for publishing (in this case, `main`). After a few minutes, the content will be automatically reflected on your live site.

Let's try it. Rewrite the content of your local `index.html` file.

echo "<h1>My Website is Updated!</h1>" > index.html

Then, `add` and `commit` the change.

git add index.html
git commit -m "Update index.html for GitHub Pages"

Finally, `push` the change.

git push origin main

Once the push is complete, wait a minute or two and then reload the URL of the site you published earlier. The content of the page should be updated.

Conclusion: Share Your Work with the World on GitHub!

In this GitHub introductory series, you've experienced the entire flow, from creating an account, basic Git operations, and the basic flow of collaborative development, right up to publishing your own website. This is a huge step forward as a web creator.

The knowledge you've gained here will serve as a strong foundation for your future development activities. We encourage you to publish your own portfolio or new projects with GitHub Pages and show them to people all over the world. We hope your development life becomes more comfortable and creative!