Merge pull request #341 from rishabkumar7/main

2025-02-03 12:55:46 +07:00 · 2023-03-01 12:31:25 -08:00 · 2023-03-01 12:31:25 -08:00 · 23fcc76b2e
commit 23fcc76b2e
parent e12353fc88 110406be7b
3 changed files with 155 additions and 0 deletions
--- a/2023/day48.md
+++ b/2023/day48.md
@ -0,0 +1,155 @@
+# Day 47 - Let's build an App in Python
+
+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
+  c:\>python -m venv c:\path\to\myenv
+  ```
+- Linux//MacOs
+  ``` bash
+  python3 -m venv /path/to/new/virtual/environment
+  ```
+
+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
+  ```
+
+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
+
+First, create a new Flask app, by creating a file in root of the project directory called `main.py`:
+
+``` 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)
+```
+
+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`:
+
+``` 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)
+```
+
+## 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
+```
+
+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!
+```
+
+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:
+
+![Home Page of our blog](/2023/images/day48-1.png)
+
+If we click on the `hello` blog post:
+
+![Hello blog post](/2023/images/day48-2.png)
--- a/2023/images/day48-1.png
+++ b/2023/images/day48-1.png
--- a/2023/images/day48-2.png
+++ b/2023/images/day48-2.png