Deploy A Static Website Using GitHub, Access It From Anywhere

Make your website and share it publicly in no time.

What is GitHub?

GitHub is the world’s largest software development platform. It provides cloud storage for source code, supports all popular programming languages, and streamlines the iteration process.
GitHub is an open-source platform, and the community is really what fuels it. Millions of programmers and hobbyists download, review, and evaluate each other’s work.
Pushing the project to a shared, public repository makes it instantly discoverable for those 28M users.
Exposure and insight that you can get on GitHub are simply unmatched by any other platform. And this goes the other way around — you can discover code written by others, learn from it, and even use it for your projects.

What this article is all about?

This article is completely about the deployment of a static website using GitHub in two ways:
⨠ Using Master Branch
⨠ Without using Master Branch
Any complex website can be linked with so many CSS, JavaScript files can be deployed in GitHub.

Highlights

The alignment of the folders is important.
The HTML page name must be “index.html”.
Only one Static HTML file can be deployed with one repository in Github.
HTML file can be linked with many CSS, JavaScript, Bootstrap, and Jquery files.

The intention behind deploying Website

Everybody wants a URL to share their website with the World. You might need a website to project your ideas on your style. You can design a website to display your portfolio and present your projects.

Let’s get started

In this article, I’ll show you how to deploy it to publish and share your website on GitHub.

1. Create a GitHub account

Make sure, You have a GitHub account. Signup in the GitHub to create an account. If you have Github account ignore this step. By creating this Github account you gonna get unlimited space to upload data.

2.Create a new GitHub repository

Create a new repository by hitting the + button on the top-right of the screen. A folder is called Repository according to GitHub terminology.

3. Name your GitHub repository

You need to name your repository. This is the most important step. Based on the name of the Repository, your website URL will be generated.

⨠ If you give the input “Name” as [username].github.io
⨠ Then your Website Link will generate as https://[username].github.io/

4. Upload your GitHub files

You have seen the website which was opened in the my local(Computer).
⨠ The alignment which is there should not be changed while uploading the files into GitHub.
⨠ You can name your files as your wish. But, Follow the standard format while uploading.
⨠ The name of the HTML file must be “index.html”.

This is the alignment of files of the “samplewebsitedeploy” in my local(computer).

Drag and Drop all the files one by one and click the “commit changes” button.

In the same alignment, You should upload them in the GitHub

5. Publish your website

This is the most awaited part you are looking for. Let’s take advantage of GitHub. Click on the “Settings” button.

Scroll down until you see the“GitHub Pages” If you give the input “Name” as [username].github.io

If you give the input “Name” as per your required repository name Now click on the “Source” dropdown menu and click on the “master branch” button.

Be patient, wait a minute or two, and then refresh the page or try the link if you want. Once your site has been published, you’ll see this:

congratulations your website is ready…!!! 🔥😉

6. Share your website

You can see your website globally with the generated URL. After clicking the link you are going to see the magic.

Whenever you want to make changes to your website, you just need to commit the changes and then push the files up to your GitHub repository. Your changes will be published automatically.

Let me know if I missed any steps, if something didn’t work out quite right for you, or if this guide was helpful! Thank you for reading!

developers-cosmos / WebHosting-With-GitHubPages