GitHub 페이지 및 상대 경로
gh-pagesGitHub에서 작업중인 프로젝트 의 브랜치를 만들었습니다 .
Sublime 텍스트를 사용하여 웹 사이트를 로컬로 작성하고 내 문제는 이것이 GitHub로 푸시되면 javascrips, 이미지 및 CSS 파일에 대한 모든 링크가 유효하지 않다는 것입니다.
예를 들어, 나는 이것을 내 머리 부분에 가지고 있습니다.
<link href="assets/css/common.css" rel="stylesheet">
이것은 로컬에서 훌륭하게 작동하지만 URL의 일부로 저장소 이름을 사용하여 링크가 확인되지 않으므로 GitHub에서 작동하지 않습니다.
다음을 요구합니다.
http://[user].github.io/assets/css/common.css
요청해야 할 때 :
http://[user].github.io/[repo]/assets/css/common.css.
물론 리포지토리 이름을 URL의 일부로 넣을 수는 있지만 개발 중에 내 사이트가 로컬로 작동하지 못하게됩니다.
이 문제를 처리하는 방법을 아십니까?
어떤 브라우저를 사용하고 있습니까? 이것이 일어나는 것이 확실합니까? 안 되니까요. 링크에 상대 URL을 포함하면 링크가 포함 된 문서의 URL을 기준으로 확인됩니다. 즉, 다음을 포함하면
<link href="assets/css/common.css" rel="stylesheet">
의 HTML 문서에서 http://www.foo.com/bar/doc.html에 대한 링크 assets/css/common.css는 경로의 마지막 부분없이 (없이 doc.html) HTML 문서의 URL 접두사에 추가하여 해결됩니다 . 즉, 링크는 http://www.foo.com/bar/assets/css/common.css로 확인 http://www.foo.com/assets/css/common.css됩니다.
예를 들어 Twitter Bootstrap 웹 페이지의 소스를보십시오 : http://twitter.github.io/bootstrap/ . 으로 지정된 스타일 링크가 맨 위에 있습니다 <link href="assets/css/bootstrap.css" rel="stylesheet">. 해당 링크는로 올바르게 해석됩니다 http://twitter.github.io/bootstrap/assets/css/bootstrap.css. 즉, 저장소 이름이 포함되어 있습니다.
관련 문서 에서 그대로 복사 :
때로는
gh-pages브랜치를 GitHub로 푸시하기 전에 Jekyll 사이트를 미리 보는 것이 좋습니다 . 그러나 GitHub가 프로젝트 페이지에 사용하는 하위 디렉터리와 유사한 URL 구조는 URL의 적절한 확인을 복잡하게합니다. 다음은username.github.io/project-name/Jekyll 사이트를 로컬에서 미리 볼 수있는 기능을 유지하면서 GitHub 프로젝트 페이지 URL 구조 ( ) 를 활용하는 방법 입니다.
_config.yml에서baseurl옵션을 다음 으로 설정합니다./project-name– 선행 슬래시와 후행 슬래시가 없음을 유의하십시오.JS 또는 CSS 파일을 참조 할 때
{{ site.baseurl}}/path/to/css.css다음과 같이하십시오. – 변수 바로 뒤 ( "path"바로 앞)에 슬래시가 있습니다.영구 링크 또는 내부 링크를 수행 할 때 다음과 같이하십시오.
{{ site.baseurl }}{{ post.url }}– 두 변수 사이에 슬래시가 없습니다.마지막으로를 사용하여 커밋 / 배포하기 전에 사이트를 미리 보려면 옵션에
jekyll serve빈 문자열을 전달하여--baseurl모든 것을localhost:4000정상적으로 볼 수 있도록 하십시오 (시작 부분에 / project-name없이).jekyll serve --baseurl ''이렇게하면 localhost의 사이트 루트에서 로컬로 사이트를 미리 볼 수 있지만 GitHub가
gh-pages브랜치 에서 페이지를 생성하면 모든 URL이/project-name올바르게 시작 되고 확인됩니다.
(분명히 누군가가 이것을 몇 달 전에 알아 냈습니다 .)
3 년 반이 지난 2016 년 12 월에는 더 이상 문제가되지 않습니다. Ben Balter 에서 게시 한 " GitHub 페이지의 상대 링크
"를 참조하십시오 .
한동안 GitHub.com에서 Markdown 을 작성할 때 상대 링크를 사용할 수있었습니다 .
(2013 년 1 월부터)
이제 이러한 링크는 GitHub 페이지 를 통해 게시 될 때 계속 작동 합니다.
의 저장소에 마크 다운 파일이 있고
docs/page.md해당 파일에서에 링크하려는docs/another-page.md경우 다음 마크 업을 사용하면됩니다.
[a relative link](another-page.md)
GitHub.com에서 소스 파일을 볼 때 상대 링크는 이전과 같이 계속 작동하지만 이제 GitHub 페이지를 사용하여 해당 파일을 게시하면 링크가
docs/another-page.html대상 페이지의 게시 된 URL과 일치 하도록 자동으로 번역됩니다. .내부적 으로는 모든 빌드에 대해 기본적으로 활성화되는 오픈 소스 Jekyll Relative Links 플러그인을 사용하고 있습니다 .
GitHub 페이지의 상대 링크
permalink: /docs/page/는 파일의 YAML 서문에있는 사용자 정의 영구 링크 (예 :)를 고려할 뿐만 아니라 프로젝트 페이지의 기본 URL을 적절하게 추가하여 링크가 모든 컨텍스트에서 계속 작동하도록합니다.
그리고 잊지 마세요 2016년 8월 때문에, 당신은 오른쪽에서 페이지를 게시 할 수 있습니다 master지점 (하지 항상 gh-pages지점)
그리고 2016 년 12 월 이후로 는 Jekyll또는 index.md. 간단한 마크 다운 파일이면 충분합니다.
그냥 넣을 수 있습니다
<base href="/[repo]/">
<head>태그 내부에 있으면 문제가 해결됩니다.
다음을 설정하여이 솔루션을 개선 할 수도 있습니다.
<base href="{{ site.baseurl }}/">
그런 다음 site.baseurl로컬 테스트를 위해 빈 문자열 로 설정 합니다.
Github Pages가 반응이 좋지 않은 것 같습니다. 새 파일을 즉시 사용할 수 있지만 수정 된 파일은 캐싱 등으로 인해 즉시 나타나지 않습니다.
15 분 정도 기다리면 모든 것이 정상입니다.
Another option is to create a new repo specifically for the github.io webpages. If you name the repo as [user].github.io on github then it will be published at https://[user].github.io and you can avoid having the repo name in the URL path completely. Obviously the downside is that you can only have 1 repo like this per github user, so it may not suit your needs, I'm not sure.
The best option is now the relative_url filter:
<link href="{{ '/assets/css/common.css' | relative_url }}" rel="stylesheet">
참고URL : https://stackoverflow.com/questions/16316311/github-pages-and-relative-paths
'Programing' 카테고리의 다른 글
| Flask 사용자 인증 (0) | 2020.11.25 |
|---|---|
| Excel : VBA에서 셀이 비어 있는지 확인하는 방법은 무엇입니까? (0) | 2020.11.25 |
| RabbitMQ와 MSMQ 비교 (0) | 2020.11.25 |
| 콘솔 경고 : v-for로 렌더링 된 구성 요소 목록에는 명시 적 키가 있어야합니다. (0) | 2020.11.25 |
| 잘못된 요청 구문이 아닌 논리적 오류에 대한 HTTP 400 (잘못된 요청) (0) | 2020.11.25 |