你的位置:首页 > 网页设计

[网页设计]bottle+bootstrap+新浪云搭建一个猫咪博客(一)


介绍

 

  建了博客许久不更新也是很不好意思,今天带来的是我之前练手的个人小项目,通过python的微型web框架bottle加之bootstrap在新浪云上搭建一个简单的猫咪博客,网站有三个板块,分别为:

  1. 喵生活,显示每日更新的猫咪博客,样式是一图配一文;
  2. 喵知识,介绍一些养猫的小知识;
  3. 关于喵,介绍了建站的缘由和其他信息

  这篇随笔适合前端初学者,不过还是需要具备一定的html,css和python基础,我也会尽可能写的详细一些,话不多说,先贴个链接,看一下网站 muxicat.applinzi.com 的实际效果吧~

 

思路

 

  整个过程并不复杂,大致为三步:

  (一)在新浪云上建立项目,并通过git建立仓库,为后续同步本地代码做准备

  (二)采用bootstrap的组件和布局系统来制定网页的结构和表现形式

  (三)使用bottle框架来联系动态网址和页面,这一部分会涉及bottle框架的很多方面,比如网页模板,静态文件的返回,404错误的处理等等,相信通过这一部分能对如何使用bottle建站有一个初步的认识

 

创建应用,同步代码  

 

  今天快速的介绍一些sae和git的相关操作,搭建自己的网站途径很多,可以自己购买空间和域名建站,如果是只是想做一个静态展示的网站,也可以通过jekyll+github,我使用了sae,能够免去一些环境部署的麻烦,也能享受新浪云提供的其他便捷的服务,并且网站流量不高的情况下,使用成本是接近于零的哦,下面正式开始吧。

 

1.注册账号,不必赘述了吧, 现在好像微博账号可以直接登录了,方便了很多,初始会赠送一些云豆,拿着身份证拍照实名注册后会再送一波,大概能到1000云豆,不使用mysql数据库等其他服务也能用上好一阵子了。

新建应用界面

  哎,穷人家的孩子选择最便宜的方案组合,python2.7标准环境,通过git进行代码管理,在二级域名输入应用的域名,并在下方填上应用名称,点击创建应用,就ok了。

 

2.下载git,在电脑上创建项目文件夹,git远程连接仓库,上传初始代码

  下载安装git,傻瓜式下一步,在本地建立一个项目文件夹,以后项目代码和子文件夹都会放在这个文件夹里面了,进入项目文件夹,右键鼠标,有个Git bash here

  打开了git,初始化

  

git init

 

  在文件夹里面建立一个文件,以wsgi结尾,比如index.wsgi,在里面就可以写网页应用的代码啦,如果使用bottle框架,代码是这样式的,当然如果你有兴趣,还可以使用python其他比较完备的web框架,django,flask等,这些框架新浪云也已经内置了,不过使用需要注意版本,具体见文档地址

# -*- coding:utf8 -*-from bottle import Bottleimport saemuxicat = Bottle()@muxicat.route('/')def index_hello():  return "hello, my friend"application = sae.create_wsgi_app(muxicat)

   代码先引入了bottle框架,创建了一个Bottle对象muxicat,这个命名是随你自己,不过保证后面一致就行了。下面有一个函数index_hello,返回字符串“hello, my friend”,就是我们希望网页显示的信息,那么如何让它在网址首页,即地址muxicat.applinzi.com上呢?只需要使用一个装饰器route()将网址与函数返回结果联系起来就行了,是不是很好理解呢?为什么装饰器能起到这个作用呢,说实话我自己也在学习中,route()中为链接地址,所以你也可以让返回语句出现在其他地址中,比如muxicat.applinzi.com/hello等。

  这样打开网址muxicat.applinzi.com就能看到简单的页面Hello,my friend!

 

3.上传代码

  那么如何把本地代码上传到仓库呢?用几条代码就能搞定,很 easy,并且代码很语义化,易于记忆。

  在这之前,先建立连接,代码如下:

git remote add sae https://git.sinacloud.com/your-app-name

  把那个your-app-name换成你创建的应用的域名名称,比如我的是muxicat,远程连接就算好了。

  以后只要使用下面三条指令就能解决代码上传的问题了,分别是:

git add .

git commit -m "commit infomation"

git push sae mater:1

  这样,在你完成对目录代码和文件进行变动操作后,你就能将最新的代码和文件提交到git了,打开网址也能看到最新的显示效果。commit information可以自己根据变动的内容填写,方便将来撤回或是回顾变动。

  好了,今天就先介绍到这里了吧,文章有什么错误或是有什么问题都可以在评论中留言,谢谢您的阅读!