다운로드하지 않고 브라우저에서 미리보기를보기 위해 Github의 HTML 페이지를 일반 렌더링 된 HTML 페이지로 보는 방법은 무엇입니까?

355

에 http://github.com 개발자는 프로젝트의 HTML, CSS, 자바 스크립트, 이미지 파일을 보관. 브라우저에서 HTML 출력을 어떻게 볼 수 있습니까?

예를 들면 다음과 같습니다. https://github.com/necolas/css3-social-signin-buttons/blob/master/index.html

이것을 열면 작성자 코드의 렌더링 된 HTML이 표시되지 않습니다. 페이지를 소스 코드로 표시합니다.

렌더링 된 HTML로 직접 볼 수 있습니까? 그렇지 않으면 결과를 보려면 항상 전체 ZIP을 다운로드해야합니다.

html  css  git  github  github-pages 
— 지텐 드라 비야
소스
4
— Amro
1
2019 년 6 월 현재 raw.githack.com 이 가장 편리한 솔루션 인 것 같습니다 ( 위의 질문에 대한 답변 참조 )
— leopold.talirz 2016 년

답변:

455

GitHub에서 HTML 파일을 미리 보는 가장 편한 방법은 https://htmlpreview.github.io/ 로 이동 하거나 원본 URL 앞에 추가하는 것입니다 (예 : https://htmlpreview.github.io/?https://). github.com/bartaz/impress.js/blob/master/index.html

— 니우 테크
소스
@Denis : 어떤 브라우저와 어떤 URL을 사용하고 있습니까? 현재로서는 Webkit 및 Gecko 브라우저 만 지원합니다.
— niutech
32
이것은 공개 리포지토리에서만 작동합니다. 개인은 오류 메시지를 표시합니다Error: Cannot load file
— Erik Trautman
37
htmlpreview.github.com 이 JavaScript 및 CSS 렌더링에 부분적으로 실패합니다. 대체 rawgit.com 이 더 잘 작동하여 적절한 Content-Type 헤더가있는 파일을 제공합니다.
— Julien Carsique
1
좋은 해결책, 감사합니다! 접두사가 README.md 파일 인 R 노트북에 대한 링크를 추가했으며 내 nb.html 파일을 잘 렌더링합니다. : 다음의 경우 사람의 페이지가 어떻게 작동하는지보고 싶어입니다 github.com/sargdavid/snippets.cvi 및 htmlpreview.github.io/?https://github.com/sargdavid/...
— 대빗 Sargsyan
1
이 솔루션과 같은, 그러나 우리는 여전히이가 지금까지 년 12 월 2018 마지막 날에 작업을 중지 stackoverflow.com/a/8446391/860099
— 카밀 Kiełczewski
85

