文分享自众成翻译，介绍了一个将热门前端技术 Vue.js 与流行 Python 后端框架 Flask 结合的简单示例。推荐有兴趣采用类似技术栈的同学看看。

译者：枫林

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

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

在本教程中，我将向大家展示如何使用前端的 Vue.js 单页面应用和后端的 Flask 进行交互。

如果你只是想使用 Vue.js 库和 Flask 模板基本上是没什么问题的。但...好吧，其实还是有一个比较显而易见的问题：跟 Vue.js 一样，Jinji（模板引擎）也是使用双大括号来渲染页面，但已经有一个很好的解决方案 在这里 了。

我想要一个跟上面方案有点不同的例子。如果我要一个用 Vue.js（使用单页面组件，在 vue-router开启 HTML5 history 模式，还有使用其他一些非常棒的特性）框架的单页面和 Flask 做后台服务的应用？应该能按下面的要求工作：

• Flask运行的服务可以访问 index.html首页和 Vue.js 应用

• 在前端开发环境，使用 Webpack 和它提供的很多非常棒的功能

• 可以从前端的单页面应用访问 Flask 的 API 接口

• 以 Node.js 服务运行的前端开发环境同样也可以访问 API 接口

这看起来很有趣，不是吗？那就让我们开始吧。

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

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

客户端

我用 vue-cli 命令行工具搭建起 Vue.js 的基础框架。如果你还没有安装，可以运行：

$ npm install -g vue-cli

客户端和后端代码将会放到不同的文件夹下，初始化前端部分执行如下操作：

$ mkdir flaskvue
$ cd flaskvue
$ vue init webpack frontend

以下是我通过安装向导的项目设置：

• Vue build — Runtime only （Vue 构建的版本 - 运行时）

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

• Use ESLint to lint your code? — Yes （使用 ESLint 校验你的代码？ - 是）

• Pick an ESLint preset — Standard （选择 ESList 的预置版本 - 标准）

• Setup unit tests with Karma + Mocha? — No （使用 Karma + Mocha 设置单元测试？ - 否）

• Setup e2e tests with Nightwatch? — No （使用 Nightwatch 设置端到端测试？ - 否）

下一步：

$ cd frontend
$ npm install

# after installation
$ npm run dev

现在你可以开始设置 Vue.js 应用了。让我们先来添加些页面吧。

添加 Home.vue和About.vue到frontend/src/components文件夹。像如下简单添加些内容：

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

和

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

我们将在本地验证它们（通过地址栏访问）。现在我们要改变 frontend/src/router/index.js文件去一个个渲染我们的新组件：

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'
})

现在如果输入 localhost:8080和localhost:8080/about你应该看到相应的页面。

在我们构建生成项目静态资源前还需要修改它们的输出路径。在 frontend/config/index.js找到下面的两行

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

然后成改如下内容

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

所以， 包含 html/css/js 静态资源包的 /dist文件夹和/frontend在同一级目录下。现在你可以运行$ npm run build去构建项目了

后端

Flask 后端，我将使用 3.6 版本的 python。在根目录 /flaskvue文件夹下为后端代码和初始化虚拟环境创建新的子目录：

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

开启虚拟环境执行（mac系统）：

$ source venv/bin/activate

在 Windows 上开启请看这里 docs。

在虚拟环境中安装 Flask 如下：

(venv) pip install Flask

现在让我们开始写 Flask 服务器端代码。在根目录下创建 run.py文件：

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

然后添加以下代码到这个文件：

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” 上的代码稍有不同。最主要的不同点在于我们详细指明了前端的静态和模板文件夹输出到 /dist文件夹。然后在根目录下运行 Flask 服务。

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

这将会在 localhost:5000开启一个后台服务。FLASK_APP指向服务启动文件，FLASK_DEBUG=1将会以调试模式运行。如果没有错误，你将会看到熟悉的首页，这样，服务器就成功运行 Vue 应用了。

与此同时如果你试图访问 /about页面将会出现一个错误。Flask 会抛出一个找不到请求地址的错误。实际上是因为在vue-router用了 HTML5 的 history 模式, 所以我们需要配置我们的后台服务去重定向所有的路由都跳转到index.html上。这在 Flask 上可以很简单做到。做如下修改：

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

