企業(yè)建站知識(shí) 推廣知識(shí) 小程序微信營銷 APP開發(fā) 前端設(shè)計(jì) MindManager 開發(fā)語言自媒體

【杏仁】零基礎(chǔ)之OSS搭建個(gè)人靜態(tài)網(wǎng)站

發(fā)表日期：2018-06 文章編輯：小燈瀏覽次數(shù)：4076

六月六的雨淅淅瀝瀝

前言

【杏仁】寫在前面的話

有緣人：
　　您好！
　　首先，請(qǐng)?jiān)徫野?strong>模塊化思維用到寫文章上，前言部分獨(dú)立抽離出來寫了篇文章，這樣【杏仁】系列的文章就可以重復(fù)引用了。
　　偷懶，始終是程序員最棒的優(yōu)點(diǎn)。
　　偷懶，是一門很高深的藝術(shù)，很容易誤入歧途，請(qǐng)君三思而行！

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

今夜螢火伴你同行

正文

一、關(guān)于OSS^[1]

1、閑聊OSS
　　既然是零基礎(chǔ)，連標(biāo)題都讓人看不懂就不應(yīng)該了，所以還是得大概描述一下OSS是個(gè)什么東西，想深入了解，可以和度娘聊聊夢(mèng)想（度娘也不知道是誰？眾里尋他千百度，那人卻在燈火闌珊處）。
　　首先，OSS是阿里云（阿里巴巴旗下）的一款產(chǎn)品，最近一直在搞活動(dòng)，9塊錢一年，40G存儲(chǔ)空間，簡(jiǎn)單的說，其實(shí)OSS就是一塊云盤。你就當(dāng)花9塊錢買了個(gè)一年使用權(quán)的U盤吧，只要有網(wǎng)絡(luò)，就能使用喲。（如果不知道什么是40G，U盤，就問度娘吧，這些常用名詞后面我就不解釋了，否則感覺要把讀者的智商摁在地上摩擦一樣）

2、關(guān)于OSS的費(fèi)用

阿里云OSS官方價(jià)格
　　注意這個(gè)坑位，OSS的收費(fèi)：
　　前方高能！

OSS總費(fèi)用 = 存儲(chǔ)費(fèi) + 流量費(fèi) + 請(qǐng)求次數(shù)費(fèi) + 數(shù)據(jù)處理費(fèi)

