基于阿里云服务器的网站部署教程（三） — Python的Flask+html静态文件+CSS+图片部署

基于之前两节阿里云服务器部署的基础，本节将会分享部署在阿里云服务器的Flask如何结合HTML静态文件、CSS和图片设计一个稍微好看一点的网站。

一.网站创建及配置

1.这里我们使用上节教程创建的IP地址的2222端口来进行部署测试。首先，我们需要在test1文件夹下创建templates文件夹，这里的templates放置的文件是html文件。因为Flask库的特殊性，它默认索引的是templates里的html静态文件，因此网页必须放在该名字的目录之下，不然代码会找不到网页。

mkdir templates

2.之后我们将我们所需要展示的html文件放入templates文件夹中。上传文件到服务器里可以点击宝塔Linux界面文件的上传按钮即可快速上传。

二.CSS和图片配置

1.一个精美的网站自然少不了CSS（层叠样式表）和外界图片。这里我们在www.Heihei.com（域名）文件夹下创建static，并在static下又创建css和images文件夹，将我们HTML处所链接的css文件和图片文件放入其中。这里和前面templates文件夹一样，因为Flask库默认索引的特殊性，因此我们必须把css和图片文件放入名为static的文件夹下，这需要我们自己创建。另外提醒大家一点，我们的这些文件是放在www.Heihei.com域名文件夹下的，而不是test1文件夹下，为什么呢？因为我们在输入网址时输入的这个域名对应的IP地址，访问的文件自然也是这个IP地址也就是域名文件夹下的文件。

  ↵

2.返回HTML文件代码处，修改CSS样式表的href引入位置和图片的引入位置。

三.Flask文件代码撰写

1.之间的Flask返回字符串是直接用return即可返回。但返回网页没有这么简单，这里需要用到一个新的函数render_template，之后把要返回的网页名称写入即可。

2.下一步我们需要重启一下uwsgi协议模块。

3.最后输入IP地址及对应的端口测试网站运行是否成功。

可以看到带有一点点设计的网页成功显示出来了，这个网站是所有人都可以访问的。大家有空可以测试一下自己的网页在阿里云服务器的部署情况，如果有碰到问题或Bug，欢迎留言讨论。

以上就是本节分享的内容，谢谢大家的观看！