48從零開始用Rust編寫nginx,搭建一個簡單又好看官方網站

来源:https://www.cnblogs.com/wmproxy/p/18009122
-Advertisement-
Play Games

wmproxy wmproxy已用Rust實現http/https代理, socks5代理, 反向代理, 負載均衡, 靜態文件伺服器,websocket代理,四層TCP/UDP轉發,內網穿透等,會將實現過程分享出來,感興趣的可以一起造個輪子 項目地址 國內: https://gitee.com/ti ...


wmproxy

wmproxy已用Rust實現http/https代理, socks5代理, 反向代理, 負載均衡, 靜態文件伺服器,websocket代理,四層TCP/UDP轉發,內網穿透等,會將實現過程分享出來,感興趣的可以一起造個輪子

項目地址

國內: https://gitee.com/tickbh/wmproxy

github: https://github.com/tickbh/wmproxy

設計目標

設計高可用的自定義的官網,可在自定義的情況下又可以快速的創建好官網。在官網文檔的同時可能會夾雜博客功能等。

平臺選型

一開始選擇的是博客平臺,VanBlog,平臺部署也非常的的簡單。
僅僅運行一行腳本即可以完成安裝:

curl -L https://vanblog.mereith.com/vanblog.sh -o vanblog.sh && chmod +x vanblog.sh && ./vanblog.sh

如果博客的內容也非常的豐富,功能也很強大,如果用來搭建個人的博客平臺完全ok。
但是如果用來弄官網主頁,博客類型的不太適合,還得重新做選擇平臺。

後續繼續尋找合適平臺:

ekyll:一個非常流行的靜態網站生成器,特別適合用於個人博客。它與GitHub Pages緊密集成,可以輕鬆托管。許多現成的Jekyll主題包含文檔頁面。

Hugo:一個用Go語言編寫的快速靜態網站生成器。它有一個活躍的社區,提供大量的主題和模板,其中一些專為文檔和博客設計。
Hexo:一個快速、簡單且強大的博客框架,使用Node.js編寫。Hexo擁有豐富的插件和主題,易於集成文檔頁面。
Docusaurus:由Facebook維護,專為文檔網站設計,但也可以用作博客。Docusaurus支持Markdown,易於撰寫內容,並提供版本控制功能。
Gatsby:一個現代網站框架,使用React構建。Gatsby不僅適用於博客,還適用於更複雜的網站。很多Gatsby模板都包含了文檔頁面。
VuePress:VuePress是以Vue驅動的靜態網站生成器,非常適合編寫技術文檔,並可以用於創建個人博客。
Pelican:使用Python編寫的靜態網站生成器,適用於博客和個人網站。支持Markdown和reStructuredText格式。
MkDocs:一個用Python編寫的靜態網站生成器,專註於項目文檔創建,但也可以用於構建個人博客。

最終選型

最終在選擇的時候選擇了由vue開發的VuePress,且選擇的是他的V2版本,但是目前V2還沒有進入到非常的完整的階段。

他的官方文檔地址為docs

通常會設置淘寶的國內源新地址

http://www.npmmirror.com/

此處我們不想用cnpm,僅僅只設置了代理

npm config set registry https://registry.npmmirror.com

這樣子就可以在不改變npm命令的情況下擁有相當快的下載速度。

通過命令行創建示例項目

npm init vuepress vuepress-starter

通過npm install安裝依賴項目

通過run docs:dev啟動本地開發環境

npm run docs:dev

通過run docs:build啟動本地打包,打包後的文件預設在.vuepress/dist

npm run docs:build

添加mermaid支持

項目中因存在許多流程圖文件,需添加mermaid支持,通過查詢插件市場,尋找支持的插件發現vuepress-plugin-md-enhance支持v2版本的md擴展支持,安裝依賴

npm i vuepress-plugin-md-enhance
npm i mermaid 

然後在配置中添加

