关闭 x
IT技术网
    技 采 号
    ITJS.cn - 技术改变世界
    • 实用工具
    • 菜鸟教程
    IT采购网 中国存储网 科技号 CIO智库

    IT技术网

    IT采购网
    • 首页
    • 行业资讯
    • 系统运维
      • 操作系统
        • Windows
        • Linux
        • Mac OS
      • 数据库
        • MySQL
        • Oracle
        • SQL Server
      • 网站建设
    • 人工智能
    • 半导体芯片
    • 笔记本电脑
    • 智能手机
    • 智能汽车
    • 编程语言
    IT技术网 - ITJS.CN
    首页 » HTML5 »使用Flask搭建静态博客

    使用Flask搭建静态博客

    2014-10-28 00:00:00 出处:雨翔河
    分享

    现在流行的静态博客/网站生成工具有很多,比如 Jekyll, Pelican, Middleman, Hyde 等等,StaticGen 列出了目前最流行的一些静态网站生成工具。

    我们的内部工具由 Python/Flask/MongoDB 搭建,现在需要加上文档功能,写作格式是 Markdown,不想把文档放到数据库里,也不想再弄一套静态博客工具来管理文档,于是找到了 Flask-FlatPages 这个好用的 Flask 模块。熟悉 Flask 的同学花几分钟的时间就可以用搭建一个简单博客,加上 Bootstrap 的帮助,不到一小时内就可以用 Flask-Flatpages 弄个像模像样的网站出来。

    创建开发环境

    首先我们需要 pip,在 Mac 上最简单的安装办法是:

    $ sudo easy_install pip
    $ sudo easy_install virtualenv

    假如你在 Mac 上用 Homebrew 包管理工具的话的话,也可以用 brew 升级 Python 和安装 pip:

    $ brew update
    $ brew install python

    创建一个 blog 目录、生成 Python 独立虚拟环境并在这个环境里安装需要的 Flask, Flask-FlatPages 模块:

    $ mkdir blog
    $ cd blog
    
    $ virtualenv flask
    New python executable in flask/bin/python
    Installing setuptools, pip...done.
    
    $ flask/bin/pip install flask
    $ flask/bin/pip install flask-flatpages

    在 blog 目录下我们分别新建几个目录:static 用来存放 css/js 等文件,templates 用来存放 flask 要用的 Jinja2 模版,pages 用来存放我们静态博客(Markdown 格式):

    $ mkdir -p app/static app/templates app/pages

    程序

    主程序 blog.py 的功能是,导入必要的模块、配置 Flask-FlatPages 模块需要的参数、创建 Flask 应用、写几个 URL 路由函数,最后运行这个应用:

    $ vi app/blog.py
    #!flask/bin/python
    from flask import Flask, render_template
    from flask_flatpages import FlatPages
    
    DEBUG = True
    FLATPAGES_AUTO_RELOAD = DEBUG
    FLATPAGES_EXTENSION = '.md'
    
    app = Flask(__name__)
    app.config.from_object(__name__)
    flatpages = FlatPages(app)
    
    @app.route('/')
    def index():
        pages = (p for p in flatpages if 'date' in p.meta)
        return render_template('index.html', pages=pages)
    
    @app.route('/pages/<path:path>/')
    def page(path):
        page = flatpages.get_or_404(path)
        return render_template('page.html', page=page)
    
    if __name__ == '__main__':
        app.run(port=8000)

    模版

    在 Python 中直接生成 HTML 很繁琐并不好玩(那是上个世纪90年代的 PHP 搞的事情),在现代社会,我们使用模版引擎,Flask 已经自动配置好了 Jinja2 模版,使用方法 render_template() 来渲染模版就可以了。Flask 会默认在 templates 目录里中寻找模版,我们只需要创建几个模版文件就可以了,这里我们创建 base.html, index.html 和 page.html.

    $ vi app/templates/base.html
    <!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>vpsee.com static blog</title>
    </head>
    
    <body>
        <h1><a href="{{ url_for("index") }}">vpsee.com blog</a></h1>
        {% block content %}
        {% endblock content %}
    </body>
    </html>

    代码里 extends “base.html” 的意思是从 base.html 里继承基本的 “骨架”。

    $ vi app/templates/index.html
    {% extends "base.html" %}
    
    {% block content %}
        <h2>List of pages
        <ul>
            {% for page in pages %}
            <li>
                <a href="{{ url_for("page", path=page.path) }}">{{ page.title }}</a>
            </li>
            {% else %}
            <li>No post.</li>
            {% endfor %}
        </ul>
    {% endblock content %}
    $ vi app/templates/page.html
    {% extends "base.html" %}
    
    {% block content %}
        <h2>{{ page.title }}</h2>
        {{ page.html|safe }}
    {% endblock content %}

    Flask-FlatPages 模块会默认从 pages 目录里寻找 .md 结尾的 Markdown 文档,所以我们把静态博客的内容都放在这个目录里:

    $ vi app/pages/hello-world.md
    title: Hello World
    date: 2014-10-14
    tags: [general, blog]
    
    **Hello World**!
    
    $ vi app/pages/test-flatpages.md
    title: Test Flask FlatPages
    date: 2014-10-15
    tags: [python, flask]
    
    Test [Flask-FlatPages](https://pythonhosted.org/Flask-FlatPages/)

    运行

    基本搞定,运行看看效果吧:

    $ flask/bin/python app/blog.py
     * Running on http://127.0.0.1:8000/
     * Restarting with reloader

    build a static blog with flask

    静态化

    到目前为止,上面的博客运行良好,但是有个问题,这个博客还不是 “静态” 的,没有生成任何 html 文件,不能直接放到 nginx/apache 这样的 web 服务器下用。所以我们需要另一个 Flask 模块 Frozen-Flask的帮助。

    安装 Frozen-Flask:

    $ flask/bin/pip install frozen-flask

    修改 blog.py,导入 Flask-Frozen 模块,初始化 Freezer,使用 freezer.freeze() 生成静态 HTML:

    $ vi app/blog.py
    ...
    from flask_flatpages import FlatPages
    from flask_frozen import Freezer
    import sys
    ...
    flatpages = FlatPages(app)
    freezer = Freezer(app)
    ...
    if __name__ == '__main__':
        if len(sys.argv) > 1 and sys.argv[1] == "build":
            freezer.freeze()
        else:
            app.run(port=8000)

    运行 blog.py build 后就在 app 目录下生成 build 目录,build 目录里面就是大家要的 HTML 静态文件:

    $ flask/bin/python app/blog.py build
    
    $ ls app/
    blog.py   build     pages     static    templates

    更清晰的目录结构如下:

    $ tree app
    app
    ├── blog.py
    ├── build
    │   ├── index.html
    │   └── pages
    │       ├── hello-world
    │       │   └── index.html
    │       └── test-flatpages
    │           └── index.html
    ├── pages
    │   ├── hello-world.md
    │   └── test-flatpages.md
    ├── static
    └── templates
        ├── base.html
        ├── index.html
        └── page.html
    上一篇返回首页 下一篇

    声明: 此文观点不代表本站立场;转载务必保留本文链接;版权疑问请联系我们。

    别人在看

    帝国CMS7.5编辑器上传图片取消宽高的三种方法

    帝国cms如何自动生成缩略图的实现方法

    Windows 12即将到来,将彻底改变人机交互

    帝国CMS 7.5忘记登陆账号密码怎么办?可以phpmyadmin中重置管理员密码

    帝国CMS 7.5 后台编辑器换行,修改回车键br换行为p标签

    Windows 11 版本与 Windows 10比较,新功能一览

    Windows 11激活产品密钥收集及专业版激活方法

    如何从 Windows 11 中完全删除/卸载 OneNote?无解!

    抖音安全与信任开放日:揭秘推荐算法,告别单一标签依赖

    ultraedit编辑器打开文件时,总是提示是否转换为DOS格式,如何关闭?

    IT头条

    华为Pura80系列新机预热,余承东力赞其复杂光线下的视频拍摄实力

    01:28

    阿里千问3开源首战告捷:全球下载破千万,国产AI模型崛起新高度!

    01:22

    DeepSeek R1小版本试升级:网友实测编程能力已达到国际一线水平

    23:15

    NVIDIA 与 Dell 合作,大规模交付 Blackwell AI 系统

    20:52

    Cerebras 以最快的 Llama 4 Maverick 性能引领 LLM 推理竞赛

    20:51

    技术热点

    PHP中的随机性——你觉得自己幸运吗?

    搞定Ubuntu Linux下WPA无线上网

    Java使用内存映射实现大文件的上传

    MySQL安全性指南

    MySQL两项性能的基本测试浅谈

    教您使用UniqueIdentifier选取SQL Server主键

      友情链接:
    • IT采购网
    • 科技号
    • 中国存储网
    • 存储网
    • 半导体联盟
    • 医疗软件网
    • 软件中国
    • ITbrand
    • 采购中国
    • CIO智库
    • 考研题库
    • 法务网
    • AI工具网
    • 电子芯片网
    • 安全库
    • 隐私保护
    • 版权申明
    • 联系我们
    IT技术网 版权所有 © 2020-2025,京ICP备14047533号-20,Power by OK设计网

    在上方输入关键词后,回车键 开始搜索。Esc键 取消该搜索窗口。