Since some friends have asked about how I host my website, I thought I'd write a short little guide. As I wrote in a previous post, I recently migrated hosting services.

Here's a crash course on how websites work:

  1. A computer somewhere, a 'server', is linked to the internet and given an IP address (###.###.###.###; e.g. 216.123.194.217 is google.com and 31.13.80.36 is facebook.com). The IP address is how it is 'found' on the internet.
  2. A domain name is associated with an IP address so that if you look for 'google.com,' it forwards you to the IP address.
  3. On the original computer, you can run a web server using programs like Apache or NGINX. All they do is deliver files from the computer to the internet.

Here's where it can get a little more difficult:

These 'files' are in the HTML language, which is supported by CSS, Javascript, and other languages.

  • HTML tells a browser what to display.
  • CSS is an easier way to format HTML.
  • Javascript and others run scripts, like games. It may also let your browser give information back to the server!

A static website is one where each webpage is defined as an HTML file with the other supporting files sitting with it. If you're hosting a small website that doesn't change much, like a photography portfolio, or a general information page, this works great.

A dynamic website is one where HTML files are generated on-the-go. Services like WordPress or Ghost, which is what I use, are dynamic. This is what you should use if your website is likely to change often like on a blog.

Dynamic website services provide an author interface to type their content and will then simply process that information and merge it with a 'template' so you don't have to write HTML code yourself. There are also programs to help make static websites like Adobe Dreamweaver or even Microsoft Word!

A blog post called 'It Snowed!' published on 2016-10-12 on the two web servers might look like this:

  • Static site: < 2016-10-12_it_snowed.html >
  • Dynamic site: < ghost_database.db > + < blog_template.hbs >

In the first case, a browser would receive 2016-10-12_it_snowed.html and interpret it to display to the user. In the second case though, NGINX would ask Ghost to deliver a blog page called 'It Snowed!' that was published on 2016-10-12. Ghost would then look through a database and find all the information related to that post. It would put that information into the template file 'blog_template.hbs' and package it all together as '2016-10-12_it_snowed.html'.

The benefit of dynamic sites is so the author doesn't have to make and organize files for each and every blog post. A program takes care of all of that for you!

Recommendations

I use:

  • Namecheap to manage my domain ($15/year),
  • DigitalOcean to host my server ($5/month),
  • Ubuntu 16.04 Xenial to house my server
  • NGINX as a web server
  • Ghost to type on (it's awesome)
  • A modified version of a free website style found on StyleShout

With a GitHub education account, I got a discount for DigitalOcean as well.

There are also services that take care of the complicated server configurations for you. I know people who host on:

  • GitHub Pages (free; static only)
  • SquareSpace (starts at $12/month)
  • Tumblr (free; limited themes)
  • Google Blogger (free; limited)

WordPress (free for limited, $1.99/month for customization with ads, $8.25/month for 'Premium') and Ghost ($19/month) also offer hosting and domain integration.

If you do some quick math, you'll see that hosting yourself is actually pretty cheap compared to other options. Even though the learning curve is steeper, I think it's much more fun. DigitalOcean can actually even take care of installing Ghost or WordPress for you! If you want to give it a shot, I might be able to be persuaded to lend some more advice.

By the way, it snowed in Edmonton this week.

Tagged in : website meta tips internet blog