Learn Python From Zero For Absolute Beginner (3): Create Website

Share this post:

In our previous article, we dived into the world of data visualization using Python and equipped you with the skills to create various charts and graphs. Now, in this article, we are excited to take your visualization journey a step further by showing you how to build a website using Python.

By following our step-by-step guide, you will learn how to leverage Python, along with tools like Streamlit and GitHub, to create an interactive website. We will cover everything from setting up the development environment to deploying your website online. Get ready to bring your visualizations to life on the web and share them with others!

By the end of this article, you will be able to create a website like the screenshot below – a multi-pages website that can display the interactive Plotly charts you created in the previous lesson.

Our demo site: https://hkust-dh-demo.streamlit.app/

our streamlit demo site
Preview of our demo site: https://hkust-dh-demo.streamlit.app/

What you will learn in this article

  • Python Libraries “streamlit”
  • Create website using Python
  • Create repository and upload files to Github
  • Publish your website online

Introduction to Streamlit

https://streamlit.io/

Streamlit is an open-source app framework and python library, allowing people to create web apps in minutes. It is a popular choice for developing web applications in the field of machine learning and data science. For example, the HKUST ChatGPT is made with Streamlit too!

HKUST ChatGPT is made with Streamlit too
Screenshot of HKUST ChatGPT

Source files

While we have released the entire source code of this demo site on our Github repository, we encourage you to follow along with us to create each file from scratch.

Screenshot illustrates how to download files in ZIP from Github repository
Screenshot illustrates how to download the entire source code of a Github repository

Alternatively, you may also fork our repository.
In the context of GitHub, “fork” refers to creating a personal copy of a repository (a collection of files and folders) hosted by another user. When you fork a repository, you create an independent copy of the original repository under your own GitHub account. This copy allows you to freely experiment, make changes, and contribute to the project without affecting the original repository.

Screenshot illustrates the "Fork" button in Github repository
Screenshot illustrates how to fork a Github repository

File structure

Folders and files in the demo folder
Folders and files in the demo folder
Common file structure for a streamlit app
Folder Files
root Homepage (.py file)
requirements.txt
pages Other pages (.py file)
Page navigation in the sidebar of the streamlit app

View the website locally

Before we dive into creating webpages from scratch, let’s first see how to run a Streamlit app on your local machine. Any modifications you make to your code will be instantly reflected when you refresh the app on your localhost after executing the steps below. By doing so, you can immediately observe the results as you fine-tune your webpages.

In this tutorials, we will be using VS code as the code editor for demonstration. However, feel free to use whatever code editor suits you best.

Steps:
1. Open the project folder.

Open folder in VS code
Open folder in VS code

