這篇文章沒(méi)有什么關(guān)于嵌入式的干貨，僅僅是詳細(xì)記錄一下前段時(shí)間搗鼓的一個(gè)靜態(tài)的個(gè)人網(wǎng)站。

最近都沒(méi)有想到什么好的文章方向，下一階段想把之前對(duì)Lua語(yǔ)言的學(xué)習(xí)心得總結(jié)一下，實(shí)現(xiàn)一個(gè)基于插件機(jī)制的物聯(lián)網(wǎng)網(wǎng)關(guān)。

或者再稍微往工業(yè)領(lǐng)域上走一些，實(shí)現(xiàn)一個(gè)可以二次開(kāi)發(fā)的工業(yè)網(wǎng)關(guān)。

目前只是有這個(gè)模糊的想法，具體做成什么樣子還有待更詳細(xì)的計(jì)劃。

寫(xiě)這個(gè)網(wǎng)關(guān)的目的有兩個(gè):

通過(guò)Lua語(yǔ)言來(lái)深入的理解一門【語(yǔ)言】，而不僅僅是使用一門語(yǔ)言。

實(shí)現(xiàn)一個(gè)基本上可以在生產(chǎn)環(huán)節(jié)可用的代碼模型。

這兩個(gè)目的基本上符合我的定位：讓有意思的事情變得更有意義。

言歸正傳，回到這篇文章的主題：從頭開(kāi)始，一步一步搭建一個(gè)靜態(tài)的個(gè)人網(wǎng)站。

為什么會(huì)有這個(gè)網(wǎng)站

作為一個(gè)嵌入式軟件開(kāi)發(fā)者來(lái)說(shuō)，搭一個(gè)網(wǎng)站有點(diǎn)是不務(wù)正業(yè)的。

但是作為一名廣義上的程序員，又經(jīng)常對(duì)互聯(lián)網(wǎng)領(lǐng)域的一些技術(shù)心生向往，于是就有了這個(gè)破網(wǎng)站。

最主要的初衷是：

在工作的過(guò)程中，經(jīng)常需要參考一些常用的工具，比如：

• 查找ASCII碼;
• 查詢 shell 指令;
• 時(shí)間戳轉(zhuǎn)換;
• 格式化 Json/xml 等文檔;
• 。。。

每次在遇到上面這些需求時(shí)，總是需要去麻煩搜索引擎；即使把一些工具站點(diǎn)保存在收藏夾中，還需要按照分類區(qū)點(diǎn)擊、打開(kāi)。

所以我就想：是否可以寫(xiě)一個(gè)簡(jiǎn)單的、靜態(tài)的頁(yè)面，把自己經(jīng)常使用的工具、鏈接都放進(jìn)去，每次需要使用的時(shí)候，就打開(kāi)這個(gè)頁(yè)面就可以了。

換句話說(shuō)，這個(gè)網(wǎng)站的最大作用就是：工具導(dǎo)航。

市面上也有很多這樣的工具導(dǎo)航網(wǎng)站的。

后來(lái)發(fā)現(xiàn)，我也會(huì)經(jīng)常去翻一下自己寫(xiě)的文章，于是就把所有的文章進(jìn)行分類，然后也放到網(wǎng)站上。

于是，我就開(kāi)始用三腳貓的web技術(shù)搗鼓這個(gè)網(wǎng)站...

我們知道，現(xiàn)在已經(jīng)有很多現(xiàn)成的一鍵建站工具了，就像黑盒測(cè)試一下，我們只需要把自己的資料按照指定的格式、流程輸入進(jìn)去，一個(gè)漂亮的頁(yè)面就立刻出現(xiàn)在面前。

但是作為一名軟件開(kāi)發(fā)者，還是希望能夠偷窺一下這里面的一些細(xì)節(jié)。

在互聯(lián)網(wǎng)領(lǐng)域，我也是一名門外漢。所以就拋棄了很多現(xiàn)代的、方便的工具，從最基本的html、javascript、css開(kāi)始，一步一個(gè)腳印的把一個(gè)靜態(tài)的個(gè)人網(wǎng)站給攢起來(lái)。

如果要部署一個(gè)動(dòng)態(tài)網(wǎng)站，那需要掌握的東西就多了去了：java、jsp、maven、mysql、mybatis、spring那一套。

當(dāng)然，為了避免最后的結(jié)果太難看，我也充分地“借鑒”了bootstrap前端開(kāi)發(fā)框架，因?yàn)樗?jiǎn)潔、直觀、強(qiáng)悍，并且提供了很多免費(fèi)的、漂亮的主題框架。