现在地址 localhost:5000/about将会重定向到index.html和vue-router将会在它自己内部处理。

添加 404 页面

因为在我们的后台服务里设置捕捉所有路由是非常困难的，所以我们用 Flask 捕捉 404 错误会重定向 所有请求到index.html（连同不存在的页面）。在 Vue.js 应用里处理未定义的路由。当然，所有的工作均可在我们的路由文件设置。

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

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

通配符 '*'在vue-router里的含义是以上路由定义之外的情况。现在我们需要在/components文件夹新建NotFound.vue文件。我简单地创建它：

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

现在 通过 npm run dev重新启动前台服务然后随意输入网址像localhost:8080/gljhewrgoh。你应该看到 “Not Found” 两个单词。

添加后端 API 接口

我的 Vue.js/Flask 教程的最后一个例子将在后端创建一个 API 接口然后通过前端来调用它。我将创建一个随机返回数字1到100的简单端口。

打开 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 资源库导入 random库和jsonify函数。然后我增加一个返回 JSON 数据格式的新路由/api/random, 如下：

{
"randomNumber": 36
}

你可以通过地址： localhost:5000/api/random来测试这个路由。

到这里，服务端的工作已经完成了。该到客户端上场了。我将修改 Home.vue组件来显示我的随机数字：

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

在这一步，我将在客户端模拟随机数的生成。所以，组件的工作过程如下：

• 初始变量 randomNumber等于0

• 在 methods部分，我们用getRandomInt(min, max)函数从指定区间返回一个数字，getRandom函数将调用上一个函数生成一个值赋给randomNumber

• 之后在组件被创建时调用 getRandom方法给randomNumber赋个初始数值

• 在按钮点击事件里，我们将触发 getRandom方法去得到一个数值

现在，在首页上你将看到由前端生成的随机数。让我们继续来连接后端。

我将用 axios 库来连接后端。它将允许我们创建能返回 Promise对象的 HTTP 请求。我们先安装它：

(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)
})
}
}

在文件顶部，我们先导入 axios 库。然后用 axios 去异步调用新方法 getRandonFromBackend接收返回的结果。最后，getRandom方法调用getRandomFromBackend去获取随机值。

保存文件，打开浏览器，再次运行前端开发服务器环境，刷新 localhost:8080然后... 你应该看到控制台报了没有随机值的错误。但不用担心，一切正常运行中。我们得到 cors 的错误，它的意思是我们的 Flask 后台 API 默认不对其他的域名和端口（我们的例子运行的是 Vue.js 应用）开放。当你用npm run build生成包然后打开localhost:5000（Flask 服务）你会看到应用正常运行不再报错了。但如果每次在客户端改了一点东西都要重新构建包，显然不是很方便。

Flask 的 CORS 插件允许我们为访问 API 创建规则。插件叫 flask-cors，我们先来安装它：

(venv) pip install -U flask-cors

你可以通过阅读文档选择更好的方法来在你的服务器上开启 CORS。我这里将会用资源指定的方法应用 {"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": "*"}})

改好之后，你就可以从前端的开发环境调用 Flask API 接口了。

太神奇了 ✨!

现在你拥有了一个用你喜爱的技术完成的全栈应用。

后记

最后我想说说如何改进这个方案。

首先，在你代码里所有使用到的环境变量。主要是关于使用 FLASK_DEBUG变量。我们在 CORS 设置中使用到它。例如，如果服务运行在开发环境设置FLASK_DEBUG=1你可以允许任何的请求源。如果不是，禁用 CORS 或者只允许可信源请求。

另外一个改进是避免在客户端硬编码 API 路由。也许你需要思考为 API 接口创建映射表。所以当你改变 API 路由，你所需要做的只是更新映射表。前端的调用接口将不需要改变。

还有个小建议 - 我通常同时开启至少3个终端窗口：一个运行 Flask，二个运行 Vue.js（第一个运行 Node.js 服务，第二个用来做项目构建打包）。

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

