How to host your website/webpage in GitHub?
Preparations:
- Make sure that your landing page is named index.html
- Images should have a proper extension (jpg, jpeg, png)
Instructions:
- Login to your GitHub account
https://github.com/login
2. In your personal dashboard click a button that exist:
“Start a Project” or “Create Repository” (Shortcut: https://github.com/new )
a. “Start a Project “
b. or… “Create Repository”
Located at the left Navbar
3. Input your desired name for your repository.
3.1 Click your desired privacy settings.
3.2 Click the Create Repository button at the bottom part of the page.
- Upon creating a repository, you should see the ‘upload an existing file’. This is a good
shortcut for uploading all files at once by just drag and drop.
5. Drag and drop your files, and add a commit message.
Use this image as reference for steps 5.1 to 5.3
5.1. Select all your files and drag and drop them all together to your github repository upload page.
5.2. Create a commit message. Commit message could serve as the label of changes / versions of your project.
The basic rule for creating a commit message is to provide a clear and concise description of the changes made, using imperative language and relevant details.
Examples are:
- “Initial commit:
- “Added new projects section”
- “Updated contact form styling”
- “Fixed broken image links”
- “Fixed mobile view alignment”
- “Implemented client feedback on homepage layout”
5.3 Click “Commit changes” to successfully upload your files / changes.
6. Go to your GitHub repository settings located on the top of your repository homepage.
7. Go to the pages section located in the left navbar of your repository settings.
- Mimic the settings below then click save.
8.1 Change your branch settings to master or main.
8.2 Choose /root directory for hosting code files.
8.3 Click save after doing steps 8.1 and 8.2
- Wait for 2-10 minutes until your website link appears, you may refresh the page while
waiting for the hosted link.
Congratulations, your page is now available online!
