How to set up GitHub pages.

How to set up GitHub pages.

Host static sites for free. using GitHub Pages

ยท

3 min read

GitHub Pages is a service by GitHub that allows you to host static websites for free, and it's super easy to set up. All you need is a GitHub account and a project that you wanna host. So if you already have a GitHub account that is great! but if not let's create one.

Creating a GitHub Account

Creating a GitHub account is very easy, you can create one by visiting this link you will see this page.

Screen Shot 2022-11-08 at 12.14.33 AM.png

Enter the required information and Viola you have a GitHub account.

Creating a Repository

There are two ways you can go creating a Repository on GitHub, but as this is beginner-focused I'd recommend you to download GitHub Desktop. This makes your interactions with the GitHub Repository very easy.

Once you have downloaded it and connected your account with it you might get something like this yours might look a bit different as you won't have any Repositories yet, but we are going to change that ๐Ÿ˜…

Screen Shot 2022-11-08 at 12.20.16 AM.png

Click on the top left where you can see RayanAbid Portfolio in the screenshot or an add new repo button.

Screen Shot 2022-11-08 at 12.23.17 AM.png

Press that Add button it will open a dropdown.

Screen Shot 2022-11-08 at 12.25.58 AM.png

Now just click the Add Existing Repository

Screen Shot 2022-11-08 at 12.27.21 AM.png

You will see this Modal click choose and navigate to the path of your project.

Screen Shot 2022-11-08 at 12.28.53 AM.png

Once you have opened the folder that you want to push to GitHub you will see this create a repository link as you can see below click that.

Screen Shot 2022-11-08 at 12.29.41 AM.png

Enter the required information and click create a repository

Screen Shot 2022-11-08 at 12.31.12 AM.png

Once done you will see this button on the top center of the screen as shown in the image below click the Publish Repository button

Screen Shot 2022-11-08 at 12.31.58 AM.png

Enter information accordingly but make sure to uncheck the Keep this code private checkbox as shown in the image below.

Screen Shot 2022-11-08 at 12.33.28 AM.png

Congrats on creating your first repository

Celebration

You can press the View on GitHub button to open it on GitHub.

Screen Shot 2022-11-08 at 12.37.32 AM.png

It should look something like this.

Screen Shot 2022-11-08 at 12.39.07 AM.png

Now that we have the repo let's get to the part about why we all are here.

Hosting your project on GitHub Pages.

Hosting your project on GitHub Pages Is very easy. Navigate to the Settings tab and open the pages from the center-right of the screen.

Screen Shot 2022-11-08 at 12.41.37 AM.png

and just in case your repo is private you'll have to change its visibility to the public which you can do by scrolling to the bottom and changing your repo's visibility to Public.

Screen Shot 2022-11-08 at 12.43.01 AM.png

Now that we are on the pages section click the branch button and choose the branch you want to host it will be the main branch for most users but you can choose any branch you'd like to host click Save

Screen Shot 2022-11-08 at 12.45.29 AM.png

and it will start running an action which you can see on the Actions tab

Screen Shot 2022-11-08 at 12.47.43 AM.png

Once that is finished processing you can click the action and get the link to the hosted project.

Screen Shot 2022-11-08 at 12.48.56 AM.png

Congrats ๐ŸŽ‰ on hosting your first project using GitHub Pages

Winking Michael

The project that I've hosted you can visit it here

ezgif-4-18d7f2dc5e.gif

Check out my GitHub.

Follow if you found it useful. Feel free to ask any questions. Thank you for reading

ย