48从零开始用Rust编写nginx，搭建一个简单又好看官方网站
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 -->|简单易用| 喝杯咖啡
本地搜索功能
相对我们的文档相对简单，且数据量不会太大，可以用本地化的搜索插件来完成。这里我们选择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",
},
],
}),
],
});
点右上角的搜索即可索引相关的路径：
添加统一的页眉页脚文件
我们可能在每个文章页统一引入前缀和后缀，那么我们不可能重复的书写相同的文字，此时我们需要用引入文件的形式来进行处理。此时我们用的也是md插件：
mdEnhancePlugin({
// 启用导入支持
include: true,
}),
我们就可以在任意的md文件中引入<!-- @include: ./../common/footer.md -->就可以导入该文件内容在我们的文章页插入了。方便重复内容的引用。
其它功能
其它功能如添加导航条，logo，显示，内容，多语言等可以参考官方文档。
打包发布
我们已经构建完文档的内容，我们开始着手打包项目。
我们使用npm run docs:build，运行完后就可以在dist目录下找到打包好的文件。
接下来我们需要一个文件服务系统在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
然后我们就可以访问我们的美美的官网啦。
完美适配小屏幕大屏幕，官网网址当然现在还是粗糙版本。
总结
一个项目总该配一个官网，从现在开始配一个可以自定义的官网，vuepress可以帮助我们搞一个好看的官网。
点击 [关注]，[在看]，[点赞] 是对作者最大的支持
