用Python和Flask搭建简易博客，可直观理解Web开发核心。1. 创建虚拟环境并安装Flask、Flask-SQLAlchemy等库；2. 编写app.py定义应用实例、数据库模型（Post）、表单（PostForm）及路由（首页、文章详情、创建文章）；3. 使用Jinja2模板引擎构建base.html、index.html、post_detail.html和create_post.html，实现页面布局与内容渲染；4. 添加static/css/style.css美化界面；5. 集成markdown库解析Markdown内容，并通过highlight.js实现代码高亮；6. 运行app.py生成blog.db数据库，访问本地服务即可使用。该方案以轻量级框架提供高度灵活性，适合学习Web全流程开发。
用 Python 和 Flask 搭建一个简易博客，其实是理解现代 Web 应用开发核心概念最直接、最有趣的方式之一。它能让你亲手串联起前端展示、后端逻辑、数据库存储以及用户交互，从零开始构建一个能跑起来的网站，这种成就感是实打实的。
构建一个简易的 Flask 博客，我们通常会从几个核心组件入手：一个 Flask 应用实例作为骨架，SQLAlchemy 来处理数据库交互，Jinja2 模板引擎负责页面渲染，以及一些静态文件来美化界面。
首先，你需要设置一个隔离的开发环境。创建一个虚拟环境，然后安装必要的库：
pip install Flask Flask-SQLAlchemy Flask-WTF Markdown
。
接下来，我们逐步构建应用：
立即学习“Python免费学习笔记（深入）”；
1. 应用骨架 (
app.py
或
blog.py
) 这是你的 Flask 应用入口。
from flask import Flask, render_template, request, redirect, url_for, flash from flask_sqlalchemy import SQLAlchemy from flask_wtf import FlaskForm from wtforms import StringField, TextAreaField, SubmitField from wtforms.validators import DataRequired, Length import markdown # 用于解析Markdown内容 import os # 配置应用 app = Flask(__name__) app.config['SECRET_KEY'] = '一个非常安全的秘密密钥，生产环境请用复杂随机字符串' # 用于CSRF保护 app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///blog.db' # 使用SQLite数据库 app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False db = SQLAlchemy(app) # 数据库模型 class Post(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) # 可以添加发布日期、作者等字段 def __repr__(self): return f'<Post {self.title}>' # 表单定义 class PostForm(FlaskForm): title = StringField('标题', validators=[DataRequired(), Length(min=1, max=100)]) content = TextAreaField('内容', validators=[DataRequired()]) submit = SubmitField('发布') # 路由定义 @app.route('/') def index(): posts = Post.query.order_by(Post.id.desc()).all() return render_template('index.html', posts=posts) @app.route('/post/<int:post_id>') def post_detail(post_id): post = Post.query.get_or_404(post_id) # 将Markdown内容转换为HTML post_html_content = markdown.markdown(post.content, extensions=['fenced_code']) return render_template('post_detail.html', post=post, post_html_content=post_html_content) @app.route('/create', methods=['GET', 'POST']) def create_post(): form = PostForm() if form.validate_on_submit(): new_post = Post(title=form.title.data, content=form.content.data) db.session.add(new_post) db.session.commit() flash('文章发布成功！', 'success') return redirect(url_for('index')) return render_template('create_post.html', form=form) # 运行应用 if __name__ == '__main__': with app.app_context(): db.create_all() # 在应用上下文中创建数据库表 app.run(debug=True)
2. 模板文件 (
templates/
) 你需要创建
base.html
作为基础布局，
index.html
展示文章列表，
post_detail.html
展示单篇文章，以及
create_post.html
用于创建文章。
-
templates/base.html
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>{% block title %}我的简易博客{% endblock %}</title> <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css"> {# 代码高亮样式 #} </head> <body> <nav> <a href="{{ url_for('index') }}">首页</a> <a href="{{ url_for('create_post') }}">发布文章</a> </nav> <div class="container"> {% with messages = get_flashed_messages(with_categories=true) %} {% if messages %} <ul class="flashes"> {% for category, message in messages %} <li class="{{ category }}">{{ message }}</li> {% endfor %} </ul> {% endif %} {% endwith %} {% block content %}{% endblock %} </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script> {# 代码高亮脚本 #} <script>hljs.highlightAll();</script> {# 初始化代码高亮 #} </body> </html> -
templates/index.html
{% extends "base.html" %} {% block title %}文章列表 - 我的简易博客{% endblock %} {% block content %} <h1>所有文章</h1> {% for post in posts %} <article class="post-summary"> <h2><a href="{{ url_for('post_detail', post_id=post.id) }}">{{ post.title }}</a></h2> {# 这里可以展示文章摘要，或者不显示，直接点击进入详情 #} </article> {% else %} <p>还没有任何文章。</p> {% endfor %} {% endblock %} -
templates/post_detail.html
{% extends "base.html" %} {% block title %}{{ post.title }} - 我的简易博客{% endblock %} {% block content %} <article class="post-detail"> <h1>{{ post.title }}</h1> <div class="post-content"> {{ post_html_content|safe }} {# 渲染Markdown转换为HTML的内容 #} </div> </article> {% endblock %} -
templates/create_post.html
{% extends "base.html" %} {% block title %}发布新文章 - 我的简易博客{% endblock %} {% block content %} <h1>发布新文章</h1> <form method="POST"> {{ form.csrf_token }} <div> {{ form.title.label }}<br> {{ form.title(size=60) }} {% if form.title.errors %} <ul class="errors"> {% for error in form.title.errors %} <li>{{ error }}</li> {% endfor %} </ul> {% endif %} </div> <div> {{ form.content.label }}<br> {{ form.content(rows=15, cols=80) }} {% if form.content.errors %} <ul class="errors"> {% for error in form.content.errors %} <li>{{ error }}</li> {% endfor %} </ul> {% endif %} </div> <div> {{ form.submit() }} </div> </form> {% endblock %}
3. 静态文件 (
static/css/style.css
) 为了让页面看起来不那么简陋，可以加一点基础样式。
body { font-family: sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; color: #333; } .container { max-width: 800px; margin: 20px auto; padding: 20px; background-color: #fff; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } nav { background-color: #333; padding: 10px 0; text-align: center; } nav a { color: #fff; text-decoration: none; padding: 10px 15px; margin: 0 5px; } nav a:hover { background-color: #555; border-radius: 4px; } h1, h2 { color: #333; } .post-summary { border-bottom: 1px solid #eee; padding-bottom: 15px; margin-bottom: 15px; } .post-summary:last-child { border-bottom: none; } .post-summary h2 a { text-decoration: none; color: #007bff; } .post-summary h2 a:hover { text-decoration: underline; } .flashes { list-style: none; padding: 0; margin: 10px 0; } .flashes li { padding: 10px; margin-bottom: 10px; border-radius: 5px; } .flashes .success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; } /* Markdown content styling */ .post-content img { max-width: 100%; height: auto; display: block; margin: 1em auto; } .post-content blockquote { border-left: 4px solid #ccc; padding-left: 10px; color: #666; margin: 1em 0; } .post-content pre { background-color: #f8f8f8; padding: 10px; border-radius: 5px; overflow-x: auto; } .post-content code { font-family: monospace; background-color: #eee; padding: 2px 4px; border-radius: 3px; } .post-content pre code { background-color: transparent; padding: 0; }
将这些文件放置在正确的目录结构中：
your_blog_project/ ├── app.py ├── blog.db (首次运行后生成) ├── templates/ │ ├── base.html │ ├── index.html │ ├── post_detail.html │ └── create_post.html └── static/ └── css/ └── style.css
运行
python app.py
，然后在浏览器中访问
http://127.0.0.1:5000
，你就能看到一个最基础的博客了。从这里开始，你可以根据自己的需求添加用户认证、评论系统、文章编辑/删除功能等。
为什么选择 Flask 而不是 Django 来构建博客？
选择 Flask 来构建一个简易博客，对我来说，更多的是一种哲学上的偏好。Django 确实是“电池已包含”的框架，它提供了 ORM、管理后台、表单处理、认证系统等一切开箱即用的功能。如果你想快速搭建一个功能完备、结构复杂的应用，Django 绝对是效率的保证。它就像一个装修好的精装房，拎包入住。
但 Flask 就不一样了，它是一个微框架，只提供最核心的 WSGI 工具包和路由功能。这意味着你需要手动选择和集成数据库、表单、认证等各种组件。这种“自己动手”的感觉，对于初学者或者想深入理解 Web 工作原理的人来说，简直是福音。你可以清楚地看到每个组件是如何协同工作的，而不是被框架的“魔法”所掩盖。对于一个“简易博客”而言，Django 可能显得有些杀鸡用牛刀，它的许多内置功能我们可能根本用不上。Flask 的轻量级和灵活性，让我们可以从最基础的 HTTP 请求响应开始，一步步搭建出我们想要的功能，这种掌控感是无与伦比的。
如何为 Flask 博客选择合适的数据库？SQLite 够用吗？
为 Flask 博客选择数据库，其实是个挺有意思的问题，因为它直接关系到项目的复杂度和未来的扩展性。对于一个“简易博客”项目，我几乎可以毫不犹豫地说：SQLite 绝对够用，而且是初期最好的选择。
SQLite 是一个文件型的数据库，这意味着它不需要独立的数据库服务器进程，所有数据都存储在一个
.db
文件中。它的优点显而易见：零配置、易于部署、轻量级。在开发阶段，你不需要安装和配置 MySQL 或 PostgreSQL 这样的独立数据库服务，直接在你的项目中创建一个
.db
文件，然后 Flask-SQLAlchemy 就能轻松连接并操作它。这大大降低了入门门槛和开发环境的复杂性。
当然，如果你的博客未来流量巨大，需要处理高并发读写，或者数据量非常庞大，那么 SQLite 的性能瓶颈就会显现出来。那时，你可能就需要考虑切换到 PostgreSQL 或 MySQL 这样的关系型数据库，它们提供了更强大的事务处理、并发控制和数据完整性保障。但好在，Flask-SQLAlchemy 这样的 ORM 库，在很大程度上抽象了底层数据库的差异。这意味着，如果你一开始用 SQLite 搭建，未来需要升级时，修改数据库连接字符串和少量配置，通常就能迁移到其他数据库，而无需重写大部分模型代码。所以，从简易博客开始，用 SQLite 是一个非常明智且实用的选择。
博客文章如何实现 Markdown 支持和代码高亮？
在博客中实现 Markdown 支持和代码高亮，是提升写作体验和内容展示质量的关键一步。毕竟，谁也不想在写文章时被繁琐的 HTML 标签困扰，或者让代码块看起来像一堆乱码。
实现 Markdown 支持，核心思路是利用一个 Python 库将 Markdown 文本转换成 HTML。
markdown
库就是其中一个非常流行且易于使用的选择。你只需要
pip install markdown
，然后在你的 Flask 应用中，当从数据库取出文章内容准备渲染到页面时，用
markdown.markdown()
函数处理一下即可。
例如，在
post_detail
路由中，我们从数据库获取到文章内容
post.content
，然后：
import markdown # ... @app.route('/post/<int:post_id>') def post_detail(post_id): post = Post.query.get_or_404(post_id) # 将Markdown内容转换为HTML # extensions=['fenced_code'] 允许我们使用 ```python 这样的语法来定义代码块 post_html_content = markdown.markdown(post.content, extensions=['fenced_code']) return render_template('post_detail.html', post=post, post_html_content=post_html_content)
在模板中，记得用
|safe
过滤器来告诉 Jinja2，这段 HTML 是安全的，不需要转义：
<div class="post-content"> {{ post_html_content|safe }} </div>
至于代码高亮，这通常是前端 JavaScript 库的职责。
highlight.js
和
Prism.js
是两个非常优秀的选项。它们的工作原理相似：你需要在页面中引入它们的 CSS 样式和 JavaScript 脚本，然后它们会自动扫描页面中的
<pre><code>...</code></pre>
标签，并根据代码语言（通过
class="python"
这样的类名指定）应用高亮样式。
以
highlight.js
为例：
- 引入 CSS 和 JS： 在
base.html
的
<head>
部分引入
highlight.js
的样式文件，并在
<body>
结束标签前引入其脚本文件。
<head> {# ... 其他样式 ... #} <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css"> </head> <body> {# ... 页面内容 ... #} <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script> <script>hljs.highlightAll();</script> {# 初始化代码高亮 #} </body> - 编写 Markdown 时指定语言： 当你在文章内容中插入代码块时，使用 Markdown 的 Fenced Code Blocks 语法，并指定语言：
```python def hello_flask(): return "Hello, Flask!"
这样，当 Markdown 被转换成 HTML 后，`highlight.js` 就能识别出 `<code>` 标签内的代码，并应用漂亮的高亮效果了。这个过程把内容的编写和展示解耦，让你的博客既美观又易用。
css mysql javascript python java html js 前端 git Python JavaScript mysql django flask css html pip Static 字符串 堆 class 并发 JS sqlite postgresql 数据库 http 应用开发