订阅博客
收藏博客
微博分享
QQ空间分享

使用七牛云存储空间搭建静态网站

频道:技术分享 标签:菜鸟程序员 时间:2016年03月02日 浏览:4809次 评论:2条

在前面的文章中我有说过采用七牛云存储作为我们的博客附件存储空间:http://cuiyongzhi.com/?id=16,这里我想给大家带来的是如何采用七牛搭建一个静态临时站点!

因为最近用七牛存储用的有点多,所以我观察到一点他基本支持任何格式文件的存储(前提是你已经是实名认真的用户,如下图),这个时候我就想到借助他尝试着存储富文本文件,css,js等这些文件,然后有机的将他们联合起来,最后这样就可以建立起一个简单地静态网站了,下面我们就一步步实现我们的静态站点搭建!(实名用户图如下:)

1.png

①HTML的上传和访问

新建一个html文件,这里名称为qn.html,大致代码如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>
这里是七牛静态站点
</title>
</head>
<body>
<h1><a href="http://www.cuiyongzhi.com">这里是崔用志博客</a></h1>
</body>
</html>

2.png

将文件上传到七牛空间,通过自定义域名+文件名(http://res.cuiyongzhi.com/qn.html)即可访问,如下:

3.png

②如果想在静态站点中加入CSS和JS,其操作步骤和上面一样,先建立文件,然后上传到存储空间,通过链接即可访问到,但是这里需要注意的是我们在html中引入css和js的时候我们需要采用真实的url地址,否则在资源加载过程中无法获取到!

总结:其实七牛能搭建静态站点的原因很近单,因为html、css、js的解析工作都是浏览器在帮我们做的,不需要服务端做任何处理,在这里七牛依然承担的是存储的作用,如果需要后端运算的站点是无法采用这种方式搭建的。感谢你的翻阅,如有疑问可以留言讨论!

文章评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

分享:

支付宝

微信