也就是說，你花9塊錢買的，只是存儲(chǔ)費(fèi)，這40G的空間，只要不超出，是不會(huì)再產(chǎn)生費(fèi)用的。
　　然后呢，流量費(fèi)的計(jì)算，默認(rèn)是按量計(jì)費(fèi)，一個(gè)小時(shí)自動(dòng)統(tǒng)計(jì)一次，計(jì)算的是流出流量，也就是你從OSS讀取文件時(shí)，跑到你電腦消耗的流量，你上傳文件到OSS是不收費(fèi)的。
　　簡(jiǎn)單說：讀收費(fèi)，寫不收費(fèi)。
　　詳細(xì)點(diǎn)說：內(nèi)網(wǎng)讀寫不收費(fèi)，外網(wǎng)寫不收費(fèi)，讀收費(fèi)。
　　然后價(jià)格怎么算的呢，我們就按照這個(gè)9塊錢的標(biāo)準(zhǔn)存儲(chǔ)類型來算，不同時(shí)間段有不同的收費(fèi)，早8時(shí)到晚24時(shí)，0.5元/Gb，0時(shí)到早8時(shí)，按照0.25元/Gb流量計(jì)算。
　　具體流量費(fèi)計(jì)算，其實(shí)不用管的，你會(huì)收到很多0元的統(tǒng)計(jì)訂單，因?yàn)槲覀冇肙SS只是搭建靜態(tài)網(wǎng)站，訪問量不大的情況下，一個(gè)小時(shí)統(tǒng)計(jì)一次，不會(huì)用到太多流量。這么說吧，一個(gè)小時(shí)，100個(gè)人訪問你的網(wǎng)站，而你的網(wǎng)站是靜態(tài)的，一般大小就1M左右（很單純的靜態(tài)網(wǎng)站，沒有大圖，視頻），于是你的OSS跑掉了100M左右的流量，于是最高產(chǎn)生費(fèi)用為0.5x100/1024=0.048828元，5分錢，注意是一個(gè)小時(shí)哦！現(xiàn)實(shí)情況是，你的網(wǎng)站一個(gè)小時(shí)根本達(dá)不到1分錢的花費(fèi)，于是就有很多0元的訂單，自動(dòng)支付完成的，根本不用理會(huì)。等你有一個(gè)小時(shí)100人訪問，也就是一天有2400人訪問的時(shí)候，你也不缺這點(diǎn)錢了是不是。
　　然后是請(qǐng)求次數(shù)費(fèi)，每10000次訪問，0.01元。這里注意一下，訪問次數(shù)不是訪問你網(wǎng)站的次數(shù)，你的圖片，文件放在OSS，當(dāng)訪問網(wǎng)站首頁的時(shí)候，實(shí)際上調(diào)用了很多圖片，CSS樣式，JS腳本，每一個(gè)文件的讀取，調(diào)用，都算一次訪問。但是也不用擔(dān)心，我說個(gè)概念，我用OSS搭建的靜態(tài)網(wǎng)站，使用半個(gè)月了，調(diào)用次數(shù)也不過9000+，也就是1分錢都沒用到，這還有啥好擔(dān)心的呢，按照這種速度，一年也花不了我?guī)酌X啊，是不是，所以，根本不用理會(huì)。
　　最后就是數(shù)據(jù)處理費(fèi)用了，其實(shí)就是你上傳的圖片，視頻，裁剪、縮放、加水印之類的處理，每月0到10T免費(fèi)！我存儲(chǔ)空間才40G，根本不用理會(huì)！
　　總結(jié)：9塊錢，買了一個(gè)一年的，自帶域名，自帶https，40G空間的網(wǎng)站！
　　有什么作用呢？簡(jiǎn)單舉個(gè)栗子：個(gè)人簡(jiǎn)歷，個(gè)人博客，網(wǎng)頁小游戲。
　　哇塞，是不是很有范！花9塊錢，有一個(gè)專門屬于自己的網(wǎng)站誒！想怎么搞就怎么搞，你高興可以把自己的自拍照放首頁，當(dāng)然啊，我們不能做違法，違背倫理道德的事情哈。
　　是不是有點(diǎn)心動(dòng)了！別急，麻煩的事情要來了。

遇見你時(shí) 繁花落滿了我的心

二、準(zhǔn)備工作^[2]

1、靜態(tài)頁面
　　這其實(shí)是最關(guān)鍵的環(huán)節(jié)，因?yàn)殪o態(tài)網(wǎng)站，需要發(fā)揮的是自己的想象力。
　　為了零基礎(chǔ)的朋友，我來舉個(gè)絕對(duì)靜態(tài)的栗子：

<!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,個(gè)人站點(diǎn),分享,教程,零基礎(chǔ)"/> <meta name="description" content="這里是杏爺?shù)腣IP專屬金站,不接受反駁!杏仁和奶昔你選哪一個(gè)?何不來杯杏仁奶昔,一起探討一下人生!"/> <meta name="Author" content="杏仁奶昔,www.jogjo.vip"/> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> <title>杏仁奶昔</title> </head> <body> 內(nèi)容：杏仁奶昔 </body> </html>

這是空白內(nèi)容的靜態(tài)網(wǎng)站，在你沒有任何HTML編輯工具的情況下，新建一個(gè)txt文本，把內(nèi)容復(fù)制進(jìn)去，然后把.txt的后綴改成.html，用瀏覽器打開，你會(huì)發(fā)現(xiàn)，瀏覽器會(huì)打開一個(gè)這樣的網(wǎng)頁：

