Simple Butter CMS Blog Integration for Flask

What is Butter CMS?

Butter CMS can be used to integrate a blog into your existing web app e.g. Flask or Django app. Butter CMS can alternatively be used as a CMS alternative to Wordpress. The beauty of Butter CMS is that it allows you to code in the programming language you know e.g. Python, Ruby on Rails etc. You can also create a CMS with customisable fields that make it user friendly for non technical people to work with. The functionality you have is according to whether you choose the Blog Engine, CMS or Free Presonal use plan.

For the purposes of integrating a simple Blog into my existing Flask app I chose to go with the Free Personal Plan. My goal was to use Butter CMS as a way to learn more about how API's work. I have found Butter CMS's API documentation to be user friendly, simple and to the point.

Process

My goal was to add a Blog integration to my Flask Portfolio app using the Butter CMS API.

Step 1

You can sign up for a Butter CMS account for free here.

The Setup is relatively simple. You can choose Python as your language so that you use Python specific syntax:

I have put a red line through my API Key, you will find your API key under Settings.

Step 2

If you want to integrate Butter CMS into your existing Flask app then go to the Butter CMS Flask  Github Repository. Here you will find the files you will need to add to your app along with some instructions to execute.

Step 3

In your Flask app create a blog tab in your html menu. You can do this by adding another link to your menu in index.html or whatever html file you are using as your base template.

Step 4

As indicated on the above GitHub repository, copy the buttercms folder into the Flask app and register it as a blueprint by inserting the following piece of code into your app.py file, or whatever you have called the controller file.

One thing that isn't mentioned is that you will also need to add an app route in your app.py file in order to render the blog.html file that can be found within the buttercms folder:

Step 5

You can style the Blog to look like your app by editing the blog.html file. By default the individual blog post styling is inherited from blog.html.

Step 6

Hide API Key. You can learn about hiding the API key in my post Hide API Key for Heroku App.

Step 6

Deploy the app to Heroku so that the online app will now include the Blog section.

Step 7

You can now add new posts to your Blog by creating them in ButterCMS. The post is pulled into your Flask app via the Butter CMS API.

 

I have found Butter CMS support to be very responsive and you can even arrange a pair programming session with one of their developers if you feel lost.

 

Have you a better understanding of Butter CMS? Did this blog post help to clear anything up for you? If you have any insights, questions or recommendations feel free to leave a comment or drop me an e-mail.