Deploying a website built with HTML, CSS, and JavaScript to GitHub can make your project easily accessible to the world. GitHub Pages, a static site hosting service, allows you to host your personal or project website directly from a GitHub repository. Here's a step-by-step guide to help you achieve this.
Before we begin, ensure you have the following: a GitHub account, your HTML, CSS, and JavaScript files ready, and a basic understanding of Git and GitHub.
Setting Up Your GitHub Repository
First, create a new repository on GitHub. Name it something like 'yourusername.github.io', replacing 'yourusername' with your actual GitHub username. This will be the URL where your site lives.
Next, clone this new repository to your local machine using the command: `git clone https://github.com/yourusername/yourusername.github.io.git`. Replace 'yourusername' with your actual GitHub username.
Organizing Your Project Files
Navigate into your new repository folder and organize your project files. The root of your repository should contain your HTML file (e.g., index.html), with your CSS and JavaScript files in their respective folders (e.g., css and js).
Your folder structure might look like this: ``` yourusername.github.io/ |-- index.html |-- css/ | |-- style.css |-- js/ | |-- script.js `-- CNAME (optional, for custom domains) ```
Committing and Pushing Your Changes
Initialize Git in your project folder with `git init`, then add your files with `git add .`. Commit your changes with a meaningful commit message, like "Initial commit". Finally, push your changes to GitHub with `git push -u origin main`.
Your website should now be live at
Customizing Your GitHub Pages Site
GitHub Pages supports custom domains. To use one, you'll need to update your repository settings and add a CNAME file.
Updating Repository Settings
In your repository, go to the 'Settings' tab. Scroll down to the 'GitHub Pages' section. Select 'main' (or your primary branch) as the source, and click 'Save'.
Your site should now be live at
Adding a CNAME File
Create a new file in your repository root named 'CNAME'. Add your custom domain (e.g., 'yourdomain.com') to this file, and commit the changes. Push these changes to GitHub.
It may take a few minutes for your custom domain to propagate. Once it does, your site will be live at
Congratulations! You've successfully deployed your HTML, CSS, and JavaScript website to GitHub. Now, you can easily update your site by making changes to your local files, committing them, and pushing to GitHub. Happy coding!