import { mdEnhancePlugin } from "vuepress-plugin-md-enhance";

export default defineUserConfig({
  plugins: [
    mdEnhancePlugin({
      // 啟用 mermaid
      mermaid: true,
    }),
  ],
};

即可啟用mermaid支持,我們在任意的md中添加如下代碼


flowchart LR
    我 -->|嘗試| 使用wmproxy -->|簡單易用| 喝杯咖啡
    

image.png

本地搜索功能

相對我們的文檔相對簡單,且數據量不會太大,可以用本地化的搜索插件來完成。這裡我們選擇plugin-search-pro來進行支持。
添加支持:

npm i -D plugin-search-pro

然後在配置里添加

import { searchProPlugin } from "vuepress-plugin-search-pro";
export default defineUserConfig({
  plugins: [
    searchProPlugin({
      customFields: [
        {
          name: "author",
          getter: (page) => page.frontmatter.author,
          formatter: "作者:$content",
        },
      ],
    }),
  ],
});

點右上角的搜索即可索引相關的路徑:

image.png

添加統一的頁眉頁腳文件

我們可能在每個文章頁統一引入首碼和尾碼,那麼我們不可能重覆的書寫相同的文字,此時我們需要用引入文件的形式來進行處理。此時我們用的也是md插件:

mdEnhancePlugin({
  // 啟用導入支持
  include: true,
}),

我們就可以在任意的md文件中引入<!-- @include: ./../common/footer.md -->就可以導入該文件內容在我們的文章頁插入了。方便重覆內容的引用。

其它功能

其它功能如添加導航條,logo,顯示,內容,多語言等可以參考官方文檔。

打包發佈

我們已經構建完文檔的內容,我們開始著手打包項目。
我們使用npm run docs:build,運行完後就可以在dist目錄下找到打包好的文件。
image.png
接下來我們需要一個文件服務系統在web進行部署即可完成官網的佈置。

佈置文件伺服器

安裝docker服務

curl -fsSL https://get.docker.com -o get-docker.sh
sudo sh get-docker.sh --mirror Aliyun

利用docker pull dreamwhat/wmproxy獲取鏡像。

我們利用wmproxy服務來進行文件伺服器,利用file-server的子命令

Usage: wmproxy.exe file-server [-r=ARG] [-l=ARG] [--listen-ssl=ARG] [--cert=ARG] [--key=ARG] [-d=ARG]
[-b] [--robots=ARG] [--path404=ARG] [-c=ARG] [-e=ARG]... [--cors] [-H=ARG]... [--access-log=ARG] [--control
=ARG] [--disable-stdout] [--disable-control] [--daemon] [--forever] [-v] [--default-level=ARG] [--pidfile
=ARG]

Available options:
    -r, --root=ARG           靜態文件根目錄路徑
    -l, --listen=ARG         監聽地址
                             [default: 127.0.0.1:8869]
        --listen-ssl=ARG     監聽地址
        --cert=ARG           ssl證書cert
        --key=ARG            ssl證書key
    -d, --domain=ARG         功能變數名稱地址
    -b, --browse             是否支持目錄
        --robots=ARG         設置robots.txt返回
        --path404=ARG        設置404文件返回
    -c, --cache-time=ARG     設置robots.txt返回
    -e, --ext-mimetype=ARG   設置robots.txt返回
        --cors               通過"Access-Control-Allow-Origin"標頭啟用 CORS
    -H, --header=ARG         頭部信息修改如 "proxy x-forward-for {client_ip}"
        --access-log=ARG     訪問日誌放的位置如"logs/access.log trace"
        --control=ARG        輸入控制台的監聽地址
                             [default: 127.0.0.1:8837]
        --disable-stdout     禁用預設輸出
        --disable-control    禁用控制微端
        --daemon             後臺運行
        --forever            守護程式運行,正常退出結束
    -v, --verbose            是否顯示更多日誌
        --default-level=ARG  設置預設等級
        --pidfile=ARG        寫入進程id文件
    -h, --help               Prints help information

我們將同時支持http及https的支持,且我們將配置404出錯時的文件,那麼我們的命令將是:

wmproxy file-server -r /source/dist --listen 0.0.0.0:80 --listen-ssl 0.0.0.0:443 --path404 /source/dist/404.html --cert /source/key/wmproxy.net.pem --key /source/key/wmproxy.net.key

完整的docker-compose文件如下

version: '3.5'
services:

  wmproxy_client:
    container_name: wmproxy_client_docker        # 指定容器的名稱
    image: dreamwhat/wmproxy:latest
    command:
      - sh
      - -c
      - |
        wmproxy file-server -r /source/dist --listen 0.0.0.0:80 --listen-ssl 0.0.0.0:443 --path404 /source/dist/404.html --cert /source/key/wmproxy.net.pem --key /source/key/wmproxy.net.key
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - ./key/:/source/key:rw
      - ./dist/:/source/dist:rw

networks:
  default:
    name: wmproxy-network

然後我們就可以訪問我們的美美的官網啦。

image.png

image.png
完美適配小屏幕大屏幕,官網網址當然現在還是粗糙版本。

總結

一個項目總該配一個官網,從現在開始配一個可以自定義的官網,vuepress可以幫助我們搞一個好看的官網。

點擊 [關註][在看][點贊] 是對作者最大的支持


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • class_2 構造函數 構造函數是一種特殊的成員函數,用於創建和初始化類的對象。它的名稱與類的名稱相同,沒有返回值,也不需要顯式調用。在C++中,每個類都必須至少有一個構造函數。 當我們創建一個類的對象時,編譯器會自動調用構造函數來初始化該對象的成員變數。構造函數可以執行一些操作,如初始化成員變數 ...
  • Java Math Java 的 Math 類 擁有許多方法,允許您在數字上執行數學任務。 常用方法: Math.max(x, y): 找到 x 和 y 的最大值 Math.min(x, y): 找到 x 和 y 的最小值 Math.sqrt(x): 返回 x 的平方根 Math.abs(x): 返 ...
  • 一、java鎖存在的必要性 要認識java鎖,就必須對2個前置概念有一個深刻的理解:多線程和共用資源。 對於程式來說,數據就是資源。 在單個線程操作數據時,或快或慢不存在什麼問題,一個人你愛乾什麼乾什麼。 多個線程操作各自操作不同的數據,各乾各的,也不存在什麼問題。 多個線程對共用數據進行讀取操作, ...
  • 讀了啥 周志明的深入理解Java虛擬機中的調優案例。 第一個案例 背景 一個網站部署在JVM上,而Java堆大小固定在了12G,但是總會出現長時間無法響應的情況。 使用了吞吐量優先收集器:可能是Parallel Scavenge和Parallel Old收集器。 問題 網站直接從磁碟拷貝文檔到堆記憶體 ...
  • 電腦網路作為一門電腦專業課,平時都是各種抽象的協議和各種發送接收,很難具體的去感受其含義,因此也是藉助wireshark對發送的包進行一個分析。 ...
  • 大家好,我是你們的老伙計秀才!今天帶來的是[深入淺出Java多線程]系列的第九篇內容:synchronized與鎖。大家覺得有用請點贊,喜歡請關註!秀才在此謝過大家了!!! ...
  • 本文全面深入地探討了對象存儲服務(OSS)的核心技術、基礎知識和高級功能。從媒體存儲到數據備份,再到數據倉庫與數據湖,我們不僅解析了OSS在各種應用場景下的關鍵角色,還深入討論了其與機器學習、多媒體處理以及日誌和監控等多個開發場景的結合。 關註【TechLeadCloud】,分享互聯網架構、雲服務技 ...
  • 通過本文,我們使用Python編寫了一個簡單的日曆程式。在Python官方文檔中,我們找到了一個名為"calendar"的模塊,它可以輕鬆實現一個簡易的日曆,滿足基本需求。此外,我們還介紹了Tkinter和PyQt兩個常用的圖形用戶界面庫,以及borax庫和其他一些開源項目來實現更多功能和用戶體驗的... ...
一周排行
    -Advertisement-
    Play Games
  • 在C#中使用SQL Server實現事務的ACID(原子性、一致性、隔離性、持久性)屬性和使用資料庫鎖(悲觀鎖和樂觀鎖)時,你可以通過ADO.NET的SqlConnection和SqlTransaction類來實現。下麵是一些示例和概念說明。 實現ACID事務 ACID屬性是事務處理的四個基本特征, ...
  • 我們在《SqlSugar開發框架》中,Winform界面開發部分往往也用到了自定義的用戶控制項,對應一些特殊的界面或者常用到的一些局部界面內容,我們可以使用自定義的用戶控制項來提高界面的統一性,同時也增強了使用的便利性。如我們Winform界面中用到的分頁控制項、附件顯示內容、以及一些公司、部門、菜單的下... ...
  • 在本篇教程中,我們學習瞭如何在 Taurus.MVC WebMVC 中進行數據綁定操作。我們還學習瞭如何使用 ${屬性名稱} CMS 語法來綁定頁面上的元素與 Model 中的屬性。通過這些步驟,我們成功實現了一個簡單的數據綁定示例。 ...
  • 是在MVVM中用來傳遞消息的一種方式。它是在MVVMLight框架中提供的一個實現了IMessenger介面的類,可以用來在ViewModel之間、ViewModel和View之間傳遞消息。 Send 接受一個泛型參數,表示要發送的消息內容。 Register 方法用於註冊某個對象接收消息。 pub ...
  • 概述:在WPF中,通過EventHandler可實現基礎和高級的UI更新方式。基礎用法涉及在類中定義事件,併在UI中訂閱以執行更新操作。高級用法藉助Dispatcher類,確保在非UI線程上執行操作後,通過UI線程更新界面。這兩種方法提供了靈活而可靠的UI更新機制。 在WPF(Windows Pre ...
  • 概述:本文介紹了在C#程式開發中如何利用自定義擴展方法測量代碼執行時間。通過使用簡單的Action委托,開發者可以輕鬆獲取代碼塊的執行時間,幫助優化性能、驗證演算法效率以及監控系統性能。這種通用方法提供了一種便捷而有效的方式,有助於提高開發效率和代碼質量。 在軟體開發中,瞭解代碼執行時間是優化程式性能 ...
  • 概述:Cron表達式是一種強大的定時任務調度工具,通過配置不同欄位實現靈活的時間規定。在.NET中,Quartz庫提供了簡便的方式配置Cron表達式,實現精準的定時任務調度。這種靈活性和可擴展性使得開發者能夠根據需求輕鬆地制定和管理定時任務,例如每天備份系統日誌或其他重要操作。 Cron表達式詳解 ...
  • 概述:.NET提供多種定時器,如System.Windows.Forms.Timer適用於UI,System.Web.UI.Timer用於Web,System.Diagnostics.Timer用於性能監控,System.Threading.Timer和System.Timers.Timer用於一般 ...
  • 問題背景 有同事聯繫我說,在生產環境上,訪問不了我負責的common服務,然後我去檢查common服務的health endpoint, 沒問題,然後我問了下異常,timeout導致的System.OperationCanceledException。那大概率是客戶端的問題,會不會是埠耗盡,用ne ...
  • 前言: 在本篇 Taurus.MVC WebMVC 入門開發教程的第四篇文章中, 我們將學習如何實現數據列表的綁定,通過使用 List<Model> 來展示多個數據項。 我們將繼續使用 Taurus.Mvc 命名空間,同時探討如何在視圖中綁定並顯示一個 Model 列表。 步驟1:創建 Model ...