文分享自眾成翻譯，介紹了一個(gè)將熱門前端技術(shù) Vue.js 與流行 Python 后端框架 Flask 結(jié)合的簡(jiǎn)單示例。推薦有興趣采用類似技術(shù)棧的同學(xué)看看。

譯者：楓林

鏈接：http://www.zcfy.cc/article/4491

原文：https://codeburst.io/full-stack-single-page-application-with-vue-js-and-flask-b1e036315532

在本教程中，我將向大家展示如何使用前端的 Vue.js 單頁面應(yīng)用和后端的 Flask 進(jìn)行交互。

如果你只是想使用 Vue.js 庫和 Flask 模板基本上是沒什么問題的。但...好吧，其實(shí)還是有一個(gè)比較顯而易見的問題：跟 Vue.js 一樣，Jinji（模板引擎）也是使用雙大括號(hào)來渲染頁面，但已經(jīng)有一個(gè)很好的解決方案 在這里 了。

我想要一個(gè)跟上面方案有點(diǎn)不同的例子。如果我要一個(gè)用 Vue.js（使用單頁面組件，在 vue-router開啟 HTML5 history 模式，還有使用其他一些非常棒的特性）框架的單頁面和 Flask 做后臺(tái)服務(wù)的應(yīng)用？應(yīng)該能按下面的要求工作：

• Flask運(yùn)行的服務(wù)可以訪問 index.html首頁和 Vue.js 應(yīng)用

• 在前端開發(fā)環(huán)境，使用 Webpack 和它提供的很多非常棒的功能

• 可以從前端的單頁面應(yīng)用訪問 Flask 的 API 接口

• 以 Node.js 服務(wù)運(yùn)行的前端開發(fā)環(huán)境同樣也可以訪問 API 接口

這看起來很有趣，不是嗎？那就讓我們開始吧。

你可以在github上查看所有的源代碼：

https://github.com/oleg-agapov/flask-vue-spa

客戶端

我用 vue-cli 命令行工具搭建起 Vue.js 的基礎(chǔ)框架。如果你還沒有安裝，可以運(yùn)行：

$ npm install -g vue-cli

客戶端和后端代碼將會(huì)放到不同的文件夾下，初始化前端部分執(zhí)行如下操作：

$ mkdir flaskvue
$ cd flaskvue
$ vue init webpack frontend

以下是我通過安裝向?qū)У捻?xiàng)目設(shè)置：

• Vue build — Runtime only （Vue 構(gòu)建的版本 - 運(yùn)行時(shí)）

• Install vue-router? — Yes （安裝 vue-router？ - 是）

• Use ESLint to lint your code? — Yes （使用 ESLint 校驗(yàn)?zāi)愕拇a？ - 是）

• Pick an ESLint preset — Standard （選擇 ESList 的預(yù)置版本 - 標(biāo)準(zhǔn)）

• Setup unit tests with Karma + Mocha? — No （使用 Karma + Mocha 設(shè)置單元測(cè)試？ - 否）

• Setup e2e tests with Nightwatch? — No （使用 Nightwatch 設(shè)置端到端測(cè)試？ - 否）

下一步：

$ cd frontend
$ npm install

# after installation
$ npm run dev

現(xiàn)在你可以開始設(shè)置 Vue.js 應(yīng)用了。讓我們先來添加些頁面吧。

添加 Home.vue和About.vue到frontend/src/components文件夾。像如下簡(jiǎn)單添加些內(nèi)容：

// Home.vue
<template>
<div>
<p>Home page</p>
</div>
</template>

和

// About.vue
<template>
<div>
<p>About</p>
</div>
</template>

我們將在本地驗(yàn)證它們（通過地址欄訪問）。現(xiàn)在我們要改變 frontend/src/router/index.js文件去一個(gè)個(gè)渲染我們的新組件：

import Vue from 'vue'
import Router from 'vue-router'
const routerOptions = [
{ path: '/', component: 'Home' },
{ path: '/about', component: 'About' }
]
const routes = routerOptions.map(route => {
return {
...route,
component:  => import(`@/components/${route.component}.vue`)
}
})
Vue.use(Router)
export default new Router({
routes,
mode: 'history'
})

現(xiàn)在如果輸入 localhost:8080和localhost:8080/about你應(yīng)該看到相應(yīng)的頁面。

在我們構(gòu)建生成項(xiàng)目靜態(tài)資源前還需要修改它們的輸出路徑。在 frontend/config/index.js找到下面的兩行

index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),

然后成改如下內(nèi)容

index: path.resolve(__dirname, '../../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../../dist'),

所以， 包含 html/css/js 靜態(tài)資源包的 /dist文件夾和/frontend在同一級(jí)目錄下。現(xiàn)在你可以運(yùn)行$ npm run build去構(gòu)建項(xiàng)目了

后端

Flask 后端，我將使用 3.6 版本的 python。在根目錄 /flaskvue文件夾下為后端代碼和初始化虛擬環(huán)境創(chuàng)建新的子目錄：

$ mkdir backend
$ cd backend
$ virtualenv -p python3 venv

開啟虛擬環(huán)境執(zhí)行（mac系統(tǒng)）：

$ source venv/bin/activate

在 Windows 上開啟請(qǐng)看這里 docs。

在虛擬環(huán)境中安裝 Flask 如下：

(venv) pip install Flask

現(xiàn)在讓我們開始寫 Flask 服務(wù)器端代碼。在根目錄下創(chuàng)建 run.py文件：

(venv) cd ..
(venv) touch run.py

然后添加以下代碼到這個(gè)文件：

from flask import Flask, render_template
app = Flask(__name__,
static_folder = "./dist/static",
template_folder = "./dist")
@app.route('/')
def index:
return render_template("index.html")

上面的代碼和 Flask 入門教程 “Hello world” 上的代碼稍有不同。最主要的不同點(diǎn)在于我們?cè)敿?xì)指明了前端的靜態(tài)和模板文件夾輸出到 /dist文件夾。然后在根目錄下運(yùn)行 Flask 服務(wù)。

(venv) FLASK_APP=run.py FLASK_DEBUG=1 flask run

