# 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
- Go to netlify.com (opens new window) and Sign up with your GitHub account
- Go to Sites and create a Add a new site (Deploy manually)
- Create a folder
website
with anindex.html
file in it on your computer with basic layout (emmet! + TAB
). - Drag and drop this
website
folder in your browser window. Netlify will now publish this folder. - To make sure we can automatically deploy our site, we need the site ID and an authorization token.
- Open your site configuration.
- Copy your
Site ID
, you will need this later to configure your Github Actions. - Now go to your own user settings.
- Open the tab
Applications
- Create a new
Personal access token
- Give it a meaningfull description, f.e. Project Github Action
- Choose a expiration that is long enough to last the entire semester. For security reasons, it is discourages to set
No expiration
. - Click
Generate token
and save the generated token alongside your Site ID to use later.
- 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.
- Open up your project repository.
- Take a look at the file
.github/workflows/buildAndDeploy.yml
, this contains the automation of your deploy to Netlify.
- 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)
- 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.
- Open your project settings
- In the side menu, select
Secrets and variables
->Actions
- Add your Site ID and Auth Token to your
Repository secrets
.
- 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.
- Go back to your netlify site
- Click on Site settings to configure your hosting
- 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>
2
3
4
5
6
7
8
9
10
11
12
13
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);
}
}
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
Import the _404.scss file at the end of the style.scss file:
...
@import 'student3/student3';
@import 'student4/student4';
@import '404';
2
3
4
5
Push your changes to GitHub
git add .
git commit -m "Add custom 404 error page"
git push
2
3
Test your custom 404 error page by visiting a non-existing page or folder, e.g. https://<subdomain>.netlify.app/abc