如何将Blazor发布到Cloudflare Pages上

Blazor是一个非常好用的网页框架；而Cloudflare Pages是一个和Github Pages不相上下的网页托管平台。但是Cloudflare Pages默认只支持静态网页。这是一件很可惜的事情。但是，我们仍然可以让Cloudflare Pages成功托管Blazor网页。

前期准备

在跟着本教程进行操作之前，您需要确保你拥有：

• Cloudflare账户
• Github 账户
• Blazor WebAssembly项目(重点)

Blazor项目不是Blazor WebAssembly怎么办

如果你的项目不是(或者你不确定是不是)Blazor WebAssembly，可以跟着本二级章节章进行操作。

如何确定你的项目是不是Blazor WebAssembly

如果您不确定您的项目是不是Blazor WebAssembly，可以查看您项目的./wwwroot文件夹，如果文件夹中自项目创建以来就包含./index.html文件(后期手动添加不算)，那么恭喜您，您的项目确实是Blazor WebAssembly。

如何将Blazor Server项目修改为Blazor WebAssembly项目

如果您是在Visual Studio上进行开发，请创建一个名为"Blazor WebAssembly 应用空"的项目；如果您不是，请在任意位置创建一个空文件夹，并在这个文件夹里执行以下命令以创建一个空的Blazor WebAssembly项目：

dotnet new blazorserver-empty

之后将你旧的的项目放到新的项目中。Blazor Server项目与Blazor WebAssembly项目的差别不大，但与Blazor Server不同，Blazor WebAssembly项目运行在客户端上。所以有些Blazor Server上的代码放在Blazor WebAssembly上会出错。

配置网站

对于将Blazor WebAssembly配置到Cloudflare Pages上，有两种方法：

1. 本地编译之后直接将输出文件夹中的./wwwroot上传到Cloudflare Pages上。
2. 将项目删去./bin和./obj文件夹，然后上传到Github储存库，在通过Cloudflare Pages链接该储存库从线上配置。

看上去第一种方法貌似是最快的。但是，实际上Blazor WebAssembly项目编译后有高达200个文件，除非你家网速非常好，否则不建议尝试；而第二种方法只需要上传20的左右的文件(具体看你项目的大小)即可，但Github上能上传的单个文件必须小于25MB。本文重点讲解后者。

使用Github为媒介进行Cloudflare Pages的配置

首先，删去你项目中的./bin和./obj文件夹，因为这两个文件夹实在是太大了。不用担心，这两个文件夹都是编译后遗留下来的垃圾。

然后，将你项目的所属的文件夹(这在之后的内容中用Floder表示)上传到Github的储存库上。这样如果网站要更新，就可以直接从储存库把旧的Floder删了，然后再删去Floder中的./bin和./obj文件夹并将Floder上传，就能快速更新网站了。Cloudflare会自动重新配置网站。

打开Cloudflare，登录，点击左侧边栏中的 Workers和Pages 。如果你创建过Cloudflare Pages，那么请点击 创建应用程序。然后你应该就会看到以下内容：
然后，请点击界面上方的 Pages 按钮，可以参考上图寻找。此时会弹出来另一个页面，点击页面中央的 连接到Git，然后选择一个储存库点击 开始设置。没有事先配置Git账户的需要先链接账户，才能继续选择储存库。

接着，在弹出来的界面里，将以下代码复制到构建命令的输入框中。

curl -sSL https://dot.net/v1/dotnet-install.sh > dotnet-install.sh;
chmod +x dotnet-install.sh;
./dotnet-install.sh -c 7.0 -InstallDir ./dotnet;
./dotnet/dotnet --version;
./dotnet/dotnet publish -c Release -o output

由于构建命令的输入框只有单行，所以每行命令直接必须用分号隔开。复制的时候，Cloudflare会自动将其合并为单行。以上指令默认将你的项目版本认为成7.0，如果你的项目版本不是7.0，请将以上指令第三行的7.0修改为你项目的版本。

再者，将构建输出目录设置为"output/wwwroot"，点击根目录下拉面板，将里面的路径设置为Floder的名称，不用再前面加"./"。

最后，点击保存并部署。完成！