GitHub 페이지 설정을 사용하여 404 페이지 사용자 정의
본 논문에서 저는 GitHub Pages에서 사용자 정의 오류 404페이지를 만드는 방법을 보여 드리겠습니다. 이것은 정적 사이트 위탁 관리 서비스로 GitHub을 통해 웹 페이지를 발표하고 위탁 관리할 수 있습니다.
빠른 분해: 정적 사이트는 HTML, CSS, 자바스크립트 파일로 구성된 사이트입니다.사이트에서 보여야 할 모든 내용이 이 파일에 포함되어 있기 때문에 PHP, Node와 같은 서버 기술이 필요하지 않습니다.js 또는 Python입니다.정적 사이트에 서버로부터 추가 데이터가 필요한 경우
fetch api 또는 axios 등의 도구를 사용하여 비동기식 HTTP 요청을 보냅니다.정적 사이트에 404페이지가 있는지 확인해야 할 수도 있습니다.당신의 사이트에 404 오류 페이지가 나타나는 것은 나쁜 소식을 전달하는 것과 같다. 메시지를 전달하는 말투와 방식은 메시지를 받는 사람이 불안해하거나 다른 해결 방안을 유쾌하게 찾을 수 있는지를 결정할 수 있다.다행히도 GitHub Pages는 공원에서 산책을 할 수 있도록 만들 수 있다.
GitHub 페이지는 어떻게 작동합니까?
GitHub 페이지에서 사이트를 호스팅하는 것은 GitHub에 로그인하여 새 저장소를 만드는 것처럼 간단합니다.
귀하의 환매 협의 명칭은 다음과 같은 형식을 사용해야 합니다:
<your github username>.github.io.
재구매 협의에 파일을 추가합니다.로컬에서 파일을 만들고 원격으로 전송하거나 GitHub에서 직접 파일을 만들 수 있습니다.
새로 만든 저장소의 설정 탭으로 이동합니다.
GitHub 페이지 섹션으로 아래로 스크롤합니다.
여기에서, 페이지에 서비스를 제공할 지점, 루트 디렉터리, 심지어 Jekyll 테마를 선택할 수 있습니다.사용자 정의 도메인 이름이 있다면 여기에 추가할 수 있습니다.
사용자 정의 도메인 이름을 추가하면
yourdomainname 도메인 대신 github.io 도메인을 사용하여 웹 사이트를 방문할 수 있습니다.
이게 다야!너의 사이트는 지금 발표할 수 있다.
<your github username>.github.io을 방문하여 새 웹 사이트를 확인하십시오.너는 수시로 사이트를 변경할 수 있다.서비스 페이지에서 분기를 선택한 지점으로 밀어넣기/병합하면 즉시 사용할 수 있습니다.
정적 사이트에서 GitHub 페이지를 사용하면 다음과 같은 이점을 얻을 수 있습니다.
왜 404페이지가 중요합니까?
404페이지는 인터넷상에서 모두가 알고 있는 무서운 광경이다.이것은 사이트 사용자와 소유자가 모두 보기 싫어하는 페이지이지만, 그것은 불가피하다.그 목적은 사용자가 찾고 있는 페이지가 존재하지 않는다는 것을 알리는 것이다.
생각해 봐라. 네가 상점에 들어갈 때마다 네가 원하는 물건을 찾을 수 있는 것은 아니다.어떤 상품들은 이미 매진되었거나 상점이 처음부터 팔리지 않았을 수도 있다.이것이 바로 인터넷상에서 발생한 일이다.페이지의 URL이 변경되었거나 오래된 링크가 끊겼거나 완전히 삭제되었을 수도 있습니다.사용자가 잘못된 URL을 수동으로 입력했을 수 있습니다.그러나 사용자가 특정 URL에 도달했을 때 요청한 웹 페이지는 존재하지 않습니다.
구체적으로 404는 HTTP status code으로'자원을 찾을 수 없음'또는 간단한'찾을 수 없음'오류를 나타낸다.HTML 파일, CSS 파일, 자바스크립트 파일, 문서, 이미지, 서버에서 요청할 수 있는 거의 모든 다른 파일 등 웹상의 다양한 자원에 적용됩니다.
역장으로서 404 오류를 전달하는 것을 어떻게 선택하는가가 매우 중요하다.그것은 사용자의 웹 사이트에서의 체험을 개선할 수도 있고, 그것을 더욱 나빠지게 할 수도 있다.
무엇이 좋은 404페이지입니까?
마지막으로 404페이지의 내용은 당신이 결정하지만, 사용자가 가능한 한 그것을 좋아하도록 조언해 드리겠습니다.
GitHub Pages 사이트에 사용자 정의 404 페이지를 추가하지 않으면 기본적으로 다음과 같은 404 페이지가 표시됩니다.
괜찮죠?하지만 너의 브랜드는 아직 충분하지 않다.
GitHub 페이지에서 사용자 지정 404 페이지를 만드는 방법
다행히도 GitHub도 404 오류 페이지의 중요성을 이해하고 개발자에게 404 오류 페이지를 GitHub이 위탁 관리하는 페이지에 추가할 수 있는 간단한 방법을 제공했다.사용자 정의 404페이지를 추가하는 방법을 보여 줍니다.
저장소의 루트 디렉토리에 새 파일을 만들고 이름을
404.html으로 지정합니다.
그런 다음 다음과 같이 404 페이지에 컨텐트를 추가합니다.
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Page Not Found</title><linkrel="preconnect"href="https://fonts.gstatic.com"><linkhref="https://fonts.googleapis.com/css2?family=Chango&family=Roboto:[email protected]&display=swap"rel="stylesheet"><style> body{background-image:url("https://images.unsplash.com/photo-1616235132417-99f443954d2e?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80");background-size:cover;font-family:'Roboto','sans-serif';} main{display:flex;height:100vh;justify-content:center;align-items:center;flex-direction:column;} .header404{font-family:'Chango',cursive;font-size:48px;} .content404{text-align:center;}</style></head><body><main><h4class="header404">404</h4><divclass="content-404"> Uh-oh! We couldn't find the page you are looking for. </div><p><ahref="/">Check our home page</a></p></main></body></html>
username.github.io/a-random-page-that-doesn't exist을 방문해 보세요.이러한 페이지가 나타나야 합니다.
결론
404페이지의 중요성과 왜 사이트의 다른 페이지처럼 브랜드를 만들어야 하는지 알 수 있기를 바랍니다.만약 조작이 적절하다면 404 오류 페이지는 사이트 전환률을 높이는 좋은 방법일 수 있다.
많은 다른 호스트 서버와 달리 GitHub 페이지는 404 오류 처리 페이지를 매우 간단하게 하고, 다른 호스트 서버는
.htaccess 또는 다른 종류의 설정 설정을 수정해야 한다.파일 하나만 추가하면 돼.404 오류 페이지가 어떻게 될지 궁금하면 look around for some 404 inspiration을 선택하세요.
소딕 엘루소지
Reference
이 문제에 관하여(GitHub 페이지 설정을 사용하여 404 페이지 사용자 정의), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/karllhughes/setting-up-a-custom-404-page-with-github-pages-1p1텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
