使用坚固的github页面-DEV365 开发者社区

您可能已经听说或可能还没有听说过Solid Start，这是当前正在使用Beta的Solid.js即将到来的元元框架。

可靠开始的宝贵功能之一是，您可以使用所谓的“适配器”将输出完全更改为可部署的东西，这些东西基本上可以在任何地方提供页面，并且有很多选择：amazon web services，cloudflare pages有一些适配器和workers，deno deploy，netlify，Standard node server（默认值），vercel和静态部署 - 后者允许我们构建可以在github pages上构建的东西。

创建您的项目

为了创建这样的项目，您可以创建您的目录，并从内部使用

npm init solid@latest
npm add --save-dev solid-start-static
npm remove solid-start-node

（如果您更喜欢的话，请使用pnpm create/add/remove而不是npm），然后选择要用于项目的任何模板。

不幸的是，在撰写本文时，存在一个问题，可以防止基本路径的初始水合与固体启动0.2.20及更早的根不同。如果您使用的是较新版本，则很可能已经到位了，您可以跳过该部分和continue below。

要修补固体启动，创建一个名为solid-start-use-base-path-in-client-router.patch的文件，其中包括以下内容：

diff --git a/node_modules/solid-start/entry-client/StartClient.tsx b/node_modules/solid-start/entry-client/StartClient.tsx
index c17a8e5f..6569d504 100644
--- a/node_modules/solid-start/entry-client/StartClient.tsx
+++ b/node_modules/solid-start/entry-client/StartClient.tsx
@@ -83,7 +83,7 @@ export default () => {
   return (
     <ServerContext.Provider value={mockFetchEvent}>
       <MetaProvider>
-        <StartRouter data={dataFn}>
+        <StartRouter base={import.meta.env.BASE_URL} data={dataFn}>
           <Root />
         </StartRouter>
       </MetaProvider>

然后添加一个应用补丁的postinstall脚本（期望您在路径中有patch）到package.json：

{
  "scripts": {
    "postinstall": "patch -Np1 -i solid-start-use-base-path-in-client-router.patch"
  }
}

更新到包含修复程序的软件包后，您可以安全地删除脚本和补丁文件。如果邮政安装步骤失败，则可能是这种情况。

安装依赖项

设置软件包后，安装依赖项：

npm install  # or pnpm install

配置VITE

接下来，您需要在vite.config.js/ts中配置vite，以便将输出塑造成在github页面上工作的东西：

import solid from "solid-start/vite";
import static from "solid-start-static";
import { defineConfig } from "vite";

export default defineConfig({
  base: "/my-project/",
  // insert your github project name between slashes above
  plugins: [solid({ adapter: static() })],
});

创建一个github操作以部署页面

最后，创建一个文件.github/workflows/main.yml并添加以下操作：

name: CI

  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v3

      - name: install
        run: npm i --legacy-peer-deps

      - name: build
        run: npm run build

      - name: deploy pages
        uses: JamesIves/github-pages-deploy-action@v4.4.1
        with:
          branch: gh-pages
          folder: dist/public

推到您的存储库，等待动作完成（在项目的Actions选项卡中查看）。

为您的项目启用GitHub页面

动作完成后，

转到您的项目的GitHub页面，然后在此处转到settings Tab
在左菜单中，选择pages
对于branch，选择gh-pages和/ (Root)

最多需要几秒钟。之后，您可以使用Solid-Start Project查看您刚部署的GitHub页面。

快乐黑客！