① 靜態網站生成工具-hugo
前段時間使用docker搭建了一個wiki的網站,用於記錄日常學習中的筆記,用了一段時間,功能很強大,但是編輯器不太熟悉,網站使用java開發的,功能很全面,插件多的時候就感覺越來越臃腫。曾經有段時間就不想使用它了,最近偶然發現一個靜態網站的生成工具hugo,可以將markdown直接生成網站,部署到站點上作為自己的知識庫或者博客,hugo是使用go語言開發的,使用起來非常方便,生成的網站可直接部署在Nginx、IIS等中間件上面供其他人訪問,hugo還有很多漂亮的主題,大家可以選擇自己喜歡的進行使用,下面介紹下 我安裝使用hugo的經歷和方法。
1)使用brew install命令安裝
我的電腦是mac的,所以最方便的是直接用brew install hugo命令安裝最為方便:
執行安裝完成後執行hugo version 命令查看版本,確保安裝成功
2)官網下載二進制包:解壓後將二進制文件加入環境變數的方式安裝。大家可以根據自己的操作系統,下載適合的安裝包。
3)也可以下載源碼 編譯 運行,由於我本地的go版本是1.17的,而hugo的最新代碼的最低要求是1.18,暫時還不想升級,所以源碼編譯的方式這里就不過多介紹,感興趣讓差鉛的可以下坦好載源碼編譯試試。
進入要創建網站的目錄慶核,執行一下命令
這樣名稱為test-blog的網站就建好了 ,
下載一個主題 可以在 官網上找到各種各樣的主題
將主體添加至配置文件
打開content/posts目錄下的index.md 文件進行編輯,頁面的配置項說明參見官網
執行下面命令
成功以後就可以訪問http://localhost:1313/就可以訪問網站了。
執行命令hugo -D 即可生成一個public的文件夾,其下面的內容即為靜態網站的所有文件
這里使用nginx的docker鏡像 進行部署,執行以下命令:
執行成功後就能通過http:localhost訪問到靜態網站了。
這個工具還有很多需要研究的地方,這里只是將簡單的使用方法記錄了一下,以後怎樣使用才能使網站更加的方便,快捷、美觀,還要花時間研究。有興趣的小夥伴可以私信我一塊研究。
② CODING 靜態網站
在 cong.net 部署靜態博客,跟 github 是不一樣的,這里簡單記錄一下。叢銷桐以謝益輝的 hugo-xmag 博客主題為例。
在導航欄的 「 構建與部署 」 中選擇 「 靜態網站 」,點擊「 直接發布靜態網站 」。
填寫網站名稱,然後 " 保存 "。
" 保存 " 後,在部署頁面點擊 " 立即部署 "。
部署成功後,通過訪問地址可以打開靜態的網站。
在項目導航欄 "構建與部署" → "靜態網站" 頁面,點擊右上角的 "設置" 按鈕。
在 "設置" 頁面,填寫需要綁定的域名,並選擇強制 https 訪問。
在域名解析中添加一條滲坦 CNAME 記錄。
域名解析 CNAME 添加後,等待幾分鍾,直至證書狀態為「正常」。如果證書狀態失敗,檢查你的 CNAME 記錄,並再嘗試多重新申斗悉請幾次。
最後,通過域名訪問,一切正常。
③ 使用Nginx搭建靜態網站
開始建站了,暫時還沒想要做些什麼東西。
Anyway,先搞個雲伺服器吧,那要怎麼搭建呢?先來個最簡單的。
Nginx 配置文件目錄一般在 /etc/nginx/ 下,打開 nginx.conf 文件可以看到配置:
當外網用戶訪問伺服器 Web 服務由 Nginx 提供,Nginx 需要配置靜態資源的路徑信息才能通過 URL 正確訪問到伺服器上的靜態資源。
當我們在伺服器上安裝並啟動 Nginx 之後,就可宏枝以通過 http://<域名或IP> 訪問我們的網頁了。所以,在瀏覽器中輸入 http://100.2.3.4 即可。
我們觀察到瀏覽器的地址變成了 http://100.2.3.4/index.html ,這頁面是安裝 Nginx 的默認站點,可以在 /usr/share/nginx/html 目錄下找到。在 nginx.conf 配置文件中,有一項 root /usr/share/nginx/html 的配置,意思是當外網訪問伺服器 跟目錄 時,Nginx 會將資源指向 /usr/share/nginx/html 的站點。
但如果輸入地址,無法打開(如下截圖)。
以阿里雲為例,需要在雲伺服器添加 「安全組規則」 ,添加並保存,重新刷新頁面就能打開了。
我習慣將前端靜態資源滾絕兄放置到伺服器的 /data/www 下,因此將配置修改為 root /data/www 。此時訪問 http://100.2.3.4 會指向 /data/www/index.html (在不配置 location 的 index 情況下,Nginx 默認配置是 index.html )。
由於我使用的是 Mac 機器,因此可以直接在系統終端使用 scp 命令將本地文件上傳到雲伺服器。
scp (secure )用於在 Linux 下進行遠程拷貝文件的命令。大襲類似於 cp ,只不過 cp 只能在本機進行拷貝,不能跨伺服器。 -r 表示遞歸復制整個目錄。
需要注意一下,下面兩種的區別:
其中 1️⃣ 得到的是 /data/www/dist ,而 2️⃣ 得到的是 /data/www 。前者表示將 dist 整個目錄拷貝至 /data/www 下。後者是把 dist 目錄下的所有子文件和子目錄都拷貝至 /data/www 。
換句話說就是,前者配置 root 的路徑應該是 /data/www/dist ,後者則為 /data/www 。
效果如下:
在瀏覽器中訪問 http://100.2.3.4 即可看到我們配置的網頁了。
最簡單的 Nginx 部署靜態網頁就完了,其他的下次再講...
The end.