As mentioned in the Projects section, this website it’s a Flask (Python framework) web application and, initially, the blog section was a bunch of rendered .md (Markdown) files. This solution worked well, however, since the .md files were being stored in the application’s folder, every time I’ve created a new blog post, I’d have to rebuild the entire application. This was not a very practical setup and so I’ve started looking for alternatives.

As an aspiring web developer, I often listen to the Syntax podcast and Sanity is a regular sponsor of their shows. One day, they had the guys from Sanity in one of their Supper Club episodes and I though “hmm, could be a nice alternative for the setup that I currently have”. And so, I’ve decided to give it a try…

Ok but… What’s Sanity.io?

Sanity, as defined on Jamstack’s website, is “the platform for structured content”. It’s a powerful CMS built in JavaScript, highly customizable and with a real-time hosted data store.

Here’s the documentation on how to get started with Sanity.

Flask and Sanity integration

In this article, I’ll show you a similar setup to the one that I currently have on my personal website.

First, this is a the file structure that I’ve used:


01. Installing requirements

# Library to load the env vars 
pip install python-dotenv

# Library to render text to HTML
pip install portabletext-html

02. Configs and environment variables


In this file, I’ve stored the Sanity API and CDN URL.

URL = <https://<ID>.api.sanity.io/>
CDN = <https://cdn.sanity.io/images/<ID>/production/>


For the Sanity API token, I’ve set it as a env var.


03. Loading the environment variables

Inside the app.py file, we need to import the dotenv library and than load the variables.

from dotenv 
import load_dotenv load_dotenv()

04. Working with Sanity API

In order to interact with the Sanity API, I’ve created a specific file called func_posts.py. Here, I’ve created 2 functions: get_all_posts() and get_post().

But first, we need to load the configuration settings and setup the authentication headers:

# Import modules 
import requests
import configparser
from portabletext_html import PortableTextRenderer

# Set auth headers
CMS_TOKEN = "Bearer " + str(os.getenv("CMS_TOKEN"))
headers = {"Authorization": CMS_TOKEN}

# Setup configuration file
config = configparser.ConfigParser()
SANITY_URL = config['sanity']['URL']


This function gets all posts and compiles a list with: post id, post title and post creation date. This list is used to populate the POSTS page.

# Get all posts 
def get_all_posts():

endpoint = "v2021-10-21/data/query/production?query="
# GROQ query to get all posts
query = "*[_type == 'post'] | {_id, title, _createdAt}"
data = requests.get(f"{SANITY_URL}{endpoint}{query}", headers = headers)
all_posts = data.json()
all_posts_list = [] # List to be sent to FE

# Loop through the fetched data and populate the posts list
for post in range(len(all_posts['result'])):
post_id = all_posts['result'][post]['_id']
post_title = all_posts['result'][post]['title']
post_created_at = time_formatter(all_posts['result'][post]['_createdAt'])
all_posts_list += [{'id': post_id, 'title': post_title, 'createdAt': post_created_at}]

return all_posts_list


This function gets the post content by ID. This is used to populate the POST page.

# Get post by ID 

def get_post(post_id):

endpoint = "v2021-10-21/data/query/production?query="
query = f"*[_id == '{post_id}']" # GROQ query to get post by ID
data = requests.get(f"{SANITY_URL}{endpoint}{query}", headers = headers)
post = data.json() block = 0 # Aux var for the 'for loop'
post_content = "" # Post content to be sent to FE

# Loop through the post and renders the content to be sent to the FE
for block in range(len(post['result'][0]['body'])):
if 'children' in post['result'][0]['body'][block]: # Text
renderer = PortableTextRenderer({
'_key': post['result'][0]['body'][block]['_key'],
'_type': post['result'][0]['body'][block]['_type'],
'children': post['result'][0]['body'][block]['children'],
'markDefs': post['result'][0]['body'][block]['markDefs'],
'style': post['result'][0]['body'][block]['style']
post_content += renderer.render()
if 'asset' in post['result'][0]['body'][block]: # Images
image_ref = post['result'][0]['body'][block]['asset']['_ref']
image_url = create_img_url(image_ref)
post_content += f'<img src = "{image_url}">'
block += 1

# Update pre to keep code format
post_content_fmt = post_content.replace('pre', 'pre')

return post_content_fmt

Additionally, I’ve created this extra function to build the URL for the images added to the posts.

# Create image URL 
def create_img_url(ref):

cdn_url = config['sanity']['CDN']
image_ref_temp = ref.replace("image-", "") # Remove the 'image-'
# Replace the '-ext' by '.ext'
image_ref = image_ref_temp[:48] + image_ref_temp.replace(image_ref_temp[:49], ".")
image_url = cdn_url + image_ref

return image_url

And that’s it! I hope you find this post useful and feel free to reach me out through my social platforms if you’ve any doubt 🙂

See you on the next one!