Build a website fast using python
Introduction to Building Website
Website is entirely written in python and mobile responsive
What will be used: Streamlit library
Process
Prerequisites
(1) Access to the streamlit website and navigate to Quickstart
https://docs.streamlit.io/streamlit-community-cloud/get-started
(2) Create an environment using venv
D:
python -m venv venv
(3) Activate your environment
# Windows Command Prompt
venv\Scripts\activate.bat
(4)Install streamlit library
(5)Confirm whether streamlit library is properly installed
streamlit hello
(6)Deactivate Environment
deactivate
1.Create new python file
Right click mouse > +새로 만들기 > 텍스트 문서> Change the file name to app.py
2.Open up the script using the preferred text editor
Opened the script using visual studio code
(Right click file > 연결 프로그램 > Select Visual Studio Code)
3.Write Script (Header Part)
4.Middle Check
# Windows Command Prompt
venv\Scripts\activate.bat
Activate environment
(venv) D:\스터디\QuickWebsite>streamlit run app.py
How the website looks like
Clicking learn more also redirects me to the respective website
Caution: Make sure you are on the same directory as your python file
5.Write Script (Left Column)
# ---- Where? ----
# Wrap the following elements in a seperate streamlite container to organize the code (Optional)
with st.container():
# Insert divider using st.write() using three hyphens
st.write("---")
#Insert two columns
left_column1, right_column1 = st.columns(2)
with left_column1:
st.header("Fabulous restraunts near ApgujeongRodeo")
st.write("##")
st.write(
"""
Blue ribbon restraunts and elegant and lovely atmosphere, just what you need for Valentine's Day
"""
)
st.write("[Search for more in Naver >](https://map.naver.com/p/search/%EC%95%95%EA%B5%AC%EC%A0%95%20%EB%A7%9B%EC%A7%91?searchType=place)")
6.Middle Check
7.Insert Animation next to the text
Insert Lottie file for animation
Lottie file is a json based animation format. Files are small and welcome any device and scale up or down without any pixelation
7-1. Visit the website:
https://lottiefiles.com/
7-2. Search for the animation you like:
7-3. Copy link from the Asset link & Embed corner
7-4. Copy and paste the asset link to the script
# ---- LOAD ASSETS ----
lottie_coding = "https://lottie.host/embed/efbad0ce-60c5-47ba-89dc-cee400fdb3d9/AI3dWyvZav.json"
7-5. Install dependencies for lottie
# Windows Command Prompt
venv\Scripts\activate.bat
Activate your environment
(venv) D:\스터디\QuickWebsite>pip install streamlit-lottie
Install lottie library
Install requests library
7-6. Write the dependencies import in the script
import requests
from streamlit_lottie import st_lottie
7-7. Create a new function to access the json file of the lottie information
# Function to access the json data of the lottie animation
def load_lottieurl(url):
r = requests.get(url) # Get request of the url
if r.status_code != 200: # If the request is successful, it will return a status code of 200
return None # If something goes wrong, return nothing
return r.json() # Otherwise, return the json data of the lottie animation
# ---- LOAD ASSETS ----
lottie_coding = load_lottieurl("https://lottie.host/embed/efbad0ce-60c5-47ba-89dc-cee400fdb3d9/AI3dWyvZav.json")
7-8. Write the right column to insert the animation
with right_column1:
st_lottie(lottie_coding, height=300, key="coding")
7-9. Animation loaded
8.Showcase work
# ----Presents----
with st.container():
# Insert divider using st.write() using three hyphens
st.write("---")
st.header("Sweets")
st.write("##")
#text column is twice as big as the image
image_column, text_column = st.columns((1, 2))
with image_column:
# Insert image
with text_column:
# Paste information
# Display title in the subheader
st.subheader("How to make a Bark Chocolate")
# Description
st.write(
"""
Learn how to use make Bark Chocolate
Reference: 빈콩 Binkong Youtube Channel
"""
)
# Link for the respective video
st.markdown("[Watch Video...](https://www.youtube.com/watch?v=LzyAsRrl5BA)")
9.Showcase work in script
10. Insert images in web app
10-1. Activate your environment
# Windows Command Prompt
venv\Scripts\activate.bat
10-2. Install Pillow library
(venv) D:\스터디\QuickWebsite>pip install Pillow
10-3. Navigate to work directory of my project
10-4. Create a new folder called images
10-5. Add the images I want to add in the images folder
10-6. Import Image from PIL
img_chocolatebark = Image.open("images/chocolate_bark.jpg")
10-7. Load images
with image_column:
# Insert image
st.image(img_chocolatebark)
Now ready to display images on the website
10-8. Result:
11. Create a contact form
11-1.Head into free service of formsubmit
Link: https://getform.io
11-2.Sign Up and Create a New Form
11-3.Copy the Form endpoint
11-4. Insert fully functioning contact form
# ----Contact----
with st.container():
# Insert divider using st.write() using three hyphens
st.write("---")
st.header("Get In Touch With Me!")
st.write("##")
# Documentation:
contact_form = """
<form action="https://getform.io/f/9bea6965-f7ef-4386-8aa8-24e5b5b7f425" method="POST">
<input type="text" name="name" placeholder="Your name" required>
<!-- add hidden Honeypot input to prevent spams -->
<input type="hidden" name="_gotcha" style="display:none !important">
<input type="email" name="email" placeholder="Your email" required>
<input type="text" name="message" placeholder="Your message here" required>
<button type="submit">Send</button>
</form>
"""
#Avoid contact form to take the entire screen width
left_column5, right_column5 = st.columns(2)
with left_column5:
#Use markdown field and insert the contact form
st.markdown(contact_form, unsafe_allow_html=True)
with right_column5:
st.empty()
"""
11-5. Inject this html code to our web app
#Avoid contact form to take the entire screen width
left_column5, right_column5 = st.columns(2)
with left_column5:
st.markdown(contact_form, unsafe_allow_html=True)
with right_column5:
st.empty()
11-6. Result
11-7. Testing Form Submission
Can see the new submission in my inbox with name, email, and message in https://app.getform.io/
12. Styling
12-1. Create a new directory for styling
Create a new folder called style
12-2. Paste a pre-written css file
12-3. Inject the css code in our web app
(Option: Take the entire code and insert it into markdown field)
# Function to use local CSS
def local_css(file_name):
with open(file_name) as f:
st.markdown(f"<style>{f.read()}</style>", unsafe_allow_html=True)
More elegant solution:
Take file name as arg, open the file and insert the content in a html file tag
local_css("style/style.css")
Call the function with style.css file
12-4. Result
Button looks much better than before and the button has a hover effect as well
13. Change theme
13-1. Create a new directory for theme
Create a .streamlit directory in the root folder of your application
13-2. Create a config.toml app file
13-3. Copy paste from the streamlit
Grab the code from the streamlit blog and paste it to the config file
Reference: https://blog.streamlit.io/introducing-theming/
13-4. Adjust the color codes
Use pink color the interactive elements
13-5. Restart the session
(Nothing will happen after reload)
Stop current session by pressing ctrl+c
13-6. Restart the app
Reference:
https://blog.naver.com/jooeun0502/221956294941
https://docs.streamlit.io/get-started/installation/command-line
https://www.youtube.com/watch?app=desktop&v=VqgUkExPvLY