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.
- Kill The Yak is his website hosted on Github
- 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
- Emacs text editor
- community driven org tutorials
- Org-publish I use a modified version of this framework to build this website.
- org-jekyll blog is described here. I started using this then modified the workflow for Flask here.
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.
Emacs Org mode exports to these locations
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