預(yù)覽幾個(gè)頁(yè)面

網(wǎng)站的缺陷

在貼出頁(yè)面之前，先說(shuō)一下幾個(gè)缺點(diǎn)：

• 圖片太多，導(dǎo)致加載的速度太慢。

我已經(jīng)把所有的圖片放在七牛的圖床上了，也啟用了CDN節(jié)點(diǎn)來(lái)緩存頁(yè)面，但是其中有幾個(gè)大圖片影響了加載速度。

下面是PageSpeed Insights對(duì)網(wǎng)站的測(cè)試結(jié)果：

從測(cè)試結(jié)果中可以看到，主要還是圖片惹的禍。

我已經(jīng)把所有的圖片換成.webp格式了，但是其中幾張大的圖片影響了加載速度。我也不準(zhǔn)備優(yōu)化了，因?yàn)橄旅娴?個(gè)原因。

• 添加新的內(nèi)容時(shí)，操作步驟太多。

前文說(shuō)過(guò)，這個(gè)網(wǎng)站的主要目的還是自用，所以會(huì)經(jīng)常添加新的內(nèi)容，比如：看到了特別棒的網(wǎng)站，需要把鏈接添加進(jìn)去。

由于在網(wǎng)站導(dǎo)航布局中，為了美化一下，使用一個(gè)小圖片放在站點(diǎn)上。

因此每次添加時(shí)，需要下面幾個(gè)步驟才能完成：

• 對(duì)目標(biāo)網(wǎng)站進(jìn)行截圖;
• 把png格式的圖片轉(zhuǎn)成 .webp 格式;
• 把圖片傳入到七牛的圖床上(需要登錄、打開(kāi)目標(biāo)位置、選圖片、上傳);
• 修改靜態(tài)的html頁(yè)面;
• 上傳到web服務(wù)器;
• 更新CDN緩存節(jié)點(diǎn)內(nèi)容;

以上這個(gè)步驟想想都覺(jué)得很煩，而且無(wú)法用自動(dòng)化的腳本來(lái)實(shí)現(xiàn)。

基于以上這些原因，后面會(huì)重新部署一下，還是以實(shí)用主義為主。

不管怎樣，這里還是把目前網(wǎng)站的頁(yè)面貼幾張截圖，下個(gè)月可能就被撤掉了，以后也能偶爾回憶一下~~

網(wǎng)站搭建過(guò)程

1. 服務(wù)器

如果把站點(diǎn)部署在公網(wǎng)上，肯定需要買一個(gè)服務(wù)器。

國(guó)內(nèi)的話就那么三家，選擇便宜、文檔、使用人數(shù)多的買就行了。

我使用的服務(wù)器是之前一個(gè)項(xiàng)目中用來(lái)測(cè)試MQTT性能的，后來(lái)廢棄不用了，第一年費(fèi)用不到一百元。

購(gòu)買服務(wù)器的時(shí)候，需要選擇操作系統(tǒng)，這里使用的是Ubuntu18.04。

2. 域名

為了便于記憶，最好注冊(cè)一個(gè)域名。

現(xiàn)在的域名很便宜，普通的域名大概30元/年，主要就是域名備案需要花一些時(shí)間。

現(xiàn)在備案方便多了，直接在手機(jī)上就可以完成。

很久以前的備案，還需要郵寄一塊背景幕布，專門用來(lái)拍照用。

域名備案完成之后，就可以綁定購(gòu)買的服務(wù)器IP地址了，也就是域名解析。

順便把80端口也打開(kāi)，因?yàn)橄旅嫘枰ㄟ^(guò)這個(gè)端口來(lái)訪問(wèn)站點(diǎn)。

3. html + js + css

因?yàn)槟繕?biāo)是一個(gè)靜態(tài)網(wǎng)站，所以基本上粗略的掌握上面這三部分的知識(shí)點(diǎn)就足夠了。

另外，為了美化一下界面，使用了bootstrap這個(gè)前端框架，而且它還提供了很多漂亮的模板。

于是，在攢的過(guò)程中，我就把每一個(gè)模板中被我使用的部分摘抄出來(lái)，組裝在一起，形成了最后的界面。

下面這張圖是文件結(jié)構(gòu)：

在寫(xiě)代碼的時(shí)候，使用的軟件是WebStorm，我覺(jué)得挺好用！

4. 圖片轉(zhuǎn)換

