48从零开始用Rust编写nginx，搭建一个简单又好看官方网站 ...

wmproxy

wmproxy已用Rust实现http/https代理, socks5代理, 反向代理, 负载均衡, 静态文件服务器，websocket代理，四层TCP/UDP转发，内网穿透等，会将实现过程分享出来，感兴趣的可以一起造个轮子
项目地址

国内: https://gitee.com/tickbh/wmproxy
github: https://github.com/tickbh/wmproxy
设计目标

设计高可用的自定义的官网，可在自定义的情况下又可以快速的创建好官网。在官网文档的同时可能会夹杂博客功能等。
平台选型

一开始选择的是博客平台，VanBlog，平台部署也非常的的简单。
仅仅运行一行脚本即可以完成安装：

1. 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。
通常会设置淘宝的国内源新地址

1. http://www.npmmirror.com/

复制代码

此处我们不想用cnpm，仅仅只设置了代理

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

复制代码

这样子就可以在不改变npm命令的情况下拥有相当快的下载速度。
通过命令行创建示例项目

1. npm init vuepress vuepress-starter

复制代码

通过npm install安装依赖项目
通过run docs:dev启动本地开发环境

1. npm run docs:dev

复制代码

通过run docs:build启动本地打包，打包后的文件默认在.vuepress/dist中

1. npm run docs:build

复制代码

添加mermaid支持

项目中因存在许多流程图文件，需添加mermaid支持，通过查询插件市场，寻找支持的插件发现vuepress-plugin-md-enhance支持v2版本的md扩展支持，安装依赖

1. npm i vuepress-plugin-md-enhance
2. npm i mermaid

复制代码

然后在配置中添加

1. import { mdEnhancePlugin } from "vuepress-plugin-md-enhance";
3. export default defineUserConfig({
4.   plugins: [
5.     mdEnhancePlugin({
6.       // 启用 mermaid
7.       mermaid: true,
8.     }),
9.   ],
10. };

复制代码

即可启用mermaid支持，我们在任意的md中添加如下代码

1. flowchart LR
2.     我 -->|尝试| 使用wmproxy -->|简单易用| 喝杯咖啡
3.    

复制代码

本地搜索功能

相对我们的文档相对简单，且数据量不会太大，可以用本地化的搜索插件来完成。这里我们选择plugin-search-pro来进行支持。
添加支持：

1. npm i -D plugin-search-pro

复制代码

然后在配置里添加

1. import { searchProPlugin } from "vuepress-plugin-search-pro";
2. export default defineUserConfig({
3.   plugins: [
4.     searchProPlugin({
5.       customFields: [
6.         {
7.           name: "author",
8.           getter: (page) => page.frontmatter.author,
9.           formatter: "作者：$content",
10.         },
11.       ],
12.     }),
13.   ],
14. });

复制代码

点右上角的搜索即可索引相关的路径：

添加统一的页眉页脚文件

我们可能在每个文章页统一引入前缀和后缀，那么我们不可能重复的书写相同的文字，此时我们需要用引入文件的形式来进行处理。此时我们用的也是md插件：

1. mdEnhancePlugin({
2.   // 启用导入支持
3.   include: true,
4. }),

复制代码

我们就可以在任意的md文件中引入就可以导入该文件内容在我们的文章页插入了。方便重复内容的引用。
其它功能

其它功能如添加导航条，logo，显示，内容，多语言等可以参考官方文档。
打包发布

我们已经构建完文档的内容，我们开始着手打包项目。
我们使用npm run docs:build，运行完后就可以在dist目录下找到打包好的文件。

接下来我们需要一个文件服务系统在web进行部署即可完成官网的布置。
布置文件服务器

安装docker服务

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

复制代码

利用docker pull dreamwhat/wmproxy获取镜像。
我们利用wmproxy服务来进行文件服务器，利用file-server的子命令

1. Usage: wmproxy.exe file-server [-r=ARG] [-l=ARG] [--listen-ssl=ARG] [--cert=ARG] [--key=ARG] [-d=ARG]
2. [-b] [--robots=ARG] [--path404=ARG] [-c=ARG] [-e=ARG]... [--cors] [-H=ARG]... [--access-log=ARG] [--control
3. =ARG] [--disable-stdout] [--disable-control] [--daemon] [--forever] [-v] [--default-level=ARG] [--pidfile
4. =ARG]
6. Available options:
7.     -r, --root=ARG           静态文件根目录路径
8.     -l, --listen=ARG         监听地址
9.                              [default: 127.0.0.1:8869]
10.         --listen-ssl=ARG     监听地址
11.         --cert=ARG           ssl证书cert
12.         --key=ARG            ssl证书key
13.     -d, --domain=ARG         域名地址
14.     -b, --browse             是否支持目录
15.         --robots=ARG         设置robots.txt返回
16.         --path404=ARG        设置404文件返回
17.     -c, --cache-time=ARG     设置robots.txt返回
18.     -e, --ext-mimetype=ARG   设置robots.txt返回
19.         --cors               通过"Access-Control-Allow-Origin"标头启用 CORS
20.     -H, --header=ARG         头部信息修改如 "proxy x-forward-for {client_ip}"
21.         --access-log=ARG     访问日志放的位置如"logs/access.log trace"
22.         --control=ARG        输入控制台的监听地址
23.                              [default: 127.0.0.1:8837]
24.         --disable-stdout     禁用默认输出
25.         --disable-control    禁用控制微端
26.         --daemon             后台运行
27.         --forever            守护程序运行，正常退出结束
28.     -v, --verbose            是否显示更多日志
29.         --default-level=ARG  设置默认等级
30.         --pidfile=ARG        写入进程id文件
31.     -h, --help               Prints help information

复制代码

我们将同时支持http及https的支持，且我们将配置404出错时的文件，那么我们的命令将是：

1. 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文件如下

1. version: '3.5'
2. services:
4.   wmproxy_client:
5.     container_name: wmproxy_client_docker        # 指定容器的名称
6.     image: dreamwhat/wmproxy:latest
7.     command:
8.       - sh
9.       - -c
10.       - |
11.         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
12.     ports:
13.       - "80:80"
14.       - "443:443"
15.     volumes:
16.       - ./key/:/source/key:rw
17.       - ./dist/:/source/dist:rw
19. networks:
20.   default:
21.     name: wmproxy-network

复制代码

然后我们就可以访问我们的美美的官网啦。


完美适配小屏幕大屏幕，官网网址当然现在还是粗糙版本。
总结

一个项目总该配一个官网，从现在开始配一个可以自定义的官网，vuepress可以帮助我们搞一个好看的官网。
点击 [关注]，[在看]，[点赞] 是对作者最大的支持

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！