最后非常感谢你的阅读！

回复下方「关键词」，获取优质资源

回复关键词「 pybook03」，立即获取主页君与小伙伴一起翻译的《Think Python 2e》电子版

回复关键词「pybooks02」，立即获取 O'Reilly 出版社推出的免费 Python 相关电子书合集

回复关键词「书单02」，立即获取主页君整理的 10 本 Python 入门书的电子版

印度小伙写了套深度学习教程，Github上星标已经5000+

上百个数据文件合并，只能手动复制粘贴？教你一招十秒搞定！

一个提升图像识别准确率的精妙技巧

一文读懂：从 Python 打包到 CLI 工具

如何使用 Python 进行时间序列预测？

美亚Kindle排名第一的Python 3入门书，火遍了整个编程圈

十分钟搭建私有 Jupyter Notebook 服务器

使用 Python 制作属于自己的 PDF 电子书

12步轻松搞定Python装饰器

200 行代码实现 2048 游戏

题图：pexels，CC0 授权。

点击阅读原文，查看更多 Python 教程和资源。

今，个人网站或博客已经成了「小众」的代名词。但在许多年之前，它们曾经是人们在互联网上输出内容最主要的途径。尽管微博、Instagram 等轻量的、简短的、与移动设备密不可分的社交媒体已经成为今天我们网络生活很重要的一部分，但博客并没有就此消失：总有一些时候，比如你想寻找一块「互联网自留地」，或是想要进行一些完整的而非碎片化的记录，或者想要避免无穷无尽的内容审查，又或者你只是不喜欢社交平台那杂乱的界面和不必要的互动，个人网站或博客总是一个更好的选择。

那么，在 2020 年，如果你想要拥有一个个人网站，你应该怎么做？十年前，市面上有各式各样大大小小博客服务提供商，但现今的它们有很多都已经消失了。不过，得益于网络技术的发展，今天我们也有不少新的服务可以选择。

在这篇文章里，我会给想要建立个人网站但是未必具备足够的相关技术知识的朋友提供一个简单的入门向导，介绍一些可行的选项和途径。因此，文章不会涉及太多的技术细节，带你入门之后，大门外的世界需要你自行探索。

Level 1：上手即用类

适合人群：我没有任何技术基础，只想要一个方便的界面和美观的网站，能让我把自己的内容发布出来就行

如果你对于 web 技术并不了解，单纯想有一个网站可以发布自己的内容的话，一些自助建站服务会是你的好选择。它们的共同点是，你不需要接触任何代码，只需要简单的在后台选择你喜欢的模板，然后用拖拽或者可视化编辑器添加文章，你的网站就能上线了。自助建站服务商提供的模板通常都相当精美，而且可以适用于博客、作品集，乃至线上商店等多样的需求。

Squarespace

• 上手难度（等级越高越难）：
• 价格指数（等级越高，价格越高）：
• 数据掌控度（等级越高，你对个人数据的把控程度越高）：⚙️⚙️
• 页面掌控度（等级越高，你对页面设计的把控程度越高）：

如果你是英文播客的听众，那你很可能已经听说过 Squarespace 了。Sqaurespace 是目前口碑最好、服务最精良的自助建站服务商之一，它提供了大量丰富精美的模板和模块化的文章编辑器，你可以简单地通过拖拽来完成整个网站的设计和发布，并且完美适配移动端和桌面端的浏览。如果你想购买域名，或者配置域名邮箱等服务，也都可以在 Squarespace 内完成。

Squarespace 采用了几乎百分百的模块化拼接，你既可以直接照搬已经预置好的模板，也可以在一个空白页面上根据自己的需要塞入不同模块，最终拼接成自己想要的功能和效果。对于不懂代码的新手而言，这种傻瓜化操作非常容易上手。

不过，Squarespace 的价格比较昂贵，它不提供免费的方案，最便宜的套餐每个月也需要支付 12 美元（而且是年付价）。当然，在付费之前你可以随意制作并预览你的站点。此外，由于 Squarespace 的核心用户群是餐厅、酒店、艺术家等商业展示站点，如果你仅仅是需要一个展示纯文字的个人博客的话，它提供的模板可能会显得有些过于花哨和复杂。

