Vanilla JS & GitHub Pages for Easy Deployment
Develop and host static websites built using HTML, CSS, and JavaScript with GitHub Pages free of cost.
Abdullah Muhammad
Published on August 14, 2023 • 7 min read
Introduction
Often times, newbies in web development will jump to the newest tech on the market and forcibly try to learn the material on the fly.
This is especially true of JavaScript. In the very first article, I touched on the JavaScript ecosystem and how it is an ever-evolving system with new frameworks coming out every day.
Very few of these frameworks actually make it. The ones that do, leave their mark. But that is besides the point. You see, it is a moot point to jump from framework-to-framework without learning the basics.
JavaScript is at the heart of it all, so it is crucial to understand JavaScript and how it works before diving into any of the great frameworks out there.
You do not need a framework to develop a good looking site. The idea of working with one is to expedite the development process.
Today, we will be focusing on just that. Basic “Vanilla” JavaScript as it is called and nothing else. We will develop a static website without a back-end and host it using a free feature provided by GitHub called GitHub Pages.
This tutorial is ideal for someone new who is looking for a quick shortcut to get the ball rolling.
GitHub Pages
What is GitHub Pages? It is provided by GitHub free of cost and allows users to host a website using any repository of their choosing provided they meet conditions required for correct hosting.
This includes things such as files with correct names, location of files in proper order, and so on.
When we covered template engines, we looked at static and dynamic web pages. When working with GitHub Pages, though the service is free, there are limitations.
For instance, you cannot host a full-stack website because the back-end will need to be stationed somewhere and GitHub does not have a cloud service.
Now you could get creative with this. For instance, host the front-end website on GitHub Pages and host the back-end server on some cloud platform such as AWS or Azure.
From there, you can setup communication between your front-end hosted site to that back-end server. We will not do that here (may in a future demo), but will focus on using GitHub Pages to host a simple website using static content.
In fact, that is what is recommended when using GitHub Pages. It works great for lightweight duty such as hosting static content.
Websites that incorporate GitHub Pages for deployment have a custom domain that follows this pattern:
https://<user-id>.github.io/<repo-name>You can purchase a custom domain known as a CNAME through a third-party domain service such as GoDaddy to make your URL more pretty.
For more information on GitHub Pages, refer to the official documentation here.
Vanilla JS and DOM (Document Object Model)
When working with plain JavaScript, you will often use the global Document Object to access HTML elements and enable actions.
This includes things such as event handling. An example can be when a user enters form data and clicks a button to process that data.
We can code a function to handle that click event and process the form data.
You can think of DOM representing a page in a hierarchy of objects. We will not go into extensive detail on this, but here is a diagram from Wikipedia that perfectly encapsulates what I mean:
The Document Object Model
When working with HTML files, the root tag is <html> followed by the <head>, <body> tags.
We can assign IDs to certain tags within the HTML document and then access them using the Document object in order to perform the necessary actions.
Code Overview
You can follow along by cloning the following repository.
The directory we will work with is /demos/Demo09_Vanilla_JS_GitHub_Pages. If cloned correctly, you should see the following:
When working with GitHub Pages, there must be a file designated as index.html. This is considered to be the home page on the default / route.
From there, you can have different HTML pages viewed on different routes. For this project, there are only two routes.
The home page called index.html and a login page called form.html.
Here is the home page:
At the very bottom of the index.html, we have a script tag which enables us to write JavaScript within the HTML file.
We make use of the Document object and select the element by their ID. After that, we add an event listener to handle click events. We add code to ensure that each time the button is clicked, an alert is displayed.
This is an example of an in-line script implementation. Here is the login page (form.html) handling form validation using an imported function:
As you can see, at the very bottom of this file, we are making a reference to the function handling the form validation.
Here is the function handling that form validation under /js/formValidation.js:
As you can see, we are making use of the Document object once again to fetch data related to the email and password input fields.
We run checks to validate the email entered using a Regular expression (Regex) and validate the password by simply checking its length.
We add an event listener to the submit button and throw an alert each time the form is submitted after running the checks specified earlier.
That is all! To highlight, we also have a separate folder dedicated to CSS and styles for each of these pages so feel free to check those out.
Demo Time!
For the demo, clone this repository.
The directory we will be working with is /demos/Demo09_Vanilla_JS_GitHub_Pages.
I created a separate repository for this demo as GitHub Pages requires a dedicated branch from which to deploy and host code.
Here are the steps to enable GitHub Pages on any repository:
- Go to the Settings section of any repository of concern
- On the left panel, select Pages for options
- Under Build and Deployment, select which branch to deploy and host
For this demo, I created a branch from main and added the same code used in the code overview here (Demo09_Vanilla_JS_GitHub_Pages).
Here are the screens illustrating how to enable hosting using GitHub Pages:
Note that your code needs to conform to the format requested such as the presence of the index.html file and so on.
For more information on GitHub Pages, view the official documentation here.
As mentioned earlier, deployed sites have the following format:
https://<user-id>.github.io/<repo-name>Deployed sites are publicly accessible to all and so the deployed site for this demo is located here.
This is what the screen should look like when the button on the home page is pressed:
If you navigate to the form section of the web application and fill out details to test the application you should get the following alerts:
And another alert if you enter an invalid password:
That is all! Bear in mind, we are only testing this application using client-side validation. There is no back-end to this web application so we are not checking to see if these email IDs and passwords exist.
That was not the purpose of this tutorial anyways. The purpose of this tutorial was to show how quickly you can code, deploy, and host a website using minimal overhead.
Conclusion
All in all, we saw how easy it was to build a basic static website and get free hosting using GitHub Pages. You learned quite a bit about basic JavaScript and the Document Object Model.
We touched on domain names and site hosting. If you do not like the messy github.io domain, you can opt for a custom domain by purchasing one.
Here is the link to the GitHub repository.
As well as the link to the GitHub Pages repository.
The link to the deployed site is here as well.
Hopefully, you found this article helpful and look forward to more in the future.
Thank you!