Heroku: How to integrate static site generation with Python / Flask

Question

I'm running a Flask website https://www.example.org that is hosted on Heroku, with an attached static blog, https://www.example.org/blog which I generate through Hugo and I'm looking to make this process more efficient

Based on my research, having the blog in a subdirectory is preferable for SEO reasons.

My current workflow with maintaining the blog is as follows:

1. Write Markdown post in Hugo
2. Check to reconcile css etc between Hugo and Flask app
3. Generate the static html code
4. Fix link errors etc.
5. Move static output from hugo/public folder to flask_app/static/blog folder
6. I'm using whitenoise to access the static folder
7. Deploy to Heroku --> https://www.example.org/blog served via Flask

I realize that serving static content via Flask is less computationally efficient (which is acceptable) but this is not a major problem right now.

But I'm sure there must be a better way ?!

Answer 1

Instead of relying on Flask to serve your static blog content, you can run a web server (such as nginx) that routes your traffic to either the Flask website or the static blog content.

User Request -> https://example.org -> nginx -> flask

User Request -> https://example.org/blog -> nginx -> static content (hosted on nginx server or other location)

Answer 2

You can automate step 3 by adding a Heroku Buildpack. There are third party open-source buildpacks for Hugo available on Github, e.g. roperzh/heroku-buildpack-hugo. Alternatively, you could use a Git hook to build the blog every time you commit any changes.

You could probably avoid steps 4 and 5 by setting baseURL and publishDir Hugo configuration settings.

I'm not sure what step 2 entails, but your overall setup (6. & 7.) seems reasonable.