因此，如果你手头的预算较为充足，想要方便的做出一个令人惊艳的个人网站，尤其是当你有展示一些设计、摄影等图像的需求时，Squarespace 会是一个很不错的选择。

Weebly

• 上手难度：
• 价格指数：
• 数据掌控度：⚙️⚙️
• 页面掌控度：

和 Squarespace 类似，Weebly 也是一个老牌的自助建站服务商了。相较于 Squarespace 清淡、偏向商务的风格，Weebly 无论是网站后台还是模板都更加朴素和个人化一些。但是在功能上，Weebly 也一点不差，同样提供了从域名注册到电商整合的一条龙服务，而且它的文章编辑器更加简单易用。

相比于 Squarespace，Weebly 从价格到风格都是更加亲民的选择——它提供完全能够满足普通使用的免费方案（免费方案的限制是只能使用 .weebly.com 的二级域名，以及网站底部会显示 Weebly 的宣传条），能够绑定自己域名的付费方案也只需要最低 5 美元一个月。

如果你暂时不想为了个人网站给自己增加太多的经济负担，或者你就是喜欢 Weebly 的某个模板，那么 Weebly 是一个很好的开始。

Wix

• 上手难度：
• 价格指数：
• 数据掌控度：⚙️⚙️⚙️
• 页面掌控度：

Wix 是和 Squarespace 齐名的自助建站服务平台。如果你是 YouTube 重度用户，一定在某个时期见过 Wix 大面积投放的片头广告。相比于前文提到的 Squarespace 和 Weebly，Wix 在建站思路上并无特别大的不同，都是由用户选择固定模板，然后自定义其中细节。但在具体的操作上，Wix 多了一个「ADI（Artificial Design Intelligence）」的设计模式，当你新建站点时，人工智能助手会问你一些诸如用途、风格偏好之类的问题，然后用算法生成一套网站视觉。此外，Wix 在模块化和自定义程度上达到了事无巨细的程度，支持插入大量网页元素，并且每个模块的大小都能实现像素级调节。因此，如果你愿意花时间慢慢调试，可以让自己的网站内容非常丰富，甚至达到门户网站的效果。

Wix 的价格从每月 4 美元起步，不过最低套餐提供的支持和带宽都很少，最实用的套餐价格为每月 12.5 美元，和 Squrespace 同等级别。Wix 适合没有代码基础但对自己的网站设计要求更高用户，其网站编辑器相对比较复杂，需要你上手一段时间后才能适应它的操作逻辑。

Typlog

• 上手难度：
• 价格指数：
• 数据掌控度：⚙️⚙️⚙️
• 页面掌控度：️

Typlog 是一个更加年轻的建站服务商，相对于 Squarespace 或者 Weebly 的「大而全」，它更倾向于做一个「小而精」的平台。与前二者的拖拽式、「所见即所得」的编辑方式不同，Typlog 的建站逻辑更偏向传统的博客服务，你可以在一个控制台内发布文章、修改站点的模板和属性。某种程度上，这是一种让人可以更加专注于内容的极简模式，你甚至不需要考虑页面的设计，只需要选一个模板，上传网站的 logo 和简介，编辑文章发布即可。

此外，如果你熟悉 Markdown，Typlog 是完全支持 Markdown 写作的。因为 Typlog 的创始人是在日华人，它对于中文介面的支持也更完善。同时，Typlog 还有非常实惠的播客托管服务，目前在国内的独立播客中也相当流行，我参与的播客《告别摄影》就采用 Typlog 搭建。

Typlog 针对不同的访问量和上传的多媒体内容大小（图片、音频等）有着不同层级的定价方案，对于文字为主的博客写作者来说，最便宜的 4 美元一个月（如果按年支付，则是 40 美元一年）的套餐完全可以满足需求。如果你想要一个更加简单、清爽的写作体验，那么 Typlog 是一个经济便捷的选择。

Level 2：精益求精类

适合人群：我具备一定的计算机基础知识，希望对自己的网站有一些把控，但对于网络技术研究不深

