Build A Stunning Blog With FastAPI: A Complete Guide

by Jhon Lennon 53 views

Hey guys! Ready to dive into the world of web development and build your own blog? We're going to build a blog using FastAPI, a modern, fast (high-performance), web framework for building APIs with Python 3.7+ based on standard Python type hints. This guide will walk you through everything, from setting up the backend to creating the frontend, and finally, deploying your blog so the whole world can see it. So, buckle up, grab your favorite coding beverage, and let's get started. This tutorial assumes you have a basic understanding of Python, but don't worry, we'll keep things as clear and straightforward as possible. We'll cover everything step-by-step, making it easy for both beginners and experienced developers to follow along. We will cover the backend with FastAPI and the frontend with some popular tools. We will use markdown for content creation, which will be stored on a database. After that, we will learn how to deploy it and make it accessible on the internet.

We'll cover the following topics in detail: setting up the development environment, creating the backend API with FastAPI, designing the database, building the frontend interface with modern tools, and deploying the entire blog application. I'm excited to share my knowledge and help you create something awesome. So, let's turn that idea of yours into a fully functional blog, accessible to anyone, anywhere. And I promise you, by the end of this guide, you'll not only have a blog but also a solid understanding of how web applications work, and the tools used to build it.

Setting Up Your Development Environment

