Web Development
-
Github Pages for your Website
Introduction
We go over GitHub Pages and set up a simple website to get familiar with the GitHub interface and learn how to use Git via command line to sync up your local repository of any existing page to your GitHub page.
A bit of background on the topic before we get started.
When creating your website, blog or a simple portfolio page you’ll eventually come to the point where you need to find a service to host it. Generally you have to choose between a paid service or try one of the free options that are often not reliable, slow or include ads.
There another option which is free as well, reliable and even has some features that traditional website services don’t include, GitHub Pages. You might have heard of Git and GitHub or even used it as version control system. Many companies use it in technical departments, wherever code is involved.
It also works great to host any type of static websites (More about static websites). My entire website is hosted on GitHub: cinereal.github.io
GitHub pages have the added benefit of enforced SSL encryption (HTTPS) and of course free version control.
So what’s the catch? It only works for static websites. Meaning if you are using a CMS or any script that dynamically generates pages or requires execution on a server it will not work. Anything PHP won’t work. What will work are script that are run on the client machine such as JavaScript.
Nowadays Static Site Generators are great alternatives to CMSs. You can create an entire website without a line of code if you don’t want to dive too deep into web development.
There’s projects that go even a step further, they provide a CMS to edit content, generate static site and sync your git repositories. The most popular one is netlifycms.org.
-
New Website - Static Site Generators
The Challenge
A few weeks ago I decided to finally upgrade my 10+ year old website. Initially I planned to use a content management system (CMS) but eventually had to realize that this wouldn’t work with my current web-server due to technical difficulties. The PHP memory limit is set so low on the provider side that I wasn’t able to install a CMS.
The Solution - Static Site Generators (SSG)
In recent years static site generators have become more popular. And they have some benefits over a CMS which convinced me to go that route.
What is a static site generators and how does it work?
The basic idea: You create a traditional website template with HTML and CSS and put SSG variables in place of the content such as text, titles and images. Then you put the actual content in simple markdown or json files. Finally you run the SSG via command line and it automatically combines template and raw content files into static html pages.
Some of the benefits:
- Hosted anywhere. Meaning you can use GitHub to host your website for free and super reliable.
- Fast, the pages don’t have to be rendered, no database requests.
- Secure, again there’s just static pages without logins and databases
- Easy to backup and move from one place to another
Of course there are downsides with static pages but for a portfolio and blogs the benefits outweigh these.
Where to get a Static Site Generators?
There are many open source options available. The most popular one is Jekyll, written in Ruby and works great with GitHub pages. After some research I decided to use Hugo, which is written in Google’s Go Language, and seemed a bit faster, slicker and more modern than the other options. If you don’t want to get too much into the whole web development aspect, for all the SSGs there’s many free templates including example sites available. But don’t take my word and do your own research!