上一节中介绍的自助建站服务虽然方便，但缺点也很明显——它们有点像样板房，虽然功能完备，制作也很精美，但可供你自定义的空间也相对较小。如果你对于网站的版式、设计或者功能有一些更加细致的需求，或者在模板建站的基础上想预留一些插入脚本和代码的空间，那这个章节提及的几家服务可能会更适合你。

WordPress

• 上手难度：
• 价格指数：
• 数据掌控度：⚙️⚙️⚙️
• 页面掌控度：️️️️

作为一个有着 17 年历史的开源博客程序，WordPress 可以算得上是最著名的博客方案，没有之一。WordPress 有着异常庞大的用户社群，你可以在网上找到无数的主题和插件，可以说，其他博客服务有的任何功能，WordPress 几乎都能做到。根据维基百科，截至 2019 年，世界上排名前 1000 万的网站中，超过 30% 都使用 WordPress 搭建。WordPress 官方的建站服务 wordpress.com 可以让你不需要自己购买服务器，只要注册一个帐号，就能够简单地创建自己的博客站点。

关于 WordPress 的教程和使用说明，网上已经有很多，官网上也提供了简体中文的文档，在这里我暂且简单的罗列一下它的优势：

1. 容易上手。即使你不需要任何进阶的功能，WordPress 本身就是一个完善的博客程序，只需要注册帐号，你就可以得到一个易用的博客后台，选择模板和发布文章的流程一点也不比上一节中的建站服务复杂，同时 WordPress 也提供完整的简体中文支持。
2. 功能完善。从基础的 tag、分类、文章加密，到进阶的音频视频展示、多个帐号共同编辑、评论，乃至和其他博客的社交互动，WordPress 都可以做到。
3. 便于维护。由于 WordPress 是世界上最流行的博客程序，即使你想要迁移到其他的博客服务，它也是支持最完善的。通过插件和第三方服务，你可以通过各种方式来迁移、备份你的内容，而不用担心兼容问题。
4. 支持广泛。除了 wordpress.com，你可以把你的 WordPress 站点部署在任何服务器上。事实上，许多常见的服务器供应商，例如 Digital Ocean 或者 Siteground，都提供一键部署 WordPress 的功能，这意味着在自己的服务器上建立一个 Wordpress 网站就像在 wordpress.com 上注册一个帐号那样简单，而且如果你想要将你的网站迁移到自己的服务器上，也只需要做一些简单的复制粘贴就可以了。

因此，如果你想要快速的建立自己的网站，但又不想失去一些「折腾」的空间，WordPress 无疑是你最好的选择。对于没有任何代码基础的用户，WordPress 可以当成一个「所见即所得」的傻瓜式平台；对于愿意折腾插件和代码的玩家来说，WordPress 也有着充分的折腾空间，可以任你随意「魔改」。此外，即使你一分钱不花，仅采用 wordpress.com 的免费方案，依然能获得 30GB 的存储空间，这个容量对于以文字内容为主的个人博客来说已近无限，十分划算。

Cargo

• 上手难度：
• 价格指数：
• 数据掌控度：⚙️⚙️
• 页面掌控度：

如果你需要一个自己的网站来展示自己的图像作品，或者你对于网站的设计有着很高的要求，那么你不应该错过 Cargo。一直以来，Cargo 专注于为视觉艺术家、设计师等群体提供建站服务，你从它的官网到网站编辑的界面都可以体会到它的与众不同。

其他的建站工具通常都还是保留着传统的从上到下，从左到右的流式网页布局，而 Cargo 的编辑器给了你异常大的自由度——你可以在页面上随便堆叠、摆放任何元素，可以将一段文字旋转 45 度，或者直接上传一个视频作为网页的背景。Cargo 的编辑方式很难用语言描述，但只要你看过用它做出的网站，一定会让你印象深刻。事实上，利用 Cargo 建立的网站屡屡被视为网页设计的典范，如果你订阅了 Cargo 的 newsletter，也会定期收到一些优秀网站案例。只要你花一些时间熟悉它的编辑器（Cargo 的官网上提供了我见过的所有建站服务商中最丰富、最详细的视频教程资源），Cargo 会是发挥你的创造力的最有力的工具。

