Github 페이지에서 연락처 양식으로 정적 웹페이지 만들기

GitHub 페이지란 무엇입니까?

GitHub 페이지를 사용하면 GitHub 리포지토리에서 직접 웹사이트를 호스팅할 수 있습니다. GitHub 리포지토리에서 바로 HTML, CSS 및 JavaScript 파일을 가져오는 정적 웹 사이트를 호스팅할 수 있습니다. PHP와 같은 서버 측 코드를 실행할 수 없으므로 PHP 파일로 리디렉션되는 문의 양식을 추가할 수 없습니다. 그것이 formpree가 들어오는 곳입니다.

단계

1단계: <username>.github.io 라는 새 리포지토리를 만듭니다. <username>은 GitHub 사용자 이름입니다.

참고: CharalambosIoannou.github.io 라는 이름의 저장소가 이미 있으므로 내 저장소 이름에 오류가 표시됩니다. 또한 저장소를 공개로 설정해야 합니다.

2단계: 정적 페이지를 만듭니다. 기본 html 파일의 이름이 index.html 인지 확인하십시오.

제 경우에는 아래 이미지에서 볼 수 있듯이 제 포트폴리오 웹사이트를 만들었습니다.

3단계: formpree로 이동

1) formspree에서 오른쪽 상단의 회원가입 버튼을 클릭하고 이메일 주소와 비밀번호를 입력합니다.
2) 이메일 인증
3) + 버튼을 누르고 서식 이름을 입력합니다. 이메일 입력 상자는 fromspree에 가입할 때 사용한 이메일 주소로 자동 채워져야 합니다.



4) 그런 다음 formpree에서 제공하는 코드를 복사하여 웹사이트에 붙여넣을 수 있습니다.



방문자가 메시지를 추가할 수 있도록 이 코드를 약간 변경했습니다. 사용된 코드는 다음과 같습니다.

<div id="contact">
        <h2>Get in Touch</h2>
        <div id="contact-form">
                <form action="https://formspree.io/mpzyqdng" method="POST">
                <input type="hidden" name="_subject" value="Contact request from personal website" />
                <input type="email" name="_replyto" placeholder="Your email" required>
                <textarea name="message" placeholder="Type your message" required></textarea>
                <button type="submit">Send</button>
            </form>
        </div>
    </div>

그리고 이 코드는 다음과 같은 결과를 생성합니다.

4단계: 코드를 GitHub에 푸시하고 URL에 https://<username>.github.io/를 입력하여 웹사이트로 이동합니다.

일정 시간이 지난 후에도 웹 사이트가 표시되지 않으면 저장소로 이동하여 설정을 클릭하고 "GitHub 페이지"라는 섹션이 보일 때까지 아래로 스크롤한 다음 소스 하위 섹션에서 없음 드롭다운을 클릭하고 마스터 분기로 설정합니다.

"GitHub 페이지"섹션에 다음 메시지가 표시되면 웹사이트가 게시된 것입니다.

5단계: 양식 테스트

양식을 테스트하려면 웹 사이트로 이동하여 양식을 작성하십시오.
보내기 버튼을 클릭하면 리디렉션되고 로봇 🤖이 아님을 인증해야 합니다. 상자를 선택하면 머지 않아 발신자가 제공한 모든 세부 정보가 포함된 이메일을 받게 됩니다.

그게 다야!!!

이것이 쉽고 유용하기를 바랍니다.

P/S: 이것은 내 첫 번째 게시물입니다. 당신이 그것을 즐겼기를 바랍니다 😄.

즐거운 탐험!!

리소스: GitHub