Built a Good Website with HTML, CSS, and JS? Now What? 🎉

Congratulations on building your first website using HTML, CSS, and JavaScript! 🌟 Creating a functional and aesthetically pleasing website is a huge milestone, but you might be wondering: what’s next? How do you make your website accessible to the world? This blog will guide you through two essential steps to take your project live—uploading it to GitHub 💻 and deploying it using GitHub Pages 🌐.

Part 1: Upload Your Website to GitHub 📢

GitHub is a powerful platform for storing and sharing your code. By uploading your website files to GitHub, you not only create a backup but also make collaboration and deployment much easier. Here’s how to do it:

Step 1: Create a GitHub Repository 🔨

1. Log in to your GitHub account. If you don’t have one, create an account first.
2. Click on the “New” button in the top-left corner or navigate to Create a New Repository.
3. Give your repository a meaningful name (e.g., my-website).
4. Add an optional description and decide whether to make it public or private.
5. Check the box to initialize the repository with a README file if desired.
6. Click the Create Repository button. 🎉

Step 2: Push Your Code to GitHub 📊

1. Open your project folder locally on your computer.
2. If you’re using Git for version control, open a terminal in the project directory and initialize Git:

   git init
   

3. Add all your files to the repository:

   git add .
   

4. Commit your changes:

   git commit -m "Initial commit"
   

5. Link your local repository to the GitHub repository by adding the remote URL (replace your-username and your-repository with your details):

   git remote add origin https://github.com/your-username/your-repository.git
   

6. Push your files to GitHub:

   git push -u origin main
   

   If your default branch isn’t main, use the branch name you created instead.

Now your website’s code is safely stored on GitHub. 📦 The next step is to deploy it.

Part 2: Deploy Your Website Using GitHub Pages 🌐

GitHub Pages is a free and simple way to host your static website directly from your GitHub repository. Follow these steps to get your website live:

Step 1: Enable GitHub Pages 🚀

1. Go to your repository on GitHub.
2. Click on the Settings tab.
3. Scroll down to the Pages section in the left-hand menu (or search for "Pages" in the settings search bar).
4. Under the "Source" dropdown, select the branch containing your website’s files (e.g., main).
5. If your files are in a specific folder, like /docs, specify it in the folder option. Otherwise, choose the root directory.
6. Click Save to enable GitHub Pages. 🌟

Step 2: Access Your Live Website 🌍

1. Once enabled, GitHub Pages will provide a URL for your live site https://your-username.github.io/your-repository/
2. Note that it might take a few minutes for your website to go live.

Optional: Customize Your Domain 🏡

If you have a custom domain, you can link it to your GitHub Pages site by adding a CNAME file to your repository or configuring your domain’s DNS settings. GitHub’s documentation provides detailed steps for this process.

Conclusion 🎯

By uploading your website to GitHub and deploying it with GitHub Pages, you’ve made your project accessible to the world. It’s a big step forward in your web development journey, and it gives you a foundation to share, improve, and build upon your work. Happy coding! 🚀