不仅如此，Cargo 和独立字体商店 Type Network 有深度合作，提供了数百种精心挑选的正版字体，所有用户都可以在自己的网站里随意使用。如果你对网站的字体排印有自己的想法，这些字体能帮你更好地展示个性，提升网站的视觉表现力。

Cargo 的价格并不便宜，它的价格是 13 美元每月，或 99 美元每年，同样提供付费之前的全功能试用。如果你想做的是一个传统的博客，它不是最佳之选——Cargo 没有像其他博客平台一样提供独立的文章管理，这意味着你每发布一篇文章就需要创建一个新的「页面」，或者反复编辑一长串的文字。但如果你想要在自己的个人网站上展示多样的作品，充分发挥你的创造力，那么 Cargo 值得一试。

一些使用 Cargo 制作的网站：

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

Ghost

• 上手难度：
• 价格指数：
• 数据掌控度：⚙️⚙️⚙️
• 页面掌控度：️️️

同为全功能的开源博客程序，Ghost 是 WordPress 的直接竞争者（实际上，Ghost 本身就是一些不满于 WordPress 的臃肿而选择单飞的 WordPress 员工所开发的）。作为后起之秀，Ghost 虽然没有 WordPress 那样庞大的用户社群和资源积累，但是优势也是很明显的——它的程序本身更加小巧、加载速度更快、介面更现代、原生支持 Markdown、Mailchimp、Slack 等常见服务、支持响应式布局，更重要的是，它是一个专注于写作和发表的平台，对于富文本的编辑支持非常好。

和 WordPress 类似，Ghost 也提供官方托管服务，因此你只需要在 Ghost 的 官网 注册一个帐号，就可以得到一个自己的 Ghost 博客了。不得不说，Ghost 的后台介面非常精致，文章编辑器令人想到排版广受好评的写作平台 Medium，如果你懒得自己折腾各种纯文本或者 Markdown 编辑器，而希望在浏览器中获得更好的写作体验，那么 Ghost 无疑是做得最好的之一。

不过，Ghost 官方提供的托管服务价格不菲，最便宜的方案也要 29 美元一个月。但是如果你喜欢 Ghost，也愿意学习一些服务器、Docker 等知识，那么在自己的服务器上安装 Ghost 也并不困难（你可以在《Docker 的入门「指北」》一文中学到有关 Docker 的相关知识）。整体来说，Ghost 在使用自由度上和 WordPress 类似，既可以零基础一键建站，也可以为老玩家提供服务器部署。如果你想要获得一个更加现代的博客体验，或是对于邮件订阅、各类服务整合有需求，那么 Ghost 会让你感到得心应手。

Level 3：自建部署类

适合人群：我不介意学习网络知识，或者我已经具备了一定的代码能力，想要自由地打造我的网站，并尽可能把数据掌握在自己手里

如果你对于学习一些计算机技术抱持着开放的态度，或者想要从底层到前端完全掌控自己的网站，那么你可以找到一些更加经济、自定义程度更高的方法来建立你的博客。关于此类方案的具体配置办法，我派作者们先前已经写过不少，我在此处只简单提及建站要点，供你按图索骥。

静态网站生成器，以 Hexo 为例

• 上手难度：
• 价格指数：
• 数据掌控度：⚙️⚙️⚙️⚙️⚙️
• 页面掌控度：️️️

所谓「静态网站」，所谓的「静态网站」，指的是网站的所有页面与服务器上的 HTML 等格式的网页文件一一对应，而不根据数据库、访问者信息等动态生成内容的网站模式。利用 Github Pages 和静态网站生成器，只要你的网站不涉及盈利，你可以完全免费的建立一个五脏俱全的博客。在介绍这个建站方案之前，你需要先了解一些概念：