絕對(duì)靜態(tài)的栗子
　　可以看到，上面有一堆meta開頭的標(biāo)簽，這些都是為了SEO，也就是搜索排名，有了這些東西，網(wǎng)頁蜘蛛才會(huì)來爬你的網(wǎng)站，然后當(dāng)你打開百度，輸入你維護(hù)的關(guān)鍵詞（就是meta里content里面的內(nèi)容，這里特指keywords和description），如果維護(hù)得好，你的網(wǎng)站就可以出現(xiàn)在靠前的位置。當(dāng)然，還是那句歌詞：沒那么簡(jiǎn)單，就能找到，聊得來的伴。。。SEO這個(gè)小姐姐，還需要投入很多東西才能得到她的芳心，例如robots，sitemap等等。現(xiàn)在看不懂不要緊，SEO部分內(nèi)容留日后再論，到時(shí)在此處再放出鏈接，請(qǐng)記住這個(gè)位置《--預(yù)留跳轉(zhuǎn)鏈接001--》。
　　回歸正題，一個(gè)最簡(jiǎn)單的靜態(tài)頁面你已經(jīng)有了，我們把它保存成index.html，先放一邊。
　　我們今天的主角是什么？！OSS，是的，沒錯(cuò)。這個(gè)環(huán)節(jié)比較麻煩的就是錢了，9塊錢啊！有老婆的怕是10塊錢都很不舍了，畢竟可能這是一個(gè)月的零花錢。9塊錢都能輕松解決了，那接下來都是簡(jiǎn)單的事了。
　　支付寶賬號(hào)一個(gè)，登入阿里云，沒有的朋友，用你淘寶賬號(hào)也是一樣的，再不行，手機(jī)號(hào)直接注冊(cè)一個(gè)好嘛。登錄成功，打開產(chǎn)品，打開對(duì)象存儲(chǔ)OSS，滑到下面，9元套餐，買買買！根據(jù)你的需要選擇地區(qū)，如果你已經(jīng)買過阿里的服務(wù)器，建議就買你服務(wù)器所屬的區(qū)域，比如我的服務(wù)器是華南1的，那OSS我也會(huì)選華南1的，不打算買服務(wù)器的朋友，你可以根據(jù)你住的區(qū)域，就近選擇，當(dāng)然，有個(gè)全國通用版的，有強(qiáng)迫癥的可以直接選這個(gè)。

登錄阿里云

購買OSS存儲(chǔ)包
　　大工~告一段落，準(zhǔn)備工作到這就差不多。買好后進(jìn)入阿里云的控制臺(tái)，打開對(duì)象存儲(chǔ)OSS，首次使用會(huì)讓你開通一些相關(guān)服務(wù)，開啟就行了，反正不花錢，能開的都開了。

三、配置OSS^[3]

1、簡(jiǎn)單配置OSS
　　在前面的基礎(chǔ)下，在OSS控制臺(tái)，新建Bucket，可以理解為根目錄。AccessKey可以先不管，現(xiàn)在用不到。
　　Bucket的命名用簡(jiǎn)潔一點(diǎn)的英文就好，然后點(diǎn)開bucket，選擇基礎(chǔ)設(shè)置，把讀寫權(quán)限改成公共讀寫，會(huì)提示不安全，不管，確認(rèn)就好。（等熟悉怎么使用后，你可以配合AccessKey和其他設(shè)置弄一些訪問權(quán)限，圖片水印之類的，我們現(xiàn)在先快速入門）然后設(shè)置靜態(tài)首頁為index.html，404頁面為404.html。（404頁面就是指訪問時(shí)找不到該頁面時(shí)打開的頁面）

