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
Some projects
-
Canadian Coding
Freelance web development and useful development articles -
Schulich Ignite
Student club website; An organization that runs free coding courses -
Ideas plz
A random number generator with a twist -
Python Packaging template
Easy to use template for great PyPi packages
More of my work can be found on GitHub
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 |
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.
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.
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
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
Also check out Pixelarity if you want to support the dev who makes these
W3.CSS
Simple & free templates
W3.CSS Templates are incredibly lean templates that are simpler to understand and a bit less flashy
Some more template resources
etc. etc. (no really, there are so many of these too)
Assets
Let's find some content shall we
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
Pexels
Good quality Videos
I don't often need videos, but here is a decent source if you do
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
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 |
Here are some possible PaaS platforms
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
Domain Name Registrar
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
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.
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.
Questions?
If anyone has questions then ask them now.