github 页面的路径

Question

我一直在为此努力。我收到错误 404 /Quest/questlist.txt。

我现在用的就是这个

 ``// QuestCarousel.tsx
    import React, { useState, useEffect } from "react";
    import { Carousel } from "@mantine/carousel";
    import { TextInput } from "@mantine/core";
    import "./index.css";
    import { NavLink } from "react-router-dom";

     const QUEST_FILE_PATH = "/dist/Quests/questlist.txt";

     const QuestCarousel: React.FC = () => {
     const [questList, setQuestList] = useState<string[]>([]);
     const [searchQuery, setSearchQuery] = useState<string>("");
    //const overlayDuration = 10000; // 10 seconds

    useEffect(() => {
        fetchQuestList();
    }, []);

    const fetchQuestList = async () => {
        try {
            const response = await fetch(`${QUEST_FILE_PATH}`);
            const text = await response.text();
            const quests = text.split(",");
            setQuestList(quests);
            console.log(quests);
        } catch (error) {
            console.error("Error fetching quest list:", error);
        }
    };

    const filteredQuests = questList.filter((quest) =>
        quest.toLowerCase().includes(searchQuery.toLowerCase())
    );
    function handleSearchChange(event: React.ChangeEvent<HTMLInputElement>) {
        setSearchQuery(event.target.value);
    }
    return (
        <>
            <div>
                <TextInput
                    label="Search for Quest"
                    placeholder="Type in a quest"
                    size="md"
                    value={searchQuery}
                    onChange={handleSearchChange}
                />
            </div>

            <div className="carousel-container">
                <Carousel maw={320} mx="auto" withIndicators height={200}>
                    {filteredQuests.map((quest, index) => {
                        let questTEdit = quest.toLowerCase().split(" ");
                        let pattern = /[!,`']/g;
                        let modifiedQuestVal1 = questTEdit
                            .join("")
                            .replace(pattern, "");

                        return (
                            <Carousel.Slide key={index}>
                                <NavLink
                                    to={"/QuestPage"}
                                    state={{
                                        questName: quest,
                                        modified: modifiedQuestVal1,
                                    }}
                                >
                                    {quest}
                                </NavLink>
                            </Carousel.Slide>
                        );
                    })}
                </Carousel>
            </div>
        </>
    );
};

export default QuestCarousel;`
`

我用过：

`/../dist/questlist.txt`
`/../../dist/questlist.txt`
`./questlist.txt`

我正在使用 Jekyll 来部署我的网站：

`# Sample workflow for building and deploying a Jekyll site to GitHub Pages
name: Deploy Jekyll with GitHub Pages dependencies preinstalled

on:
    # Runs on pushes targeting the default branch
    push:
        branches: ["master"]

    # Allows you to run this workflow manually from the Actions tab
    workflow_dispatch:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
    contents: read
    pages: write
    id-token: write

# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
    group: "pages"
    cancel-in-progress: false

jobs:
    # Build job
    build:
        runs-on: ubuntu-latest
        steps:
            - name: Checkout
              uses: actions/checkout@v3

            # Debugging Step 1: List the contents of the directory
            - name: List Contents
              run: ls -R

            - name: Setup Pages
              uses: actions/configure-pages@v3

            # Debugging Step 3: Print environment variables
            - name: Print Environment Variables
              run: env

            - name: Build with Jekyll
              uses: actions/jekyll-build-pages@v1
              with:
                  source: ./dist
                  destination: ./_site

            # Debugging Step 4: Display the contents of the _site directory
            - name: Display _site Contents
              run: ls -R ./_site

            - name: Upload artifact
              uses: actions/upload-pages-artifact@v2

    # Deployment job
    deploy:
        environment:
            name: github-pages
            url: ${{ steps.deployment.outputs.page_url }}
        runs-on: ubuntu-latest
        needs: build
        steps:
            - name: Deploy to GitHub Pages
              id: deployment
              uses: actions/deploy-pages@v2

`

我进行了调试，以确保一切都在它应该在的位置，并且确实是:')我还将相关文件复制到 ./dist 文件夹，希望它会有所帮助，但它没有

这是我的目录结构（当然它是关闭的:'））

我真的很想修复我的路径，但我无法集中精力。

（自发布以来的小时数） 我一直在继续研究堵塞。

const QUEST_FILE_PATH = () => {
    if (window.location.host.includes("localhost:")) {
        return "/dist/questlist.txt";
    } else {
        return window.location.host + "/dist/questlist.txt";
    }
};

添加了语法来指示其是否使用本地主机并且没有响应

我会继续研究。

Answer 1

所以我花了 2 个半小时解决了这个问题，弄清楚了我的问题是什么，它出现在 YML 配置和一些分配路径的变量中。

# Simple workflow for deploying static content to GitHub Pages
name: Deploy static content to Pages

on:
    # Runs on pushes targeting the default branch
    push:
        branches: ["master"]

    # Allows you to run this workflow manually from the Actions tab
    workflow_dispatch:

# Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
permissions:
    contents: read
    pages: write
    id-token: write

# Allow one concurrent deployment
concurrency:
    group: "pages"
    cancel-in-progress: true

jobs:
    # Single deploy job since we're just deploying
    deploy:
        environment:
            name: github-pages
            url: ${{ steps.deployment.outputs.page_url }}
        runs-on: ubuntu-latest
        steps:
            - name: Checkout
              uses: actions/checkout@v3
            - name: Set up Node
              uses: actions/setup-node@v3
              with:
                  node-version: 18
                  cache: "npm"
            - name: Install dependencies
              run: npm install
            - name: Build
              run: npm run build
            - name: Setup Pages
              uses: actions/configure-pages@v3

            - name: a
              run: cp ./questlist.txt ./dist
            - name: b
              run: cp ./QuestList.json ./dist
            - name: c
              run: mv ./Quests ./dist

            - name: Upload artifact
              uses: actions/upload-pages-artifact@v1
              with:
                  # Upload dist repository
                  path: "./dist"
            - name: Deploy to GitHub Pages
              id: deployment
              uses: actions/deploy-pages@v1