Flask入門教程執行個體：搭建一個靜態部落格

現在流行的靜態部落格/網站產生工具有很多，比如 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//')
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




vpsee.com static blog

vpsee.com blog

{% block content %}
{% endblock content %}

代碼裡 extends “base.html” 的意思是從 base.html 裡繼承基本的 “骨架”。
複製代碼 代碼如下:

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

{% block content %}

List of pages

{% for page in pages %}

• 
  {{ page.title }}
  

{% else %}

• No post.

{% endfor %}

{% endblock content %}

複製代碼 代碼如下:

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

{% block content %}

{{ page.title }}

{{ 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

靜態化

到目前為止，上面的部落格運行良好，但是有個問題，這個部落格還不是 “靜態” 的，沒有產生任何 html 檔案，不能直接放到 nginx/apache 這樣的 網頁伺服器下用。所以我們需要另一個 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

