Front end: Netlify hosting

Netlify (opens new window) is a (free) webhosting service for static websites. It makes it super easy for developers to deploy and host a website securely.

Netlify has built-in DNS management and free SSL certificates and you can fully automate your deployment process with GitHub. Netlify continuously monitors your (main) branch and deploys a new version every time this branch is changed.

Due to security rules in Netlify, monitoring your projects github repository will not be possible. However there is a workaround using github actions which we will set up.

TIPS

You can use Netlify for every static website that you make during the next years (e.g. Angular course, React course, personal projects, ...). Netlify is also interesting for your graduation portfolio at the end of your studies at Thomas More

With the free version (opens new window) you get: - unlimited websites - 100GB bandwidth each month - 300 build minutes each month - 100 form submissions per site per month

Setting up Netlify

1. Go to netlify.com (opens new window) and Sign up with your GitHub account
2. Go to Sites and create a Add a new site (Deploy manually)

3. Create a folder website with an index.html file in it on your computer with basic layout (emmet ! + TAB).
4. Drag and drop this website folder in your browser window. Netlify will now publish this folder.
5. To make sure we can automatically deploy our site, we need the site ID and an authorization token.
6. Open your site configuration.

7. Copy your Site ID, you will need this later to configure your Github Actions.
8. Now go to your own user settings.

9. Open the tab Applications

10. Create a new Personal access token
11. Give it a meaningfull description, f.e. Project Github Action
12. Choose a expiration that is long enough to last the entire semester. For security reasons, it is discourages to set No expiration.
13. Click Generate token and save the generated token alongside your Site ID to use later.

14. Everything is now set up on Netlify.

Set up the Github repo

REMARK

Before doing these steps, contact your teacher to give you admin priviledges on your repository. If you don't you will not have the rights necessary to perform these steps.

1. Open up your project repository.
2. Take a look at the file .github/workflows/buildAndDeploy.yml, this contains the automation of your deploy to Netlify.

3. All steps are explained inside the file but you'll see 3 variables declared in the file:
   • GITHUB-TOKEN (is known by github, no need to worry about this one)
   • NETLIFY_AUTH_TOKEN (you have saved in the previous part)
   • NETLIFY_SITE_ID (you have saved in the previous part)
4. To make sure that not everyone who has access to your site can see your security tokens, we will need to add them to your project secrets.
5. Open your project settings

6. In the side menu, select Secrets and variables -> Actions

7. Add your Site ID and Auth Token to your Repository secrets.

8. Done! Next time a pull request is approved and a new commit is pushed to the main branch, your site will automatically be deployed to Netlify.

Be carefull

You site now automatically deploys, make sure that every commit you do to the main branch is actually valuable! You do not want to deploy a faulty site.

This site is public so everyone can see it at all times, don't embarrass yourself and only push working code!

Custom subdomain

The last step for a this project deployment is a site name.

1. Go back to your netlify site
2. Click on Site settings to configure your hosting
3. Under Site details you can Change the site name to a more suitable name (if it is still available of course)

Custom 404 error page

OPTIONAL

This chapter is optional, it explains how to add a normal html & css file as a custom 404 error page.

If you would like to include a custom error page in your project, make sure to style it with Sass, as normal CSS files will not work in your project repositories.

When you access a non-existing page on your website, Netlify serves a default 404 error page with this pop-up: To make a custom error page, create a new HTML file 404.html at the root of your site

REMARK

PhpStorm will immediately ask you to add this file to Git:

Choose Cancel, as the Git integration within PhpStorm is beyond the scope of this course and we will add our (new and changed) files using the git add . command later on

Paste the following code in the HTML file:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>404 error page</title>
    <link rel="stylesheet" href="/css/style.css">
</head>
<body id="error404" class=" min-vh-100 d-flex flex-column align-items-center justify-content-center">
    <h1 class="">OOPS!</h1>
    <h2 class="shadow-lg">404 - The Page can't be found</h2>
</body>
</html>

id="error404"

The body-tag has an id error404

This id is used in the _404.scss file to only apply the styles to the 404 error page.

Create a new _404.scss file in the scss folder and paste the following code:

(All styles are applied to the 404 error page only, are nested in the #error404 id.)

@use "sass:color";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;400');
$it-factory-orange: #ff6600;
 
#error404 {
  color: $it-factory-orange;
  background-color: color.scale($it-factory-orange, $lightness: 90%);
 
  h1, h2 {
    font-family: "Montserrat", sans-serif;
  }
 
  h1 {
    font-size: 5rem;
    font-weight: 200;
  }
 
  h2 {
    font-size: .7rem;
    font-weight: 400;
    transform: translateY(-3rem);
    padding: .5rem;
    background-color: rgba(255, 255, 255, .3);
    backdrop-filter: blur(5px);
    display: inline-block;
  }
 
  @include media-breakpoint-up(sm) {
    h1 {
      font-size: 8rem;
    }
    h2 {
      font-size: 1rem;
      transform: translateY(-4rem);
    }
  }
  @include media-breakpoint-up(md) {
    h1 {
      font-size: 10rem;
    }
    h2 {
      font-size: 1.5rem;
      transform: translateY(-5rem);
    }
  }
}

Import the _404.scss file at the end of the style.scss file:

...
 
@import 'student3/student3';
@import 'student4/student4';
@import '404';

Push your changes to GitHub

git add .
git commit -m "Add custom 404 error page"
git push

Test your custom 404 error page by visiting a non-existing page or folder, e.g. https://<subdomain>.netlify.app/abc