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
更多相關文章
  • C++類開發第二篇（淺析構造函數和析構函數）
    class_2 構造函數 構造函數是一種特殊的成員函數，用於創建和初始化類的對象。它的名稱與類的名稱相同，沒有返回值，也不需要顯式調用。在C++中，每個類都必須至少有一個構造函數。 當我們創建一個類的對象時，編譯器會自動調用構造函數來初始化該對象的成員變數。構造函數可以執行一些操作，如初始化成員變數 ...
  • 探索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鎖存在的必要性 要認識java鎖，就必須對2個前置概念有一個深刻的理解：多線程和共用資源。 對於程式來說，數據就是資源。 在單個線程操作數據時，或快或慢不存在什麼問題，一個人你愛乾什麼乾什麼。 多個線程操作各自操作不同的數據，各乾各的，也不存在什麼問題。 多個線程對共用數據進行讀取操作， ...
  • 讀了啥：JVM記憶體調優
    讀了啥 周志明的深入理解Java虛擬機中的調優案例。 第一個案例 背景 一個網站部署在JVM上，而Java堆大小固定在了12G，但是總會出現長時間無法響應的情況。 使用了吞吐量優先收集器：可能是Parallel Scavenge和Parallel Old收集器。 問題 網站直接從磁碟拷貝文檔到堆記憶體 ...
  • 電腦網路抓包實戰
    電腦網路作為一門電腦專業課，平時都是各種抽象的協議和各種發送接收，很難具體的去感受其含義，因此也是藉助wireshark對發送的包進行一個分析。 ...
  • 深入淺出Java多線程(九)：synchronized與鎖
    大家好，我是你們的老伙計秀才！今天帶來的是[深入淺出Java多線程]系列的第九篇內容：synchronized與鎖。大家覺得有用請點贊，喜歡請關註！秀才在此謝過大家了！！！ ...
  • 雲計算 - 對象存儲服務OSS技術全解
    本文全面深入地探討了對象存儲服務（OSS）的核心技術、基礎知識和高級功能。從媒體存儲到數據備份，再到數據倉庫與數據湖，我們不僅解析了OSS在各種應用場景下的關鍵角色，還深入討論了其與機器學習、多媒體處理以及日誌和監控等多個開發場景的結合。 關註【TechLeadCloud】，分享互聯網架構、雲服務技 ...
  • 打造個性化日曆：Python編程實現，選擇適合你的方式！
    通過本文，我們使用Python編寫了一個簡單的日曆程式。在Python官方文檔中，我們找到了一個名為"calendar"的模塊，它可以輕鬆實現一個簡易的日曆，滿足基本需求。此外，我們還介紹了Tkinter和PyQt兩個常用的圖形用戶界面庫，以及borax庫和其他一些開源項目來實現更多功能和用戶體驗的... ...
一周排行
    -Advertisement-
    Play Games
  • 實用接地氣的 .NET 微服務框架
    前言 微服務架構已經成為搭建高效、可擴展系統的關鍵技術之一，然而，現有許多微服務框架往往過於複雜，使得我們普通開發者難以快速上手並體驗到微服務帶了的便利。為瞭解決這一問題，於是作者精心打造了一款最接地氣的 .NET 微服務框架，幫助我們輕鬆構建和管理微服務應用。 本框架不僅支持 Consul 服務註 ...
  • 基於surging的木舟IOT平臺如何添加網路組件
    先看一下效果吧: 如果不會寫動畫或者懶得寫動畫，就直接交給Blend來做吧; 其實Blend操作起來很簡單，有點類似於在操作PS，我們只需要設置關鍵幀，滑鼠點來點去就可以了，Blend會自動幫我們生成我們想要的動畫效果. 第一步：要創建一個空的WPF項目 第二步：右鍵我們的項目，在最下方有一個，在B ...
  • Prism:框架介紹與安裝
    Prism:框架介紹與安裝 什麼是Prism? Prism是一個用於在 WPF、Xamarin Form、Uno 平臺和 WinUI 中構建鬆散耦合、可維護和可測試的 XAML 應用程式框架 Github https://github.com/PrismLibrary/Prism NuGet htt ...
  • 不可不知的WPF畫筆（Brush）
    在WPF中，屏幕上的所有內容，都是通過畫筆（Brush）畫上去的。如按鈕的背景色，邊框，文本框的前景和形狀填充。藉助畫筆，可以繪製頁面上的所有UI對象。不同畫筆具有不同類型的輸出（ 如：某些畫筆使用純色繪製區域，其他畫筆使用漸變、圖案、圖像或繪圖）。 ...
  • .NET 8 高併發微服務電商系統實戰
    前言 嗨，大家好！推薦一個基於 .NET 8 的高併發微服務電商系統，涵蓋了商品、訂單、會員、服務、財務等50多種實用功能。 項目不僅使用了 .NET 8 的最新特性，還集成了AutoFac、DotLiquid、HangFire、Nlog、Jwt、LayUIAdmin、SqlSugar、MySQL、 ...
  • 基於surging 如何利用peerjs進行語音視頻通話
    本文主要介紹攝像頭（相機）如何採集數據，用於類似攝像頭本地顯示軟體，以及流媒體數據傳輸場景如傳屏、視訊會議等。 攝像頭採集有多種方案，如AForge.NET、WPFMediaKit、OpenCvSharp、EmguCv、DirectShow.NET、MediaCaptre（UWP），網上一些文章以及 ...
  • [WPF]數據綁定時為何會出現StringFormat失效
    前言 Seal-Report 是一款.NET 開源報表工具，擁有 1.4K Star。它提供了一個完整的框架，使用 C# 編寫，最新的版本採用的是 .NET 8.0 。 它能夠高效地從各種資料庫或 NoSQL 數據源生成日常報表，並支持執行複雜的報表任務。 其簡單易用的安裝過程和直觀的設計界面，我們 ...
  • NET Core 多身份校驗與策略模式
    背景需求： 系統需要對接到XXX官方的API，但因此官方對接以及管理都十分嚴格。而本人部門的系統中包含諸多子系統，系統間為了穩定，程式間多數固定Token+特殊驗證進行調用，且後期還要提供給其他兄弟部門系統共同調用。 原則上：每套系統都必須單獨接入到官方，但官方的接入複雜，還要官方指定機構認證的證書 ...
  • C#自定義控制項—轉換開關
    本文介紹下電腦設備關機的情況下如何通過網路喚醒設備，之前電源S狀態 電腦Power電源狀態- 唐宋元明清2188 - 博客園 (cnblogs.com) 有介紹過遠程喚醒設備，後面這倆天瞭解多了點所以單獨加個隨筆 設備關機的情況下，使用網路喚醒的前提條件： 1. 被喚醒設備需要支持這WakeOnL ...
  • .NET 8.0 前後分離快速開發框架
    前言 大家好，推薦一個.NET 8.0 為核心，結合前端 Vue 框架，實現了前後端完全分離的設計理念。它不僅提供了強大的基礎功能支持，如許可權管理、代碼生成器等，還通過採用主流技術和最佳實踐，顯著降低了開發難度，加快了項目交付速度。 如果你需要一個高效的開發解決方案，本框架能幫助大家輕鬆應對挑戰，實 ...
所有分類