這將會(huì)在 localhost:5000開啟一個(gè)后臺(tái)服務(wù)。FLASK_APP指向服務(wù)啟動(dòng)文件，FLASK_DEBUG=1將會(huì)以調(diào)試模式運(yùn)行。如果沒有錯(cuò)誤，你將會(huì)看到熟悉的首頁，這樣，服務(wù)器就成功運(yùn)行 Vue 應(yīng)用了。

與此同時(shí)如果你試圖訪問 /about頁面將會(huì)出現(xiàn)一個(gè)錯(cuò)誤。Flask 會(huì)拋出一個(gè)找不到請(qǐng)求地址的錯(cuò)誤。實(shí)際上是因?yàn)樵?code>vue-router用了 HTML5 的 history 模式, 所以我們需要配置我們的后臺(tái)服務(wù)去重定向所有的路由都跳轉(zhuǎn)到index.html上。這在 Flask 上可以很簡(jiǎn)單做到。做如下修改：

@app.route('/', defaults={'path': ''})
@app.route('/<path:path>')
def catch_all(path):
return render_template("index.html")

現(xiàn)在地址 localhost:5000/about將會(huì)重定向到index.html和vue-router將會(huì)在它自己內(nèi)部處理。

添加 404 頁面

因?yàn)樵谖覀兊暮笈_(tái)服務(wù)里設(shè)置捕捉所有路由是非常困難的，所以我們用 Flask 捕捉 404 錯(cuò)誤會(huì)重定向 所有請(qǐng)求到index.html（連同不存在的頁面）。在 Vue.js 應(yīng)用里處理未定義的路由。當(dāng)然，所有的工作均可在我們的路由文件設(shè)置。

在 frontend/src/router/index.js增加一行：

const routerOptions = [
{ path: '/', component: 'Home' },
{ path: '/about', component: 'About' },
{ path: '*', component: 'NotFound' }
]

通配符 '*'在vue-router里的含義是以上路由定義之外的情況。現(xiàn)在我們需要在/components文件夾新建NotFound.vue文件。我簡(jiǎn)單地創(chuàng)建它：

// NotFound.vue
<template>
<div>
<p>404 - Not Found</p>
</div>
</template>

現(xiàn)在 通過 npm run dev重新啟動(dòng)前臺(tái)服務(wù)然后隨意輸入網(wǎng)址像localhost:8080/gljhewrgoh。你應(yīng)該看到 “Not Found” 兩個(gè)單詞。

添加后端 API 接口

我的 Vue.js/Flask 教程的最后一個(gè)例子將在后端創(chuàng)建一個(gè) API 接口然后通過前端來調(diào)用它。我將創(chuàng)建一個(gè)隨機(jī)返回?cái)?shù)字1到100的簡(jiǎn)單端口。

打開 run.py新增如下代碼：

from flask import Flask, render_template, jsonify
from random import *
app = Flask(__name__,
static_folder = "./dist/static",
template_folder = "./dist")
@app.route('/api/random')
def random_number:
response = {
'randomNumber': randint(1, 100)
}
return jsonify(response)
@app.route('/', defaults={'path': ''})
@app.route('/<path:path>')
def catch_all(path):
return render_template("index.html")

我首先從 Flask 資源庫導(dǎo)入 random庫和jsonify函數(shù)。然后我增加一個(gè)返回 JSON 數(shù)據(jù)格式的新路由/api/random, 如下：

{
"randomNumber": 36
}

你可以通過地址： localhost:5000/api/random來測(cè)試這個(gè)路由。

到這里，服務(wù)端的工作已經(jīng)完成了。該到客戶端上場(chǎng)了。我將修改 Home.vue組件來顯示我的隨機(jī)數(shù)字：

<template>
<div>
<p>Home page</p>
<p>Random number from backend: {{ randomNumber }}</p>
<button @click="getRandom">New random number</button>
</div>
</template>
<script>
export default {
data  {
return {
randomNumber: 0
}
},
methods: {
getRandomInt (min, max) {
min = Math.ceil(min)
max = Math.floor(max)
return Math.floor(Math.random * (max - min + 1)) + min
},
getRandom  {
this.randomNumber = this.getRandomInt(1, 100)
}
},
created  {
this.getRandom
}
}
</script>

在這一步，我將在客戶端模擬隨機(jī)數(shù)的生成。所以，組件的工作過程如下：

• 初始變量 randomNumber等于0

• 在 methods部分，我們用getRandomInt(min, max)函數(shù)從指定區(qū)間返回一個(gè)數(shù)字，getRandom函數(shù)將調(diào)用上一個(gè)函數(shù)生成一個(gè)值賦給randomNumber

• 之后在組件被創(chuàng)建時(shí)調(diào)用 getRandom方法給randomNumber賦個(gè)初始數(shù)值

• 在按鈕點(diǎn)擊事件里，我們將觸發(fā) getRandom方法去得到一個(gè)數(shù)值

現(xiàn)在，在首頁上你將看到由前端生成的隨機(jī)數(shù)。讓我們繼續(xù)來連接后端。

我將用 axios 庫來連接后端。它將允許我們創(chuàng)建能返回 Promise對(duì)象的 HTTP 請(qǐng)求。我們先安裝它：

(venv) cd frontend
(venv) npm install --save axios

再次打開 Home.uve，修改<script>部分代碼：

import axios from 'axios'
methods: {
getRandom  {
// this.randomNumber = this.getRandomInt(1, 100)
this.randomNumber = this.getRandomFromBackend
},
getRandomFromBackend  {
const path = `[http://localhost:5000/api/random`](http://localhost:5000/api/random`)
axios.get(path)
.then(response => {
this.randomNumber = response.data.randomNumber
})
.catch(error => {
console.log(error)
})
}
}

在文件頂部，我們先導(dǎo)入 axios 庫。然后用 axios 去異步調(diào)用新方法 getRandonFromBackend接收返回的結(jié)果。最后，getRandom方法調(diào)用getRandomFromBackend去獲取隨機(jī)值。

