快捷導(dǎo)航

Flask入門教程實(shí)例：搭建一個(gè)靜態(tài)博客

更新時(shí)間：2015年03月27日 10:30:56 作者：vpsee

這篇文章主要介紹了Flask入門教程實(shí)例：搭建一個(gè)靜態(tài)博客,本文主要介紹flask框架的環(huán)境配置以及一個(gè)靜態(tài)博客胡搭建實(shí)例,需要的朋友可以參考下

現(xiàn)在流行的靜態(tài)博客/網(wǎng)站生成工具有很多，比如 Jekyll, Pelican, Middleman, Hyde 等等，StaticGen 列出了目前最流行的一些靜態(tài)網(wǎng)站生成工具。

我們的內(nèi)部工具由 Python/Flask/MongoDB 搭建，現(xiàn)在需要加上文檔功能，寫作格式是 Markdown，不想把文檔放到數(shù)據(jù)庫里，也不想再弄一套靜態(tài)博客工具來管理文檔，于是找到了 Flask-FlatPages 這個(gè)好用的 Flask 模塊。熟悉 Flask 的同學(xué)花幾分鐘的時(shí)間就可以用搭建一個(gè)簡單博客，加上 Bootstrap 的幫助，不到一小時(shí)內(nèi)就可以用 Flask-Flatpages 弄個(gè)像模像樣的網(wǎng)站出來。

創(chuàng)建開發(fā)環(huán)境

首先我們需要 pip，在 Mac 上最簡單的安裝辦法是：

復(fù)制代碼代碼如下:

$ sudo easy_install pip

$ sudo easy_install virtualenv

如果你在 Mac 上用 Homebrew 包管理工具的話的話，也可以用 brew 升級 Python 和安裝 pip：

復(fù)制代碼代碼如下:

$ brew update

$ brew install python

創(chuàng)建一個(gè) blog 目錄、生成 Python 獨(dú)立虛擬環(huán)境并在這個(gè)環(huán)境里安裝需要的 Flask, Flask-FlatPages 模塊：

復(fù)制代碼代碼如下:

$ 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 目錄下我們分別新建幾個(gè)目錄：static 用來存放 css/js 等文件，templates 用來存放 flask 要用的 Jinja2 模版，pages 用來存放我們靜態(tài)博客（Markdown 格式）：

復(fù)制代碼代碼如下:

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

程序

主程序 blog.py 的功能是，導(dǎo)入必要的模塊、配置 Flask-FlatPages 模塊需要的參數(shù)、創(chuàng)建 Flask 應(yīng)用、寫幾個(gè) URL 路由函數(shù)，最后運(yùn)行這個(gè)應(yīng)用：

復(fù)制代碼代碼如下:

$ 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 很繁瑣并不好玩（那是上個(gè)世紀(jì)90年代的 PHP 搞的事情），在現(xiàn)代社會(huì)，我們使用模版引擎，F(xiàn)lask 已經(jīng)自動(dòng)配置好了 Jinja2 模版，使用方法 render_template() 來渲染模版就可以了。Flask 會(huì)默認(rèn)在 templates 目錄里中尋找模版，我們只需要?jiǎng)?chuàng)建幾個(gè)模版文件就可以了，這里我們創(chuàng)建 base.html, index.html 和 page.html.

復(fù)制代碼代碼如下:

$ 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 里繼承基本的 “骨架”。

復(fù)制代碼代碼如下:

$ 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 %}

復(fù)制代碼代碼如下:

$ vi app/templates/page.html
{% extends "base.html" %}

{% block content %}
<h2>{{ page.title }}</h2>
{{ page.html|safe }}
{% endblock content %}

Flask-FlatPages 模塊會(huì)默認(rèn)從 pages 目錄里尋找 .md 結(jié)尾的 Markdown 文檔，所以我們把靜態(tài)博客的內(nèi)容都放在這個(gè)目錄里：

復(fù)制代碼代碼如下:

$ 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/)

運(yùn)行

基本搞定，運(yùn)行看看效果吧：

復(fù)制代碼代碼如下:

$ flask/bin/python app/blog.py

 * Running on http://127.0.0.1:8000/

 * Restarting with reloader

靜態(tài)化

到目前為止，上面的博客運(yùn)行良好，但是有個(gè)問題，這個(gè)博客還不是 “靜態(tài)” 的，沒有生成任何 html 文件，不能直接放到 nginx/apache 這樣的 web 服務(wù)器下用。所以我們需要另一個(gè) Flask 模塊 Frozen-Flask 的幫助。

安裝 Frozen-Flask：

復(fù)制代碼代碼如下:

$ flask/bin/pip install frozen-flask

修改 blog.py，導(dǎo)入 Flask-Frozen 模塊，初始化 Freezer，使用 freezer.freeze() 生成靜態(tài) HTML：

復(fù)制代碼代碼如下:

$ 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)

運(yùn)行 blog.py build 后就在 app 目錄下生成 build 目錄，build 目錄里面就是我們要的 HTML 靜態(tài)文件：

復(fù)制代碼代碼如下:

$ flask/bin/python app/blog.py build

$ ls app/
blog.py build pages static templates

更清晰的目錄結(jié)構(gòu)如下：

復(fù)制代碼代碼如下:

$ 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