令人愉悅的操作
　　選擇文件管理，在根目錄的位置，點(diǎn)擊上傳文件，選中準(zhǔn)備工作環(huán)節(jié)創(chuàng)建的index.html文件，確認(rèn)上傳。打開概覽，你會(huì)看到專屬于你的OSS外網(wǎng)訪問鏈接，復(fù)制，輸入到瀏覽器的地址欄，訪問！

令人激動(dòng)的操作
　　你會(huì)發(fā)現(xiàn)，納尼！！這就是我自己的網(wǎng)站？！完工了？就這么簡(jiǎn)單？！擁有一個(gè)屬于自己的網(wǎng)站原來那么簡(jiǎn)單？！！！
　　然后你再創(chuàng)建一個(gè)404.html，內(nèi)容你知道怎么改了吧，同樣的操作，點(diǎn)擊文件管理，上傳文件，此時(shí)你的Bucket放置了兩個(gè)文件，而且都放在了Bucket的根目錄。同樣的把外網(wǎng)地址https://jogjo.oss-cn-shenzhen.aliyuncs.com復(fù)制到瀏覽器，此時(shí)我們加點(diǎn)東西，https://jogjo.oss-cn-shenzhen.aliyuncs.com/404.html，回車訪問，誒馬！這不是404.html頁面的內(nèi)容么！？
　　簡(jiǎn)直興奮！因?yàn)閯倓傇诨A(chǔ)設(shè)置里設(shè)置了404頁面，我們?cè)偃サ刂窓冢斎雋ttps://jogjo.oss-cn-shenzhen.aliyuncs.com/123.html，噫？跳到了404.html，對(duì)不對(duì)，只要訪問的頁面不存在，就會(huì)跳404.html。
　　為了將我們的靜態(tài)網(wǎng)站搭建得更舒服，邏輯結(jié)構(gòu)更清楚，我們?cè)贐ucket根目錄新建一個(gè)static目錄（我們的靜態(tài)文件，以后就都放里面了，簡(jiǎn)直就像建了一個(gè)存儲(chǔ)室，有木有），然后繼續(xù)完善我們的目錄，js，css，img等等，然后打開img文件夾，上傳一張圖片，例如123.jpg，那么我們要訪問它，就在剛才的鏈接基礎(chǔ)上，加上目錄名稱，像這樣：https://你得OSS外網(wǎng)地址/static/img/123.jpg，你會(huì)發(fā)現(xiàn)，瀏覽器就能直接訪問到你上傳的圖片了。

在電腦本地存的文件
　　你會(huì)發(fā)現(xiàn)，OSS的Bucket不就和電腦的文件夾****一樣嗎？而且還能通過OSS的外網(wǎng)鏈接，隨時(shí)隨地的訪問。完美！最基礎(chǔ)的OSS搭建靜態(tài)網(wǎng)頁告一段落。此時(shí)又響起那句歌詞：沒那么簡(jiǎn)單，就能找到，聊得來的伴。。。

四、域名與域名備案^[4]