很多網(wǎng)站使用的圖片都是webp?格式，它的圖像壓縮算法比較好，有更小的文件體積，而且保持很高的圖片質(zhì)量，支持Alpha透明以及動(dòng)畫(huà)等特點(diǎn)。

這里主要貼一下如何是用谷歌轉(zhuǎn)換工具，批量的把png?格式的圖片轉(zhuǎn)換成webp格式。

以下步驟是在MAC下操作

(1) 下載libwebp的庫(kù)

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=/<絕對(duì)路徑>/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，當(dāng)然還有很多其它的選擇，都有各自的特點(diǎn)。

感興趣的朋友可以去搜一下它們各自使用的場(chǎng)景，我最后選擇的時(shí)nginx，安裝命令很簡(jiǎn)單：

sudo apt-get install nginx

安裝好的文件位置：

• /usr/sbin/nginx：主程序
• /etc/nginx： 配置文件
• /usr/share/nginx：靜態(tài)文件
• /var/log/nginx： 日志

當(dāng)然，如果要更清楚 Nginx?的配置項(xiàng)放在什么地方，可以打開(kāi)文件/etc/nginx/nginx.conf 看一下。

如果想手動(dòng)安裝的話，步驟如下：

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

啟動(dòng)、停止服務(wù)的相關(guān)命令：

sudo service nginx {start|stop|restart|reload|force-reload|status|configtest|rotate|upgrade}

在啟動(dòng)nginx?之后，就可以在瀏覽器中測(cè)試一下安裝是否成功，如果一切順利的話，可以看到nginx的默認(rèn)頁(yè)面。

6. 站點(diǎn)部署

最簡(jiǎn)單的操作，就是直接把本地寫(xiě)好的站點(diǎn)代碼直接推送到/var/www/html目錄下即可。

為了更靈活的部署(比如：在一個(gè)服務(wù)器上部署多個(gè)站點(diǎn))，最好創(chuàng)建站點(diǎn)獨(dú)立的目錄。

nginx?的配置文件位于：/etc/nginx，如下所示：

比較重要的是目錄sites-available和sites-enabled。

目錄中包括：

請(qǐng)忽略這里的 https，那是為了測(cè)試 ssl 訪問(wèn)而設(shè)置的。

配置文件：/etc/nginx/sites-available/linuxbar.net的內(nèi)容是：

也就是說(shuō)：所有的文件是放在/var/www/linuxbar.net/html目錄下。

因此創(chuàng)建這個(gè)文件，并且把步驟3中的所有文件推送到這個(gè)目錄下即可，最終部署的所有文件如下：

小結(jié)

完成以上步驟之后，就可以在本地瀏覽器中輸入域名，然后就可以看到漂亮的網(wǎng)站了！

7. 使用圖床

在上面的第6步中，把所有的文件都放在了站點(diǎn)中，包括圖片文件。

當(dāng)瀏覽器訪問(wèn)站點(diǎn)的時(shí)候，所有的文件(特別是圖片)都直接從web服務(wù)器的鏈路里獲取，浪費(fèi)流量。

可以利用一些免費(fèi)的圖床來(lái)存放圖片文件，瀏覽器獲取html?文件之后，加載圖片時(shí)，就從圖床中獲取圖片文件，大大減少了web服務(wù)器的壓力。

我使用的是七牛的圖床，因此把所有圖片上傳到圖床上，然后把html文件中對(duì)圖片的鏈接全部修改一下就可以了。

當(dāng)然了，也可以選擇其他的圖床工具，很多免費(fèi)的(收費(fèi)的也很便宜)。

8. 使用 CDN 加速

在上面第二步：綁定域名和IP?地址的時(shí)候，使域名直接解析到對(duì)應(yīng)的web?服務(wù)器所在的IP地址。

可以利用CDN域名加速功能，來(lái)提升訪問(wèn)速度，提高用戶體驗(yàn)。設(shè)置如下：

配置完成之后，會(huì)得到一個(gè)cname?，然后在域名解析設(shè)置中把域名指向這個(gè)cname即可：

完成這個(gè)設(shè)置之后，在瀏覽器中輸入域名，將會(huì)訪問(wèn)CDN節(jié)點(diǎn)。

當(dāng)然了，如果節(jié)點(diǎn)中沒(méi)有內(nèi)容，將會(huì)訪問(wèn)web服務(wù)器，把最新的頁(yè)面緩存起來(lái)，然后再返回給瀏覽器。

總結(jié)

這篇文章從一個(gè)初學(xué)者的角度，來(lái)描述如何從零開(kāi)始建一個(gè)靜態(tài)頁(yè)面的個(gè)人網(wǎng)站。