用 Python + Flask + Tailwind极速搭建高颜值个人博客
告别臃肿！用 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. 数据库模型：文章表classArticle(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('/')defindex(): articles = Article.query.order_by(Article.created_at.desc()).all()return render_template('index.html', articles=articles)# 3. 路由：文章详情页@app.route('/post/<int:article_id>')defpost(article_id): article = Article.query.get_or_404(article_id)return render_template('post.html', article=article)# 4. 路由：写文章@app.route('/create', methods=['GET','POST'])defcreate():if request.method =='POST': title = request.form['title'] content = request.form['content']ifnot title ornot 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 %} 避免了重复写导航栏代码。
<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>{% block title %}Code&Life 博客{% endblock %}</title><scriptsrc="https://cdn.tailwindcss.com"></script><scriptsrc="https://cdn.tailwindcss.com?plugins=typography"></script></head><bodyclass="bg-gray-50 text-gray-800 font-sans flex flex-col min-h-screen"><navclass="bg-white shadow-sm border-b border-gray-100"><divclass="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8"><divclass="flex justify-between h-16 items-center"><ahref="{{ url_for('index') }}"class="text-xl font-bold text-indigo-600">Code&Life</a><divclass="space-x-4"><ahref="{{ url_for('index') }}"class="text-gray-500 hover:text-indigo-600 font-medium transition">首页</a><ahref="{{ 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><mainclass="flex-grow max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8 w-full"> {% block content %}{% endblock %} </main><footerclass="bg-white border-t border-gray-200 mt-auto"><divclass="max-w-5xl mx-auto px-4 py-6 text-center text-sm text-gray-400">© 2026 My Personal Blog. Built with Flask & Tailwind. </div></footer></body></html>3. 页面渲染（首页、详情、发布）
(作者注：在 templates 文件夹下创建以下三个文件，代码详见文末源码库或参照完整功能。为节省篇幅，这里重点展示布局思路)
index.html：使用 Grid 网格布局，将后端传来的articles对象循环渲染成漂亮的卡片。post.html：利用 Tailwind 的prose插件，自动优化长文本的行距和排版，让阅读体验极佳。create.html：纯净的表单提交页面，通过 POST 请求将数据发回后端。
四、 运行测试与总结
在终端执行：
python app.py 打开 http://127.0.0.1:5000，你就能看到一个完全由你掌控的现代风博客系统了！
整个开发过程行云流水，Flask 帮我们搞定了 HTTP 请求和路由分发，SQLAlchemy 让我们彻底抛弃了 SQL 字符串拼接，而 Tailwind CSS 则让我们免去了在不同 CSS 文件中来回切换的折磨。
进阶预告：
目前的博客虽然好看，但还不支持开发者刚需的 Markdown 语法。下一篇文章，我将分享如何在这个项目基础上，一键接入 Markdown 解析引擎，并实现炫酷的代码高亮功能。敬请期待！
欢迎在评论区交流你在搭建过程中遇到的坑，或者分享你的博客链接！