아카이브를 다운로드하지 않으려면 GitHub 페이지 를 사용하여이를 아카이브 할 수 있습니다 .

  1. 저장소를 귀하의 계정으로 포크하십시오.
  2. 머신에서 로컬로 복제
  3. gh-pages분기를 작성하십시오 (이미 존재하는 경우이를 제거하고 off 기준으로 새 분기 작성 master).
  4. 지점을 다시 GitHub로 밉니다.
  5. ` 의 페이지를보십시오http://username.github.io/repo

코드에서 :

git clone git@github.com:username/repo.git
cd repo
git branch gh-pages
# Might need to do this first: git branch -D gh-pages
git push -u origin gh-pages # Push the new branch back to github
Go to http://username.github.io/repo
— 로스
소스
이제 프로젝트를 github 페이지에 복사하는 방법을 포크했습니다.
— Jitendra Vyas
1
프로세스로 내 답변을 업데이트했습니다.
— Ross
3
여기에 잘 정리되어 있습니다. help.github.com/articles/creating-project-pages-manually
— Leif Gruenwoldt
2
먼저 마스터를 생성하고 복제해야하는 이유는 무엇입니까 ( "프로젝트 페이지를 수동으로 생성 할 때 안전하게 재생")? 하나는 할 수 없습니다 checkout --orphan gh-pages 만 , 전혀 마스터와 장난하지 않고, 그 밀어?
— 데니스
4
더 이상 페이지가 github.com이 아닌 github.io로 이동했습니다.
— Damjan Pavlica
64

RawGit 을 사용할 수 있습니다 :
https://rawgit.com/necolas/css3-social-signin-buttons/master/index.html

http://htmlpreview.github.com/ 보다 (이 글을 쓰는 시점에서) 제대로 작동하여 적절한 Content-Type 헤더가있는 파일을 제공합니다. 또한 프로덕션 환경에서 사용할 CDN URL도 제공합니다.

— 줄리앙 카 시크
소스
2
htmlpreview보다 더 잘 작동 함을 확인합니다. 적어도 내 WebGL 애니메이션이 표시됩니다.
— Cyril Duchon-Doris
1
실제로 더 빠르게 작동하며 Bokeh ( 예 :)에서는 htmlpreview에서 작동하지 않는 일부 상호 작용 (예 : 툴팁)이 표시됩니다.
— jadianes
htmlpreview와 마찬가지로 개인 저장소에서는 작동하지 않습니다. Git은? token = <hash>를 추가하여 퍼블릭 URL과 같은 URL을 만들지 만 이러한 도구는 URL을 이해하고 나머지와 함께 GH로 전달해야합니다.
— zakmck
2
이것은 rawgit FAQ에서 온 것입니다 : 프로덕션 웹 사이트 나 공개 예제 코드에서 rawgit.com 개발 URL을 사용할 수 있습니까? 아니요. 트래픽이 적은 테스트 나 개발 중에 소수의 사람들과 임시 데모를 공유 할 때는 rawgit.com URL 만 사용하십시오. 트래픽이 많이 발생하거나 사람들이 자신의 코드에 복사하여 붙여 넣을 수있는 경우 cdn.rawgit.com을 사용하십시오. ... 자세한 설명이 있습니다
— BarryPye
3
확인 가능 : Rawgit은 2019
— samcozmid
34

github pages을 사용하면 정말 쉽습니다 . 처음 할 때는 조금 이상합니다. 니트를 배우는 동안 처음으로 새끼 고양이 3 마리를 저글링해야 할 때와 비슷합니다. (좋아, 나쁘지 않다)

gh-pages 브랜치가 필요합니다 :

기본적으로 github.com은 저장소 의 gh-pages 분기 를 찾습니다 . 여기에서 찾은 모든 HTML 페이지를 일반 HTML로 브라우저에 직접 제공합니다.

이 gh-pages 브랜치를 어떻게 얻습니까?

쉬운. github repo의 지사를 만드십시오 gh-pages. --orphan이 브랜치를 실제로 github 브랜치로 다시 병합하지 않고 HTML 리소스가 포함 된 브랜치를 원할 때이 브랜치를 만들 때 지정 하십시오.

$ git checkout --orphan gh-pages

내 레포에있는 다른 총상은 어떻습니까?

아니, 그냥 가서 삭제할 수 있습니다. 주의를 기울이고 고아 지점을 다시 만들어 기본 지점으로 다시 병합하고 모든 코드를 제거 할 수 없기 때문에 지금은 안전합니다.

지점을 만들었습니다. 이제 무엇입니까?

이 브랜치를 github.com으로 푸시해야 자동화가 자동화되어 이러한 페이지를 호스팅 할 수 있습니다.

git push -u origin gh-pages

그러나 .. 내 HTML은 여전히 ​​제공되지 않습니다!

github에서 이러한 분기를 색인화하고 콘텐츠를 제공하는 데 필요한 인프라를 구축하는 데 몇 분이 걸립니다. github에 따르면 최대 10 분.

github.com이 제시 한 단계

https://help.github.com/articles/creating-project-pages-manually

— 헨드릭스 완
소스
3
잘 작동합니다. 자식 멍청한 놈으로서 나는 $ git commit -m 'init'네 줄 사이를 잊어 버렸습니다 .
— systemaddict
1
URL은 무엇입니까?
— Koray Tugay
흠 ... 이것은 새끼 고양이 저글링보다 훨씬 쉽지 않다 ...
— dreftymac
1

당신은 다음을 사용하여 HTML 코드를 미리 볼 수 있습니다 크롬 확장 프로그램을 - Run Selected HTML매우 간단 사용할 수 있습니다.

select all the codeGitHub의 읽기 모드를 사용 하려면 매우 간단합니다. 먼저 마우스 커서를 <html>상단 의 시작 괄호로 Shift이동 한 다음 키 를 누른 상태 에서 커서를 </html>하단 의 끝 괄호로 이동하십시오 .

선택한 HTML 실행 -Chrome 웹 스토어

https://chrome.google.com/webstore/detail/run-selected-html/eefflcdphpehljcadbmkdpopmbamfefl/

1 단계 : 읽기 모드에서 html 코드의 모든 본문을 선택하십시오.

2 단계 : "실행 된 HTML 실행"을 마우스 오른쪽 단추로 클릭하면 렌더링 된 결과가 새 탭에 표시됩니다.

선택된 HTML 실행

실행 결과 : 여기에 이미지 설명을 입력하십시오

— 브라보 영
소스
1

" 이것은 구식 답변입니다. "컨텐츠 유형 옵션 수정 "확장 프로그램이 예상대로 작동하지 않기 때문입니다.)

이 솔루션은 크롬 브라우저에만 해당됩니다. 다른 브라우저에 대해 잘 모르겠습니다.

  1. 크롬 브라우저에서 "컨텐츠 유형 옵션 수정"확장자를 추가하십시오.
  2. 브라우저에서 "chrome-extension : //jnfofbopfpaoeojgieggflbpcblhfhka/options.html"url을 엽니 다.
  3. 원시 파일 URL에 대한 규칙을 추가하십시오. 예를 들면 다음과 같습니다.
    • URL 필터 : https : ///raw/master//fileName.html
    • 원본 유형 : text / plain
    • 교체 유형 : text / html
  4. 규칙에 따라 URL을 추가 한 파일 브라우저를 엽니 다 (3 단계).
— 비제이
소스
asker는 아마도 모든 사람이 렌더링 된 페이지를 보길 원할 것입니다.
— Ondra Žižka
@zakmck 브라우저가 "text / plain"헤더를 보내지 만 "text / html"을 보내야합니다. 위의 단계를 사용하는 이유를 타사 ( " htmlpreview.github.com ")에 데이터를 보낼 수 없습니다 . 위 단계에서 url에 정규식을 사용할 수도 있습니다.
— Vijay
나는 이것을 정확하게 찾고있었습니다. 페이지를보고 싶습니다. 비트 버킷과 마찬가지로 git에서 모두 볼 수 있습니다.
— Eduardo Reis
나를 위해 작동하지 않았다.
— Eduardo Reis
@EduardoReis 오늘, 나는 내 컴퓨터를 확인했지만 지금 작동하지 않습니다. "컨텐츠 유형 옵션 수정"확장에서 일부 변경이있을 수 있습니다. 다른 확장 프로그램을 찾으면 여기에 게시합니다. 감사합니다.
— Vijay
0

이것은 직접적인 대답은 아니지만 꽤 좋은 대안이라고 생각합니다.

http://www.s3auth.com/

기본 인증 뒤에 페이지를 호스팅 할 수 있습니다. 개인 github 저장소의 API 문서와 같은 것들에 좋습니다. API 빌드의 일부로 s3을 넣으십시오.

— rynop
소스
git과 공통점이없는 타사 서비스처럼 보입니다. 이 질문의 맥락에서 사용하는 방법은 어디에 있습니까?
— Stalinko
-3

Github Pages를 켜면됩니다. ^ _ ^

"설정"을 클릭하고 "GitHub 페이지"로 이동 한 후 "소스"아래의 드롭 다운을 클릭하고 공개 (주 HTML 파일이있는 위치) aaaand vualaa하려는 분기를 선택하십시오. ^ _ ^

— 광대
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.