https://jogjo.oss-cn-shenzhen.aliyuncs.com
　　是的，有沒有感覺OSS給的外網(wǎng)地址又臭又長，反正我是不想去記的。怎么辦呢？！
　　這就不得不提到域名這個(gè)東西了，沒接觸過的朋友，可能覺得域名很貴很貴吧，其實(shí)呢，便宜的1塊錢，甚至免費(fèi)哦，貴的呢？不用我說了，賣了你都買不起。先來看看我自己的域名吧
　　https://www.jogjo.vip
　　我花了60塊錢，買了三年使用權(quán)，是的60塊三年，域名和OSS一樣，都是按年限來購買的，在哪買呢？還是阿里云，在產(chǎn)品列表里面，找到域名，然后輸入你想要的域名，就能看到你要花多少錢購買它了。可惜我已經(jīng)不是新用戶了，對(duì)于新用戶，是有很多1~10塊錢不等的域名的喲，反正也不貴，買買買！（其實(shí)我已經(jīng)買了差不多20個(gè)域名了，(??︵??)心痛，因?yàn)橐I斷那些常用的后綴，例如com，cn，net，否則被他人搶注后，你只能任其擺布，他說多少錢轉(zhuǎn)讓給你，你想要，那還不是得花這冤枉錢么）
　　買域名只是開始喲！沒那么簡(jiǎn)單都唱了那么多次了，都是套路啊，一環(huán)接一環(huán)，買了域名后，你是不能馬上使用到網(wǎng)站上的。我來說一下流程：
　　進(jìn)入控制臺(tái)，域名管理，接下來的操作都在里面進(jìn)行。
1.實(shí)名認(rèn)證（一般1~3天內(nèi)可通過）。
　　麻煩點(diǎn)，需要的材料：個(gè)人身份證正反面照片，手持身份證照片（好像現(xiàn)在是不需要手持身份證），一般的手機(jī)也能拍清楚了，建議用數(shù)碼相機(jī)，越清晰越容易通過哦。我用的掃描機(jī)，掃描到電腦的，特別清晰，哈哈?乛?乛?
2.域名備案（一般14天，也有像我這種幾十個(gè)域名的，7天不到就通過了，工作人員怕是受不了我了，才那么迅速）
　　最麻煩，需要的材料：阿里云的備案幕布，0元，需付15塊郵費(fèi)，可永久留存（其實(shí)就是一張大紙），站在幕布前，拍一張半身照。備案服務(wù)號(hào)，購買有阿里云服務(wù)器的話，一個(gè)服務(wù)器可以申請(qǐng)5個(gè)備案服務(wù)號(hào)，每備案一個(gè)域名，需要一個(gè)備案服務(wù)號(hào)。（看到了吧，是不是很麻煩！）那怎么辦呢？
　　第一種，新用戶可以免費(fèi)領(lǐng)取6個(gè)月的ECS服務(wù)器，這樣你就擁有服務(wù)器啦。
　　第二種，在校大學(xué)生，用自己的學(xué)生證認(rèn)證學(xué)生身份，可以申領(lǐng)一臺(tái)9.9一年的最低配ECS服務(wù)器。
　　第三種，找個(gè)有服務(wù)器的朋友，讓他給你申請(qǐng)一個(gè)，這個(gè)服務(wù)號(hào)不管是不是你服務(wù)器申請(qǐng)的，都能用。
　　老用戶怎么辦！？我只能說，你都是老用戶了，只能買買買了！期限3個(gè)月以上的服務(wù)器才能申請(qǐng)備案服務(wù)號(hào)，所以，最低配也要差不多50一個(gè)月，于是150大洋少不了了，不過我相信，老用戶都是有自己的服務(wù)器的，根本不用替你們考慮這些，是吧。
　　其他途徑也有的，阿里云經(jīng)常有一些活動(dòng)，很多都能免費(fèi)領(lǐng)個(gè)服務(wù)器試試手。
　　總的來說，你需要：身份證正反面照，阿里云幕布半身照，備案服務(wù)號(hào)，材料齊全了，備案還有個(gè)麻煩點(diǎn)：校驗(yàn)單。提交完材料后，會(huì)讓你下載一份文件，打印出來，然后手動(dòng)簽名，再拍照，或者掃描成圖片，上傳。對(duì)于沒有打印機(jī)的朋友，就要跑文印店啦，是不是很麻煩！？這個(gè)坑在我還上大學(xué)時(shí)就踩了，所以印象深刻！現(xiàn)在工作后就簡(jiǎn)單多了，公司的打印機(jī)可以掃描，分分鐘就搞定備案了。
　　謹(jǐn)記！這些材料一定要備份好，特別是幕布照，以后再買域名就能直接用了。
　　好了，有了所有這些材料，上傳提交后，會(huì)進(jìn)行1～3天的初審，然后會(huì)用工作人員打電話過來，問你是不是本人申請(qǐng)的備案，可以撩騷，不想聊就說是是是，然后就行了(￣_,￣)。這就算初審通過了，然后會(huì)顯示正提交至備案管理局審核，這個(gè)要等待7～14天，通過后會(huì)有短信通知的，如果有條件的（家里有打印機(jī)），都不用出家門就能搞定一切了。
　　最麻煩的備案，到此結(jié)束！呼~（光看都覺得累，有木有）

