Create an Analytical Website From Scratch Using Python | by Sarah Floris | Apr, 2022

Screenshots of the writer’s web site

I needed to create my very own web site that may enable me to create a weblog, showcase my dashboards, and permit me to run jupyter notebooks.

I discovered how one can create the Sprint utility itself, however I used to be unable to seek out one which describes all three. That’s what I intend to supply at present.

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

I initially designed this web site written in Sprint, simply the dashboard proven under.

Screenshot of the writer’s web site

These dashboards have been created utilizing Sprint and Plotly.

Sadly, once I realized I couldn’t render the markdown weblog posts, I had to determine one other option to create the web site.

Then, I needed to begin googling and discover an instance that renders markdown and takes benefit of Sprint for the dashboards, and I couldn’t discover one.

As an alternative, what I did discover was a implausible article ( link) by James Harding that I used to arrange the primary web site and added a couple of tips to align the dashboard to the web site.

All of this code and setup are supplied here. The essential construction is like this:

.
|-- virtualenv/
|-- fundamental/
| |-- content material
| | |-- posts
| | | `-- about_website.md
| |-- sprint
| |-- knowledge
| |-- static
| |-- templates
| |-- __init__.py
|-- app.py
|-- Dockerfile
|-- .pylintrc
`-- necessities.txt

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

The web site is break up up into static recordsdata and HTML recordsdata. Photographs which can be displayed on the web site or CSS and javascript recordsdata are situated within the static folder in the meantime the HTML recordsdata might be within the templates folder.

The appliance might be known as from app.py, which calls the create_app() perform that’s situated within the __init__.py file.

On this perform, the very first thing I did was arrange the server and determine the place the static recordsdata give my web site’s distinctive traits.

Observe: with out including the static_url_path as a parameter, the Flask server may not know the place to search for the CSS and js recordsdata. If you happen to run right into a 404 when calling these recordsdata, this is likely to be your drawback.

After the Flask server registration, I can now add the sprint elements and Flatpages markdown pages.

In __init__.py, the perform register_dashapps is listed under.

One fundamental distinction between common Sprint and this perform is the extra flask context. The dashboard can now be run by way of a flask app_context(). Need to know the small print about why this further step is added? Right here’s the link.

Most weblog posts keep their content material in a relational database, which is the final strategy to storing put up contents.

In the meantime, my weblog posts are easy and “flat” and are available from recordsdata within the supply. Flatpages is completely designed for this use-case and rapidly provides a renderer to the flask app’s configuration that can translate or transcode markdown to HTML.

Moreover, we must register the web site routes that time to the posts.

The remainder of the weblog code has been completely defined by James Harding.

The final step is including the jupyter notebooks.

Earlier than we will add the redirect within the __init__.py file, we want to ensure the Jupyter pocket book will be accessed from the web site. I used the nbviewer, permitting me to host this Jupyter pocket book at no cost. This URL can then be used within the redirect(<URL>) like the instance under.

I hope this text sheds some gentle on combining Flask, Sprint, and Jupyter Pocket book into one lovely web site. Let me know when you’ve got any questions.

More Posts