Github 페이지로 배포하시겠습니까?링크 고치는 거 잊지 마세요.

본고는 최초로 하루 전에 발표되었다https://maximorlov.com/deploying-to-github-pages-dont-forget-to-fix-your-links/
Github 페이지에 배치된 후에도 사이트가 계속 실행됩니까?
공백 페이지나 홈페이지가 잘 보이지만, 링크를 클릭하면 아무 일도 일어나지 않습니다.dev inspector를 팝업하면 404 상태 코드만 발견할 수 있습니다.
이것은 많은 개발자들에게서 일어난다. 이 사이트는 localhost에서 잘 운영되지만, Github 페이지에 배치된 후에 모든 것이 중단되었다.
핵심 문제를 이해하면 Github 페이지뿐만 아니라 미래의 모든 배치에서 이를 발견하고 방지할 수 있습니다.
이 문제를 조사하여 당신의 사이트가 생산 과정에서 예상대로 일을 하도록 하겠습니다.

루트 상대 링크란 무엇입니까?

Github 페이지에 배치할 때 링크가 자주 끊어지는 이유를 이해하기 위해서는 우선 루트 상대 링크가 무엇인지 알아야 한다.
루트 상대 링크1는 정사각형(/으로 시작하는 링크입니다.를 클릭하면 루트 상대 링크가 현재 URL의 경로 위치를 무시합니다.URL의 어떤 부분이 경로입니까?도메인 이후의 모든 컨텐츠예를 들어, 다음 URL의 경로https://example.com/blog/articles는 /blog/articles입니다.
루트 상대 링크는 항상 현재 도메인의 동일한 경로를 가리킵니다.다음 예제를 고려하십시오.

<!--
    Root-relative links ignore the current URL and always lead
    to the same path within the current domain
-->

<!-- Current location: https://example.com/ -->
<a href="/awesome-post"> <!-- leads to: https://example.com/awesome-post -->

<!-- Current location: https://example.com/blog -->
<a href="/awesome-post"> <!-- leads to: https://example.com/awesome-post -->

<!-- Current location: https://example.com/blog/articles -->
<a href="/awesome-post"> <!-- leads to: https://example.com/awesome-post -->

루트 상대 링크 및 Github 페이지

우리가 한 사이트를 서로 다른 경로 위치로 이동할 때, 뿌리는 상대적으로 연결되지 않는 활성을 나타낸다.
만약 당신의 글이 https://example.com/<article-slug>에 위탁되어 있다면, 당신은 그것들을 사이트의 전용 블로그 부분으로 옮기기로 결정합니다.당신의 글은 현재 https://example.com/blog/<article-slug>에 있습니다.만약 당신이 그 페이지에서 다른 문장으로 연결된다면, 예를 들어 <a href="/awesome-post">, 링크는 낡은 위치 https://example.com/awesome-post 를 가리키며, 그것은 이미 존재하지 않는다.
루트 상대 링크는 현재 경로를 무시하고 위치 변경을 따르지 않습니다.
로컬 개발 사이트에서 Github 페이지 2 에 배치할 때도 마찬가지입니다.사이트의 위치가 루트 / 에서 프로젝트의 저장소 이름으로 변경됩니다.

이미지, CSS, JS 파일 등 당신의 자산을 포함한 모든 것을 새 위치에서 찾을 수 있습니다.로컬 호스트에서 가리키는 링크/awesome-article는 생산에서 가리켜야 합니다/my-project/awesome-article.

모든 링크에 접두사 추가

이 문제를 해결하려면 모든 링크 앞에 항목의 저장소 이름을 추가해야 합니다.다행히도 대부분의 정적 사이트 생성기와 프레임워크는 구축 과정에서 이를 설정할 수 있기 때문에 수동으로 설정할 필요가 없습니다.

개츠비

개츠비에서 pathPrefix 값을 gatsby-config.js 에 추가합니다.

// Configure Gatsby to prefix all links with the Github repository name
module.exports = {
  pathPrefix: '/my-project',
}

그런 다음 응용 프로그램을 구축할 때 다음과 같이 --prefix-paths 플래그를 명령에 추가합니다.

gatsby build --prefix-paths

이 로고를 추가하지 않으면, 개츠비는 루트 경로에 맡기는 것처럼 설정을 무시합니다.
파일: https://www.gatsbyjs.org/docs/path-prefix/

React 응용 프로그램 만들기

Create React App을 사용하여 pathPrefix 파일의 homepage 속성에 구성합니다.

"homepage": "https://username.github.io/my-project",

이 옵션을 사용하면 Create React App이 생성된 HTML에서 사용할 위치를 추정합니다.
React Router v4 이상의 버전을 사용하는 경우 package.json 구성 요소를 접두사로 추가 구성해야 합니다. 예:

<BrowserRouter basename={process.env.PUBLIC_URL}>
    <Link to="/awesome-post">
</BrowserRouter>

Create React App은 <Router> 설정에서 경로 위치를 추출하고 <Link> 환경 변수를 통해 제공합니다.
파일: https://create-react-app.dev/docs/deployment#building-for-relative-paths

다음회사 명

Update: With the release of Next.js 9.5, prefixing all links is much easier than it used to be. You can use the basePath configuration in your next.config.js file. If you're using older versions of Next.js, you can follow the steps below.

다음 페이지에서js, 먼저 <BrowserRouter> 구성을 homepage 파일에 추가합니다.

const pathPrefix = process.env.NODE_ENV === 'production'
    ? '/my-project'
    : '';

module.exports = {
  assetPrefix: pathPrefix,
  env: {
    pathPrefix,
  },
};

응용 프로그램에서 다시 사용할 수 있도록 환경 변수에 접두사를 할당해야 합니다.불행히도 다음.js는 PUBLIC_URL 구성 요소에 접두사를 추가하는 간단한 방법을 제공하지 않았습니다.수동으로 조작해야 합니다. 가장 좋은 방법은 assetPrefix 구성 요소를 만들고 전체 응용 프로그램에서 사용하는 것입니다.

import Link from 'next/link';

const PrefixedLink = ({ href, as = href, children, ...props }) => (
  <Link
        href={href}
        as={`${process.env.pathPrefix}${as}`}
        {...props}
    >
    {children}
  </Link>
);

export default PrefixedLink;

응용 프로그램의 모든 구성 요소 next.config.js 를 <Link> 로 바꾸십시오. 이미 모두 설정되어 있을 것입니다.
파일: https://nextjs.org/docs/api-reference/next.config.js/cdn-support-with-asset-prefix

Vue

Vue에서 저장소 이름을 링크의 접두사로 사용하는 것은 매우 간단합니다.<PrefixedLink> 에서 올바른 <Link> 을 설정해야 합니다.

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/my-project/' // note the trailing slash
    : '/',
};

