企業建站知識推廣知識小程序微信營銷 APP開發前端設計 MindManager 開發語言自媒體

【杏仁】零基礎之OSS搭建個人靜態網站

發表日期：2018-06 文章編輯：小燈瀏覽次數：3923

六月六的雨淅淅瀝瀝

前言

【杏仁】寫在前面的話

有緣人：
　　您好！
　　首先，請原諒我把模塊化思維用到寫文章上，前言部分獨立抽離出來寫了篇文章，這樣【杏仁】系列的文章就可以重復引用了。
　　偷懶，始終是程序員最棒的優點。
　　偷懶，是一門很高深的藝術，很容易誤入歧途，請君三思而行！

窗外下著六月的雨
你們邁進七號的考場
這就是我們的高考季啊
匆匆的，你又悄悄的來了
明天就高考了，好緊張啊！
為了自己的夢想，擼起袖子加油干吧！
祝各位考生，金榜題名！
　　　　　　　　　　　　　　　　　　　　　　　　　　　——杏仁奶昔隨筆

今夜螢火伴你同行

正文

一、關于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日

關于OSS ?
準備工作 ?
配置OSS ?
域名與域名備案 ?
OSS綁定域名 ?
SSL證書托管 ?

本頁內容由塔燈網絡科技有限公司通過網絡收集編輯所得，所有資料僅供用戶學習參考，本站不擁有所有權，如您認為本網頁中由涉嫌抄襲的內容，請及時與我們聯系，并提供相關證據，工作人員會在5工作日內聯系您，一經查實，本站立刻刪除侵權內容。本文鏈接:http://www.junxiaosheng.cn/20406.html

上一篇：<你的網站還在使用不安全的HTTP協議嗎下一篇：給網站配置免費的HTTS證書>