五、OSS綁定域名^[5]

綁定OSS
　　備案成功后，域名才能被綁定OSS，在OSS的菜單，選中你的Bucket，選擇域名管理，輸入你的域名即可。
　　這里又有一個(gè)坑需要注意：進(jìn)域名控制管理面板，點(diǎn)擊域名映射，添加映射，映射到鏈接，鏈接填寫OSS外網(wǎng)訪問地址，保存。
　　不設(shè)置這一步，是無法用自己的域名訪問OSS的，謹(jǐn)記！

六、SSL證書托管^[6]

申請(qǐng)SSL證書
　　進(jìn)入阿里云控制臺(tái)，打開域名管理菜單，點(diǎn)擊證書，申請(qǐng)SSL證書，免費(fèi)的，申請(qǐng)就對(duì)了。這東西有什么用呢，簡(jiǎn)單的說，就是把你的網(wǎng)站變成https協(xié)議的，更安全了。以后有空再開專題聊一下？
　　申請(qǐng)這個(gè)證書大概要1天，等待吧。申請(qǐng)成功后，點(diǎn)擊下載證書，版本的話，選tomcat版的就好。你會(huì)得到一個(gè)壓縮包，里面有私鑰（.key）和公鑰(.pem)。
　　打開OSS域名管理，選擇證書托管，用記事本打開公鑰和私鑰，全選里面的內(nèi)容，復(fù)制到OSS對(duì)應(yīng)的框，保存，大概1小時(shí)后生效。

SSL證書
　　然后你會(huì)發(fā)現(xiàn)！用你的域名，也能正常訪問OSS的Bucket文件啦！真是艱辛啊！有木有！
　　就像這樣https://www.jogjo.vip

歲月靜好不如你

后記：
　　除去域名備案這部分，單單買OSS部署靜態(tài)網(wǎng)站，這是我見過最簡(jiǎn)單高效，限制小，可自由發(fā)揮空間大的搭建網(wǎng)站方法，有木有！
　　40G的網(wǎng)頁空間，自帶https協(xié)議，訪問速度極快！百兆以上級(jí)別，杠杠滴！直接把本地靜態(tài)網(wǎng)頁上傳即可，實(shí)時(shí)更新，不用部署！
　　對(duì)于學(xué)前端的朋友，簡(jiǎn)直是友好的！可以把自己做的靜態(tài)例子發(fā)布出來，搭建一個(gè)屬于自己的網(wǎng)站世界！甚至制作JS動(dòng)畫，拿來表個(gè)白，炫酷，都是極好的！

作者 @杏仁奶昔
2018 年 06月 06日

關(guān)于OSS ?
準(zhǔn)備工作 ?
配置OSS ?
域名與域名備案 ?
OSS綁定域名 ?
SSL證書托管 ?

本頁內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶學(xué)習(xí)參考，本站不擁有所有權(quán)，如您認(rèn)為本網(wǎng)頁中由涉嫌抄襲的內(nèi)容，請(qǐng)及時(shí)與我們聯(lián)系，并提供相關(guān)證據(jù)，工作人員會(huì)在5工作日內(nèi)聯(lián)系您，一經(jīng)查實(shí)，本站立刻刪除侵權(quán)內(nèi)容。本文鏈接:http://www.juherenli.com/20406.html

上一篇：<你的網(wǎng)站還在使用不安全的HTTP協(xié)議嗎下一篇：給網(wǎng)站配置免費(fèi)的HTTS證書>