Static Website Hosting

How to develop & host simple static websites

Head to kieranwood.ca/static-site-hosting

Prerequisites

  • Basic understanding of how webpages work; HTML, CSS, and JavaScript (see here) if you don't
  • A GitHub account (if you want to follow along with the deployment demo)

Legal Things

None of the endorsements being made are being made by the university, and none of the brands mentioned have sponsored or necessarily endorse this talk

What is this talk about?

What it is about What it isn't about
How to plan a project A breakdown of every technology available and how to pick between them
Resources to help you develop a project How to write a website from scratch (see two slides back)
What deployment options exist, and how to deploy a static website How to host a CMS (Drupal, WordPress etc.), or dynamic application (django, spring, etc.)

Who am I?

Student and employee

I work for the University of Calgary as well as being a computer science student

Why Build a website?

What's the point?

Accessibility

Everyone can access it...

...well, most people at least

Applicability

Web technologies are EVERYWHERE

Putting money where your mouth is

Employers and others know you can actually put a site together

What should I build?

Some examples of relevant use cases

Portfolio/CV

Having a readily available portfolio to show off your work is useful for potential employers
Examples: My Portfolio, Jack Jeznach, Robby Leonardi

Project/Documentation

If you're working on some interesting projects having a website to highlight your project, or host it's documentation makes it look more appealing
Examples: pdoc3, gulpJS, ahd, Schulich Ignite, otp

Memes

Making a meme of a website is fun
npm drinking game, Thanos JS, Should Me Drink

How can I build it?

The reason you're all here

Steps to take

  • Planning

    Making sure your project makes sense

  • Development

    What it looks like and what it does

  • Deployment

    How other people can see/use it

  • Profit?

    $$$

Planning

  • What am I trying to do?
  • Why does anyone care?
  • What is the best way to achieve this?

What am I trying to do?

  • Identify issue

    What are you trying to solve

  • Check

    Look around, see if someone's done this before

Why does anyone care?

  • Do you?

    Do you care enough to make it?

  • Audience

    Who is this for?

  • Usefulness

    Would you use this?

What is the best way to achieve this?

  • Dynamic or Static?

    How often will content change? Really think about this one!

  • Platform

    Web based, or native app?

  • Dependencies

    Should you integrate other people's code or homebrew?

  • What tech stack?

    Language, database, and infastructure

So website time

Assuming a static website makes sense let's move on

Development

  • Framework or Template?
  • Assets
  • Features

Framework or Template?

Frameworks give you all the components you need to build a custom site, templates are a custom site that you just modify to suit your needs

Let's start with frameworks

When do they make sense

Pros Cons
You get to design it yourself You have to design it yourself
Optimized components Need at least some knowledge of HTML/CSS/JS to really take advantage of them
Lots of people know how to use them making it easier to find help online Each can have it's own way of doing things that are subtlety different
Boostrap Logo
Bootstrap Images

Bootstrap

The classic

Bootstrap is incredibly common, it was created by twitter to make the development of mobile-friendly websites easier.

Site's using bootstrap include Spotify, Twitter, Intel, Walmart, Univeristy of Calgary, etc.

Bootstrap Website »

Bulma Logo
Various bulma sites

Bulma

Idiomatic templates

Bulma is my preferred CSS framework and is often much simpler to read and use than bootstrap with a similar featureset.

Site's using Bulma include Runlet, Noraj, Snipper, Tesla Auth, primative, etc.

Bulma's Website »

Some More Frameworks

etc. etc. (no really, there are so many of these)

On to templates

When do they make sense

Pros Cons
It's designed for you It's designed for you
Often even more optimized than frameworks Often need more knowledge to customize in major ways (not just content)
Even people who don't know much HTML can use it (if you don't need major changes) Each can have it's own way of doing things that can make them hard to understand
html5up Logo
html5up templates

html5up

Easy to use free templates

html5up is a great resource for grabbing templates, the only licence stipulation is that you must leave the attribution comment in the top of the page HTML

html5up's Website »



Also check out Pixelarity if you want to support the dev who makes these

w3.css Logo
W3.CSS Templates

W3.CSS

Simple & free templates

W3.CSS Templates are incredibly lean templates that are simpler to understand and a bit less flashy

w3.css Website »

Some more template resources

etc. etc. (no really, there are so many of these too)

Assets

Let's find some content shall we
unsplash Logo
Unsplash Images

Unsplash

Gold standard open source images

Honestly most of the internet uses unsplash, the image usage licence makes it the safest option to pull from

Unsplash Website »

pexels Logo
Pexel Videos

Pexels

Good quality Videos

I don't often need videos, but here is a decent source if you do

Pexels Website »

Features

How to do cool things

I can't show you everything but here are some good tools

etc. etc. (no really, there are so many of these too)

Development Demo

Let's make a site!


If you're interested the template I am going to use is from HTML5UP

Template Link »

Deployment

  • Hosting
  • DNS (optional-ish)
  • Domain Name (optional-ish)

Hosting

Hosting is whatever service is running/serving your project online, there are a number of options for ways to host sites

VPS

VPS (virtual private server) hosting is the most traditional way to host websites, basically a server is given to you and you do all the configuration yourself

VPS Hosting

When does it make sense

Pros Cons
You get full configuration control You have to do EVERYTHING yourself
You can often run multiple sites on one VPS host Any updates to underlying software (including security patches) have to be done by you
You understand (almost) everything running for your website to function It will almost always end up being the most expensive way to host something

Here are some possible VPS providers

PaaS

PaaS (Platform as a Service) is a much simpler option in which you just upload your code and the configuration is handled by the provider

PaaS Hosting

When does it make sense

Pros Cons
Typically single click deployment Limited number of supported tech stacks/features
Will handle configuration options you've never even considered You often don't know exactly what's running your machine
Usually first party support is offered for your stack, as opposed to just server issues Some can add bloat with manifest and configuration files that are for the providers system

On to the demo

For this demo I have chosen to use a PaaS provider called GitHub pages, if you want to follow along sign up for a github account here:

GitHub Signup »

Deployment Demo

Let's make it available!


Time to put the site up online for everyone to see

Domain Name

As you saw in the demo the URL you get is username.github.io, if you wanted a custom name this is where a domain name comes in

Buying Domain Names

This is the only part of the presentation that will cost money, and it is completely optional

DNS

DNS records are how you tell a browser what you want to do with your domain

Custom DNS Provider

Any domain name regoistrar will provide DNS as part of buying a domain, however using a better DNS provider can make your site faster and more reliable

Cloudflare logo
CloudFlare

CloudFlare

The best option

  • Websites: 12 million
  • Cost: $0
  • Countries: 90

I debated including a few options, but realistically CloudFlare is the best option for DNS. If you use them they also do CDN caching, SSL, and other nice to have features for you.

CloudFlare Website »

Full Progress Demo

Want to see this process with a real site?


Development Video (coming soon) »

One more thing...

This whole presentation has been hosted using the method I described



The presentation framework is called webslides if you're interested in doing something similar.

Feedback

Questions?

If anyone has questions then ask them now.


Also here are some of my links if you're interested:
GitHub »
Canadian Coding »
Personal Site »