使用Flask搭建靜態博客

jopen 10年前發布 | 73K 次閱讀 Flask 建站系統CMS

現在流行的靜態博客/網站生成工具有很多,比如 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</pre>

在 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)</pre>

模版

在 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></pre>

代碼里 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 %}</pre>

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

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

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</pre>

運行

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

$ flask/bin/python app/blog.py

  • Running on http://127.0.0.1:8000/
  • Restarting with reloader</pre>

    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)</pre> <p>運行 blog.py build 后就在 app 目錄下生成 build 目錄,build 目錄里面就是我們要的 HTML 靜態文件:</p>
    
    $ flask/bin/python app/blog.py build

$ ls app/ blog.py build pages static templates</pre>

更清晰的目錄結構如下:

$ 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
來源:vpsee.com

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!