• Github：Github 是一个代码托管平台，你可以将你的代码（在这个例子里，也就是你的网站源码）免费上传到 Github 上，你既可以在上面管理你的项目，也可以与其他 Github 用户进行交流、互相帮助。
• Github Pages：Github Pages 是 Github 提供的一种免费服务，可以将你托管在 Github 上的网站源码自动发布成可以被公众访问的网站。
• 静态网站生成器：静态网站生成器是一种格式渲染和转换器，可以将你用 Markdown 写好的文章转换为制定主题的 html 格式页面。
• Hexo：Hexo 是一个静态网站生成器，它可以帮助你将写好的文章转换成网站源码。
• Markdown：Markdown 是一种标记语言，可以用任何文本编辑软件编辑（例如，最简单的，「记事本」）。简单地说，Markdown 是一种标记你的写作内容的方式，它可以让计算计理解你的文章的格式，例如，哪些是标题，哪些文字需要加粗强调等。你可以在《认识与入门 Markdown》一文中了解如何使用 Markdown。
• 终端（Terminal）：终端是你电脑中的一个程序，在终端里，你可以用输入命令的方式来操纵你的电脑。和普通的软件不同，你可以理解为，终端是一种直接向你的电脑下命令的方式。如果你对终端一无所知，可以先读一读这篇文章：《玩转 Terminal 终端：入门指南及进阶技巧》。

通过这些工具，你只需要用 Markdown 撰写你的博文，设置好 Hexo，它就可以帮你生成整个网站的源码；接着，将源码上传到 Github 之后，大家就可以访问你的博客了。如果你想要用 Hexo，或者其他类似的工具来制做你的个人网站，以上这些只是都是最为基础的，了解它们对于以后进一步的完善你的网站很有必要。很显然，Hexo 也并非唯一的静态网站生成器，本文只是用它作为一个例子，如果你愿意，你也可以使用 Jekyll、Hugo 等其他类似的生成器来制作你的网站，而它们的使用方法虽然各有不同，但是背后的逻辑都是类似的。作为参照，用 Hexo + Github Pages 建立一个网站的步骤大致如下：

1. 注册一个 Github 帐号，然后创建一个代码仓库，用来存放你的博客的源码。通常，你可以用 username.github.io 作为你的仓库名，username 是你的 Github 用户名，这样，Github 会自动把你的博客地址设为 username.github.io。
2. 在你的电脑上安装 Hexo（如果你是 Windows 用户，你可能需要先安装 Git，后续的操作都可以在 Git Bash 中完成）。
3. 生成一个新的 Hexo 站点，并设置你的站点名称、作者等基本信息。你可以在 这里 挑选你喜欢的主题并下载安装到你的站点中。
4. 用 Markdown 进行写作，并保存在站点的 /source 文件夹中。
5. 在你的写作告一段落之后，通过 hexo deploy 命令将你的站点上传到 Github 仓库中。此时，你的博文原稿储存在你的电脑上，而 Hexo 所生成的网站源码会被上传到 Github 上，之后每次撰写新文章，只需要重复 5、6 两步即可。

由于现在已经有许多优秀的作者撰写了简单易懂的相关教程，本文在这里并不打算将这个方案的具体操作流程一一写出，而是理顺「创建→更新」你的站点的方法和逻辑。关于 Hexo 建站的具体操作流程，可以参考《记录生活，分享点滴：通过 Hexo 搭建与使用个人博客》这篇文章中的教程，非常简单易懂。

Typecho

• 上手难度：
• 价格指数：
• 数据掌控度：⚙️⚙️⚙️⚙️⚙️
• 页面掌控度：️️

和 WordPress 类似，Typecho 也是一个运行在服务器上的博客程序，但与 WordPress 不同的是，Typecho 不提供官方的托管服务，如果你想使用 Typecho 就必须拥有自己的服务器，并把它托管在你的个人服务器上。Typecho 同样完全开源，并且比 WordPress 更加轻巧简单。Typecho 由华人开发，目前也已经积累了一定的用户社群，也可以找到模板和插件。因此，如果你想拥有一个自己的服务器，对自己的网站数据有着完全的把控的话，Typecho 是一个不错的开始。

