웹사이트 제작은 상당한 투자를 필요로 합니다. 웹사이트 구축의 모든 단계에서 비용이 발생하게 됩니다.
개인적인 발전이나 직업적 성장을 위해 무료 웹사이트를 만들고 싶으신가요? 사용자 지정 도메인 이름, 평생 무료 호스팅 및 SSL 암호화를 완전 무료로 사용하여 웹사이트를 디자인하는 방법을 소개합니다. 놀랍지 않나요? 이보다 더 좋을 수는 없을 겁니다!
웹사이트를 보유하는 것은 성장률을 크게 향상시킵니다. 오늘날 웹사이트는 사치품이라기보다는 투자에 가깝습니다. 이는 기업뿐만 아니라 개인도 개인 웹사이트를 통해 많은 이점을 누릴 수 있다는 의미입니다.
도메인 이름을 등록하거나, 웹사이트 콘텐츠를 호스팅하거나, 웹사이트를 구축하거나, SSL 암호화를 활성화하는 모든 과정에서 비용이 발생합니다. 더욱이, 이러한 비용 중 일부는 반복적으로 영구적으로 발생합니다.
웹사이트 구축의 중요한 단계를 모두 무료로 수행하면서 무료 웹사이트를 만들 수 있다면 어떨까요? 비현실적으로 들릴 수 있지만, 학생이라면 이 모든 것을 무료로 할 수 있습니다.
GitHub에 대해 알고 있다면 GitHub Pages에 대해서도 알고 있을 것입니다. 모든 GitHub 계정에서 제공되는 이 서비스를 무료로 사용할 수 있습니다. GitHub Pages를 사용하면 모든 사용자가 무료로 웹사이트를 만들고 호스팅할 수 있지만, 중요한 조건이 있습니다. 이러한 무료 웹사이트의 도메인 이름은 기본적으로 github.io로 끝나기 때문에 웹사이트의 전문성이 떨어질 수 있습니다.
GitHub 학생 개발자 팩이란 무엇일까요?
웹사이트를 진지하게 받아들이는 사용자가 적고 도메인 이름이 불필요하게 긴 것은 결코 좋은 생각이 아닙니다. 하지만, 우리는 GitHub Pages의 장점이나 단점을 이야기하기 위해 여기 있는 것이 아닙니다. 저는 여러분에게 사용자 지정 도메인 이름으로 무료 웹사이트를 만드는 방법을 알려드리기로 약속했고, 이제 그 방법을 알려드리겠습니다.
GitHub는 학위 또는 디플로마 과정에 등록한 모든 학생에게 ‘GitHub 학생 개발자 팩’이라는 유용한 온라인 도구 키트를 제공합니다. 이 팩에는 Canva, Namecheap, Microsoft Azure, Discord, Name.com, StreamYard 등 다양한 인기 도구의 프로 구독 및 놀라운 할인이 포함되어 있습니다.
이 글에서는 Namecheap을 사용하여 무료 사용자 지정 도메인을 등록하고 GitHub 페이지를 사용하여 웹사이트를 호스팅합니다. 그런 다음 HTML, CSS 및 JavaScript 파일을 디자인하고 GitHub 페이지에 업로드하는 방법을 살펴볼 것입니다. 마지막으로 웹사이트에 SSL 암호화를 활성화할 것입니다. 하지만 그 전에 먼저 학생 개발자 팩에 등록해야 합니다.
GitHub 학생 개발자 팩은 어떻게 신청하나요?
학생 개발자 팩에 등록하는 가장 기본적인 방법은 대학에서 발급한 학생 이메일 주소를 사용하는 것입니다. 학생 이메일 주소는 일반적으로 대학 도메인 이름으로 끝납니다. 예를 들어, [email protected]와 같은 형태입니다. 팩에 등록하는 다른 방법도 있지만, 학생 이메일을 사용하는 것보다 훨씬 더 많은 검토 시간이 필요합니다. 학생 이메일 주소가 준비되었다면 다음 단계에 따라 팩에 등록할 수 있습니다.
1단계: GitHub 교육 웹사이트로 이동하여 로그인 옵션을 클릭합니다.
이미 팩을 보유하고 있다면 자격 증명을 사용하여 로그인할 수 있습니다. 그렇지 않은 경우 아래 단계를 따르십시오.
로그인 창에서 ‘계정 만들기’ 옵션을 클릭합니다.
2단계: 다음으로 학생 이메일 주소를 사용하여 가입하고 계정을 생성합니다.
3단계: “당신의 학업 상태를 가장 잘 설명하는 것은 무엇입니까?”라는 메시지가 표시되면 ‘학생’을 선택해야 합니다.
4단계: 이제 학교 이름 및 GitHub 사용 목적에 대한 세부 정보가 필요한 입력 상자를 채웁니다.
5단계: 마지막으로 ‘정보 제출’ 옵션을 사용하여 신청서를 제출합니다.
GitHub에서 신청서가 승인되면 개발자 팩에 대한 확인 이메일을 받게 됩니다. 이 과정은 일반적으로 며칠이 걸리지만, 신청자가 많을 때는 시간이 더 오래 걸릴 수 있습니다.
학생 이메일 없이 GitHub 학생 개발자 팩을 신청하는 방법은 무엇일까요?
GitHub는 유효한 학생증이나 기타 학업 증빙 자료를 사용하여 팩을 신청할 수 있는 옵션도 제공합니다. 유일한 단점은 대기 시간이 길고 거부율이 높다는 것입니다. 어쨌든, 이 방법을 통해 학생 팩을 신청하는 방법은 다음과 같습니다.
1단계: 위에서 언급한 단계에 따라 개인 이메일을 사용하여 계정을 만듭니다.
2단계: 이제 카메라 옵션을 사용하여 학업 증명서를 업로드하거나 ‘업로드’ 버튼을 사용하여 GitHub에 직접 사진을 업로드합니다.
3단계: 다음으로 학교 이름 및 GitHub 사용 목적과 같은 필요한 모든 세부 정보를 입력합니다.
4단계: 신청서를 제출합니다.
Namecheap을 사용하여 사용자 지정 도메인을 등록하는 방법은 무엇일까요?
GitHub Education 계정이 설정되어 있고 활성화되어 있다고 가정하겠습니다. 다음 단계에서는 Namecheap을 사용하여 무료 사용자 지정 도메인을 등록하고 GitHub 페이지를 통해 호스팅하는 방법을 알아보겠습니다. 선호하는 도메인 이름을 등록하려면 다음 단계를 따르십시오.
1단계: GitHub Education 계정에 로그인하고 ‘혜택’ 섹션으로 이동합니다.
Web Dev Kit 및 Virtual Event Kit이 표시되어야 합니다.
2단계: ‘가상 이벤트 키트’로 이동하여 아래로 스크롤하여 Namecheap을 찾습니다.
GitHub는 .me TLD에 대해 1년 도메인 이름 등록을 제공하며 ‘액세스 권한 부여’ 옵션을 클릭하여 액세스할 수 있습니다.
3단계: 다음 창에서 Namecheap이 GitHub 계정에 대한 연결 요청을 승인하도록 요청합니다. Namecheap을 인증하고 다음 단계로 진행합니다.
인증에 성공하면 “GitHub로 학생 팩을 성공적으로 확인했습니다.”라는 메시지가 표시되어야 합니다.
4단계: 검색 창을 통해 원하는 도메인을 찾고 ‘찾기’를 클릭합니다.
다음 화면에서 도메인 이름의 사용 가능 여부를 확인해야 합니다. 도메인 이름을 사용할 수 있다면 무료로 구매할 수 있습니다.
5단계: GitHub 교육 이메일 주소를 사용하여 결제하고 진행하는 동안 호스팅 방법으로 GitHub 페이지를 선택합니다.
사용자 지정 도메인 이름을 성공적으로 등록하고 GitHub 페이지를 호스팅으로 선택한 후 Namecheap은 자동으로 GitHub 계정에 리포지토리를 생성해야 합니다. 이 리포지토리는 완전히 비어 있으며 README.md 파일만 포함합니다.
GitHub 계정에 로그인하고 ‘내 리포지토리’ 섹션을 클릭하여 이 리포지토리에 액세스할 수 있습니다. GitHub Pages는 웹사이트를 위한 시각적 도구와 미리 만들어진 테마를 제공하지 않습니다. 전체 웹사이트를 수동으로 코딩하고 관련 파일을 새로 생성된 GitHub 리포지토리에 업로드해야 합니다.
무료 웹사이트를 만들고 GitHub 페이지에서 호스팅하는 방법은 무엇일까요?
위에서 언급했듯이 웹사이트와 관련된 모든 HTML, CSS 및 JavaScript 파일을 만들어야 합니다. 웹 개발에 관심이 있고 코드를 작성하는 방법을 알고 있다면 GitHub 리포지토리에 파일을 업로드하고 웹사이트를 실행하는 것이 좋습니다. 웹사이트 코드를 GitHub 페이지에 업로드하는 방법을 다루는 이 문서의 섹션으로 스크롤할 수 있습니다.
하지만 웹 개발에 대한 정보가 거의 또는 전혀 없는 사람들을 위해 준비했습니다. 아래에 제공된 단계를 사용하고 몇 가지 기본 HTML을 사용하여 자신만의 웹사이트를 디자인할 수 있습니다.
1단계: HTML5 UP 웹사이트로 이동하여 원하는 웹사이트 디자인으로 스크롤합니다. 모든 플랫폼에서 미리 빌드된 다양한 테마를 선택할 수 있습니다. 여기서는 HTML5 UP에서 ‘대량’ 디자인을 선택했지만 원하는 웹사이트 디자인을 자유롭게 다운로드하고 사용자 지정할 수 있습니다.
2단계: 다운로드한 마음에 드는 웹사이트 디자인의 zip 파일을 추출합니다.
추출된 폴더에 index.html 및 generic.html 파일과 assets 및 images와 같은 폴더가 표시되어야 합니다.
3단계: 이제 Visual Studio Code를 사용하여 압축을 푼 파일을 열고 index.html 파일을 선택합니다.
4단계: Visual Studio Code에 ‘라이브 서버’ 확장이 아직 없는 경우 다운로드하여 설치합니다.
5단계: index.html 파일을 선택하고 마우스 오른쪽 버튼을 클릭한 다음 ‘라이브 서버에서 열기’ 옵션을 선택합니다. 이 옵션을 사용하면 브라우저에서 HTML 파일의 변경 사항을 실시간으로 확인할 수 있습니다.
웹사이트 디자인을 사용자 지정하는 방법은 무엇일까요?
이 시점부터의 프로세스를 웹사이트 사용자 지정을 위한 ‘단계’라고 부르지 않겠습니다. HTML 파일을 사용자 지정하는 것은 전적으로 여러분의 취향에 달려 있지만, 여기서는 HTML5 UP에서 ‘대량’ 디자인을 사용자 지정하고 포트폴리오로 변환한 방법을 설명합니다. 이 과정에서 영감을 얻거나 웹사이트를 완전히 사용자 정의할 수 있습니다. 선택은 여러분에게 달려 있습니다!
제목 및 단락 태그 수정
사용자 지정 프로세스를 시작하면서 제목 태그를 ‘대량’에서 변경했습니다. HTML 파일의 제목 태그는 브라우저 탭에서 열릴 때 파일 이름을 결정합니다. Massively의 기본 제목은 ‘Massive by HTML5 UP’일 것이며 웹사이트와 관련된 이름으로 변경하는 것이 좋습니다.
제목 태그를 ‘삼약 고스와미 | 기술 콘텐츠 작가’로 변경했는데 이는 제 포트폴리오에 가장 적합했기 때문입니다. 다음으로, 웹사이트의 소개 섹션을 변경했습니다. ‘This is Massively'(H1 태그에 포함됨)를 ‘Samyak의 포트폴리오’로 변경했습니다. 그런 다음 아래 단락 태그의 텍스트를 ‘내 프로젝트와 능력의 쇼케이스’로 변경했습니다.
인덱스 파일의 탐색(Nav) 섹션으로 이동하여 목록 태그에 포함된 세 개의 탐색 버튼 중 두 개를 생략했습니다. 한 페이지에 모든 세부 정보가 포함된 단일 페이지 웹사이트를 만들고 싶었지만 원하는 대로 탐색 버튼 수를 자유롭게 수정할 수 있습니다.
나중에 탐색 버튼의 ‘This is Massively’ 텍스트를 ‘내 기사’로 변경했습니다.
소셜 미디어 링크 및 아이콘 수정
라이브 서버에서 Twitter, Facebook, Instagram 및 GitHub와 같은 다양한 소셜 미디어 아이콘도 확인할 수 있습니다. 저는 Twitter와 Facebook을 생략하고 사용 사례로 Instagram과 LinkedIn을 유지하기로 결정했습니다.
탐색(Nav) 섹션으로 이동하고 Twitter, Instagram 등이 포함된 목록 태그로 스크롤하여 소셜 미디어 아이콘과 해당 링크를 수정할 수 있습니다.
href 태그가 공백으로 남아 있기 때문에 이러한 소셜 미디어 아이콘에 연결된 링크가 없는지 확인하십시오. ‘# ‘를 원하는 링크로 바꿔서 href 태그에 링크를 추가할 수 있습니다.
홈페이지 내용 수정
먼저 H2 태그를 ‘내 이름은 Samyak Goswami입니다’로 변경한 다음 단락 태그를 ‘저는 기술 애호가입니다…’로 변경했습니다. H2 태그를 홈페이지 내용과 일치시키고 이를 설명하는 단락 태그로 변경하는 것이 좋습니다.
이제 이 사용자 지정의 가장 중요한 부분을 제시하겠습니다. 바로 기사 타일의 내용을 수정하는 것입니다.
이렇게 하려면 색인 파일의 게시물 섹션으로 이동하면 기사 태그에 포함된 여러 코드 조각이 표시되어야 합니다. 소셜 미디어 아이콘에 대한 링크를 추가하는 동안 href 섹션을 수정하여 스토리에 대한 링크를 추가할 수 있습니다.
나중에 H2 태그 내의 내용을 수정하여 기사 이름을 변경할 수 있습니다. 단락 태그를 사용하여 기사에 대한 설명을 추가할 수도 있습니다.
링크를 추가하고, 이름을 변경하고, 모든 기사에 설명을 추가하여 각 기사에 대해 프로세스를 반복합니다.
웹사이트에 이미지 추가
미리보기가 HTML5 UP 웹사이트에 있는 이미지와 매우 다르게 보입니다. 이것은 사용자 지정 가능한 파일의 평면적이고 밋밋한 사진 때문입니다. 사용자 지정 이미지를 추가하여 웹사이트를 멋지게 꾸며 보겠습니다.
원본 이미지
이렇게 하려면 이전에 ‘대량’ zip 파일의 압축을 푼 폴더로 이동합니다. 압축을 푼 폴더를 열고 이미지 폴더로 이동합니다. bg, pic01, pic02 등의 다른 이미지가 표시되어야 합니다. 이것은 Article 태그에서 기사와 연결된 이미지입니다.
사용자 지정 이미지를 추가하고 이러한 이미지의 이름으로 인덱스 파일을 수정하거나 이미지를 추가하고 기본 이미지와 유사한 이름을 지정할 수 있습니다. 이미지에 동일한 이름을 지정하면 코드를 수정하고 이후에 많은 시간을 절약할 수 있습니다.
수정된 이미지
웹사이트에서 중요하지 않은 다른 섹션을 교정하고 수정하는 것을 제안합니다. 위에서 언급한 단계를 사용하여 만든 포트폴리오는 다음과 같습니다. 삼약고스와미.me.
웹사이트 코드를 GitHub 페이지에 업로드하는 방법은 무엇일까요?
마지막으로 웹사이트를 코딩하고 디자인한 후에는 GitHub Pages에 업로드하고 인터넷에 게시할 차례입니다.
GitHub 페이지에 웹사이트를 업로드하는 방법은 다음과 같습니다.
1단계: GitHub 계정에 로그인하고 ‘내 리포지토리’ 섹션으로 이동합니다.
2단계: your_username.github.io라는 리포지토리가 표시되어야 합니다. 이 리포지토리로 이동합니다.
3단계: 고유한 파일을 만들거나 GitHub 리포지토리에 파일을 업로드하는 옵션이 표시되어야 합니다.
4단계: 5개의 파일과 폴더를 모두 선택합니다. 즉, assets, images, elements, generic 및 index를 선택하고 리포지토리로 끌어다 놓습니다.
파일이 업로드되면 코드를 커밋하고 GitHub에서 파일을 처리할 때까지 기다립니다.
5단계: ‘설정 > GitHub 페이지’로 이동하여 웹사이트 상태를 확인합니다. “귀하의 웹사이트가 your_custom_domain에 게시되었습니다.”라는 메시지가 표시되어야 합니다.
이제 웹 주소로 이동하여 웹사이트를 직접 확인할 수 있습니다. 웹사이트가 처음 게시될 때까지 시간이 걸릴 수 있음을 기억하십시오.
GitHub 페이지에서 SSL 암호화를 활성화하는 방법은 무엇일까요?
HTTP는 웹사이트에서 사용자 요청을 관리하는 안전하지 않은 방법입니다. 악의적인 의도와 기술 지식이 있는 사람은 누구나 사용자와 웹사이트 간의 상호 작용을 가로챌 수 있습니다. 반면에 HTTPS는 모든 방문자에게 훨씬 더 안전한 브라우징 세션을 제공합니다. GitHub 페이지는 무료 HTTPS 암호화를 제공하며 다음과 같이 사용할 수 있습니다.
리포지토리의 ‘페이지’ 섹션으로 스크롤합니다.
창 하단에 ‘HTTPS 적용’ 옵션이 표시되어야 합니다. ‘HTTPS 적용’ 확인란을 선택하는 즉시 SSL 암호화가 활성화됩니다.
도메인에서 ‘HTTPS 적용’ 옵션을 사용할 수 없는 경우 아래 단계를 사용하여 SSL 암호화를 활성화할 수 있습니다.
1단계: Namecheap 계정에 로그인하고 ‘도메인 목록’ 섹션으로 이동합니다.
2단계: 이제 ‘도메인 관리’로 이동한 다음 ‘고급 DNS’ 섹션으로 이동합니다.
일부 기존 CNAME 및 A 레코드가 표시되어야 합니다.
호스트가 ‘@’이고 IP 주소가 ‘185.199.108.153’인 다음 A 레코드를 추가합니다. 호스트 이름이 ‘@’이고 IP 주소가 ‘185.199.109.153’인 다음 항목입니다.
IP 주소 ‘185.199.111.153’까지 4개의 A 레코드가 생길 때까지 추세를 따릅니다.
이전 A 레코드를 모두 제거합니다.
3단계: 다음으로 호스트가 ‘www’이고 값이 GitHub 사용자 이름(점) github(점) io인 CNAME 레코드를 추가합니다.
이전 CNAME 레코드를 제거합니다. 결국 DNS 설정에는 4개의 A 레코드와 1개의 CNAME 레코드가 있어야 합니다.
4단계: 이제 설정 섹션의 GitHub 페이지로 이동합니다. 이제 도메인에서 ‘HTTPS 적용’ 옵션을 사용할 수 있습니다.
요약 👈
GitHub는 모든 학생에게 무료 웹사이트를 만들고 관리할 수 있는 훌륭한 기회를 제공합니다. 대규모 트래픽 로드를 호스팅하기 위해 GitHub Pages를 사용할 수는 없지만, 소규모 정적 웹사이트의 경우 모든 요구 사항을 충족합니다. 무료 사용자 지정 도메인 이름, 호스팅 및 SSL 암호화를 제공한다는 점에서 더욱 뛰어납니다.
이제 ‘새 웹사이트를 위한 웹 호스트를 선택하는 방법’을 읽어보실 수 있습니다.
다음은 웹사이트가 다운될 때 알려주는 몇 가지 페이지 속도 모니터링 도구입니다.