|
| 1 | +# Day 47 - Let's build an App in Python |
| 2 | + |
| 3 | +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/) |
| 4 | + |
| 5 | +## Initiating virtual env and installing packages |
| 6 | + |
| 7 | +Let's create a directory for our blog project. After you have created your project directory, create virtual environment using the following commands: |
| 8 | +- Windows |
| 9 | + ``` bash |
| 10 | + c:\>python -m venv c:\path\to\myenv |
| 11 | + ``` |
| 12 | +- Linux//MacOs |
| 13 | + ``` bash |
| 14 | + python3 -m venv /path/to/new/virtual/environment |
| 15 | + ``` |
| 16 | + |
| 17 | +Activate the virtual environment: |
| 18 | + - Windows cmd |
| 19 | + ``` bash |
| 20 | + C:\> <venv>\Scripts\activate.bat |
| 21 | + ``` |
| 22 | + |
| 23 | + - Windows powershell |
| 24 | + ``` powershell |
| 25 | + <venv>\Scripts\Activate.ps1 |
| 26 | + ``` |
| 27 | + |
| 28 | + - Linux//MacOs |
| 29 | + ``` bash |
| 30 | + source <venv>/bin/activate |
| 31 | + ``` |
| 32 | + |
| 33 | +Now let's use `pip` to install required modules and packages that we will be using in this project. |
| 34 | +``` bash |
| 35 | +pip install flask markdown |
| 36 | +``` |
| 37 | + |
| 38 | +## Creating the flask app |
| 39 | + |
| 40 | +First, create a new Flask app, by creating a file in root of the project directory called `main.py`: |
| 41 | + |
| 42 | +``` python |
| 43 | +from flask import Flask, render_template |
| 44 | +import markdown |
| 45 | + |
| 46 | +app = Flask(__name__) |
| 47 | +``` |
| 48 | + |
| 49 | +Define a route for the home page: |
| 50 | +``` python |
| 51 | +@app.route('/') |
| 52 | +def home(): |
| 53 | + return render_template('index.html') |
| 54 | +``` |
| 55 | + |
| 56 | +Define a route to handle requests for individual blog posts: |
| 57 | + |
| 58 | +``` python |
| 59 | +@app.route('/posts/<path:path>') |
| 60 | +def post(path): |
| 61 | + with open(f'posts/{path}.md', 'r') as file: |
| 62 | + content = file.read() |
| 63 | + html = markdown.markdown(content) |
| 64 | + return render_template('post.html', content=html) |
| 65 | +``` |
| 66 | + |
| 67 | +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: |
| 68 | + |
| 69 | +- `index.html`: |
| 70 | + |
| 71 | +``` html |
| 72 | +<!DOCTYPE html> |
| 73 | +<html> |
| 74 | +<head> |
| 75 | + <title>My Blog</title> |
| 76 | +</head> |
| 77 | +<body> |
| 78 | + <h1>My Blog</h1> |
| 79 | + {% for post in posts %} |
| 80 | + <h2><a href="/posts/{{ post }}">{{ post }}</a></h2> |
| 81 | + {% endfor %} |
| 82 | +</body> |
| 83 | +</html> |
| 84 | +``` |
| 85 | + |
| 86 | +- `post.html`: |
| 87 | + |
| 88 | +``` html |
| 89 | +<!DOCTYPE html> |
| 90 | +<html> |
| 91 | +<head> |
| 92 | + <title>{{ title }}</title> |
| 93 | +</head> |
| 94 | +<body> |
| 95 | + <h1>{{ title }}</h1> |
| 96 | + <div>{{ content|safe }}</div> |
| 97 | +</body> |
| 98 | +</html> |
| 99 | +``` |
| 100 | + |
| 101 | +Modify the home route to display a list of blog post titles: |
| 102 | + |
| 103 | +``` python |
| 104 | +@app.route('/') |
| 105 | +def home(): |
| 106 | + posts = [] |
| 107 | + for file in os.listdir('posts'): |
| 108 | + if file.endswith('.md'): |
| 109 | + title = file[:-3] |
| 110 | + posts.append(title) |
| 111 | + return render_template('index.html', posts=posts) |
| 112 | +``` |
| 113 | + |
| 114 | +## Adding markdown posts |
| 115 | + |
| 116 | +Now before running the app, let's add few posts. |
| 117 | +Create a directory called `posts` and add some Markdown files with blog post content. |
| 118 | +Let's add a `hello.md`: |
| 119 | + |
| 120 | +``` markdown |
| 121 | +# Hello |
| 122 | + |
| 123 | +This is my first blog post |
| 124 | +### Heading level 3 |
| 125 | +#### Heading level 4 |
| 126 | +##### Heading level 5 |
| 127 | +###### Heading level 6 |
| 128 | + |
| 129 | +I just love **bold text**. |
| 130 | + |
| 131 | +``` |
| 132 | + |
| 133 | +Now, let's run the app, type the following command: |
| 134 | + |
| 135 | +``` bash |
| 136 | +python main.py |
| 137 | +``` |
| 138 | + |
| 139 | +And you should see the following output in the termainal: |
| 140 | + |
| 141 | +``` bash |
| 142 | + 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. |
| 143 | + * Running on http://127.0.0.1:5000 |
| 144 | +Press CTRL+C to quit |
| 145 | + * Restarting with stat |
| 146 | + * Debugger is active! |
| 147 | +``` |
| 148 | + |
| 149 | +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: |
| 150 | + |
| 151 | + |
| 152 | + |
| 153 | +If we click on the `hello` blog post: |
| 154 | + |
| 155 | + |
0 commit comments