2023-03-02 02:14:54 +07:00
# Day 47 - Let's build an App in Python
2023-03-02 02:52:18 +07:00
Let's create a simple blog app with the help of [Flask ](https://flask.palletsprojects.com/en/2.2.x/ ) that supports posts in [markdown. ](https://www.markdownguide.org/basic-syntax/ )
## Initiating virtual env and installing packages
Let's create a directory for our blog project. After you have created your project directory, create virtual environment using the following commands:
- Windows
``` bash
2023-03-02 03:09:15 +07:00
c:\>python -m venv c:\path\to\myenv
2023-03-02 02:52:18 +07:00
```
- Linux//MacOs
``` bash
2023-03-02 03:09:15 +07:00
python3 -m venv /path/to/new/virtual/environment
2023-03-02 02:52:18 +07:00
```
2023-03-02 03:09:15 +07:00
Activate the virtual environment:
- Windows cmd
``` bash
C:\> < venv > \Scripts\activate.bat
```
- Windows powershell
``` powershell
< venv > \Scripts\Activate.ps1
```
- Linux//MacOs
``` bash
source < venv > /bin/activate
```
2023-03-02 02:52:18 +07:00
Now let's use `pip` to install required modules and packages that we will be using in this project.
``` bash
pip install flask markdown
```
## Creating the flask app
2023-03-02 03:09:15 +07:00
First, create a new Flask app, by creating a file in root of the project directory called `main.py` :
2023-03-02 02:52:18 +07:00
``` python
from flask import Flask, render_template
import markdown
app = Flask(__name__)
```
Define a route for the home page:
``` python
@app .route('/')
def home():
return render_template('index.html')
```
Define a route to handle requests for individual blog posts:
``` python
@app .route('/posts/< path:path > ')
def post(path):
with open(f'posts/{path}.md', 'r') as file:
content = file.read()
html = markdown.markdown(content)
return render_template('post.html', content=html)
```
2023-03-02 03:11:41 +07:00
Create templates for the home page and individual blog posts, we can do this by creating a new directory in root of project called `templates` . And then further create the two following `html` files:
- `index.html` :
2023-03-02 02:52:18 +07:00
``` html
<!DOCTYPE html>
< html >
< head >
< title > My Blog< / title >
< / head >
< body >
< h1 > My Blog< / h1 >
{% for post in posts %}
< h2 > < a href = "/posts/{{ post }}" > {{ post }}< / a > < / h2 >
{% endfor %}
< / body >
< / html >
```
- `post.html` :
``` html
<!DOCTYPE html>
< html >
< head >
< title > {{ title }}< / title >
< / head >
< body >
< h1 > {{ title }}< / h1 >
< div > {{ content|safe }}< / div >
< / body >
< / html >
```
Modify the home route to display a list of blog post titles:
``` python
@app .route('/')
def home():
posts = []
for file in os.listdir('posts'):
if file.endswith('.md'):
title = file[:-3]
posts.append(title)
return render_template('index.html', posts=posts)
```
2023-03-02 03:09:15 +07:00
## Adding markdown posts
Now before running the app, let's add few posts.
Create a directory called `posts` and add some Markdown files with blog post content.
Let's add a `hello.md` :
``` markdown
# Hello
This is my first blog post
### Heading level 3
#### Heading level 4
##### Heading level 5
###### Heading level 6
I just love **bold text** .
```
Now, let's run the app, type the following command:
``` bash
python main.py
```
2023-03-02 03:13:22 +07:00
And you should see the following output in the termainal:
``` bash
python main.py * Serving Flask app 'main' * Debug mode: on WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
* Running on http://127.0.0.1:5000
Press CTRL+C to quit
* Restarting with stat
* Debugger is active!
```
2023-03-02 03:09:15 +07:00
Here is how it would look, I have 2 blog posts and have some gifs in my blog posts. Navigate to `127.0.0.0:5000` in a browser window:
If we click on the `hello` blog post:
2023-03-23 22:45:18 +07:00
See you tomorrow in [Day 49 ](day49.md ).
