Deploying a website built with HTML, CSS, and JavaScript on GitHub Pages is a straightforward process that allows you to showcase your work online. GitHub Pages is a static site hosting service that takes HTML files and serves them over the web. Here's a step-by-step guide to help you deploy your website in no time.
Before we dive into the process, ensure you have the following prerequisites: a GitHub account, your HTML, CSS, and JavaScript files ready, and Git installed on your local machine. Let's get started!
Setting Up Your GitHub Repository
Your first step is to create a repository on GitHub to host your website.
1. Log in to your GitHub account and click the '+' icon in the top-right corner to create a new repository. Name it using the following format: yourusername.github.io, replacing 'yourusername' with your GitHub username. Initialize the repository with a README file and click 'Create repository'.
Cloning Your Repository Locally
Next, clone your newly created repository to your local machine using Git.
1. Open your terminal or command prompt and navigate to the directory where you want to clone the repository.
2. Run the following command, replacing 'yourusername' with your GitHub username: git clone https://github.com/yourusername/yourusername.github.io.git
Adding Your Website Files
Now, add your HTML, CSS, and JavaScript files to the cloned repository.
1. Navigate into the cloned repository folder using the terminal or command prompt.
2. Copy your website files into the repository folder. Your HTML file should be named index.html.
Configuring GitHub Pages
To set up GitHub Pages, you need to create a special file called CNAME (optional but recommended) and a .gitignore file to exclude certain files from being tracked by Git.
Creating the CNAME File
The CNAME file allows you to use a custom domain for your GitHub Pages site. Create a new file named CNAME (all caps) in the root of your repository and add your custom domain (e.g., www.yourdomain.com).
Creating the .gitignore File
Create a new file named .gitignore in the root of your repository and add the following lines to exclude node_modules and .DS_Store files from being tracked by Git:
node_modules/ .DS_Store
Pushing Your Changes to GitHub
Finally, push your changes to the GitHub repository.
Adding and Committing Changes
1. Add your changes to the Git repository using the command: git add .
2. Commit the changes with a meaningful commit message, e.g., git commit -m "Initial commit of my website"
Pushing Changes to GitHub
1. Push your changes to the GitHub repository using the command: git push -u origin main
Congratulations! Your website is now live on GitHub Pages. You can view it by navigating to https://yourusername.github.io in your web browser. To make updates to your website, simply repeat the process of adding, committing, and pushing changes to your GitHub repository.
Happy coding! Now that your website is live, consider exploring other features and customization options offered by GitHub Pages to make your online presence truly unique. Keep learning and building amazing things!