2. Open terminal by click “Terminal” → “New Terminal” in the menu bar (shortcut in VS code: Ctrl + Shift + `). Make sure you are under the current project folder directory.

Open terminal in VS code
Open terminal in VS code

3. Ensure python and pip are installed in your computer. If not, download them to your computer.

4. Install the required dependencies or packages listed in the file requirements.txt by typing the following commands in the terminal (see screenshot below for demo):

pip3 install -r requirements.txt

or

pip install -r requirements.txt

The requirements.txt file is commonly used in Python projects to specify the external dependencies, such as libraries or packages, and their corresponding versions, that are required for the project to run correctly.

5. Run the Streamlit app in your local machine by typing the following commands in the terminal (see screenshot below for demo):

python -m streamlit run Homepage.py

or

streamlit run Homepage.py

6. A Local URL (e.g. http://localhost:8501/) will be shown in the terminal. You should now be able to view the website by placing the URL in your browser.

Demo on how to launch Streamlit app on local machine
Example: view Streamlit app locally
Example: view Streamlit app locally by visiting the URL http://localhost:8501/

Without further ado, let’s dive straight into the process of building the website using streamlit from scratch.

Start to create website from scratch

flow of creating website using python and deploy using github and streamlit
Overall workflow

1. Create files in your computer

First, create a new folder to store all the files that you are going to be created in this project.

1.1 Create requirements.txt

Inside the project folder, create a file named requirements.txt with the following content:

streamlit==1.26.0
pandas==2.0.3
plotly_express==0.4.1
openpyxl

The requirements.txt file is commonly used in Python projects to specify the external dependencies, such as libraries or packages, and their corresponding versions, that are required for the project to run correctly. When deploy the web app online, the requirements.txt file is used to install the necessary dependencies on the deployment environment/server.

In this demo project, we will use the following 4 libraries: streamlit (for creating the web app), pandas (for data cleaning and manipulation), plotly_express (for creating interactive charts) and openpyxl (for reading Excel data file).

1.2 Create Homepage

Inside the project folder, create a .py file. This will be the landing page of the our website.
In this demo project, we named it as Homepage.py. You can name it whatever you want.

We would like to add some text, image and plotly charts to this page, which required the use of some python libraries. So, let’s import the libraries by typing the following lines in the file Homepage.py.

import streamlit as st
import pandas as pd
import plotly.express as px

Then, set the page configuration by inputting the following lines inside the file:

st.set_page_config(
    page_title="Demo | HKUST Digital Humanities Initiative",
    page_icon="👋",
)
screenshot showing where streamlit page title and page icon is located
Page Title and Page Icon

Add caption and title.

st.caption("Demo by HKUST Digital Humanities Initiative")
st.title("Learn Python From Zero For Absolute Beginner (3): Create Website")
screenshot showing where st.caption and st.title is located
st.caption & st.title

You may also add elements in the sidebar.

with st.sidebar:
    st.markdown("enter elements that you would like to show in the sidebar here")

Not familiar about Markdown syntax? You may refer to our Markdown Cheatsheet for reference!

screenshot showing where st.caption and st.sidebar is located
st.sidebar

1.3 Add interactive Plotly charts to webpage

Adding a Plotly chart to the Streamlit app is incredibly straightforward – simply copy the Python code you created in our previous article on data visualization.

# read Excel file data
filepath = 'data/data_dh-tutorial_rse-ChiBksBefore1949-ThreadBound.xlsx'
data = pd.read_excel(filepath, sheet_name='data')
# Data pre-processing
data2 = data.copy()
data2.rename(columns={'year published':'year'}, inplace=True)
data2['Period'] = ['16th century' if 1501 <= year <= 1600 else '17th century' if 1601 <= year <= 1700 else '18th century' if 1701 <= year <= 1800 else '19th century' if 1801 <= year <= 1900 else '20th century' if 1901 <= year <= 2000 else "Ungrouped" for year in data2['year']]
# create plotly chart
plotly_chart1 = px.histogram(data2, x='Period', y='number of items')
plotly_chart1.update_layout(
    title = 'Number of Items by Century',
    yaxis_title='Number of items',
    xaxis_title='Century',
)
# show the plotly chart
st.plotly_chart(plotly_chart1, use_container_width=True)
# another plotly chart 
plotly_chart3 = px.bar(data2, x='year', y='number of items',
            color='Period',
            color_discrete_sequence=["#ffb7b2", "#ffdac0", "#e3f0cb", "#b5ead9", "#c7cee9"])
plotly_chart3.update_layout(
    title = 'Number of Items by Year',
    yaxis_title='Number of items',
    xaxis_title='Year',
    paper_bgcolor = 'white', 
    plot_bgcolor = 'white', 
    xaxis = dict(
        showline = True,
        linecolor = 'rgb(102, 102, 102)',
        tickfont_color = 'rgb(102, 102, 102)',
        showticklabels = True,
        dtick = 10,
        ticks = 'outside',
        tickcolor = 'rgb(102, 102, 102)',
    ),
    yaxis = dict(
        showline = True,
        linecolor = 'rgb(102, 102, 102)',
        tickfont_color = 'rgb(102, 102, 102)',
        showticklabels = True,
        dtick = 5, 
        ticks = 'outside',
        tickcolor = 'rgb(102, 102, 102)',
    ),
)
plotly_chart3.add_hline(y = data2['number of items'].mean(), annotation_text = 'average line', line_width = 1, line_color = '#edc982')
plotly_chart3.update_layout(hovermode='x unified')
# show the plotly chart
st.plotly_chart(plotly_chart3, use_container_width=True)

The only difference is that, we wrote plotly_chartname.show() to display the chart in Jupyter Notebook while writing st.plotly_chart(plotly_chartname, use_container_width=True) in the .py file for Streamlit application.

Another remarkable difference would be: In Jupyter Notebook, we usually use print() to display the output. When developing Streamlit application, st.write() and st.markdown() would be good choices to do so.

For more details and more functions, we highly recommend you to explore the Streamlit documentation: https://docs.streamlit.io/library/api-reference
You’ll discover numerous features, tips, and tricks that can enhance your Streamlit applications!

Streamlit documentation
Streamlit documentation

1.4 Create Other pages

Inside the project folder, create a folder named pages.
Then create .py files inside the pages folder.

For example, we would like to create a page named “Examples” and “More tutorials”. Then, create a Example.py file and a More tutorials.py file inside the pages folder.

create .py files inside the "pages" folder
create .py files inside the “pages” folder
other pages show in sidebar

Normally, below are the necessary elements for a page. If you find it useful, feel free to use it as template:

###############################################################
# import python libraries
###############################################################
import streamlit as st

###############################################################
# page info
###############################################################
st.set_page_config(
    page_title="enter page title text here",
    page_icon="enter a page icon here",
)

###############################################################
# page content
###############################################################
st.caption("enter caption here")
st.title("enter title here")

Now, we believe you have successfully created several pages by following the steps above. Congratulations! It is time to take one last step before deploying your masterpiece online. To ensure everything is functioning correctly, take a moment to view the website locally once again for double-checking.

If everything is alright, let’s begin the process of taking your website from your local machine to the online world.

2. Upload files to Github

1. If you do not have a GitHub account yet, please create one before proceeding further.
2. Create a new repository https://github.com/new (see screenshot below)

Create a new repository in Github
Create a new repository in Github

3. Upload all the files in your project folder to your Github repository.

Upload files to Github repository - Step 1
Upload files to Github repository – Step 1
Upload files to Github repository - Step 2
Upload files to Github repository – Step 2

3. Deploy the Streamlit app online

1. If you do not have a Streamlit account yet, please create one before proceeding further.
2. Go to https://share.streamlit.io/ , click the “New app” button.

new app in streamlit

3. Authorize Streamlit to access your Github repositories.

auth streamlit to github repo

4. Select the Github repository that you just created and enter necessary information in Streamlit (see screenshot below for reference).

deploy github code to streamlit

5. Then, you will be able to view your website by the App URL you defined just now.
6. Click “Share” on the upper-right corner and enable “Make this app public”.

7. Congratulations! 🎉 Your website is now successfully deployed, and it is now accessible to people all around the world on the Internet.

Share with us!

We would love to hear from you if you have followed along with this article and successfully created a website. We appreciate your efforts and would be thrilled to share and highlight your work here. Share with us!

 

– By Holly Chan, Library

August 28, 2023