How to Deploy HTML CSS Website on GitHub

Deploying a static website built with HTML and CSS on GitHub is a straightforward process that allows you to showcase your work, collaborate with others, and even host your site for free. This step-by-step guide will walk you through the process, from pushing your code to GitHub to making your site live.

18 Exciting HTML and CSS Project Ideas with source code to Level Up Your Web Development Skills

Before we dive in, ensure you have the following: a GitHub account, a local copy of your HTML and CSS files, and Git installed on your computer. If you haven't already, initialize a Git repository in your project folder by running `git init` in your terminal or command prompt.

Preparing Your Repository

First, you'll need to create a repository on GitHub to host your website. This repository will serve as the remote version of your local project.

1. Sign in to your GitHub account and click the '+' icon in the top-right corner, then select 'New repository'.

Naming Your Repository

Name your repository using the following convention: username.github.io, replacing 'username' with your GitHub username. This is crucial for GitHub Pages to recognize your repository as a user page.

For example, if your GitHub username is 'johndoe', your repository name should be 'johndoe.github.io'.

Initializing the Repository

a computer screen with a pink flower on it

Once your repository is created, it's time to push your local HTML and CSS files to GitHub.

1. In your terminal or command prompt, navigate to your project folder.

2. Add your files to the Git repository using the command `git add .`.

3. Commit your changes with a meaningful commit message, e.g., `git commit -m "Initial commit"`.

4. Connect your local repository to GitHub using `git remote add origin https://github.com/yourusername/yourusername.github.io.git`.

the top 10 projects for beginners to practice html and css skills with text

Create A Website Like YouTube Using HTML CSS JS | YouTube Clone Website Design Step By Step

CSS Notes for Beginners (Easy + Quick Guide) 🎨

Cómo publicar una web gratis usando Netlify y Github

The Best HTML and CSS Courses for Beginners - Mikke Goes

🎨 3 Ways to Add CSS | Inline, Internal & External CSS Explained

an image of the back side of a computer screen with text that reads, add css to html

How to Build a GitHub Portfolio That Gets Noticed

This CSS Animation Will Instantly Upgrade Your Website 🚀 (Pure HTML & CSS)

How To Create Text Slider With Pure HTML CSS

Coding a Stylish Blog Design Layout in HTML & CSS

Website cupcake design using html and css.mp4

5. Finally, push your local files to GitHub with `git push -u origin main`.

Setting Up GitHub Pages

Now that your HTML and CSS files are on GitHub, it's time to set up GitHub Pages to host your website.

1. In your repository, click the 'Settings' tab at the top.

Enabling GitHub Pages

Scroll down to the 'Pages' section and click 'Enable GitHub Pages'.

1. In the 'Source' dropdown, select 'main' (or 'master', depending on your default branch name).

2. Click 'Save'.

Accessing Your Live Website

After a few moments, GitHub will generate a link to your live website. You can find this link in the 'GitHub Pages' section that appears at the top of your repository's homepage. Your website's URL will be in the format https://yourusername.github.io.

Click this link to view your live HTML and CSS website, hosted for free on GitHub!

Congratulations! You've successfully deployed your HTML and CSS website on GitHub. Regularly updating your repository with new content will ensure your live site stays fresh and up-to-date. Happy coding!