不務(wù)正業(yè)，搗鼓了一個破網(wǎng)站，全過程記錄
這篇文章沒有什么關(guān)于嵌入式的干貨，僅僅是詳細記錄一下前段時間搗鼓的一個靜態(tài)的個人網(wǎng)站。
最近都沒有想到什么好的文章方向，下一階段想把之前對Lua語言的學(xué)習心得總結(jié)一下，實現(xiàn)一個基于插件機制的物聯(lián)網(wǎng)網(wǎng)關(guān)。
或者再稍微往工業(yè)領(lǐng)域上走一些，實現(xiàn)一個可以二次開發(fā)的工業(yè)網(wǎng)關(guān)。
目前只是有這個模糊的想法，具體做成什么樣子還有待更詳細的計劃。
寫這個網(wǎng)關(guān)的目的有兩個:
通過Lua語言來深入的理解一門【語言】，而不僅僅是使用一門語言。
實現(xiàn)一個基本上可以在生產(chǎn)環(huán)節(jié)可用的代碼模型。
這兩個目的基本上符合我的定位：讓有意思的事情變得更有意義。
言歸正傳，回到這篇文章的主題：從頭開始，一步一步搭建一個靜態(tài)的個人網(wǎng)站。
為什么會有這個網(wǎng)站
作為一個嵌入式軟件開發(fā)者來說，搭一個網(wǎng)站有點是不務(wù)正業(yè)的。
但是作為一名廣義上的程序員，又經(jīng)常對互聯(lián)網(wǎng)領(lǐng)域的一些技術(shù)心生向往，于是就有了這個破網(wǎng)站。
最主要的初衷是：
在工作的過程中，經(jīng)常需要參考一些常用的工具，比如：
- 查找ASCII碼;
- 查詢 shell 指令;
- 時間戳轉(zhuǎn)換;
- 格式化 Json/xml 等文檔;
- 。。。
每次在遇到上面這些需求時，總是需要去麻煩搜索引擎；即使把一些工具站點保存在收藏夾中，還需要按照分類區(qū)點擊、打開。
所以我就想：是否可以寫一個簡單的、靜態(tài)的頁面，把自己經(jīng)常使用的工具、鏈接都放進去，每次需要使用的時候，就打開這個頁面就可以了。
換句話說，這個網(wǎng)站的最大作用就是：工具導(dǎo)航。
市面上也有很多這樣的工具導(dǎo)航網(wǎng)站的。
后來發(fā)現(xiàn)，我也會經(jīng)常去翻一下自己寫的文章，于是就把所有的文章進行分類，然后也放到網(wǎng)站上。
于是，我就開始用三腳貓的web技術(shù)搗鼓這個網(wǎng)站...
我們知道，現(xiàn)在已經(jīng)有很多現(xiàn)成的一鍵建站工具了，就像黑盒測試一下，我們只需要把自己的資料按照指定的格式、流程輸入進去，一個漂亮的頁面就立刻出現(xiàn)在面前。
但是作為一名軟件開發(fā)者，還是希望能夠偷窺一下這里面的一些細節(jié)。
在互聯(lián)網(wǎng)領(lǐng)域，我也是一名門外漢。所以就拋棄了很多現(xiàn)代的、方便的工具，從最基本的html、javascript、css開始，一步一個腳印的把一個靜態(tài)的個人網(wǎng)站給攢起來。
如果要部署一個動態(tài)網(wǎng)站，那需要掌握的東西就多了去了：java、jsp、maven、mysql、mybatis、spring那一套。
當然，為了避免最后的結(jié)果太難看，我也充分地“借鑒”了bootstrap前端開發(fā)框架，因為它簡潔、直觀、強悍，并且提供了很多免費的、漂亮的主題框架。
預(yù)覽幾個頁面
網(wǎng)站的缺陷
在貼出頁面之前，先說一下幾個缺點：
- 圖片太多，導(dǎo)致加載的速度太慢。
我已經(jīng)把所有的圖片放在七牛的圖床上了，也啟用了CDN節(jié)點來緩存頁面，但是其中有幾個大圖片影響了加載速度。
下面是PageSpeed Insights對網(wǎng)站的測試結(jié)果：
從測試結(jié)果中可以看到，主要還是圖片惹的禍。
我已經(jīng)把所有的圖片換成.webp格式了，但是其中幾張大的圖片影響了加載速度。我也不準備優(yōu)化了，因為下面第2個原因。
- 添加新的內(nèi)容時，操作步驟太多。
前文說過，這個網(wǎng)站的主要目的還是自用，所以會經(jīng)常添加新的內(nèi)容，比如：看到了特別棒的網(wǎng)站，需要把鏈接添加進去。
由于在網(wǎng)站導(dǎo)航布局中，為了美化一下，使用一個小圖片放在站點上。
因此每次添加時，需要下面幾個步驟才能完成：
- 對目標網(wǎng)站進行截圖;
- 把png格式的圖片轉(zhuǎn)成 .webp 格式;
- 把圖片傳入到七牛的圖床上(需要登錄、打開目標位置、選圖片、上傳);
- 修改靜態(tài)的html頁面;
- 上傳到web服務(wù)器;
- 更新CDN緩存節(jié)點內(nèi)容;
以上這個步驟想想都覺得很煩，而且無法用自動化的腳本來實現(xiàn)。
基于以上這些原因，后面會重新部署一下，還是以實用主義為主。
不管怎樣，這里還是把目前網(wǎng)站的頁面貼幾張截圖，下個月可能就被撤掉了，以后也能偶爾回憶一下~~
網(wǎng)站搭建過程
1. 服務(wù)器
如果把站點部署在公網(wǎng)上，肯定需要買一個服務(wù)器。
國內(nèi)的話就那么三家，選擇便宜、文檔、使用人數(shù)多的買就行了。
我使用的服務(wù)器是之前一個項目中用來測試MQTT性能的，后來廢棄不用了，第一年費用不到一百元。
購買服務(wù)器的時候，需要選擇操作系統(tǒng)，這里使用的是Ubuntu18.04。
2. 域名
為了便于記憶，最好注冊一個域名。
現(xiàn)在的域名很便宜，普通的域名大概30元/年，主要就是域名備案需要花一些時間。
現(xiàn)在備案方便多了，直接在手機上就可以完成。
很久以前的備案，還需要郵寄一塊背景幕布，專門用來拍照用。
域名備案完成之后，就可以綁定購買的服務(wù)器IP地址了，也就是域名解析。
順便把80端口也打開，因為下面需要通過這個端口來訪問站點。
3. html + js + css
因為目標是一個靜態(tài)網(wǎng)站，所以基本上粗略的掌握上面這三部分的知識點就足夠了。
另外，為了美化一下界面，使用了bootstrap這個前端框架，而且它還提供了很多漂亮的模板。
于是，在攢的過程中，我就把每一個模板中被我使用的部分摘抄出來，組裝在一起，形成了最后的界面。
下面這張圖是文件結(jié)構(gòu)：
在寫代碼的時候，使用的軟件是WebStorm，我覺得挺好用！
4. 圖片轉(zhuǎn)換
很多網(wǎng)站使用的圖片都是webp?格式，它的圖像壓縮算法比較好，有更小的文件體積，而且保持很高的圖片質(zhì)量，支持Alpha透明以及動畫等特點。
這里主要貼一下如何是用谷歌轉(zhuǎn)換工具，批量的把png?格式的圖片轉(zhuǎn)換成webp格式。
以下步驟是在MAC下操作
(1) 下載libwebp的庫
brew install webp
(2) 下載轉(zhuǎn)換工具，解壓
libwebp-0.6.0-mac-10.12.tar.gz
下載地址：https://storage.googleapis.com/downloads.webmproject.org/releases/webp/index.html
(3) 轉(zhuǎn)換單張圖片
./cwebp -lossless 輸入圖像路徑 -o 輸出圖像路徑
(4) 批量轉(zhuǎn)換多張圖片
#!/bin/bash
CMD=/<絕對路徑>/libwebp-0.6.0-mac-10.12/bin/cwebp
for file in *.png
do
${CMD} -lossless "$file" -o "${file%.*}.webp"
done
5. 安裝 web 服務(wù)器
可選的web?服務(wù)器有很多，常用的有tomcat、apache、nginx，當然還有很多其它的選擇，都有各自的特點。
感興趣的朋友可以去搜一下它們各自使用的場景，我最后選擇的時nginx，安裝命令很簡單：
sudo apt-get install nginx安裝好的文件位置：
- /usr/sbin/nginx：主程序
- /etc/nginx： 配置文件
- /usr/share/nginx：靜態(tài)文件
- /var/log/nginx： 日志
當然，如果要更清楚 Nginx?的配置項放在什么地方，可以打開文件/etc/nginx/nginx.conf 看一下。
如果想手動安裝的話，步驟如下：
sudo apt-get install libpcre3 libpcre3-dev
apt-get install openssl
apt-get install zlib1g-dev
wget http://nginx.org/download/nginx-1.11.3.tar.gz
cd nginx-1.11.3/
./configure
make
make install
啟動、停止服務(wù)的相關(guān)命令：
sudo service nginx {start|stop|restart|reload|force-reload|status|configtest|rotate|upgrade}
在啟動nginx?之后，就可以在瀏覽器中測試一下安裝是否成功，如果一切順利的話，可以看到nginx的默認頁面。
6. 站點部署
最簡單的操作，就是直接把本地寫好的站點代碼直接推送到/var/www/html目錄下即可。
為了更靈活的部署(比如：在一個服務(wù)器上部署多個站點)，最好創(chuàng)建站點獨立的目錄。
nginx?的配置文件位于：/etc/nginx，如下所示：
比較重要的是目錄sites-available和sites-enabled。
目錄中包括：
請忽略這里的 https，那是為了測試 ssl 訪問而設(shè)置的。
配置文件：/etc/nginx/sites-available/linuxbar.net的內(nèi)容是：
也就是說：所有的文件是放在/var/www/linuxbar.net/html目錄下。
因此創(chuàng)建這個文件，并且把步驟3中的所有文件推送到這個目錄下即可，最終部署的所有文件如下：
小結(jié)
完成以上步驟之后，就可以在本地瀏覽器中輸入域名，然后就可以看到漂亮的網(wǎng)站了！
7. 使用圖床
在上面的第6步中，把所有的文件都放在了站點中，包括圖片文件。
當瀏覽器訪問站點的時候，所有的文件(特別是圖片)都直接從web服務(wù)器的鏈路里獲取，浪費流量。
可以利用一些免費的圖床來存放圖片文件，瀏覽器獲取html?文件之后，加載圖片時，就從圖床中獲取圖片文件，大大減少了web服務(wù)器的壓力。
我使用的是七牛的圖床，因此把所有圖片上傳到圖床上，然后把html文件中對圖片的鏈接全部修改一下就可以了。
當然了，也可以選擇其他的圖床工具，很多免費的(收費的也很便宜)。
8. 使用 CDN 加速
在上面第二步：綁定域名和IP?地址的時候，使域名直接解析到對應(yīng)的web?服務(wù)器所在的IP地址。
可以利用CDN域名加速功能，來提升訪問速度，提高用戶體驗。設(shè)置如下：
配置完成之后，會得到一個cname?，然后在域名解析設(shè)置中把域名指向這個cname即可：
完成這個設(shè)置之后，在瀏覽器中輸入域名，將會訪問CDN節(jié)點。
當然了，如果節(jié)點中沒有內(nèi)容，將會訪問web服務(wù)器，把最新的頁面緩存起來，然后再返回給瀏覽器。
總結(jié)
這篇文章從一個初學(xué)者的角度，來描述如何從零開始建一個靜態(tài)頁面的個人網(wǎng)站。
