RESOURCES.md

Helpful resources

This document is a collection of helpful resources for building static sites. If you would like to add some more resources, be sure to make a pull request to this repository with the resources added to this file.

More static site generators

This workshop contains instructions on how to set up a site with Jekyll. However, there are many more static site generators to choose from. Here you can see an extensive list of static site generators.

Static site generators differ in their goals and programming languages they're written in. For some examples:

• Jekyll puts a big focus on making blogs work, but it's quite flexible otherwise as well. It's written in Ruby. Theme gallery
• Hugo is designed with flexibility in mind, and is often used for e.g. company websites. It's written in Go. Theme gallery
• MkDocs makes it very easy to write documentation for projects. It's written in Python. Theme gallery
• Pelican is another blog-aware static site gen. It's written in Python. Theme gallery
• Zola is a minimalistic static site gen, once again with a focus on blogs. It's written in Rust. Theme gallery

The process to use custom static site generators differs between GitLab and GitHub.

GitLab

Check out this walkthrough for setting up Hugo (and hello-friend-ng theme).

Some examples:

• The Math Soc SIG site uses its own custom Zola template. Repository
• A very minimalistic MkDocs example on GitLab Pages. You can compare this to a similar example for GitHub Pages listed in the GitHub section: Repository
• NLP project website uses Hugo and Hermit theme. Repository

GitHub

Some examples:

• A very minimalistic MkDocs example on GitHub Pages. You can compare it to a similar example for GitLab pages listed in the GitLab section: Repository

HTML, CSS and Javascript

To build your own templates and to give your site a a fully personalized feel, it's generally necessary to dive into HTML, CSS and Javascript. Here are some helpful links:

• Bottom up course for HTML + CSS on YouTube
• W3 schools provide an in depth guide and documentation for HTML and CSS
• Codepen is a site full of code snippets of HTML, CSS and Javascript. They also provide a list of most popular snippets in 2020

Extra content

• Formspree provide forms which you can easily embed into your static site and redirect responses to e.g. email, Google Sheets or more.
• Pixabay provide lots of royalty free pictures.