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 MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類