用 Python + Flask + Tailwind极速搭建高颜值个人博客

本文介绍如何使用Python的Flask框架结合Tailwind CSS快速搭建一个轻量级高颜值个人博客。通过Flask实现后端逻辑，SQLite+SQLAlchemy管理数据，利用Tailwind CSS的原子化特性简化前端开发。教程包含环境搭建、核心代码实现（约200行）和页面模板设计，最终呈现包含文章列表、详情页和发布功能的完整博客系统。项目结构简洁，无需复杂配置即可运行，适合追求高效开发的

2302_79395839

303人浏览 · 2026-03-01 11:59:21

2302_79395839 · 2026-03-01 11:59:21 发布

告别臃肿！用 Python + Flask + Tailwind极速搭建高颜值个人博客（附完整源码）

在这里插入图片描述

前言：为什么选择 Flask？

之前写个人网站或是小型的 Web 项目，总习惯操起老本行，用 PHP 配合原生 JavaScript 吭哧吭哧地写后端逻辑和前端页面。虽然跑得通，但随着时代发展，总感觉那种前后端高度耦合的开发模式不够优雅。

最近打算重新搭建一个个人博客，索性抛开繁重的全栈包袱，尝试了 Python 著名的微框架 Flask，并配合目前前端最火的 Tailwind CSS。不夸张地说，开发体验直接拉满！

如果你也想拥有一个完全属于自己的高颜值博客，但又不想被庞大的框架（比如 Django 或者传统的 WordPress）束缚，这篇教程将带你用不到 200 行代码，从零起飞。

一、技术栈解析

我们的核心诉求是：轻量、好看、不用写繁琐的 SQL、不用碰头疼的 CSS。

后端引擎：Flask。小巧灵活，路由机制极其直观，非常适合用来写博客这种轻量级应用。
数据库：SQLite + SQLAlchemy。直接将数据库集成在本地文件中，并使用 ORM（对象关系映射）操作数据，告别手写 SQL 的痛苦。
前端 UI：Tailwind CSS (CDN)。原子化 CSS 框架，直接在 HTML 标签里写类名就能实现极其现代、美观的卡片式和响应式布局。

二、极速环境搭建

首先，新建一个项目文件夹，建议使用 Python 虚拟环境来隔离依赖：

# 创建并激活虚拟环境 (Windows)
python -m venv .venv
.venv\Scripts\activate

# 安装核心依赖包
pip install Flask Flask-SQLAlchemy

三、核心代码实现

整个项目只需要 1 个 Python 后端文件和 4 个 HTML 前端模板。项目结构如下：

flask_blog/
│-- app.py                # 后端核心逻辑与数据库模型
└── templates/            # HTML 模板文件夹
    ├── base.html         # 全局基础母版（包含导航栏）
    ├── index.html        # 首页（文章列表展示）
    ├── post.html         # 文章详情页
    └── create.html       # 发布文章页

1. 后端大脑：`app.py`

在这里，我们定义了文章的数据库模型（Article），并写好了首页展示、文章详情和发布文章的三个核心路由。首次运行会自动创建 blog.db 数据库。

from flask import Flask, render_template, request, redirect, url_for, flash
from flask_sqlalchemy import SQLAlchemy
from datetime import datetime

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///blog.db'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
app.config['SECRET_KEY'] = 'dev_key_123' 

db = SQLAlchemy(app)

# 1. 数据库模型：文章表
class Article(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    title = db.Column(db.String(100), nullable=False)
    content = db.Column(db.Text, nullable=False)
    created_at = db.Column(db.DateTime, default=datetime.now)

with app.app_context():
    db.create_all()

# 2. 路由：首页文章列表
@app.route('/')
def index():
    articles = Article.query.order_by(Article.created_at.desc()).all()
    return render_template('index.html', articles=articles)

# 3. 路由：文章详情页
@app.route('/post/<int:article_id>')
def post(article_id):
    article = Article.query.get_or_404(article_id)
    return render_template('post.html', article=article)

# 4. 路由：写文章
@app.route('/create', methods=['GET', 'POST'])
def create():
    if request.method == 'POST':
        title = request.form['title']
        content = request.form['content']

        if not title or not content:
            flash('标题和内容不能为空！')
        else:
            new_article = Article(title=title, content=content)
            db.session.add(new_article)
            db.session.commit()
            return redirect(url_for('index'))

    return render_template('create.html')

if __name__ == '__main__':
    app.run(debug=True)

2. 前端骨架：`templates/base.html`

我们通过 CDN 引入了 Tailwind CSS，并利用 Jinja2 的模板继承 {% block content %} 避免了重复写导航栏代码。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Code&Life 博客{% endblock %}</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.tailwindcss.com?plugins=typography"></script>
</head>
<body class="bg-gray-50 text-gray-800 font-sans flex flex-col min-h-screen">

    <nav class="bg-white shadow-sm border-b border-gray-100">
        <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16 items-center">
                <a href="{{ url_for('index') }}" class="text-xl font-bold text-indigo-600">Code&Life</a>
                <div class="space-x-4">
                    <a href="{{ url_for('index') }}" class="text-gray-500 hover:text-indigo-600 font-medium transition">首页</a>
                    <a href="{{ url_for('create') }}" class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition shadow-sm font-medium">写文章</a>
                </div>
            </div>
        </div>
    </nav>

    <main class="flex-grow max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8 w-full">
        {% block content %}{% endblock %}
    </main>

    <footer class="bg-white border-t border-gray-200 mt-auto">
        <div class="max-w-5xl mx-auto px-4 py-6 text-center text-sm text-gray-400">
            &copy; 2026 My Personal Blog. Built with Flask & Tailwind.
        </div>
    </footer>
</body>
</html>