Create an Analytical Website From Scratch Using Python

Flask website template that includes a spot for blogs, dash applications, and Jupyter notebooks

Screenshots of the author’s website

I wanted to create my own website that would allow me to create a blog, showcase my dashboards, and allow me to run jupyter notebooks.

I found out how to create the Dash application itself, but I was unable to find one that describes all three. That’s what I intend to provide today.

The template code is here, and with this template, I built my website.

Introduction

I originally designed this website written in Dash, just the dashboard shown below.

Screenshot of the author’s website

These dashboards were created using Dash and Plotly.

Unfortunately, when I realized I could not render the markdown blog posts, I had to figure out another way to create the website.

Then, I had to start googling and find an example that renders markdown and takes advantage of Dash for the dashboards, and I could not find one.

Instead, what I did find was a fantastic article ( link) by James Harding that I used to set up the main website and added a few tricks to align the dashboard to the website.

Folder Structure

All of this code and setup are provided here. The basic structure is like this:

.
|-- virtualenv/
|-- main/
|   |-- content
|   |   |-- posts
|   |   |   `-- about_website.md
|   |-- dash
|   |-- data
|   |-- static
|   |-- templates
|   |-- __init__.py
|-- app.py
|-- Dockerfile
|-- .pylintrc
`-- requirements.txt

In __init__.py, a flask server is set up and the flat pages and dashboard components are registered.

The website is split up into static files and HTML files. Images that are displayed on the website or CSS and javascript files are located in the static folder meanwhile the HTML files will be in the templates folder.

Registering the flask application