Home News Update How-To Guides Detail article

Host Your Code and Build a Free Website with GitHub Pages

Learn how to upload your code to GitHub and create a website using GitHub Pages. This beginner-friendly guide walks you through the entire process, from setting up a repository to publishing your web page.
Host Your Code and Build a Free Website with GitHub Pages

GitHub is a powerful platform that allows developers to host and share code, collaborate on projects, and even create free websites through GitHub Pages. Whether you're a beginner looking to publish your first project or a developer wanting to showcase your work online, this guide will walk you through the steps of uploading code to GitHub and creating a GitHub Pages site.

Why Use GitHub and GitHub Pages?

  • Version Control: GitHub provides version control, allowing you to keep track of changes and collaborate with others.
  • Free Hosting: With GitHub Pages, you can host a static website for free.
  • Easy Collaboration: GitHub makes it easy to collaborate with others on coding projects.
  • Showcase Your Work: Use GitHub Pages to create a personal portfolio or project website.

Step 1: Sign Up for GitHub

Before you can upload code or create a GitHub Pages site, you'll need a GitHub account. If you don't have one, head over to github.com and sign up for free.

Step 2: Create a New Repository

  1. Log in to GitHub and click the "+" icon in the top-right corner, then select "New repository."
  2. Name Your Repository: Choose a name for your repository. If you're creating a GitHub Pages site, name it as username.github.io (replace username with your GitHub username).
  3. Description (Optional): Add a description of your project.
  4. Initialize with a README: Check the box to include a README file.
  5. Click "Create repository": Your new repository is now created and ready for your code.

Step 3: Upload Your Code to GitHub

There are two main ways to upload your code to GitHub: using the GitHub website or using Git.

Option 1: Upload via GitHub Website
  1. Go to your repository on GitHub.
  2. Click on "Add file" and select "Upload files."
  3. Drag and drop your files or click "choose your files" to select them from your computer.
  4. Write a commit message describing the changes.
  5. Click "Commit changes" to upload your files.
Option 2: Upload via Command GIT
1, Clone the repository to your local machine:
git clone https://github.com/username/repository-name.git
2, Navigate to the repository:
cd repository-name
3, Add your code: Copy your project files into this folder.
4, Stage your changes:
git add .
5, Commit your changes:
git commit -m "Initial commit"
6, Push your code to GitHub:
git push origin main

Step 4: Create a GitHub Pages Site

  1. Go to Your Repository: Open the repository where you want to create a GitHub Pages site.
  2. Settings Tab: Click on the "Settings" tab in your repository.
  3. GitHub Pages Section: Scroll down to the "GitHub Pages" section.
  4. Source Branch: Under "Source," select the branch you want to use for your GitHub Pages (usually main or master).
  5. Choose a Theme (Optional): You can select a theme for your site if you wish.
  6. Save: Click "Save" and GitHub will generate your site.

Step 5: Access Your GitHub Pages Site

After setting up GitHub Pages, your site will be available at https://username.github.io/repository-name (replace username and repository-name with your actual GitHub username and repository name).

Step 6: Update and Maintain Your Site

To update your site, simply make changes to your files and push the updates to the repository. GitHub Pages will automatically reflect the changes.

Tips for Success

  • Use README.md: Include a README.md file to provide an overview of your project.
  • Organize Files: Keep your project files well-organized to make maintenance easier.
  • Check for Errors: Before pushing your code, test it locally to ensure everything works correctly.

Conclusion

By following these steps, you can easily upload your code to GitHub and create a GitHub Pages site to showcase your work. Whether you're a developer, student, or hobbyist, GitHub and GitHub Pages offer powerful tools for version control, collaboration, and web hosting—all for free.

Follow by Images: 

1, Create or login GitHub acount: https://github.com 
2, Create Project 
Create Project
3, Create file html in web git hub or upload file: 
Upload file or craate file index.html
4, Editor and save file html
Editor html files
5, Commit code to main 
Commit code
6, Active webpage url.
Active webpage url
7, Url to project 

url to project
Demo : https://vhdcombo.github.io/demo/index.html