Introduction to GitHub Pages and Actions

So what are GitHub pages? So actually, using data pages, we can host static files as a website on GitHub. And it takes markdown language, CSS, HTML, and JavaScript files straight from the repository on GitHub. We can set up the static files in a directory in our GitHub repository. And we can, you know, just enable the GitHub Pages and whatever’s there in the directory will be hosted as a static website. So optionally runs the files through a build process. This will be a part of my demo. So I’ll demonstrate this to you later in the slides. So GitHub uses github.io domain, you know, to host static files of yours. But we can also use custom domains. But for that, there are some limitations I will discuss in the later slides. Using GitHub pages, we can also customize themes that are already managed by GitHub. We can choose fancy teams to make our portfolio or something a bit fancy.

So there are different types of GitHub pages. The first one is public, as the repository would be public. So GitHub directly enables the GitHub Pages. For private repositories, we do need a GitHub organization as well as the GitHub enterprise level of subscription. So this is the format of the domain, which for the private, we have the username.github.io/your repository. So once the GitHub Pages are enabled, your static content will be visible using this domain, or if we are using the private organization and stuff. So the username will be changed with the organization, and then github.io/repository.

So using GitHub pages, there are some limits. So as I’m using a free version, which is a public repository to use GitHub pages, I can’t use files normally larger than one GB. And per month, we have a soft bandwidth limit, which is 100 GB, but we can, of course, increase it if we have a subscription using GitHub Enterprise or GitHub Pro. So GitHub pages sites have a soft limit of 10 bits per hour, which means per hour, you can make some changes and deploy to GitHub pages but they are tight. Tighten up to 10 bits per hour. So there are some use cases which are prohibited using GitHub pages. Like you can’t use your business web portals and ecommerce sites their GitHub pages are just for highlighting and showcasing your portfolio and stuff. Like if you have a readme in the GitHub repository and you want to present it in a customized and a fancy manner, then you can use GitHub Pages.

Okay, so the other section of this demo would be GitHub actions, this is actually a CI/CD tool for automating your tasks within the GitHub repository. You can use it just like different CI/CD tools out there like GitLab and CircleCI and this is more or less the same. So there are different components of GitHub actions like workflows, events, job, steps, actions, runners. So in workflow we can set all automated procedures where we have the build and all the stages and packages to be installed and deployed. Using events, we can trigger the workflow for example, there is a specific commit to in a branch like an amine or master branch, it will trigger your workflow and the jobs within that workflow will be executed. So there are steps and actions which hold your commands to job that sequential commands to run in the steps. And then we have runners. By default, GitHub uses its own default renders like if we are using Ubuntu or Docker, but we can also use our own runners.

So for the sake of this demo, here’s a use case that I’ll be using. So we will be deploying GitHub Pages, this static content from one repository to the other repository. And then we’ll enable the GitHub pages on the target repository. So for here, we have repository A, which will hold all static files in a branch. We will set GitHub flow in this repository, which will push static content via bid flow to repository B. And upon the push, these files will be reflected in the GitHub Pages site. So let’s see how it’s currently set up.

So this is my source directory. Here, I have created a pages directory. And here I have a simple sample of a markdown file. And this is a config.yml, I’m using a team. And in the dot GitHub workflows, we have a YAML file, which will behave as a CI/CD pipeline for our job. So here, this is the basic name for our workflow. And this is a trigger that I have created, which means that on push on a branch, which is main, this job will be executed. So for this job, I’m using the runner Ubuntu. And we have sequential steps here. The first one is that it will check out the repository. So using GitHub actions, like in Jenkins, or get CircleCI, for Jenkins, we use plugins for CircleCI, we use orbs. So here in GitHub actions, we use different GitHub repositories, which actually holds a code for checking out and stuff like that. So first, we will use checkout to check out our code. And this is a name of a use case, which will send the static files to another repo. And for this, we are using this repository. So if I go to this repository, this is just a workflow, which will enable us to push the contents to a different repository. So it does support different properties here, like for this API token is required the source destination repo, some basic properties are required here. Okay, so for our static pages, that directory is pages, the username is actually GitHub actor. This is a result environment variable from GitHub, which is your username, and their destination repository is my username/repository. And this is the target repository, GitHub Pages target. And the destination branch is GitHub Pages, I have set up a different repository, and I’ve created a different branch for this purpose. Okay, so in the target repository. If we go to settings, and go to pages, you can see that GitHub Pages is already enabled and it is being hosted in this. So this is my username yasirtariq.github.io/repository name. So using the source here, we are using the root level, because we assume that all static contents will be in the root path, but we can also use a directory name, which for this purpose is only bound to use talks directly here. And we can go forward and choose themes of choice. You can also use custom domains here. Like if we don’t want to use our user name, or the repository name, we can use the custom domains here but this is not free and we have to subscribe to the GitHub plan for this. By default it is using HTTPS. Okay, so let’s make a small change in GitHub pages. So upon a change and if you go to the actions you can see that one workflow is set to cue and if we open this the build is about to trigger.

So first, it has set up the environment for this virtual environment and all the necessary stuff. And then it has copied the files to a different repository and then eventually it has completed the job. And you see here the status indicates that the build has been completed. And if we go to our target was three and hit this. You see, my changes are immediately reflected here. So here you can, I’m using a sample markdown, but you can use your own HTML content, as well. Here. So this is about this demo. If you have any questions, please let me know. Thank you.