又一次被搞了嗎？

最近有段時(shí)間沒(méi)有整理文章了，恰好這兩天正在翻閱歷史文章的時(shí)候，發(fā)現(xiàn)文章中的圖片竟然裂了？頓時(shí)冒了一身冷汗，因?yàn)槊糠暧龅竭@種情況，動(dòng)輒需要花費(fèi)一周的時(shí)間遷移圖片。。。。。。

當(dāng)我直接訪問(wèn)圖片 url 的時(shí)候，果不其然出現(xiàn)了令人震驚的一幕。

我一直用的 typora 寫(xiě)文章，我甚至是尊貴的 typora vip 擁有者，但就是這么一個(gè)人，竟然還在白嫖 ipic 默認(rèn)的云存儲(chǔ)圖床，我自己都看迫不不下得去已 了。

tva1.sinaimg.cn 也就是新浪圖床這波把我整的太慘了，這也讓我更加堅(jiān)定了想法：免費(fèi)的總有各自的缺陷，還是付費(fèi)得到技術(shù)支持的東西來(lái)的實(shí)在。

我發(fā)現(xiàn) iPic 又換了新的圖床，但是我已經(jīng)沒(méi)有繼續(xù)使用 iPic 的耐心了，果斷放棄。

由于遷移圖床工程量浩大，我甚至一度有不想干了的沖動(dòng)。不過(guò)我還是敗給了現(xiàn)實(shí)，現(xiàn)實(shí)就是跪著也得堅(jiān)持下去。

但是今天這文章就寫(xiě) xxx 到這吧，憋屈 :-) 。

--- 第二天 ---

怎么辦？這事兒還得干啊，所以我就找尋各種辦法，決定了把圖床搞到七牛云上去（絕無(wú)任何打廣告的想法），畢竟它們的圖床還是很穩(wěn)定的，訪問(wèn)也比較快。

于是我決定使用 PicGo + 七牛云圖床作為圖片存儲(chǔ)工具，七牛云好像有免費(fèi)的 10GB 存儲(chǔ)空間，只是存儲(chǔ)圖片的話應(yīng)該夠用，而且它們還有圖片壓縮功能。

如果只使用圖床功能的話，那么圖片訪問(wèn)速度也是需要考慮的因素，這就需要使用到 CDN 加速功能，CDN 加速需要自定義域名，這就要求我弄個(gè)域名讓圖床掛在域名下面。

既然都想到域名這里了，那我塵封 30 年想要搞個(gè)網(wǎng)站的愿望是不是該提上日程了？

說(shuō)到上線網(wǎng)站，我簡(jiǎn)直想罵死我自己，因?yàn)槲以?jīng)無(wú)數(shù)次的想要上線一個(gè)網(wǎng)站，卻都因?yàn)楦鞣N因素耽擱了，這次下定決心一定要上線一個(gè)網(wǎng)站，做不到我就一周不吃宵夜！！！對(duì)我來(lái)說(shuō)這真是一件很殘忍的事情。

技術(shù)網(wǎng)站一般有兩種類(lèi)型，一種是靜態(tài)網(wǎng)站，靜態(tài)網(wǎng)站不需要自己建站，直接使用第三方托管工具和模板即可，比如 jekyll ，hexo ，hugo 等，源代碼文件會(huì)提前編譯好，需要的功能點(diǎn)比較少，請(qǐng)求資源少，訪問(wèn)的時(shí)候速度比較快，不需要和數(shù)據(jù)庫(kù)交互，以靜態(tài)頁(yè)面為主；

動(dòng)態(tài)網(wǎng)站一般就像是 CMS 這種內(nèi)容管理系統(tǒng)了，這種系統(tǒng)需要你自己寫(xiě)前端后端代碼，然后自己部署在服務(wù)器，需要和數(shù)據(jù)庫(kù)打交道，頁(yè)面請(qǐng)求資源多，頁(yè)面比較復(fù)雜。不過(guò) CMS 也有一些開(kāi)源項(xiàng)目，比如 wordpress ，halo 等，我這里用的就是 halo 搭建的 CMS 網(wǎng)站。

上線一個(gè)網(wǎng)站，就需要準(zhǔn)備域名、服務(wù)器、建站代碼、備案申請(qǐng)、備案申請(qǐng)后等一系列操作。

由于這不是一個(gè)建站過(guò)程帖，也不是一個(gè)建站推薦貼，只是我把網(wǎng)站搞好后寫(xiě)的一個(gè)經(jīng)驗(yàn)匯總貼，所以一些過(guò)程寫(xiě)的不是很完備。

關(guān)于域名

