Deploying a static HTML and CSS site using Github Pages

The next step after creating a website, is deploying it to make it available to the whole world. If your site is static, and doesn't use any backend then it is pretty straightforward to deploy your app. In this article, I'm gonna talk about how to deploy a static HTML and CSS site using Github Pages.

Register at Github

First of all create an account at Github. Github is a Git repository hosting service which is owned by Microsoft. It provides a great feature called Github Pages and can be used to deploy static sites.

Create a Github Repository

After registering, click on the button which says New on the top left of the page. Create Repository Create repository input repo name

Upload files

If you know git, you're welcome to push your files to Github. Else, no worries, you can use Github's file upload feature like so:

Upload files to Github

Enable Github Pages

Last step is to enable Github Pages like so:

Click on Settings
Click on Pages
Click on Branch and choose master

This might be main depending on the default branch you're working on
Click on the button on the right of Branch and choose / (root)
Click on Save

Then wait for some time and then refresh. Wait till you see a banner which says something like this: Banner which says site's published

And there it is! You've deployed your site using Github Pages. For example, you can view the sample deployment here.

Links

You can find the sample github repository in the example here:

https://github.com/kavinvalli/gh-pages-tutorial

Deploying a static HTML and CSS site using Github Pages

Comments (1)

More from this blog

It's so easy to convert a NextJS App to use the App Router!

Master NextJS 13 Data Fetching with this Step-by-Step Guide

Try using this authentication method in your next NextJS project!! (Hint: Magic Links)

Boost Your Neovim Experience with These Essential Plugins

Typewind: The magic of Tailwind combined with the safety of Typescript

Register at Github

Create a Github Repository

Upload files

Enable Github Pages

Links

Command Palette

Comments (1)

More from this blog

Register at Github

Create a Github Repository

Upload files

Enable Github Pages

Links