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

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

一.网站创建及配置

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

mkdir templates

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

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

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

二.CSS和图片配置

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

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

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

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

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

三.Flask文件代码撰写

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

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

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

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

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

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

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

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

 

基于阿里云服务器的网站部署教程(三) — Python的Flask+html静态文件+CSS+图片部署基于阿里云服务器的网站部署教程(三) — Python的Flask+html静态文件+CSS+图片部署 Yohann、 发布了15 篇原创文章 · 获赞 23 · 访问量 3073 私信 关注
上一篇:使用python处理ember.js标记的html


下一篇:配置springboot跳转html页面