Nick George
all/

Building a static website with Flask

First published: June 26, 2017
Last updated: January 8, 2023

This describes my pre-clojure static website. My website is now written in Clojure.

Website- goals

I want place to publicly share my projects, notes, and CV. This way I can display what I am working on, and learn about web development with Flask. Once I am up and running, I will continue writing my posts in Emacs org-mode and will update the site using org-publish and git-hooks.

Why Flask?

I started using Jekyll, the popular static website generator written in Ruby and recommended by Github. However, the focus of Jekyll is blogging, and I don't really want to blog. I see myself posting projects, notes, and the occasional blogpost, but not daily blogs. I felt constrained by Jekyll, as I couldn't figure out how to tweak the layout of the website just so. I also don't code in Ruby and didn't really want to put the time into learning Jekyll as an application. However, I do want to build a static site so that I can host on Github pages and easily edit it. But maybe in the future I will want to scale up… For these reasons, (and the fact that I know Python) I looked to Flask.

However, as far as I can tell, Flask is not widely used for static websites hosted on Github pages. It took me a little while to figure out, but I now have a workable solution for my website which I will talk about on this page. Here are some of the resources I have been using:

Flask tools

  • Flask is a powerful modular web framework written in Python
  • Flask-FlatPages generates the pages
  • Frozen-Flask for making the static site out of your Flask app

  • Michael Herman's video on using Flask to setup a static website

    • Github Repo. As far as I can tell, this is the Github repo with code. I used it to explain some concepts not covered in the first video

  • Steven Loria's description of hosting static sites on Github pages using Flask.

  • Nicolas Perriault has an excellent and clear walk through. I learned a ton about Jinja2, the templating engine Flask uses by following along with these code examples.
  • Flask static basics
  • Routes and stuff very helpful site for setting up a more complex indexing structure.

Website Design Resources

From the folks at Twitter, this super popular HTML/JS/CSS framework for making beautiful responsive websites.

For learning HTML, CSS, and how to use Bootstrap

Emacs and org-mode

Site Overview

Flask is a light-weight and simple option for creating applications. I am just learning it so I thought building this static website would be a great way to get introduced. There are tons of great tutorials on Youtube and other blogs, some of which I linked to above. I will go through the basics for getting a site on Github pages using Flask, Flask-FlatPages, and Frozen-Flask. My workflow includes using Emacs and org-mode to create my pages in a separate directory, which I then use org-publish to convert these changes to html for the website. First I will describe how too setup your directories and Flask app, then I will show how I have integrated Emacs org-mode to make it all easy and painless.

Walk through design

I made a cookiecutter to streamline making static flask sites. It needs a lot of work, I wouldn't recommend it yet, but it is a nice starting point for me.

DNS stuff

I use namecheap to manage my custom domain (nickgeorge.net), but unfortunately when I created a CNAME file to connect my github pages to it, I got a horrible network certificate warning from Chrome. To address this, I set this up https://www.timble.net/blog/2016/04/setting-up-ssl-on-github-pages/ namecheap instructions https://www.namecheap.com/support/knowledgebase/article.aspx/9645/2208/how-do-i-link-my-domain-to-github-pages