이 설정은 프로덕션에만 적용되므로 로컬 호스트에서 개발 워크플로우를 중단하지 않습니다.
파일: https://cli.vuejs.org/guide/deployment.html#github-pages

왜 상대 링크를 사용하지 않습니까?

너는 우리가 왜 상대적인 링크를 사용하지 않는지 생각할 수 있다.예를 들어 <PrefixedLink> 링크는 사이트의 디렉터리 깊이publicPath가 여러 개 있더라도 현재 경로 위치를 존중합니다.
상대 링크를 사용하는 단점은 HTML5 히스토리 API에 의존하는 클라이언트 라우팅을 파괴한다는 것입니다.너는 그것을 직접 사용하지 않았을 수도 있지만, 반응 공유기, Vue 공유기, 다음.js와 게이츠비는 모두 엔진 뚜껑 아래에서 그것을 사용한다.클라이언트 라우팅은 브라우저를 새로 고치지 않고 다른 페이지로 이동할 수 있도록 하는 단일 페이지 응용 프로그램의 핵심입니다.
만약 당신의 사이트가 한 페이지 응용 프로그램이 아니라 클라이언트의 루트에 관심이 없다면,React 응용 프로그램과 Vue를 만들어서 상대적인 링크를 선택할 수 있습니다.
React 공유기 v6는 본문을 작성할 때alpha 버전에 있습니다. 상대적인 링크와 클라이언트 루트를 지원할 예정입니다.이것은 우리가 상자에서 휴대용 프로그램을 꺼내서 끊어진 링크를 걱정할 필요가 없다는 것을 의미하기 때문에 좋은 소식이다.

숙련된 노드가 되다.js 개발자

화요일마다 솔리드 노드 구축에 대한 알림이 담긴 이메일을 보냅니다.js 응용 프로그램.만약 당신이 인터넷 개발자가 되어 나와 함께 당신의 직업 생활을 추진하고 싶다면drop your email here 💌.
루트 상대 링크가 절대 링크라고 잘못 불리는 것을 볼 수 있습니다.절대 체인은 항상 방안/프로토콜(https://)으로 시작하기 때문이다.이러한 혼동은 루트 상대 링크가 URL에 대한 경로 부분에 대한 절대적인 것에서 비롯된다.  technically incorrect
Github 페이지는 사용자 사이트와 프로젝트 사이트를 구분합니다.사용자 사이트는 루트 경로 (vue.config.js 에서 서비스를 제공하지만username라는 저장소에 있어야 합니다.github.io.Github 계정에는 사용자 사이트가 하나만 있습니다.이것이 바로 당신이 프로젝트 사이트를 자주 볼 수 있는 이유입니다. 이것이 바로 본고가 가리키는 것입니다.  ↩