Typecho 的配置颇为简单，如果你已经有了一些关于服务器的相关知识，那么你在阅读官方的 安装教程 之后应该就已经知道怎么做了。如果你是第一次接触这些，那么这是你需要了解的几个步骤：

1. 你需要购买一个域名及一个服务器，国内的 阿里云、腾讯云，国外的 Siteground、Smallweb、Bluehost 等服务商都提供适合建立个人网站的服务器方案，你可以根据自己的预算和具体情况进行选购。对于 Typecho，请确保你购买的服务器支持运行 5.1 以上版本的 PHP。

2. 将官方提供的最新版本的 Typecho 下载、解压并上传到服务器上。

3. 用浏览器访问你的域名 yourdomain.com/install.php，你就可以看到 Typecho 的配置向导了。你需要在这里设置你的管理员帐户和密码，以及关于数据库的一些信息。如果你要安装插件或者更改主题，你只需要将相关的文件放到 /usr/plugins 或 /usr/themes 目录中，并到后台启用即可。你可以在 这里 或者 官方论坛 中找到一些 Typecho 的主题和插件。

4. 这时，你的 Typecho 站点就已经配置完成了，只要有浏览器，你就可以随时通过访问网站后台（yourdomain.com/admin）来更新你的网站。

相比于最低成本为零的 Hexo 等静态网站生成器，Typecho 多少会花费你一些服务器的开支，但是好处也是显而易见的——作为动态站点，在配置好之后，你只要能够连上互联网，打开浏览器就可以随时撰写文章、管理网站，而不再需要每次更新都必需打开终端进行操作。而相对于 Squarespace 等自助建站商，购买个人服务器价格也非常低廉。

服务器、域名及其他

如果你想要完全掌控你的网站——自己设计、自己决定服务器里可以储存的内容，那么自建网站总是一个终极的解决方案。当然，能做到的事情越多，需要学习的也越多，如果你想要完全靠自己建立一个个人网站，那么你至少需要了解这些。

1. 首先，你需要一个服务器。服务器是一台远程的计算机（即使很多时候是一台虚拟的计算机），它和你的电脑一样拥有存储空间、处理器、内存和联网机能，这样你就可以把你的网站存储在里面，并且 24 小时上线。可以用于建站的服务器有很多种（VPS、虚拟主机等等），价格也各不相同，你可以根据需要进行选购。
2. 其次，你需要一个域名。域名相当于你的网站的地址。只有有了公开的域名，别人才能找到你的网站。域名的购买就很简单了，如果你在意你的网站在中国大陆的合法性，那么你可以去 万网 或者 腾讯云 购买域名，不过这也意味着你需要将你的网站在中国大陆备案。你也可以在一些国际域名经销商购买域名，domcomp 会告诉你你喜欢的域名在哪个网站比较便宜。我自己用过 Namecheap 和 Porkbun 都是性价比比较高的选择。
3. 接着，你需要制做你的网站源码。前面几节中提到的知识对你来说仍然是有用的，你可以将你的 WordPress 站点部署在你自己的服务器上，或者利用 Hexo 等静态网站生成器制做网站源码并上传到你的服务器，这些都是很方便的办法。
4. 如果你想要完全靠自己建立一个网站，你至少需要学习 HTML、CSS 和 Javascript，这是三种编写一个网站最基本的语言，你可以在 W3Schools 上学到几乎所有相关的知识。通过这几种基础的语言（当然，还有更多），你可以从学会看懂一个网站开始，进而学会如何修改它，直至最终具备制作一个独立的网站的能力。

写在最后

个人网站是一个很有意思的东西。它曾经是一个人人都想要、人人都能有的「互联网必需品」，人们把它当作向外界展示自己的窗口。你在上面分享你的生活，写下你的想法，一些网页设计的细节或者前端的花招都可以让人得意很久。

随着移动互联网时代的到来，强调短内容的社交平台成了新的内容集散地。尽管社交媒体让我们可以更方便地交流和分享，但是个人建站这种「自己经营一片小天地」的感觉仍然很难取代。如果你在今天仍有一片自留地想要坚守，希望这篇文章能帮你迈过个人建站的第一道坎，找到最适合你的建站途径。