我之前一直斷斷續(xù)續(xù)的在各種網(wǎng)上上線準(zhǔn)備，所以之前就已經(jīng)申請(qǐng)過(guò)域名了，由于是小打小鬧自己建個(gè)網(wǎng)站把文章之類(lèi)的搞上去，加點(diǎn)簡(jiǎn)單功能，就沒(méi)有必要花銷(xiāo)太大，所以就申請(qǐng)了 cxuan.vip，比較便宜，一個(gè)月才 10 塊錢(qián)。

關(guān)于服務(wù)器

出發(fā)點(diǎn)也是類(lèi)似，現(xiàn)在后悔之前沒(méi)有白嫖阿里云服務(wù)器了，目前用的只是阿里云很低端的機(jī)器，如果后續(xù)訪問(wèn)量和內(nèi)容上來(lái)的話再說(shuō)。

建站項(xiàng)目

我使用的是 halo 這個(gè)開(kāi)源項(xiàng)目，版本是 1.6 ，為什么選擇這個(gè)項(xiàng)目？因?yàn)槲艺J(rèn)為這是一個(gè)比較成熟的項(xiàng)目，社區(qū)人數(shù)眾多，github 一直在有人維護(hù)，截止到目前 halo 2.2 也已經(jīng)上線了，而且功能點(diǎn)比較多，基本上想要的都能滿足。為什么選擇這個(gè)版本？我看到 2.0 之后就加了很多新功能，而且推薦的是使用 docker 部署，官方不再提供 jar 包通過(guò)服務(wù)的方式訪問(wèn)，不過(guò)你可以把源碼下載下來(lái)自己打 jar 包部署。

但是由于我在用 2.1 版本的過(guò)程中出現(xiàn)了很多問(wèn)題，而且尚未解決，我在社區(qū)發(fā)帖也沒(méi)有人回答我的問(wèn)題，所以還是簡(jiǎn)單點(diǎn)使用老版本了。

備案申請(qǐng)

準(zhǔn)備好域名服務(wù)器就能提出備案申請(qǐng)了，備案申請(qǐng)需要很多資料，也有很多忌諱，而且備案申請(qǐng)后的審核過(guò)程比較漫長(zhǎng)。下面是我的備案過(guò)程。

比較人性的一點(diǎn)是，由于我買(mǎi)服務(wù)器的初衷就想要上線網(wǎng)站，所以在備案的過(guò)程中沒(méi)有怎么使用服務(wù)器，于是阿里云給我把使用的開(kāi)始時(shí)間延期到了備案審核成功的那一天，這點(diǎn)還是不錯(cuò)的。

備案審核后

備案審核后需要在你的網(wǎng)站底部添加 ICP 備案號(hào)并連接至 ICP/域名信息備案管理系統(tǒng)。

然后在互聯(lián)網(wǎng)站安全管理服務(wù)平臺(tái)填寫(xiě)新版網(wǎng)站申請(qǐng)，這個(gè)審核也需要等幾天，審核的時(shí)候會(huì)有相關(guān)人員給你打電話，然后他們會(huì)大致查看一下你的網(wǎng)站內(nèi)容是否合規(guī)合法，再給你通過(guò)。如果你的網(wǎng)站涉及到評(píng)論功能的話，是否是審核后才予以顯示，還需要填寫(xiě)一個(gè)評(píng)估報(bào)告。

到這里是否就完事了呢？

還沒(méi)有，如果你的網(wǎng)站搭建完成了，默認(rèn)的是使用 http 協(xié)議進(jìn)行訪問(wèn)的，http 協(xié)議對(duì)安全性沒(méi)有保證，很容易被劫持（雖然我的網(wǎng)站是一個(gè)只有內(nèi)容的小破站），但是安全性咱還是要保障一下的。網(wǎng)站想要通過(guò) https 訪問(wèn)，就需要有官方 CA 認(rèn)證機(jī)構(gòu)進(jìn)行認(rèn)證，阿里云有免費(fèi)的 https 證書(shū)可以申請(qǐng)使用，寶塔面板也可以授權(quán)證書(shū)，這個(gè)我沒(méi)有試過(guò)。

申請(qǐng)后需要把證書(shū)下載下來(lái)，下載完成后有兩個(gè)文件，一個(gè)是 .pem 文件，一個(gè)是 .key 文件，我們需要將這兩個(gè)文件上傳至服務(wù)器中對(duì)應(yīng)的路徑下，通過(guò)修改 nginx.conf 配置文件配置 https。

我在配置 https 的時(shí)候花了一些時(shí)間，剛開(kāi)始我不管怎么配置發(fā)現(xiàn)通過(guò) https 訪問(wèn)后訪問(wèn)的都是 nginx 主頁(yè)，后來(lái)發(fā)現(xiàn)我沒(méi)配置代理地址。。。。。。仿佛自己是個(gè)傻子。完整的配置如下