First things first, we need to set up our development environment. This is where all the magic happens! We'll be using Python and a few essential libraries. If you don't have Python installed, head over to the official Python website (https://www.python.org/downloads/) and download the latest version. Make sure to check the box that says "Add Python to PATH" during installation; this allows you to run Python from your terminal. Next, we need to create a virtual environment. This isolates our project's dependencies from other Python projects on your system, preventing conflicts. Open your terminal or command prompt and navigate to the directory where you want to create your blog project. Run the following commands:

python -m venv .venv

This creates a virtual environment named .venv. Now, activate the virtual environment:

  • On Windows:

    .venv\Scripts\activate

  • On macOS/Linux:

    source .venv/bin/activate

You should see (.venv) or a similar prefix in your terminal, indicating that the virtual environment is active. Next, we'll install the required Python packages. We'll need FastAPI, Uvicorn (an ASGI server), and some database tools. Run the following command:

pip install fastapi uvicorn databases aiosqlite python-dotenv markdown
  • fastapi: Our web framework.
  • uvicorn: An ASGI server to run our FastAPI application.
  • databases: An async database library.
  • aiosqlite: An async SQLite driver.
  • python-dotenv: A library to load environment variables.
  • markdown: A markdown parser.

With these packages installed, we're ready to start building the backend! I know it can be a bit tedious, but trust me, setting up the environment correctly is crucial for a smooth development process. It's like building the foundation of a house; if it's not solid, the whole thing could crumble. But don't worry, we'll walk through each step, making sure everything is set up correctly.

Building the Backend with FastAPI

Alright, let's get into the exciting part: building the backend using FastAPI. This is where we'll handle all the logic, data storage, and API endpoints for our blog. We'll start by creating a simple file structure for our project. Inside your project directory, create the following files and directories:

my_blog/
│
├── .venv/ (your virtual environment)
├── main.py
├── db.py
├── models.py
├── .env
└── templates/
    └── index.html
  • main.py: This is the entry point of our FastAPI application.
  • db.py: This file will handle the database connection and operations.
  • models.py: This file will define our database models.
  • .env: This file will store our environment variables (e.g., database connection string).
  • templates/: This directory will hold our HTML templates (for the frontend).

Let's start with db.py. This file will handle the database connection. We'll use SQLite for simplicity. First, create a new file named db.py and paste the following code into it:

import os
from databases import Database
from dotenv import load_dotenv

load_dotenv()

DATABASE_URL = os.environ.get("DATABASE_URL", "sqlite:///./blog.db")

database = Database(DATABASE_URL)

async def connect_db():
    await database.connect()

async def disconnect_db():
    await database.disconnect()

Here, we're importing necessary libraries, loading environment variables from .env, and setting up a database connection using the DATABASE_URL. Next, create a .env file in the root directory and add:

DATABASE_URL=sqlite:///./blog.db

Next, in models.py, define the database models. We'll have a Post model. Create models.py and paste the following:

from sqlalchemy import Column, Integer, String, DateTime, Text
from sqlalchemy.ext.declarative import declarative_base
from datetime import datetime

Base = declarative_base()

class Post(Base):
    __tablename__ = "posts"

    id = Column(Integer, primary_key=True, index=True)
    title = Column(String, index=True)
    content = Column(Text)
    created_at = Column(DateTime, default=datetime.utcnow)

In this code, we're defining our Post model. Each post will have an id, title, content, and created_at fields. Now, in main.py, let's create the FastAPI app and define some routes. Create main.py and paste the following code:

import os
from typing import List
import markdown
from fastapi import FastAPI, HTTPException, Depends, status, Request
from fastapi.responses import HTMLResponse
from fastapi.templating import Jinja2Templates
from sqlalchemy import create_engine
from sqlalchemy.orm import Session
from dotenv import load_dotenv
from .models import Base, Post
from .db import database, connect_db, disconnect_db

load_dotenv()

app = FastAPI()

@app.on_event("startup")
async def startup():
    await connect_db()
    # Create tables if they don't exist
    engine = create_engine(os.environ.get("DATABASE_URL", "sqlite:///./blog.db"))
    Base.metadata.create_all(bind=engine)

@app.on_event("shutdown")
async def shutdown():
    await disconnect_db()

templates = Jinja2Templates(directory="templates")

@app.get("/", response_class=HTMLResponse)
async def read_root(request: Request):
    query = "SELECT id, title, content, created_at FROM posts ORDER BY created_at DESC"
    rows = await database.fetch_all(query=query)
    posts = []
    for row in rows:
        posts.append({
            "id": row["id"],
            "title": row["title"],
            "content": markdown.markdown(row["content"]),
            "created_at": row["created_at"]
        })
    return templates.TemplateResponse("index.html", {"request": request, "posts": posts})

@app.get("/posts/{post_id}", response_class=HTMLResponse)
async def read_post(request: Request, post_id: int):
    query = "SELECT id, title, content, created_at FROM posts WHERE id = :post_id"
    values = {"post_id": post_id}
    row = await database.fetch_one(query=query, values=values)
    if row:
        post = {
            "id": row["id"],
            "title": row["title"],
            "content": markdown.markdown(row["content"]),
            "created_at": row["created_at"]
        }
        return templates.TemplateResponse("index.html", {"request": request, "posts": [post]})
    else:
        raise HTTPException(status_code=404, detail="Post not found")

This code sets up the FastAPI application, defines routes for the home page (/) and individual posts (/posts/{post_id}), and renders the data using a Jinja2 template. I'll add the template later. Before we dive into the frontend, let's test our API to ensure everything is working correctly. Open your terminal, make sure your virtual environment is activated, and run the following command to start the FastAPI development server:

uvicorn main:app --reload

This will start the server, and you can access your API documentation at http://127.0.0.1:8000/docs. You can interact with the API endpoints here. The above code has basic routes which will be filled with frontend HTML content.

Designing the Frontend with HTML and Jinja2

Alright, let's move on to the frontend! In this section, we'll design a simple, yet elegant frontend for our blog using HTML and Jinja2 templates. Jinja2 is a powerful templating engine for Python that allows us to dynamically generate HTML. This means we can pass data from our FastAPI backend to the frontend and render it easily. Now, we'll create the templates/index.html file, which is where we'll design the main page of our blog. Create templates/index.html and paste the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Awesome Blog</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }

        h1 {
            color: #333;
        }

        .post {
            border: 1px solid #ccc;
            padding: 10px;
            margin-bottom: 20px;
        }

        .post h2 {
            margin-top: 0;
        }

        .post-content {
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <h1>Welcome to My Awesome Blog</h1>

    {% for post in posts %}
        <div class="post">
            <h2>{{ post.title }}</h2>
            <p class="post-content">{{ post.content | safe }}</p>
            <p>Published: {{ post.created_at }}</p>
        </div>
    {% endfor %}

</body>
</html>

This HTML file defines the basic structure of our blog. It includes a title, some basic styling, and loops through the posts data that we'll pass from our FastAPI backend. The {% for post in posts %} and {{ post.title }} syntax is Jinja2's way of iterating through a list of posts and displaying their titles and content. The {{ post.content | safe }} part is important; it tells Jinja2 to render the HTML content we're getting from the Markdown conversion safely. Create a similar template, for post, so it can be viewed individually. The below is the code for the same:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ post.title }} - My Awesome Blog</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }

        h1 {
            color: #333;
        }

        .post {
            border: 1px solid #ccc;
            padding: 10px;
            margin-bottom: 20px;
        }

        .post h2 {
            margin-top: 0;
        }

        .post-content {
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <h1>{{ post.title }}</h1>
    <div class="post">
        <p class="post-content">{{ post.content | safe }}</p>
        <p>Published: {{ post.created_at }}</p>
    </div>
</body>
</html>

This is a basic structure for the individual posts. Now, let's create a few sample posts in our database. Since we're using SQLite, we can easily interact with the database using a tool like DB Browser for SQLite (https://sqlitebrowser.org/). This is optional; you can also write Python scripts to insert data into the database. Now, test your blog by running uvicorn main:app --reload. Then open your web browser at http://127.0.0.1:8000/. You should see your blog with the posts you added. The layout is basic, but we have a functional blog! Now, your blog is starting to come to life! You've successfully connected your backend with your frontend, and you're displaying your posts. Feel free to experiment with the HTML and CSS to customize the look and feel of your blog. You can add more styling, layouts, and interactive elements to create a unique and engaging blog experience. You can even add other interactive elements like comments using HTML, CSS, Javascript, and other popular tools.

Deploying Your Blog

Alright, you've built your blog, it looks great, and now it's time to share it with the world! We'll deploy our FastAPI blog using Docker and a platform like Render. Docker will help us containerize our application, making it easy to deploy and run consistently across different environments. Render offers a user-friendly platform for deploying web applications, databases, and more. First, we need to create a Dockerfile in the root of your project directory. This file contains instructions for Docker to build an image of our application. Create a file named Dockerfile (no file extension) and paste the following code into it:

FROM python:3.9-slim-buster

WORKDIR /app

COPY ./requirements.txt /app/requirements.txt
RUN pip install --no-cache-dir -r requirements.txt

COPY . /app

EXPOSE 8000

CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8000"]

This Dockerfile does the following:

  • Uses the official Python 3.9 slim-buster image as the base.
  • Sets the working directory to /app.
  • Copies the requirements.txt file and installs the dependencies.
  • Copies the entire project to the /app directory.
  • Exposes port 8000.
  • Runs the uvicorn command to start the FastAPI application.

Next, we need to create a requirements.txt file, which lists all the Python packages our project depends on. You can generate this file using the following command:

pip freeze > requirements.txt

This command lists all the installed packages in your virtual environment and saves them to the requirements.txt file. Now, let's build the Docker image. Open your terminal, navigate to your project directory, and run the following command:

docker build -t my-fastapi-blog .

This command builds a Docker image named my-fastapi-blog using the instructions in your Dockerfile. The . at the end specifies the build context (the current directory). Once the image is built, you can run it locally to test if everything is working correctly:

docker run -p 8000:8000 my-fastapi-blog

This command runs the Docker container, maps port 8000 on your host machine to port 8000 in the container, and starts your FastAPI application. You can then access your blog in your web browser at http://localhost:8000. Once you have confirmed that the docker is working correctly, you will then want to deploy it to render or other deployment tools.

Deploying to Render

Render is an easy-to-use platform that allows you to deploy web applications and databases with ease. To deploy your blog to Render, follow these steps:

  1. Create a Render account: If you don't already have one, sign up for a Render account at https://render.com/.
  2. Connect your repository: Connect your Git repository (e.g., GitHub, GitLab) to Render. Render will automatically deploy your application whenever you push changes to your repository.
  3. Create a new Web Service: In the Render dashboard, create a new Web Service. Select "Docker" as the environment.
  4. Configure the Web Service:
    • Choose your repository and the branch you want to deploy.
    • Set a name for your service.
    • Specify the Dockerfile path (it should be the default: /Dockerfile).
    • Choose a region for your deployment.
    • Set the instance type and the number of instances. (Free instances are available for testing.)
  5. Set Environment Variables: Add the database URL as an environment variable (DATABASE_URL = sqlite:///./blog.db). Make sure you include the database URL.
  6. Deploy: Click "Create Web Service" to start the deployment process. Render will build your Docker image, deploy it, and provide you with a URL to access your blog.

Once the deployment is complete, Render will provide you with a public URL for your blog. You can then access your blog from anywhere in the world! Congratulations, you've successfully deployed your blog using FastAPI, Docker, and Render. Deploying to the cloud is often a great experience, especially once everything works as expected.

Conclusion

And there you have it, guys! We've built a complete blog using FastAPI, from the backend API to the frontend interface, and deployed it to the cloud. You now have a solid understanding of how to build and deploy web applications with Python. This is just the beginning; there are many more features you can add, such as user authentication, comments, and a more advanced content editor. Don't be afraid to experiment, try new things, and keep learning. The world of web development is vast, and there's always something new to discover. You can also explore other frontend frameworks such as React, Angular, or Vue.js. All of this is possible with just a little effort and time. Keep coding, keep creating, and enjoy the journey! I hope you've enjoyed this tutorial. Happy coding!