Beginner's Guide: Hosting Your HTML Static Site on GitHub

-

Whether you are a student, job seeker, or professional, having a portfolio is always impressive. One of the top 10 free ways to host a website is on GitHub Pages. You don't need to be an expert in Git or HTML; basic knowledge of HTML, CSS, and Git is sufficient.

Get Your Static Webpages Ready

You can build your HTML static pages from scratch or develop them from a free template.  If are not a coder, but have a basic knowledge of HTML, CSS, and JavaScript, creating a simple website is easy with an online template. I used a template from Free CSS. You can also check out HTML5 UP.

Have a GitHub account

Sign up for GitHub if you don't have an account. You need to know the basics of creating a repository in the GUI and how to upload folders/files from your PC. You can accomplish this using GitHub Desktop or through simple CLI commands.

Host Your Static Pages on GitHub

Once you have your static code and GitHub account, you're ready to host your site. There are different ways to accomplish this and below is one of them. Follow the below simple steps to host your website.

Step 1: Sign in to GitHub in your web browser.

Step 2: Create a new public repository with the repository name "GitUserName.github.io". Initialize the repository with a README file and choose the appropriate license.

Step 3: Download and install GitHub CLI on your laptop/PC. 

Step 4: On your PC/laptop, select or create a folder for GitHub repositories. Open the command prompt from that folder and clone the repository you have created for your website:


Step 5: Set the remote pointer to this folder for push and pull requests. If this is your first time using GitHub with CLI, use the "add origin" command. If you have used this before for other repositories, use the "set-url origin" command.



Step 6: Start the process by checking the remote URL. This should point to the repository you're planning to make changes to. 


Step 7: In your PC's Explorer, navigate to the cloned local repository in the GitHub folder and move all the files related to your website here.

Step 8: In the command line, with the remote origin set to the cloned repository, navigate to the local folder.


Step 9: Now, initialize the repository, add the files, and commit with a message.


Step 10: Push the changes. This will merge them directly with the main/origin branch.


Step 11: In your web browser, go to the GitHub repository you're working with and check if the changes are visible.

Step 12: Navigate to Settings → Code and Automation → Pages. Ensure your settings are as shown below. If everything is done correctly, you will see the "Visit Site" link within 5 minutes of deployment.


Congratulations! You have successfully hosted your website for free using GitHub Pages!

Pro Tips:

  • Repository Naming: Suppose your GitHub username is "harrypotter." Create the repository with the name "harrypotter.github.io." This will generate your website URL as https://harrypotter.github.io/. If you don't need a personal website with your name, you can name the repository differently. For example, if you're building a webpage to share only your resume and details, you can create a repository named "resume." Your URL will then be https://github.com/harrypotter/resume.

  • Repository Visibility: Ensure the repository's visibility is set to Public so others can access your website.

  • Index File: Make sure you have an "index.html" file in your repository. If your webpage has a different name, you will need to add the necessary configurations to ensure it loads correctly.


Comments

Post a Comment

Popular posts from this blog

The Spark I Couldn't Find!

-
கதைத்தேன்  சிரித்தேன்  சேர்ந்து நடந்தேன்! பகிர்ந்தேன்  செவிமடுத்தேன்  உண்டு களித்தேன்! ஏது செய்தினும்  கட்டி அணைத்தினும்  காதல் கொள்ளேன்  என் மனமே... ஏன் மனமே?! - வீரா  I met him on a matrimonial app, and from the start, I knew what this was: an arranged marriage. There was no pretense of a fairytale romance. We were just two people, vetted by our families, trying to see if we could build a life together. We went through the motions. We spoke, we laughed, we had meals together—all the things you're supposed to do when you're getting to know someone. And he was genuinely nice. He was the kind of person you could share anything with, and he really listened. He made me feel seen, and he was so patient and kind that it was hard to say no. But the most confusing part was the feeling that never came. Even as we shared all these beautiful moments, I couldn't fall in love. It's a strange kind of sadness, a feeling of being in a perfect storm and not ...
Read more

Feeling Down? These Korean Dramas Will Lift Your Spirits!

-
Image
Life can sometimes feel overwhelming, and it's easy to lose motivation or regret past decisions. During these moments, a little inspiration can make a big difference. Korean dramas, with their compelling stories and relatable characters, can provide that much-needed motivation. Here are three Korean dramas to watch when you need a boost: Hello! Me! When you're struggling with motivation and regretting your past decisions, "Hello! Me!" is the perfect pick-me-up. This heartwarming drama follows the journey of Ban Ha-ni, a 37-year-old woman who feels disillusioned with life. Through a magical twist, she encounters her 17-year-old self, brimming with dreams and hope. This encounter sparks a journey of self-discovery, reminding us that it's never too late to pursue our dreams and make positive changes in our lives. Doctor Cha If you think it's too late to start a career or find it challenging to balance family responsibilities, "Doctor Cha" offers an insp...
Read more