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)://
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.
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.
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.
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.
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?
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.
Dont miss out on the news!
Join the MAKE NOW academy to receive exclusive content every week!