Hosting your website using Github

Hosting your website using Github

ยท

3 min read

GitHub is a for-profit company that offers a cloud-based Git repository hosting service. It also allows users/developers to store their project files for as long as possible.

Open-source software all have GitHub repositories for storing their files. GitHub is the base of contributing to open source.

Now, let's get started!

In this article, I will only be showing you how to host a basic website that encompasses only the front-end i.e website without a database connection or backend API.

CREATE A GITHUB ACCOUNT

If you already have a GitHub account, please skip this part

Navigate to GitHub, and click the signup button as shown in the diagram below

Follow the steps, and create an account and you should get somewhere here ๐Ÿ‘‡

P.S The below image is not a new account but a sample GitHub account

CREATE GITHUB REPOSITORY

Although, since yours is a new account you would have zero repositories. Next, click on the repositories tab, then click on new See the below image for reference

You should get here ๐Ÿ‘‡

The first arrow shows where you enter your repo or project name

The second arrow shows where you enter the project description

The third arrow indicates if you want your project to be public (everyone can see it and be able to download it) OR private (only you can see it)

The fourth arrow shows if you wish to create a readme file, this readme file is what contains the project documentation

The fifth arrow shows the button you click to create this repo

After creating your repository, you should get here ๐Ÿ‘‡

Congrats!, you have successfully created your repository.

UPLOAD WEBSITE FILES TO THE REPOSITORY

The above image shows my website files index.html and style.css

To add files to your repo ๐Ÿ‘‡

Click the upload existing files link as indicated above.

You are brought to this page๐Ÿ‘‡

Click the Choose your files link indicated above.

It opens your directory, now, locate your files and click open. These files will begin uploading.

Now, that you can see the uploaded files, click commit changes.

You should see your repo like this ๐Ÿ‘‡ with all your files.

HOST WEBSITE

Navigate to the settings tab on your repo and click on pages as shown below ๐Ÿ‘‡

On pages, click the drop-down button that says Deploy from a branch and select Github Actions

After following the above steps, the page automatically changes to this ๐Ÿ‘‡, click configure under Static HTML as indicated below

It navigates to this page๐Ÿ‘‡

Now, click Start commit, then click Commit new file as indicated below

Now, navigate back to the Code tab, and you will see the new directory created .github/workflows

Navigate to Settings -> Pages you should see the link to your hosted website.

N.B You must navigate to the code tab first before you navigate back to the settings tab before you can see the link.

You can either copy and paste the link in your browser or just click visit site as indicated above.

Was this article helpful to you? Like, comment and follow for more articles like this ๐Ÿ˜Ž

Made with โค๏ธ from rivondave

ย