Schulich Ignite Scorch
Session 6
Session Overview
Where To Find Slides & Files
Website: https://schulichignite.com/
Exercise Files: https://github.com/Schulich-Ignite/scorch-2024
Quick question
What is the difference between backend and frontend?
Quick Question
What were the main things that differentiated Static, Dynamic and static-site generator based sites?
Last episode on schulich ignite…
Last week we talked about static site generators and the different types of sites. Today we’re going to talk about how to host:
To recap
We can create sites now in 2 ways, static and SSG.
Both produce HTML/CSS/JS files at the end, but how do we publish them?
What actually happens with websites when we visit them?
That’s what we’ll cover today
What is github
What is github
Github is an online service that allows you to host git repositories. Essentially these are glorified folders with a twist…
What is git
Git is a version management system. This basically means you can track changes as they happen, and be able to see old versions of your code.
Why use version management
Being able to track your changes has a ton of advantages:
A more detailed explanation
Github Pages
What is github pages
The reason we’re talking about github is because of their github pages system this system basically allows you to host static sites directly from github repos.
The only requirement is that you must have an index.html file (which will act as a homepage)
How it works - Static sites
Assuming you have a site developed you follow 4 steps:
0. Create a github account if you don’t have one
Step 1 Create a repository
Click the + besides your profile in the top left of github, and hit new repository
Step 1 Create a repository continued
Give it a name, if this is your first site call it:
<username>.github.io
(This will be the URL)
And create the repository
Step 2 Upload your files
We’re going to do this the lazy way, by just drag-n-dropping our files!
Step 3 Activate github pages
Step 3 Activate github pages
If you head back to the code tab you should see either an orange square, or check mark just above your files, and should see something that says environments in the bottom right
Step 4 Wait for the site to be published
Once you have a check mark that means github is done processing.
Click on environments (refresh if you don’t see it), and it should take you to a deployment history page, from there hit view deployment and see your site up and running!
Exercise
Take any of the sites we’ve built so far, or copy the code from /exercise/alan and try to publish a site on github pages!
If you get that done, try deploying a second site!
Other static site hosts
Some alternatives to github pages for those who are interested
How it works - Static site Generators
For static site generators we do a similar process, except first we take the static site generator files, generate a static site, then upload that.
If only there were an easy way to automate that process…
CI/CD
Repetitive tasks suck
Having to do repetitive tasks is awful, and will usually cause a ton of problems, like:
Imagine this situation
You work at a software development company and your boss tells you that you are in charge of watching every team members contributions to the code, and have to:
Like a good programmer
So you write a bunch of tools to automate these tasks because life’s too short to spell check bobby’s 10 thousand lines of code. But, now imagine you’re going on vacation.
There are problems:
CI/CD
Continuous integration/Continuous delivery is a very broad name given to systems designed to solve these problems. 2 different types:
We’re mostly going to talk about CI today
What is continuous integration
Essentially it is a method for defining automated virtual computing processes. In layman's terms it typically means writing a configuration file or script that will spin up a 'virtual computer' (though sometimes it will run on the host computer) and run through a series of defined tasks.
The build process for schulich ignite
site
What you could have done
Going back to our previous example you could have created a CI/CD configuration file that ran every time someone submitted code that did the tasks for you!
Some terms
I know it’s boring, but let's talk about some terms we need to know.
I promise it’s worth it
environment
A computer (or virtual machine) that will run our automation (pipelines)
A virtual machine is like a mini-computer that has its own operating system (like linux, or windows), that can run code!
It will often let you set environment variables, which is data that is global to that machine (you can also set environment variables locally)
Virtual Machines/containers
Here is some additional information about VM’s and containers for those interested:
Jobs/steps
A job or step is like a function in regular programming
This can run one or more commands for example when we run python code we use the command:
python file.py
We might have a job in our pipeline that runs this job
Pipelines/workflows
Pipelines/workflows are files that define your environment & contain the jobs/steps you want to run. These will often be in some sort of a configuration file such as a YAML file
To recap
An environment runs a pipeline/workflow, the pipeline/workflow has multiple jobs/steps, which actually run code
Some other CI/CD Systems
Approach to creating Pipelines/workflows
Before you start
Make sure you know how to do what you want to do on your own machine!
A lot of the time confusion happens when you just try to make a pipeline before you know what to do…
So what do we want to do
Let’s break down what we want to do and the steps to do it locally, starting with a high level step-by step guide, where we will add in more detail as we go!
What do we want to do
Main goal: Publish an ezcv site publicly
So breaking that down further we want to have our source code for an ezcv site, and:
So first, let’s make sure we know how to do what we can locally!
Step 1 Generate HTML from the source code
Creating plain HTML from an ezcv site just requires us to run:
ezcv build
In the folder. We can also do:
ezcv build -d folder
To specify a folder location to export the content to
Step 2 Export that HTMl to github pages
This we can’t test locally. But we can test that the output html we got from ezcv works properly!
Now we can turn those steps into a pipeline… right
Here are the steps we described that need to be followed
But is that all we need?
Assumptions
We made a ton of assumptions in the last slide including:
When making CI/CD pipelines, 9/10 errors are because of bad assumptions, so be careful.
Now we can turn those steps into a pipeline!
So now we can do it, but the question is, now how do we actually build a pipeline?
Github Actions
What is it
Github actions is a CI/CD system built on top of github.
This means we can have our pipelines and our source code all in one spot!
Creating a pipeline/workflow
To create a pipeline we need to create a YAML file in a folder called
.github/workflows
Inside there just place your YAML files, and it will be recognized as a pipeline/workflow
The .github folder is a folder specific to github (shocker), that has a ton of uses
Order
Generally speaking you will want to follow this layout/order in your files:
Name/label
Exactly what it sounds like on the tin, this is what you will see in your actions tab when it runs. Make sure this describes what happens, like a function. If you have multiple pipelines, and the name sucks it gets hard to find.
Triggers/on
A trigger is essentially an if statement to tell github when to run the pipeline. You do this by adding an on key to the yaml file, and then the conditions for when it should happen.
A branch is just a version of the code, master/main just means the primary branch where code is!
Other types of triggers
Allows you to manually run pipeline with inputs, you can just run it manually normally by not specifying inputs
Tell the pipeline to run on a set schedule using cron (this tool helps)
Or have more than one
This is the trigger for the schulich ignite site, so it runs when new code is added, or on schedule to post the slides the day of the sessions!
Jobs/Steps
A Job contains multiple steps, at minimum a job needs:
Steps
Each step is an object with at minimum:
Run: Run commands like you were at the command line
Steps | Uses & with
Uses Lets you use someone else’s code, like from the marketplace
With allows you to set variables for that step
Steps | Run
Run will let you run commands as if you were at the command line.
You can do multiple lines by having a | and then putting your commands at +1 indentation level
Putting it all together
Deploying SSG with github actions
So going back to our original list of steps
0. Setup a trigger and Name
Step 0 and 1. Setup pipeline & OS
Step 2. Download source code
Now we start doing our steps, starting with a checkout
Step 3. Setup python
Now we have to setup python
Step 4. Setup ezcv
Next we setup ezcv and install it with pip
(python -m pip install == pip install)
Step 5. Build HTML with ezcv
Run the ezcv build command to create html files
Step 6 Export HTML to github pages
We need to export our HTML so that github pages can publish it, to do this we will send our code to the gh-pages branch with an action from marketplace
How github pages decides when to deploy and where from
That settings page for github pages lets you pick a branch, this then creates a trigger for whenever code shows up on that branch. We exported just our HTML/CSS/JS to the gh-pages branch, so now we just tell github where to look!
Pipelines on pipelines on pipelines
Once our initial pipeline runs to build the HTML, there is then a second pipeline that gets triggered to start deploying those HTML files to the correct servers!
To recap
ezcv
By default ezcv includes a pipeline to publish to github pages, in fact it includes the one we just built!
Exercise
Head to here and hit ��Use this template
And make sure you hit��Include all branches
From there try to make some changes and upload them!
Press . to open web editor
Some other CI/CD or github actions Uses
Used to build everything from a static site to entire operating systems!
Examples in action
Basic Networking
What do you need to send someone a message
Email:
Mail:
Phone:
Communication needs
At the end of the day communication in any form needs:
And so do browsers
I want to go to schulichignite.com
What I need:
So let’s talk about how to do that. You will see the words client and host a lot. The host is a server with the content, and the client is someone looking for something on the server!
Before we start
Don’t expect to memorize all of this on your first go!
We included a bit more information on the slides than you need so you can go back and look at it if you’re interested!
There’s a lot of moving parts, and at the end we’ll do a recap so you can see how they fit together
HTTP
What is it?
HTTP (Hyper-text transfer protocol), is a system that defines how systems talk to each other.
This is what lets you ask the browser for what you want, and how your browser knows things like:
HTTP is a request ←→response system
Steps are:
More details
We will be talking more about HTTP next week, but the request and response back and forth is what you need to know.
When we uploaded the files to github pages they then took those files and made an HTTP server for us so we can request them as responses!
Building an HTTP server from scratch
We did a series of blog posts on how to build an HTTP server from scratch here:
Domain Names & Registrars
Computers talk in IP addresses
An IP address is like a physical address for a computer. It tells you where the computer is, and it’s what browsers actually use to get information from servers, and how servers send the information back!
Ip addresses are a jumble of numbers:
127.0.0.1 (IPV4 address)
0000:0000:0000:0000:0000:0000:0000:0001 (IPV6 address)
Keep in mind that you need the public IP address to connect to someone’s computer remotely
But I don’t use IP addresses
When you go to shulichignite.com you don’t type 104.21.88.47 so how does this work?
Domain names
Domain names are part of the solution. A domain name is an identifier you can purchase from domain name registrars to be able to use an easier name than an IP address!
URL vs Domain
The domain is what you buy (i.e. schulichignite.com), a URL is what you type in your browser. A URL like https://www.mydomain.com has a few parts:
��Anything after the top-level domain is called a slug, route or URI, i.e. https://shulichignite.com/web the /web is a slug
So I bought a domain
But once you’ve bought a domain name, how do browsers know where to send people?
DNS
What does it do
DNS servers are basically like a phone book, they have a list of domains, and a list of IP addresses. When someone “calls” they connect them to where they need to go!
Sadly there’s more than 1 dns
There are a ton of DNS providers, so your domain name registrar needs to tell the browser which one to go to. This is determined by a nameserver
If you want more detail
You can find a slideshow with more details about HTTP, DNS and everything else here
Let’s go through this in order
Step 1:
Someone types https://schulichignite.com/beginner/ into their browser and hit's enter
Step 2. Get IP address from DNS
Using the nameservers, you ask for the IP address (stored in records called A, AAA or CNAME)
Step 3
Your browser now sends the request to the right host
Step 4
The site is hosted with github pages, which receives the request and looks for the corresponding HTML page for the /beginner slug
Step 5
The browser receives an HTTP response with a 200 status code that has the content of the webpage requested (additional HTTP requests will be made for assets in the HTML file like images and external CSS files)
Some interesting commands
Watch a request:
Windows: tracert <hostname>
*nix: tracepath <hostname>
Get IP of domain:
ping <domain>
Using a custom domain with github pages
Steps:
Next time
We’re going to talk about using API’s; Stealing other people's data, and making data for people to steal :D
End of session exercise
You now know how to host websites, so let's host a few!
For the submission, just submit a file that has a list of URL’s for the sites you decided to host!
End of session exercise | Level 1
Using ezcv create a personal site and host it through github pages
Also setup 1-3 more of the sites you've created so far and include links to them in the projects section of your site
End of session exercise | Level 2
Use variables in your pipeline:
Set your workflow to manual dispatch
Your first Job in the workflow should be to run the steps
End of session exercise | Level 3
Implement 2 actions from the workplace in a pipeline, some good options are:
Thanks for coming!