server {
  listen       443 ssl;
  server_name  cxuan.vip;

  root html;

  index index.html index.htm;

  ssl_certificate pem 地址;
  ssl_certificate_key key 地址;
  ssl_session_timeout 5m;
  ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
  ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
  ssl_prefer_server_ciphers on;

  location / {
    proxy_pass http://localhost:80;
  }
}

到這里網(wǎng)站部署基本上差不多了，開(kāi)始折騰圖床，圖床我是使用的七牛云圖床，我打算再配置一下 CDN ，配置 CDN 的時(shí)候要用到需要加速的域名，使用場(chǎng)景是作為圖片小文件使用，配置完成后的 CDN 加速配置如下。

現(xiàn)在我的圖片也可以通過(guò) http 進(jìn)行訪問(wèn)了，但是我使用 chrome 瀏覽器卻發(fā)現(xiàn)網(wǎng)站訪問(wèn)不到圖片，我換了個(gè) safari 瀏覽器卻可以訪問(wèn)，這是為啥呢？

原因是由于我現(xiàn)在的網(wǎng)站是 https 的，但是圖片卻是 http 協(xié)議的，當(dāng)我們想要訪問(wèn) https 網(wǎng)站的時(shí)候，chrome 會(huì)自動(dòng)把里面的圖片等內(nèi)容轉(zhuǎn)為 https 的，safari 卻不會(huì)，但是我還沒(méi)有配置 https 的圖床，所以訪問(wèn)不到。所以現(xiàn)在需要配置一下圖床的 https 訪問(wèn)。

圖床配置 https 就比較簡(jiǎn)單了，在七牛云域名管理，https 配置處，修改配置，把服務(wù)器上 CA 認(rèn)證的 .pem 和 .key 內(nèi)容直接貼上去就好，等幾分鐘就行了。

還需要配置在 typora 上使用的圖片自動(dòng)上傳工具 PicGo，進(jìn)行圖床的相關(guān)配置，其中 accesskey 和 securitkey 在密鑰管理中可以看到，然后再設(shè)定響應(yīng)的網(wǎng)址、圖床和存儲(chǔ)區(qū)域即可，配置完成后在 typora 中的圖像頁(yè)面驗(yàn)證一下圖片上傳即可。

至此，我這次上線內(nèi)容基本上可以說(shuō)算是整完了。

七牛云上面好像還有一個(gè)圖片優(yōu)化功能，能節(jié)省存儲(chǔ)空間和 CDN 流量，不過(guò)得花一點(diǎn)小錢(qián)。

然后我就把文章內(nèi)容和圖片都一個(gè)個(gè)的放在了服務(wù)器路徑下，花了很長(zhǎng)時(shí)間。halo 有一件上傳 md 文件的功能，這些文章內(nèi)容都是一鍵上傳的，比較方便。

網(wǎng)站搭建完成后的效果如下。

其實(shí)網(wǎng)站也很素了，沒(méi)有太多頁(yè)面和功能，主要就是文章內(nèi)容的匯總和整理，后續(xù)的個(gè)人文章會(huì)持續(xù)更新在網(wǎng)站上面，圖片內(nèi)容幾乎都用了動(dòng)漫人物做首頁(yè)，我現(xiàn)在也比較愛(ài)看動(dòng)漫，而且我覺(jué)得畫(huà)漫畫(huà)是一件很棒的事情，如果有時(shí)間和機(jī)會(huì)的話，我也想要嘗試一下畫(huà)漫畫(huà)這事兒。

我自己設(shè)計(jì)了一個(gè) Logo，這個(gè) Logo 和我這個(gè)網(wǎng)站以及程序員一搭，有點(diǎn)意思。

網(wǎng)站的內(nèi)容主要涉及操作系統(tǒng)、計(jì)算機(jī)網(wǎng)絡(luò)、Java、C、匯編、計(jì)算機(jī)書(shū)評(píng)等內(nèi)容，這也是我現(xiàn)在寫(xiě)文章的幾個(gè)方向。每個(gè)文章最后都可以評(píng)論，不過(guò)要完整的填寫(xiě)姓名和郵箱這些內(nèi)容，這部分做的還不太好，也是后面需要優(yōu)化的點(diǎn)。

最后，網(wǎng)站地址親自呈上

https://cxuan.vip/

歡迎各位小伙伴們來(lái)玩。

如果你在閱讀文章的過(guò)程中發(fā)現(xiàn)錯(cuò)誤和問(wèn)題，請(qǐng)及時(shí)與我聯(lián)系！

如果文章對(duì)你有幫助，希望小伙伴們?nèi)B走起！

閱讀原文即可直接跳轉(zhuǎn)。

大佬留步，支持一下小破站的運(yùn)營(yíng)？