保存文件，打開瀏覽器，再次運(yùn)行前端開發(fā)服務(wù)器環(huán)境，刷新 localhost:8080然后... 你應(yīng)該看到控制臺(tái)報(bào)了沒有隨機(jī)值的錯(cuò)誤。但不用擔(dān)心，一切正常運(yùn)行中。我們得到 cors 的錯(cuò)誤，它的意思是我們的 Flask 后臺(tái) API 默認(rèn)不對(duì)其他的域名和端口（我們的例子運(yùn)行的是 Vue.js 應(yīng)用）開放。當(dāng)你用npm run build生成包然后打開localhost:5000（Flask 服務(wù)）你會(huì)看到應(yīng)用正常運(yùn)行不再報(bào)錯(cuò)了。但如果每次在客戶端改了一點(diǎn)東西都要重新構(gòu)建包，顯然不是很方便。

Flask 的 CORS 插件允許我們?yōu)樵L問 API 創(chuàng)建規(guī)則。插件叫 flask-cors，我們先來安裝它：

(venv) pip install -U flask-cors

你可以通過閱讀文檔選擇更好的方法來在你的服務(wù)器上開啟 CORS。我這里將會(huì)用資源指定的方法應(yīng)用 {"origins": "*"}去允許所有/api/*下的路由（所以任何人都可以訪問/api接口）。修改run.py：

from flask_cors import CORS
app = Flask(__name__,
static_folder = "./dist/static",
template_folder = "./dist")
cors = CORS(app, resources={"/api/*": {"origins": "*"}})

改好之后，你就可以從前端的開發(fā)環(huán)境調(diào)用 Flask API 接口了。

太神奇了 ?!

現(xiàn)在你擁有了一個(gè)用你喜愛的技術(shù)完成的全棧應(yīng)用。

后記

最后我想說說如何改進(jìn)這個(gè)方案。

首先，在你代碼里所有使用到的環(huán)境變量。主要是關(guān)于使用 FLASK_DEBUG變量。我們?cè)?CORS 設(shè)置中使用到它。例如，如果服務(wù)運(yùn)行在開發(fā)環(huán)境設(shè)置FLASK_DEBUG=1你可以允許任何的請(qǐng)求源。如果不是，禁用 CORS 或者只允許可信源請(qǐng)求。

另外一個(gè)改進(jìn)是避免在客戶端硬編碼 API 路由。也許你需要思考為 API 接口創(chuàng)建映射表。所以當(dāng)你改變 API 路由，你所需要做的只是更新映射表。前端的調(diào)用接口將不需要改變。

還有個(gè)小建議 - 我通常同時(shí)開啟至少3個(gè)終端窗口：一個(gè)運(yùn)行 Flask，二個(gè)運(yùn)行 Vue.js（第一個(gè)運(yùn)行 Node.js 服務(wù)，第二個(gè)用來做項(xiàng)目構(gòu)建打包）。

源代碼：https://github.com/oleg-agapov/flask-vue-spa

最后非常感謝你的閱讀！

回復(fù)下方「關(guān)鍵詞」，獲取優(yōu)質(zhì)資源

回復(fù)關(guān)鍵詞「 pybook03」，立即獲取主頁君與小伙伴一起翻譯的《Think Python 2e》電子版

回復(fù)關(guān)鍵詞「pybooks02」，立即獲取 O'Reilly 出版社推出的免費(fèi) Python 相關(guān)電子書合集

回復(fù)關(guān)鍵詞「書單02」，立即獲取主頁君整理的 10 本 Python 入門書的電子版

印度小伙寫了套深度學(xué)習(xí)教程，Github上星標(biāo)已經(jīng)5000+

上百個(gè)數(shù)據(jù)文件合并，只能手動(dòng)復(fù)制粘貼？教你一招十秒搞定！

一個(gè)提升圖像識(shí)別準(zhǔn)確率的精妙技巧

一文讀懂：從 Python 打包到 CLI 工具

如何使用 Python 進(jìn)行時(shí)間序列預(yù)測(cè)？

美亞Kindle排名第一的Python 3入門書，火遍了整個(gè)編程圈

十分鐘搭建私有 Jupyter Notebook 服務(wù)器

使用 Python 制作屬于自己的 PDF 電子書

12步輕松搞定Python裝飾器

200 行代碼實(shí)現(xiàn) 2048 游戲

題圖：pexels，CC0 授權(quán)。

點(diǎn)擊閱讀原文，查看更多 Python 教程和資源。

今，個(gè)人網(wǎng)站或博客已經(jīng)成了「小眾」的代名詞。但在許多年之前，它們?cè)?jīng)是人們?cè)诨ヂ?lián)網(wǎng)上輸出內(nèi)容最主要的途徑。盡管微博、Instagram 等輕量的、簡(jiǎn)短的、與移動(dòng)設(shè)備密不可分的社交媒體已經(jīng)成為今天我們網(wǎng)絡(luò)生活很重要的一部分，但博客并沒有就此消失：總有一些時(shí)候，比如你想尋找一塊「互聯(lián)網(wǎng)自留地」，或是想要進(jìn)行一些完整的而非碎片化的記錄，或者想要避免無窮無盡的內(nèi)容審查，又或者你只是不喜歡社交平臺(tái)那雜亂的界面和不必要的互動(dòng)，個(gè)人網(wǎng)站或博客總是一個(gè)更好的選擇。

那么，在 2020 年，如果你想要擁有一個(gè)個(gè)人網(wǎng)站，你應(yīng)該怎么做？十年前，市面上有各式各樣大大小小博客服務(wù)提供商，但現(xiàn)今的它們有很多都已經(jīng)消失了。不過，得益于網(wǎng)絡(luò)技術(shù)的發(fā)展，今天我們也有不少新的服務(wù)可以選擇。

在這篇文章里，我會(huì)給想要建立個(gè)人網(wǎng)站但是未必具備足夠的相關(guān)技術(shù)知識(shí)的朋友提供一個(gè)簡(jiǎn)單的入門向?qū)В榻B一些可行的選項(xiàng)和途徑。因此，文章不會(huì)涉及太多的技術(shù)細(xì)節(jié)，帶你入門之后，大門外的世界需要你自行探索。

Level 1：上手即用類

適合人群：我沒有任何技術(shù)基礎(chǔ)，只想要一個(gè)方便的界面和美觀的網(wǎng)站，能讓我把自己的內(nèi)容發(fā)布出來就行

如果你對(duì)于 web 技術(shù)并不了解，單純想有一個(gè)網(wǎng)站可以發(fā)布自己的內(nèi)容的話，一些自助建站服務(wù)會(huì)是你的好選擇。它們的共同點(diǎn)是，你不需要接觸任何代碼，只需要簡(jiǎn)單的在后臺(tái)選擇你喜歡的模板，然后用拖拽或者可視化編輯器添加文章，你的網(wǎng)站就能上線了。自助建站服務(wù)商提供的模板通常都相當(dāng)精美，而且可以適用于博客、作品集，乃至線上商店等多樣的需求。

Squarespace

• 上手難度（等級(jí)越高越難）：
• 價(jià)格指數(shù)（等級(jí)越高，價(jià)格越高）：
• 數(shù)據(jù)掌控度（等級(jí)越高，你對(duì)個(gè)人數(shù)據(jù)的把控程度越高）：????
• 頁面掌控度（等級(jí)越高，你對(duì)頁面設(shè)計(jì)的把控程度越高）：

如果你是英文播客的聽眾，那你很可能已經(jīng)聽說過 Squarespace 了。Sqaurespace 是目前口碑最好、服務(wù)最精良的自助建站服務(wù)商之一，它提供了大量豐富精美的模板和模塊化的文章編輯器，你可以簡(jiǎn)單地通過拖拽來完成整個(gè)網(wǎng)站的設(shè)計(jì)和發(fā)布，并且完美適配移動(dòng)端和桌面端的瀏覽。如果你想購買域名，或者配置域名郵箱等服務(wù)，也都可以在 Squarespace 內(nèi)完成。

Squarespace 采用了幾乎百分百的模塊化拼接，你既可以直接照搬已經(jīng)預(yù)置好的模板，也可以在一個(gè)空白頁面上根據(jù)自己的需要塞入不同模塊，最終拼接成自己想要的功能和效果。對(duì)于不懂代碼的新手而言，這種傻瓜化操作非常容易上手。

不過，Squarespace 的價(jià)格比較昂貴，它不提供免費(fèi)的方案，最便宜的套餐每個(gè)月也需要支付 12 美元（而且是年付價(jià)）。當(dāng)然，在付費(fèi)之前你可以隨意制作并預(yù)覽你的站點(diǎn)。此外，由于 Squarespace 的核心用戶群是餐廳、酒店、藝術(shù)家等商業(yè)展示站點(diǎn)，如果你僅僅是需要一個(gè)展示純文字的個(gè)人博客的話，它提供的模板可能會(huì)顯得有些過于花哨和復(fù)雜。

因此，如果你手頭的預(yù)算較為充足，想要方便的做出一個(gè)令人驚艷的個(gè)人網(wǎng)站，尤其是當(dāng)你有展示一些設(shè)計(jì)、攝影等圖像的需求時(shí)，Squarespace 會(huì)是一個(gè)很不錯(cuò)的選擇。

Weebly

• 上手難度：
• 價(jià)格指數(shù)：
• 數(shù)據(jù)掌控度：????
• 頁面掌控度：

和 Squarespace 類似，Weebly 也是一個(gè)老牌的自助建站服務(wù)商了。相較于 Squarespace 清淡、偏向商務(wù)的風(fēng)格，Weebly 無論是網(wǎng)站后臺(tái)還是模板都更加樸素和個(gè)人化一些。但是在功能上，Weebly 也一點(diǎn)不差，同樣提供了從域名注冊(cè)到電商整合的一條龍服務(wù)，而且它的文章編輯器更加簡(jiǎn)單易用。

相比于 Squarespace，Weebly 從價(jià)格到風(fēng)格都是更加親民的選擇——它提供完全能夠滿足普通使用的免費(fèi)方案（免費(fèi)方案的限制是只能使用 .weebly.com 的二級(jí)域名，以及網(wǎng)站底部會(huì)顯示 Weebly 的宣傳條），能夠綁定自己域名的付費(fèi)方案也只需要最低 5 美元一個(gè)月。

如果你暫時(shí)不想為了個(gè)人網(wǎng)站給自己增加太多的經(jīng)濟(jì)負(fù)擔(dān)，或者你就是喜歡 Weebly 的某個(gè)模板，那么 Weebly 是一個(gè)很好的開始。

Wix

• 上手難度：
• 價(jià)格指數(shù)：
• 數(shù)據(jù)掌控度：??????
• 頁面掌控度：

Wix 是和 Squarespace 齊名的自助建站服務(wù)平臺(tái)。如果你是 YouTube 重度用戶，一定在某個(gè)時(shí)期見過 Wix 大面積投放的片頭廣告。相比于前文提到的 Squarespace 和 Weebly，Wix 在建站思路上并無特別大的不同，都是由用戶選擇固定模板，然后自定義其中細(xì)節(jié)。但在具體的操作上，Wix 多了一個(gè)「ADI（Artificial Design Intelligence）」的設(shè)計(jì)模式，當(dāng)你新建站點(diǎn)時(shí)，人工智能助手會(huì)問你一些諸如用途、風(fēng)格偏好之類的問題，然后用算法生成一套網(wǎng)站視覺。此外，Wix 在模塊化和自定義程度上達(dá)到了事無巨細(xì)的程度，支持插入大量網(wǎng)頁元素，并且每個(gè)模塊的大小都能實(shí)現(xiàn)像素級(jí)調(diào)節(jié)。因此，如果你愿意花時(shí)間慢慢調(diào)試，可以讓自己的網(wǎng)站內(nèi)容非常豐富，甚至達(dá)到門戶網(wǎng)站的效果。

Wix 的價(jià)格從每月 4 美元起步，不過最低套餐提供的支持和帶寬都很少，最實(shí)用的套餐價(jià)格為每月 12.5 美元，和 Squrespace 同等級(jí)別。Wix 適合沒有代碼基礎(chǔ)但對(duì)自己的網(wǎng)站設(shè)計(jì)要求更高用戶，其網(wǎng)站編輯器相對(duì)比較復(fù)雜，需要你上手一段時(shí)間后才能適應(yīng)它的操作邏輯。

Typlog

• 上手難度：
• 價(jià)格指數(shù)：
• 數(shù)據(jù)掌控度：??????
• 頁面掌控度：?

Typlog 是一個(gè)更加年輕的建站服務(wù)商，相對(duì)于 Squarespace 或者 Weebly 的「大而全」，它更傾向于做一個(gè)「小而精」的平臺(tái)。與前二者的拖拽式、「所見即所得」的編輯方式不同，Typlog 的建站邏輯更偏向傳統(tǒng)的博客服務(wù)，你可以在一個(gè)控制臺(tái)內(nèi)發(fā)布文章、修改站點(diǎn)的模板和屬性。某種程度上，這是一種讓人可以更加專注于內(nèi)容的極簡(jiǎn)模式，你甚至不需要考慮頁面的設(shè)計(jì)，只需要選一個(gè)模板，上傳網(wǎng)站的 logo 和簡(jiǎn)介，編輯文章發(fā)布即可。

此外，如果你熟悉 Markdown，Typlog 是完全支持 Markdown 寫作的。因?yàn)?Typlog 的創(chuàng)始人是在日華人，它對(duì)于中文介面的支持也更完善。同時(shí)，Typlog 還有非常實(shí)惠的播客托管服務(wù)，目前在國內(nèi)的獨(dú)立播客中也相當(dāng)流行，我參與的播客《告別攝影》就采用 Typlog 搭建。

Typlog 針對(duì)不同的訪問量和上傳的多媒體內(nèi)容大小（圖片、音頻等）有著不同層級(jí)的定價(jià)方案，對(duì)于文字為主的博客寫作者來說，最便宜的 4 美元一個(gè)月（如果按年支付，則是 40 美元一年）的套餐完全可以滿足需求。如果你想要一個(gè)更加簡(jiǎn)單、清爽的寫作體驗(yàn)，那么 Typlog 是一個(gè)經(jīng)濟(jì)便捷的選擇。

Level 2：精益求精類

適合人群：我具備一定的計(jì)算機(jī)基礎(chǔ)知識(shí)，希望對(duì)自己的網(wǎng)站有一些把控，但對(duì)于網(wǎng)絡(luò)技術(shù)研究不深

上一節(jié)中介紹的自助建站服務(wù)雖然方便，但缺點(diǎn)也很明顯——它們有點(diǎn)像樣板房，雖然功能完備，制作也很精美，但可供你自定義的空間也相對(duì)較小。如果你對(duì)于網(wǎng)站的版式、設(shè)計(jì)或者功能有一些更加細(xì)致的需求，或者在模板建站的基礎(chǔ)上想預(yù)留一些插入腳本和代碼的空間，那這個(gè)章節(jié)提及的幾家服務(wù)可能會(huì)更適合你。

WordPress

• 上手難度：
• 價(jià)格指數(shù)：
• 數(shù)據(jù)掌控度：??????
• 頁面掌控度：????

作為一個(gè)有著 17 年歷史的開源博客程序，WordPress 可以算得上是最著名的博客方案，沒有之一。WordPress 有著異常龐大的用戶社群，你可以在網(wǎng)上找到無數(shù)的主題和插件，可以說，其他博客服務(wù)有的任何功能，WordPress 幾乎都能做到。根據(jù)維基百科，截至 2019 年，世界上排名前 1000 萬的網(wǎng)站中，超過 30% 都使用 WordPress 搭建。WordPress 官方的建站服務(wù) wordpress.com 可以讓你不需要自己購買服務(wù)器，只要注冊(cè)一個(gè)帳號(hào)，就能夠簡(jiǎn)單地創(chuàng)建自己的博客站點(diǎn)。

關(guān)于 WordPress 的教程和使用說明，網(wǎng)上已經(jīng)有很多，官網(wǎng)上也提供了簡(jiǎn)體中文的文檔，在這里我暫且簡(jiǎn)單的羅列一下它的優(yōu)勢(shì)：

1. 容易上手。即使你不需要任何進(jìn)階的功能，WordPress 本身就是一個(gè)完善的博客程序，只需要注冊(cè)帳號(hào)，你就可以得到一個(gè)易用的博客后臺(tái)，選擇模板和發(fā)布文章的流程一點(diǎn)也不比上一節(jié)中的建站服務(wù)復(fù)雜，同時(shí) WordPress 也提供完整的簡(jiǎn)體中文支持。
2. 功能完善。從基礎(chǔ)的 tag、分類、文章加密，到進(jìn)階的音頻視頻展示、多個(gè)帳號(hào)共同編輯、評(píng)論，乃至和其他博客的社交互動(dòng)，WordPress 都可以做到。
3. 便于維護(hù)。由于 WordPress 是世界上最流行的博客程序，即使你想要遷移到其他的博客服務(wù)，它也是支持最完善的。通過插件和第三方服務(wù)，你可以通過各種方式來遷移、備份你的內(nèi)容，而不用擔(dān)心兼容問題。
4. 支持廣泛。除了 wordpress.com，你可以把你的 WordPress 站點(diǎn)部署在任何服務(wù)器上。事實(shí)上，許多常見的服務(wù)器供應(yīng)商，例如 Digital Ocean 或者 Siteground，都提供一鍵部署 WordPress 的功能，這意味著在自己的服務(wù)器上建立一個(gè) Wordpress 網(wǎng)站就像在 wordpress.com 上注冊(cè)一個(gè)帳號(hào)那樣簡(jiǎn)單，而且如果你想要將你的網(wǎng)站遷移到自己的服務(wù)器上，也只需要做一些簡(jiǎn)單的復(fù)制粘貼就可以了。

因此，如果你想要快速的建立自己的網(wǎng)站，但又不想失去一些「折騰」的空間，WordPress 無疑是你最好的選擇。對(duì)于沒有任何代碼基礎(chǔ)的用戶，WordPress 可以當(dāng)成一個(gè)「所見即所得」的傻瓜式平臺(tái)；對(duì)于愿意折騰插件和代碼的玩家來說，WordPress 也有著充分的折騰空間，可以任你隨意「魔改」。此外，即使你一分錢不花，僅采用 wordpress.com 的免費(fèi)方案，依然能獲得 30GB 的存儲(chǔ)空間，這個(gè)容量對(duì)于以文字內(nèi)容為主的個(gè)人博客來說已近無限，十分劃算。

Cargo

• 上手難度：
• 價(jià)格指數(shù)：
• 數(shù)據(jù)掌控度：????
• 頁面掌控度：

如果你需要一個(gè)自己的網(wǎng)站來展示自己的圖像作品，或者你對(duì)于網(wǎng)站的設(shè)計(jì)有著很高的要求，那么你不應(yīng)該錯(cuò)過 Cargo。一直以來，Cargo 專注于為視覺藝術(shù)家、設(shè)計(jì)師等群體提供建站服務(wù)，你從它的官網(wǎng)到網(wǎng)站編輯的界面都可以體會(huì)到它的與眾不同。

其他的建站工具通常都還是保留著傳統(tǒng)的從上到下，從左到右的流式網(wǎng)頁布局，而 Cargo 的編輯器給了你異常大的自由度——你可以在頁面上隨便堆疊、擺放任何元素，可以將一段文字旋轉(zhuǎn) 45 度，或者直接上傳一個(gè)視頻作為網(wǎng)頁的背景。Cargo 的編輯方式很難用語言描述，但只要你看過用它做出的網(wǎng)站，一定會(huì)讓你印象深刻。事實(shí)上，利用 Cargo 建立的網(wǎng)站屢屢被視為網(wǎng)頁設(shè)計(jì)的典范，如果你訂閱了 Cargo 的 newsletter，也會(huì)定期收到一些優(yōu)秀網(wǎng)站案例。只要你花一些時(shí)間熟悉它的編輯器（Cargo 的官網(wǎng)上提供了我見過的所有建站服務(wù)商中最豐富、最詳細(xì)的視頻教程資源），Cargo 會(huì)是發(fā)揮你的創(chuàng)造力的最有力的工具。

不僅如此，Cargo 和獨(dú)立字體商店 Type Network 有深度合作，提供了數(shù)百種精心挑選的正版字體，所有用戶都可以在自己的網(wǎng)站里隨意使用。如果你對(duì)網(wǎng)站的字體排印有自己的想法，這些字體能幫你更好地展示個(gè)性，提升網(wǎng)站的視覺表現(xiàn)力。

Cargo 的價(jià)格并不便宜，它的價(jià)格是 13 美元每月，或 99 美元每年，同樣提供付費(fèi)之前的全功能試用。如果你想做的是一個(gè)傳統(tǒng)的博客，它不是最佳之選——Cargo 沒有像其他博客平臺(tái)一樣提供獨(dú)立的文章管理，這意味著你每發(fā)布一篇文章就需要?jiǎng)?chuàng)建一個(gè)新的「頁面」，或者反復(fù)編輯一長(zhǎng)串的文字。但如果你想要在自己的個(gè)人網(wǎng)站上展示多樣的作品，充分發(fā)揮你的創(chuàng)造力，那么 Cargo 值得一試。

一些使用 Cargo 制作的網(wǎng)站：

• https://de-form.hu/
• https://designdoesntmatter.com/
• https://comradeanimal.com/

Ghost

• 上手難度：
• 價(jià)格指數(shù)：
• 數(shù)據(jù)掌控度：??????
• 頁面掌控度：???

同為全功能的開源博客程序，Ghost 是 WordPress 的直接競(jìng)爭(zhēng)者（實(shí)際上，Ghost 本身就是一些不滿于 WordPress 的臃腫而選擇單飛的 WordPress 員工所開發(fā)的）。作為后起之秀，Ghost 雖然沒有 WordPress 那樣龐大的用戶社群和資源積累，但是優(yōu)勢(shì)也是很明顯的——它的程序本身更加小巧、加載速度更快、介面更現(xiàn)代、原生支持 Markdown、Mailchimp、Slack 等常見服務(wù)、支持響應(yīng)式布局，更重要的是，它是一個(gè)專注于寫作和發(fā)表的平臺(tái)，對(duì)于富文本的編輯支持非常好。

和 WordPress 類似，Ghost 也提供官方托管服務(wù)，因此你只需要在 Ghost 的 官網(wǎng) 注冊(cè)一個(gè)帳號(hào)，就可以得到一個(gè)自己的 Ghost 博客了。不得不說，Ghost 的后臺(tái)介面非常精致，文章編輯器令人想到排版廣受好評(píng)的寫作平臺(tái) Medium，如果你懶得自己折騰各種純文本或者 Markdown 編輯器，而希望在瀏覽器中獲得更好的寫作體驗(yàn)，那么 Ghost 無疑是做得最好的之一。

不過，Ghost 官方提供的托管服務(wù)價(jià)格不菲，最便宜的方案也要 29 美元一個(gè)月。但是如果你喜歡 Ghost，也愿意學(xué)習(xí)一些服務(wù)器、Docker 等知識(shí)，那么在自己的服務(wù)器上安裝 Ghost 也并不困難（你可以在《Docker 的入門「指北」》一文中學(xué)到有關(guān) Docker 的相關(guān)知識(shí)）。整體來說，Ghost 在使用自由度上和 WordPress 類似，既可以零基礎(chǔ)一鍵建站，也可以為老玩家提供服務(wù)器部署。如果你想要獲得一個(gè)更加現(xiàn)代的博客體驗(yàn)，或是對(duì)于郵件訂閱、各類服務(wù)整合有需求，那么 Ghost 會(huì)讓你感到得心應(yīng)手。

Level 3：自建部署類

適合人群：我不介意學(xué)習(xí)網(wǎng)絡(luò)知識(shí)，或者我已經(jīng)具備了一定的代碼能力，想要自由地打造我的網(wǎng)站，并盡可能把數(shù)據(jù)掌握在自己手里

如果你對(duì)于學(xué)習(xí)一些計(jì)算機(jī)技術(shù)抱持著開放的態(tài)度，或者想要從底層到前端完全掌控自己的網(wǎng)站，那么你可以找到一些更加經(jīng)濟(jì)、自定義程度更高的方法來建立你的博客。關(guān)于此類方案的具體配置辦法，我派作者們先前已經(jīng)寫過不少，我在此處只簡(jiǎn)單提及建站要點(diǎn)，供你按圖索驥。

靜態(tài)網(wǎng)站生成器，以 Hexo 為例

• 上手難度：
• 價(jià)格指數(shù)：
• 數(shù)據(jù)掌控度：??????????
• 頁面掌控度：???

所謂「靜態(tài)網(wǎng)站」，所謂的「靜態(tài)網(wǎng)站」，指的是網(wǎng)站的所有頁面與服務(wù)器上的 HTML 等格式的網(wǎng)頁文件一一對(duì)應(yīng)，而不根據(jù)數(shù)據(jù)庫、訪問者信息等動(dòng)態(tài)生成內(nèi)容的網(wǎng)站模式。利用 Github Pages 和靜態(tài)網(wǎng)站生成器，只要你的網(wǎng)站不涉及盈利，你可以完全免費(fèi)的建立一個(gè)五臟俱全的博客。在介紹這個(gè)建站方案之前，你需要先了解一些概念：

• Github：Github 是一個(gè)代碼托管平臺(tái)，你可以將你的代碼（在這個(gè)例子里，也就是你的網(wǎng)站源碼）免費(fèi)上傳到 Github 上，你既可以在上面管理你的項(xiàng)目，也可以與其他 Github 用戶進(jìn)行交流、互相幫助。
• Github Pages：Github Pages 是 Github 提供的一種免費(fèi)服務(wù)，可以將你托管在 Github 上的網(wǎng)站源碼自動(dòng)發(fā)布成可以被公眾訪問的網(wǎng)站。
• 靜態(tài)網(wǎng)站生成器：靜態(tài)網(wǎng)站生成器是一種格式渲染和轉(zhuǎn)換器，可以將你用 Markdown 寫好的文章轉(zhuǎn)換為制定主題的 html 格式頁面。
• Hexo：Hexo 是一個(gè)靜態(tài)網(wǎng)站生成器，它可以幫助你將寫好的文章轉(zhuǎn)換成網(wǎng)站源碼。
• Markdown：Markdown 是一種標(biāo)記語言，可以用任何文本編輯軟件編輯（例如，最簡(jiǎn)單的，「記事本」）。簡(jiǎn)單地說，Markdown 是一種標(biāo)記你的寫作內(nèi)容的方式，它可以讓計(jì)算計(jì)理解你的文章的格式，例如，哪些是標(biāo)題，哪些文字需要加粗強(qiáng)調(diào)等。你可以在《認(rèn)識(shí)與入門 Markdown》一文中了解如何使用 Markdown。
• 終端（Terminal）：終端是你電腦中的一個(gè)程序，在終端里，你可以用輸入命令的方式來操縱你的電腦。和普通的軟件不同，你可以理解為，終端是一種直接向你的電腦下命令的方式。如果你對(duì)終端一無所知，可以先讀一讀這篇文章：《玩轉(zhuǎn) Terminal 終端：入門指南及進(jìn)階技巧》。

通過這些工具，你只需要用 Markdown 撰寫你的博文，設(shè)置好 Hexo，它就可以幫你生成整個(gè)網(wǎng)站的源碼；接著，將源碼上傳到 Github 之后，大家就可以訪問你的博客了。如果你想要用 Hexo，或者其他類似的工具來制做你的個(gè)人網(wǎng)站，以上這些只是都是最為基礎(chǔ)的，了解它們對(duì)于以后進(jìn)一步的完善你的網(wǎng)站很有必要。很顯然，Hexo 也并非唯一的靜態(tài)網(wǎng)站生成器，本文只是用它作為一個(gè)例子，如果你愿意，你也可以使用 Jekyll、Hugo 等其他類似的生成器來制作你的網(wǎng)站，而它們的使用方法雖然各有不同，但是背后的邏輯都是類似的。作為參照，用 Hexo + Github Pages 建立一個(gè)網(wǎng)站的步驟大致如下：

1. 注冊(cè)一個(gè) Github 帳號(hào)，然后創(chuàng)建一個(gè)代碼倉庫，用來存放你的博客的源碼。通常，你可以用 username.github.io 作為你的倉庫名，username 是你的 Github 用戶名，這樣，Github 會(huì)自動(dòng)把你的博客地址設(shè)為 username.github.io。
2. 在你的電腦上安裝 Hexo（如果你是 Windows 用戶，你可能需要先安裝 Git，后續(xù)的操作都可以在 Git Bash 中完成）。
3. 生成一個(gè)新的 Hexo 站點(diǎn)，并設(shè)置你的站點(diǎn)名稱、作者等基本信息。你可以在 這里 挑選你喜歡的主題并下載安裝到你的站點(diǎn)中。
4. 用 Markdown 進(jìn)行寫作，并保存在站點(diǎn)的 /source 文件夾中。
5. 在你的寫作告一段落之后，通過 hexo deploy 命令將你的站點(diǎn)上傳到 Github 倉庫中。此時(shí)，你的博文原稿儲(chǔ)存在你的電腦上，而 Hexo 所生成的網(wǎng)站源碼會(huì)被上傳到 Github 上，之后每次撰寫新文章，只需要重復(fù) 5、6 兩步即可。

由于現(xiàn)在已經(jīng)有許多優(yōu)秀的作者撰寫了簡(jiǎn)單易懂的相關(guān)教程，本文在這里并不打算將這個(gè)方案的具體操作流程一一寫出，而是理順「創(chuàng)建→更新」你的站點(diǎn)的方法和邏輯。關(guān)于 Hexo 建站的具體操作流程，可以參考《記錄生活，分享點(diǎn)滴：通過 Hexo 搭建與使用個(gè)人博客》這篇文章中的教程，非常簡(jiǎn)單易懂。

Typecho

• 上手難度：
• 價(jià)格指數(shù)：
• 數(shù)據(jù)掌控度：??????????
• 頁面掌控度：??

和 WordPress 類似，Typecho 也是一個(gè)運(yùn)行在服務(wù)器上的博客程序，但與 WordPress 不同的是，Typecho 不提供官方的托管服務(wù)，如果你想使用 Typecho 就必須擁有自己的服務(wù)器，并把它托管在你的個(gè)人服務(wù)器上。Typecho 同樣完全開源，并且比 WordPress 更加輕巧簡(jiǎn)單。Typecho 由華人開發(fā)，目前也已經(jīng)積累了一定的用戶社群，也可以找到模板和插件。因此，如果你想擁有一個(gè)自己的服務(wù)器，對(duì)自己的網(wǎng)站數(shù)據(jù)有著完全的把控的話，Typecho 是一個(gè)不錯(cuò)的開始。

Typecho 的配置頗為簡(jiǎn)單，如果你已經(jīng)有了一些關(guān)于服務(wù)器的相關(guān)知識(shí)，那么你在閱讀官方的 安裝教程 之后應(yīng)該就已經(jīng)知道怎么做了。如果你是第一次接觸這些，那么這是你需要了解的幾個(gè)步驟：

1. 你需要購買一個(gè)域名及一個(gè)服務(wù)器，國內(nèi)的 阿里云、騰訊云，國外的 Siteground、Smallweb、Bluehost 等服務(wù)商都提供適合建立個(gè)人網(wǎng)站的服務(wù)器方案，你可以根據(jù)自己的預(yù)算和具體情況進(jìn)行選購。對(duì)于 Typecho，請(qǐng)確保你購買的服務(wù)器支持運(yùn)行 5.1 以上版本的 PHP。

2. 將官方提供的最新版本的 Typecho 下載、解壓并上傳到服務(wù)器上。

3. 用瀏覽器訪問你的域名 yourdomain.com/install.php，你就可以看到 Typecho 的配置向?qū)Я恕Ｄ阈枰谶@里設(shè)置你的管理員帳戶和密碼，以及關(guān)于數(shù)據(jù)庫的一些信息。如果你要安裝插件或者更改主題，你只需要將相關(guān)的文件放到 /usr/plugins 或 /usr/themes 目錄中，并到后臺(tái)啟用即可。你可以在 這里 或者 官方論壇 中找到一些 Typecho 的主題和插件。

4. 這時(shí)，你的 Typecho 站點(diǎn)就已經(jīng)配置完成了，只要有瀏覽器，你就可以隨時(shí)通過訪問網(wǎng)站后臺(tái)（yourdomain.com/admin）來更新你的網(wǎng)站。

相比于最低成本為零的 Hexo 等靜態(tài)網(wǎng)站生成器，Typecho 多少會(huì)花費(fèi)你一些服務(wù)器的開支，但是好處也是顯而易見的——作為動(dòng)態(tài)站點(diǎn)，在配置好之后，你只要能夠連上互聯(lián)網(wǎng)，打開瀏覽器就可以隨時(shí)撰寫文章、管理網(wǎng)站，而不再需要每次更新都必需打開終端進(jìn)行操作。而相對(duì)于 Squarespace 等自助建站商，購買個(gè)人服務(wù)器價(jià)格也非常低廉。

服務(wù)器、域名及其他

如果你想要完全掌控你的網(wǎng)站——自己設(shè)計(jì)、自己決定服務(wù)器里可以儲(chǔ)存的內(nèi)容，那么自建網(wǎng)站總是一個(gè)終極的解決方案。當(dāng)然，能做到的事情越多，需要學(xué)習(xí)的也越多，如果你想要完全靠自己建立一個(gè)個(gè)人網(wǎng)站，那么你至少需要了解這些。

1. 首先，你需要一個(gè)服務(wù)器。服務(wù)器是一臺(tái)遠(yuǎn)程的計(jì)算機(jī)（即使很多時(shí)候是一臺(tái)虛擬的計(jì)算機(jī)），它和你的電腦一樣擁有存儲(chǔ)空間、處理器、內(nèi)存和聯(lián)網(wǎng)機(jī)能，這樣你就可以把你的網(wǎng)站存儲(chǔ)在里面，并且 24 小時(shí)上線。可以用于建站的服務(wù)器有很多種（VPS、虛擬主機(jī)等等），價(jià)格也各不相同，你可以根據(jù)需要進(jìn)行選購。
2. 其次，你需要一個(gè)域名。域名相當(dāng)于你的網(wǎng)站的地址。只有有了公開的域名，別人才能找到你的網(wǎng)站。域名的購買就很簡(jiǎn)單了，如果你在意你的網(wǎng)站在中國大陸的合法性，那么你可以去 萬網(wǎng) 或者 騰訊云 購買域名，不過這也意味著你需要將你的網(wǎng)站在中國大陸備案。你也可以在一些國際域名經(jīng)銷商購買域名，domcomp 會(huì)告訴你你喜歡的域名在哪個(gè)網(wǎng)站比較便宜。我自己用過 Namecheap 和 Porkbun 都是性價(jià)比比較高的選擇。
3. 接著，你需要制做你的網(wǎng)站源碼。前面幾節(jié)中提到的知識(shí)對(duì)你來說仍然是有用的，你可以將你的 WordPress 站點(diǎn)部署在你自己的服務(wù)器上，或者利用 Hexo 等靜態(tài)網(wǎng)站生成器制做網(wǎng)站源碼并上傳到你的服務(wù)器，這些都是很方便的辦法。
4. 如果你想要完全靠自己建立一個(gè)網(wǎng)站，你至少需要學(xué)習(xí) HTML、CSS 和 Javascript，這是三種編寫一個(gè)網(wǎng)站最基本的語言，你可以在 W3Schools 上學(xué)到幾乎所有相關(guān)的知識(shí)。通過這幾種基礎(chǔ)的語言（當(dāng)然，還有更多），你可以從學(xué)會(huì)看懂一個(gè)網(wǎng)站開始，進(jìn)而學(xué)會(huì)如何修改它，直至最終具備制作一個(gè)獨(dú)立的網(wǎng)站的能力。

寫在最后

個(gè)人網(wǎng)站是一個(gè)很有意思的東西。它曾經(jīng)是一個(gè)人人都想要、人人都能有的「互聯(lián)網(wǎng)必需品」，人們把它當(dāng)作向外界展示自己的窗口。你在上面分享你的生活，寫下你的想法，一些網(wǎng)頁設(shè)計(jì)的細(xì)節(jié)或者前端的花招都可以讓人得意很久。

隨著移動(dòng)互聯(lián)網(wǎng)時(shí)代的到來，強(qiáng)調(diào)短內(nèi)容的社交平臺(tái)成了新的內(nèi)容集散地。盡管社交媒體讓我們可以更方便地交流和分享，但是個(gè)人建站這種「自己經(jīng)營一片小天地」的感覺仍然很難取代。如果你在今天仍有一片自留地想要堅(jiān)守，希望這篇文章能幫你邁過個(gè)人建站的第一道坎，找到最適合你的建站途徑。