【杏仁】零基础之OSS搭建个人静态网站
六月六的雨 淅淅沥沥
前言
【杏仁】写在前面的话
有缘人：
您好！
首先，请原谅我把模块化思维用到写文章上，前言部分独立抽离出来写了篇文章，这样【杏仁】系列的文章就可以重复引用了。
偷懒，始终是程序员最棒的优点。
偷懒，是一门很高深的艺术，很容易误入歧途，请君三思而行！
窗外下着六月的雨
你们迈进七号的考场
这就是我们的高考季啊
匆匆的，你又悄悄的来了
明天就高考了，好紧张啊！
为了自己的梦想，撸起袖子加油干吧！
祝各位考生，金榜题名！
——杏仁奶昔随笔
今夜萤火 伴你同行
目录
注：菜单设置有锚点，点击可直达相关内容
正文
一、关于OSS[1]
1、闲聊OSS
既然是零基础，连标题都让人看不懂就不应该了，所以还是得大概描述一下OSS是个什么东西，想深入了解，可以和度娘聊聊梦想（度娘也不知道是谁？众里寻他千百度，那人却在灯火阑珊处）。
首先，OSS是阿里云（阿里巴巴旗下）的一款产品，最近一直在搞活动，9块钱一年，40G存储空间，简单的说，其实OSS就是一块云盘。你就当花9块钱买了个一年使用权的U盘吧，只要有网络，就能使用哟。（如果不知道什么是40G，U盘，就问度娘吧，这些常用名词后面我就不解释了，否则感觉要把读者的智商摁在地上摩擦一样）
2、关于OSS的费用
阿里云OSS官方价格
注意这个坑位，OSS的收费：
前方高能！
OSS总费用 = 存储费 + 流量费 + 请求次数费 + 数据处理费
也就是说，你花9块钱买的，只是存储费，这40G的空间，只要不超出，是不会再产生费用的。
然后呢，流量费的计算，默认是按量计费，一个小时自动统计一次，计算的是流出流量，也就是你从OSS读取文件时，跑到你电脑消耗的流量，你上传文件到OSS是不收费的。
简单说：读收费，写不收费。
详细点说：内网读写不收费，外网写不收费，读收费。
然后价格怎么算的呢，我们就按照这个9块钱的标准存储类型来算，不同时间段有不同的收费，早8时到晚24时，0.5元/Gb，0时到早8时，按照0.25元/Gb流量计算。
具体流量费计算，其实不用管的，你会收到很多0元的统计订单，因为我们用OSS只是搭建静态网站，访问量不大的情况下，一个小时统计一次，不会用到太多流量。这么说吧，一个小时，100个人访问你的网站，而你的网站是静态的，一般大小就1M左右（很单纯的静态网站，没有大图，视频），于是你的OSS跑掉了100M左右的流量，于是最高产生费用为0.5x100/1024=0.048828元，5分钱，注意是一个小时哦！现实情况是，你的网站一个小时根本达不到1分钱的花费，于是就有很多0元的订单，自动支付完成的，根本不用理会。等你有一个小时100人访问，也就是一天有2400人访问的时候，你也不缺这点钱了是不是。
然后是请求次数费，每10000次访问，0.01元。这里注意一下，访问次数不是访问你网站的次数，你的图片，文件放在OSS，当访问网站首页的时候，实际上调用了很多图片，CSS样式，JS脚本，每一个文件的读取，调用，都算一次访问。但是也不用担心，我说个概念，我用OSS搭建的静态网站，使用半个月了，调用次数也不过9000+，也就是1分钱都没用到，这还有啥好担心的呢，按照这种速度，一年也花不了我几毛钱啊，是不是，所以，根本不用理会。
最后就是数据处理费用了，其实就是你上传的图片，视频，裁剪、缩放、加水印之类的处理，每月0到10T免费！我存储空间才40G，根本不用理会！
总结：9块钱，买了一个一年的，自带域名，自带https，40G空间的网站！
有什么作用呢？简单举个栗子：个人简历，个人博客，网页小游戏。
哇塞，是不是很有范！花9块钱，有一个专门属于自己的网站诶！想怎么搞就怎么搞，你高兴可以把自己的自拍照放首页，当然啊，我们不能做违法，违背伦理道德的事情哈。
是不是有点心动了！别急，麻烦的事情要来了。
遇见你时 繁花落满了我的心
二、准备工作[2]
1、静态页面
这其实是最关键的环节，因为静态网站，需要发挥的是自己的想象力。
为了零基础的朋友，我来举个绝对静态的栗子：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="refresh" content="0; url=https://www.jogjo.vip/index.html">
<meta name="keywords" content="杏仁奶昔,杏爷,jogjo,unclealmond,almondmilkshake,个人站点,分享,教程,零基础"/>
<meta name="description" content="这里是杏爷的VIP专属金站,不接受反驳!杏仁和奶昔你选哪一个?何不来杯杏仁奶昔,一起探讨一下人生!"/>
<meta name="Author" content="杏仁奶昔,www.jogjo.vip"/>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title>杏仁奶昔</title>
</head>
<body>
内容：杏仁奶昔
</body>
</html>
这是空白内容的静态网站，在你没有任何HTML编辑工具的情况下，新建一个txt文本，把内容复制进去，然后把.txt的后缀改成.html，用浏览器打开，你会发现，浏览器会打开一个这样的网页：
绝对静态的栗子
可以看到，上面有一堆meta开头的标签，这些都是为了SEO，也就是搜索排名，有了这些东西，网页蜘蛛才会来爬你的网站，然后当你打开百度，输入你维护的关键词（就是meta里content里面的内容，这里特指keywords和description），如果维护得好，你的网站就可以出现在靠前的位置。当然，还是那句歌词：没那么简单，就能找到，聊得来的伴。。。SEO这个小姐姐，还需要投入很多东西才能得到她的芳心，例如robots，sitemap等等。现在看不懂不要紧，SEO部分内容留日后再论，到时在此处再放出链接，请记住这个位置《--预留跳转链接001--》。
回归正题，一个最简单的静态页面你已经有了，我们把它保存成index.html，先放一边。
我们今天的主角是什么？！OSS，是的，没错。这个环节比较麻烦的就是钱了，9块钱啊！有老婆的怕是10块钱都很不舍了，毕竟可能这是一个月的零花钱。9块钱都能轻松解决了，那接下来都是简单的事了。
支付宝账号一个，登入阿里云，没有的朋友，用你淘宝账号也是一样的，再不行，手机号直接注册一个好嘛。登录成功，打开产品，打开对象存储OSS，滑到下面，9元套餐，买买买！根据你的需要选择地区，如果你已经买过阿里的服务器，建议就买你服务器所属的区域，比如我的服务器是华南1的，那OSS我也会选华南1的，不打算买服务器的朋友，你可以根据你住的区域，就近选择，当然，有个全国通用版的，有强迫症的可以直接选这个。
登录阿里云
购买OSS存储包
大工~告一段落，准备工作到这就差不多。买好后进入阿里云的控制台，打开对象存储OSS，首次使用会让你开通一些相关服务，开启就行了，反正不花钱，能开的都开了。
三、配置OSS[3]
1、简单配置OSS
在前面的基础下，在OSS控制台，新建Bucket，可以理解为根目录。AccessKey可以先不管，现在用不到。
Bucket的命名用简洁一点的英文就好，然后点开bucket，选择基础设置，把读写权限改成公共读写，会提示不安全，不管，确认就好。（等熟悉怎么使用后，你可以配合AccessKey和其他设置弄一些访问权限，图片水印之类的，我们现在先快速入门）然后设置静态首页为index.html，404页面为404.html。（404页面就是指访问时找不到该页面时打开的页面）
令人愉悦的操作
选择文件管理，在根目录的位置，点击上传文件，选中准备工作环节创建的index.html文件，确认上传。打开概览，你会看到专属于你的OSS外网访问链接，复制，输入到浏览器的地址栏，访问！
令人激动的操作
你会发现，纳尼！！这就是我自己的网站？！完工了？就这么简单？！拥有一个属于自己的网站原来那么简单？！！！
然后你再创建一个404.html，内容你知道怎么改了吧，同样的操作，点击文件管理，上传文件，此时你的Bucket放置了两个文件，而且都放在了Bucket的根目录。同样的把外网地址https://jogjo.oss-cn-shenzhen.aliyuncs.com复制到浏览器，此时我们加点东西，https://jogjo.oss-cn-shenzhen.aliyuncs.com/404.html，回车访问，诶马！这不是404.html页面的内容么！？
简直兴奋！因为刚刚在基础设置里设置了404页面，我们再去地址栏，输入https://jogjo.oss-cn-shenzhen.aliyuncs.com/123.html，噫？跳到了404.html，对不对，只要访问的页面不存在，就会跳404.html。
为了将我们的静态网站搭建得更舒服，逻辑结构更清楚，我们在Bucket根目录新建一个static目录（我们的静态文件，以后就都放里面了，简直就像建了一个存储室，有木有），然后继续完善我们的目录，js，css，img等等，然后打开img文件夹，上传一张图片，例如123.jpg，那么我们要访问它，就在刚才的链接基础上，加上目录名称，像这样：https://你得OSS外网地址/static/img/123.jpg，你会发现，浏览器就能直接访问到你上传的图片了。
在电脑本地存的文件
你会发现，OSS的Bucket不就和电脑的文件夹****一样吗？而且还能通过OSS的外网链接，随时随地的访问。完美！最基础的OSS搭建静态网页告一段落。此时又响起那句歌词：没那么简单，就能找到，聊得来的伴。。。
四、域名与域名备案[4]
https://jogjo.oss-cn-shenzhen.aliyuncs.com
是的，有没有感觉OSS给的外网地址又臭又长，反正我是不想去记的。怎么办呢？！
这就不得不提到域名这个东西了，没接触过的朋友，可能觉得域名很贵很贵吧，其实呢，便宜的1块钱，甚至免费哦，贵的呢？不用我说了，卖了你都买不起。先来看看我自己的域名吧
https://www.jogjo.vip
我花了60块钱，买了三年使用权，是的60块三年，域名和OSS一样，都是按年限来购买的，在哪买呢？还是阿里云，在产品列表里面，找到域名，然后输入你想要的域名，就能看到你要花多少钱购买它了。可惜我已经不是新用户了，对于新用户，是有很多1~10块钱不等的域名的哟，反正也不贵，买买买！（其实我已经买了差不多20个域名了，(๑◕︵◕๑)心痛，因为要买断那些常用的后缀，例如com，cn，net，否则被他人抢注后，你只能任其摆布，他说多少钱转让给你，你想要，那还不是得花这冤枉钱么）
买域名只是开始哟！没那么简单都唱了那么多次了，都是套路啊，一环接一环，买了域名后，你是不能马上使用到网站上的。我来说一下流程：
进入控制台，域名管理，接下来的操作都在里面进行。
1.实名认证（一般1~3天内可通过）。
麻烦点，需要的材料：个人身份证正反面照片，手持身份证照片（好像现在是不需要手持身份证），一般的手机也能拍清楚了，建议用数码相机，越清晰越容易通过哦。我用的扫描机，扫描到电脑的，特别清晰，哈哈๑乛◡乛๑
2.域名备案（一般14天，也有像我这种几十个域名的，7天不到就通过了，工作人员怕是受不了我了，才那么迅速）
最麻烦，需要的材料：阿里云的备案幕布，0元，需付15块邮费，可永久留存（其实就是一张大纸），站在幕布前，拍一张半身照。备案服务号，购买有阿里云服务器的话，一个服务器可以申请5个备案服务号，每备案一个域名，需要一个备案服务号。（看到了吧，是不是很麻烦！）那怎么办呢？
第一种，新用户可以免费领取6个月的ECS服务器，这样你就拥有服务器啦。
第二种，在校大学生，用自己的学生证认证学生身份，可以申领一台9.9一年的最低配ECS服务器。
第三种，找个有服务器的朋友，让他给你申请一个，这个服务号不管是不是你服务器申请的，都能用。
老用户怎么办！？我只能说，你都是老用户了，只能买买买了！期限3个月以上的服务器才能申请备案服务号，所以，最低配也要差不多50一个月，于是150大洋少不了了，不过我相信，老用户都是有自己的服务器的，根本不用替你们考虑这些，是吧。
其他途径也有的，阿里云经常有一些活动，很多都能免费领个服务器试试手。
总的来说，你需要：身份证正反面照，阿里云幕布半身照，备案服务号，材料齐全了，备案还有个麻烦点：校验单。提交完材料后，会让你下载一份文件，打印出来，然后手动签名，再拍照，或者扫描成图片，上传。对于没有打印机的朋友，就要跑文印店啦，是不是很麻烦！？这个坑在我还上大学时就踩了，所以印象深刻！现在工作后就简单多了，公司的打印机可以扫描，分分钟就搞定备案了。
谨记！这些材料一定要备份好，特别是幕布照，以后再买域名就能直接用了。
好了，有了所有这些材料，上传提交后，会进行1～3天的初审，然后会用工作人员打电话过来，问你是不是本人申请的备案，可以撩骚，不想聊就说是是是，然后就行了(￣_,￣)。这就算初审通过了，然后会显示正提交至备案管理局审核，这个要等待7～14天，通过后会有短信通知的，如果有条件的（家里有打印机），都不用出家门就能搞定一切了。
最麻烦的备案，到此结束！呼~（光看都觉得累，有木有）
五、OSS绑定域名[5]
绑定OSS
备案成功后，域名才能被绑定OSS，在OSS的菜单，选中你的Bucket，选择域名管理，输入你的域名即可。
这里又有一个坑需要注意：进域名控制管理面板，点击域名映射，添加映射，映射到链接，链接填写OSS外网访问地址，保存。
不设置这一步，是无法用自己的域名访问OSS的，谨记！
六、SSL证书托管[6]
申请SSL证书
进入阿里云控制台，打开域名管理菜单，点击证书，申请SSL证书，免费的，申请就对了。这东西有什么用呢，简单的说，就是把你的网站变成https协议的，更安全了。以后有空再开专题聊一下？
申请这个证书大概要1天，等待吧。申请成功后，点击下载证书，版本的话，选tomcat版的就好。你会得到一个压缩包，里面有私钥（.key）和公钥(.pem)。
打开OSS域名管理，选择证书托管，用记事本打开公钥和私钥，全选里面的内容，复制到OSS对应的框，保存，大概1小时后生效。
SSL证书
然后你会发现！用你的域名，也能正常访问OSS的Bucket文件啦！真是艰辛啊！有木有！
就像这样https://www.jogjo.vip
岁月静好 不如你
后记：
除去域名备案这部分，单单买OSS部署静态网站，这是我见过最简单高效，限制小，可自由发挥空间大的搭建网站方法，有木有！
40G的网页空间，自带https协议，访问速度极快！百兆以上级别，杠杠滴！直接把本地静态网页上传即可，实时更新，不用部署！
对于学前端的朋友，简直是友好的！可以把自己做的静态例子发布出来，搭建一个属于自己的网站世界！甚至制作JS动画，拿来表个白，炫酷，都是极好的！
作者 @杏仁奶昔
2018 年 06月 06日
