It is very common, especially for those who are starting in the area of ​​web development, to create web applications composed of static pages using HTML, CSS and JavaScript. In addition, doubts arise on how to make these applications available on the internet so that they can be shared. Therefore, this post aims to present a method of hosting web applications from static pages (HTML, CSS and JS), using GitHub Pages, a tool available on GitHub itself. If you still don't understand about Git or GitHub, don't worry! You will find in this article a totally practical example. I have provided a static project for us to follow all the version control and upload steps, so we can see how to host the project on GitHub Pages. But first... let's get to know a little more about this tool!

What is GitHub Pages?

It consists of a static website hosting service, that is, a project that uses HTML, CSS and JavaScript files directly from a repository on GitHub. This hosting occurs through the execution of the files carried out by the publication on a website. The tool allows you to host your site on GitHub's github.io domain or on your own custom domain if you provide it (we'll see this option later in this post). Unless you are using your own domain, sites created by GitHub Pages will be available at http(s)://.github.io/ , where is your username. account there, and corresponds to the name of the project repository to be published. If you want to know a little more about GitHub Pages, check out more information at this link . In addition, you can also check out examples of sites at this other link .

PREPARING ENVIRONMENT

Before hosting our application, we need to install Git on our machine, since only then will we be able to upload it. Once this is done, it can be made available on a link provided by the same. If you use Windows or macOS, you can download Git via this link , where you will see a download option for your operating system. Installation is simple, just follow the instructions provided in the installer itself. On the other hand, if you use a Linux distribution, although there is an option to download the installer on the Git website, you can just use the command sudo apt install git if you are using Ubuntu and derivatives or sudo dnf install git if you are using Fedora , Red Hat or SUSE. With Git installed, you need to create a GitHub account if you don't already have one. Go to this link to create it.

START APPLICATION

As said before, we will host a static application. If you want to use any of your applications, feel free! But, if you prefer to continue with the same one I will be using in this post, I will provide this link for you to download. When downloading, you will get a zipped folder with an HTML file and two folders: the css folder contains the styles applied to the site, while the images folder contains the images that will be used. Once you have Git installed, the GitHub account and the application files, let's go through the steps necessary to host it.

Creating a repository on GitHub

When logging into your account, you will have an option to create a new repository in the top right corner (a '+' icon next to your profile picture). Then, click on the "new repository" option that will redirect you to another page, where you must define a name for your repository and, optionally, a description as well. It is important that you make your repository public and without any of the options available at the end. You can see in the image below how I filled out my data.
By clicking the "create repository" button, you will be taken to your new repository page with instructions for uploading your local project (static application) to GitHub. We'll do that in the next step.

Pushing the Static Application to the GitHub Repository

To submit your static application to GitHub, you need to make your project folder into a Git repository. For that, you will need to open your project folder in the terminal there. If you use Windows, you can access your project folder through the file explorer, right-click inside it, and then click on the " Git Bash Here" option . If you are using Linux or Mac, you can access this folder from the system's own Terminal. With Terminal or Git Bash open, you must initialize a new local repository with the git init command . Then add all the files to the "staging area" via the git add command. . And finally, add all the files to your repository with the command git commit -m 'first commit' .
1) git init
2) git add .
3) git commit -m 'primeiro commit'
Recently (as of the time of posting this article), GitHub is working with the main branch instead of the master branch . If you want to ensure that your branch is main , just enter the command git branch -M main . Ready! Now let's create a link between your local repository and the repository we created on GitHub (in the previous section). To do this, type the penultimate command that appears in the first box of the repository you created. To illustrate, see in the figure below where the command is in the case of my repository. Finally, you can type the last command i.e. git push -u origin main . In this last step, you will need to enter your GitHub credentials (email and password). Ready! Your repository is now available on GitHub! To view your files, simply reload the page.

Integrating the Repository with GitHub Pages

Finally, let's ask GitHub to provide a link from GitHub Pages to our static application. For that, you need to go to the "settings" tab of your repository.
Once you have accessed this tab, you must click on the "pages" menu, available in the sidebar.
The last step is just to go to the "source" section, select the main branch from the dropdown and click the "save" button.
After that, wait a few seconds and then click on the link provided.
Perfect! With that, you already have your site hosted by GitHub Pages in addition to the link to promote your project and who knows, even publish the link of your project on LinkedIn, right?

Conclusion

You may have noticed how simple it is to host a static application on GitHub Pages. In short, you need to version control this project with Git, publish it to GitHub, and then configure the integration with GitHub Pages. Note that in the "pages" menu that we saw in the previous subsection, you have the option to use a domain you have already acquired! If you liked this post and want to know more about web application development, as well as other ways to deploy them, check out the Degree Web Full Stack at Let's Code ! A complete training that will make you a developer ready to act in the market.