Level 1: Chad HTML and CSS Site
Whats the easiest way to make a site? One would immediately think of a CMS (Content Management System) like WordPress or Drupal. Essentially a platform you set up on your web server that allows users to add pages/posts, change the visual theme, settings, etc... all through the site itself. Is this really necessary though? CMS are pretty heavyweight and can also be expensive. We also don't want to be restricted by the limited feature set of the CMS itself. Unless you aren't tech-savvy at all or aren't willing to learn, there are other options.
How about a "modern" web development framework like Django, Ruby on Rails, Angular.js, etc...? These may actually be good options. But for a site hosting pictures of your cat, and static text this is still overkill. These frameworks are great if you are making actual web applications. Ie: sites that actually do stuff. For example a tinder for cats website. Sites where content needs to be more dynamically generated, and using a full on database actually makes sense.
No, we must reject the modern web. Embrace tradition. Literally just use HTML and CSS to make your site. Add whatever images, text, links, emojis you want. Steal some Bootstrap styling and add Javascript scripts if you want. You're done. Then just buy cheap server space, set up a webserver, and then buy a domain name and point it to your server. Presto. Your site is hosted. You don't need a database for blog posts just create a new .html file for every post, and link it from your homepage. You have a blog.
To actually go about this, I recommend following this tutorial. It goes through buying a domain name, buying server space, pointing your domain name to your server, and setting up an NGINX web server. (The tutorial's creator also has a YouTube video going through the process, but he forgets to open the HTTP and HTTPS ports which are by default disabled by the firewall ufw. He also edits the ssh_config file while he should have been editing sshd_config. Despite this, still a great video! If you don't know any HTML or CSS learn it. It's not more difficult than learning to use a CMS like WordPress, and is much easier than learing a modern web framework.
If you follow the YT video, type the following commands in your server to open your HTTP and HTTPS ports:
ufw allow 80
ufw allow 443
Level 2: Static Site Generation
If you wanted to take things up a notch, you could use something like Jekyll. Jekyll is a static site generator. Using Jekyll, we keep the contents of our pages separate from the HTML and CSS of our site. We then use Jekyll to build the production version of our site (our .html, .css, ... files). One creates multiple .html layout pages that the content of different pages will be injected into using the Liquid templating language. Typically we would write our pages in Markdown. Markdown is just fancy syntax that is processed into HTML anyway, we can even include HTML in our Markdown .md files. So we aren't limited by Markdown. We don't even need to save our pages as .md files or even use Markdown if we don't want to, as long as we include front matter tags in our files, Jekyll will process them.
Once we build it, a Jekyll site is still a collection of .html files like the level one. Only we aren't creating them ourselves. We create our pages and layouts in separate files, and allow Jekyll to generate the site for us in a seperate folder (we can then file transfer our site files to our server). This prevents us from having repeated HTML that we would have to manually change in every file if we wanted to make a change. Sadly, HTML alone does not natively support including other .html files in them so we need to use something like Jekyll fix this problem for us. Since Liquid also has for loop tags, we can use it to do things like dynamically generate links to our pages for us (the links on my homepage for example).
Now that my site is set up. My workflow for adding a new page or blog post simply consists of creating a new .html file (I don't like Markdown). I then write the contents for that page using my favorite text editor (Vim). I then add Jekyll front matter tags to indicate what .html layout file to inject the contents of my post in. And I'm done. A link to the new page will be added to my homepage because of my for loop Liquid tag. I even wrote a Bash script to build my site and transfer the files to my server.
Front Matter Tags for this post:
---
title: Reject The Modern Web - Static Website Generation
layout: post
---
The for loop tag to generate blog post links:
<ul>
{% for post in site.posts %}
<li>
<a href="{{ post.url }}">{{ post.title }}</a>
<span class="postDate">{{ post.date | date: "%b %-d, %Y" }}</span>
</li>
{% endfor %}
</ul>
My Bash script:
#! /bin/bash
# updates the site build at adrientremblay.xyz to the jekyll build from the _site folder
echo '-----Building Jekyll Site-----'
jekyll b
echo '-----Starting File Transfer-----'
rsync -rtvzP /home/adrien/Projects/site/_site/ root@www.adrientremblay.xyz:/var/www/site
To go about creating a Jekyll site, I highly recommend following this tutorial which walks through the full process of creating a Jekyll site. I would also recommend reading this blog post by Jekyll's original creator explaining why he made it. Both these links explain Jekyll and the reasons behind using it much better than I can.
Why Even Have A Website?
Self Expression. You can put up, whatever you, organized and visually presented exactly how you want it. This, without the ads nor potential of censorship entailed with social media. Where have the days gone where the internet was the wild west, with thousands of unique and interesting sites that people would actually visit. Now a days, we're enslaved to the same 2-3 social media sites. Let's take the power back.
