웹페이지 만들어보기
자신만의 웹 페이지 & 웹 포트폴리오 무료로 만드는 방법
HTML, CSS, JavaScript가 무엇인지 이해하고, 웹 페이지가 어떻게 만들어지는지 이해했다면, 자신의 웹사이트도 만들 수 있습니다.
물론 제대로된 기능의 웹 페이지를 만들기 위해서는 php, python, JSP 등을 활용한 백엔드 작업과 SQL을 활용한 DB 작업도 필요합니다. 하지만 간단한 웹 페이지는 HTML과 CSS만으로도 충분히 만들 수 있습니다. 또한 다양한 무료 테마도 존재하기 때문에 잘 맞는 테마만 찾는다면 5분이면 자신만의 웹 페이지를 만들 수 있습니다.
이번 포스팅에서는 HTML이나 CSS를 직접 작성하여 웹 페이지를 만들기 보다는 무료테마를 활용하여 쉽게 자신만의 것을 만들어보려고 합니다. 이 과정에서 실제 웹 페이지가 어떻게 이루어져 있는지를 보다 구체적으로 이해할 수 있을 것 같습니다.
우선 웹 페이지를 구축하기 위해서는 '서버'가 필요합니다. 누군가 '주소(www.pagename.com)'를 입력했을 때 통신할 서버는 여러분의 PC가 될 수도 있지만 그러기에는 너무 고려해야할 것들이 많기 때문에 대부분 '호스팅' 서비스를 많이 이용합니다.
대표적으로는 아마존의 AWS, MS의 Azure 같은 서비스가 있으며, 국내에도 cafe24, dothome 등 다양한 '호스팅'서비스가 존재합니다. 기존에 사용하던 서비스가 있다면 해당 호스팅 서비스를 바로 이용해도 좋지만, 이번에는 최근 새롭게 출시된 GitHub의 Pages를 사용하는 방법을 알아보겠습니다.
Git을 들어보신 분도 못 들어보신 분도 있겠지만 Git에 대한 설명은 다음 기회에..
<GitHub Pages를 활용한 웹 페이지 만드는 법>
1. https://github.com/ 로 접속하여 회원가입을 합니다.
// 회원 가입 시 "Username"은 이후 웹 페이지의 기본 URL(username.github.io)로 사용되므로 신중히 입력해주세요. 도메인을 따로 갖고 계신다면 당연히 해당 도메인으로 연결할 수 있습니다.
2. 가입 후 Free 플랜 선택합니다.
// 여유가 있으시다면 결제를 해도 상관은 없죠..
3. 가입한 이메일로 접속하여 "Verify email address" 진행(클릭)합니다.
// 메일함으로 들어가시면 github에서 인증 요청 메일이 도착해 있을 겁니다. 성격이 급하신 분들은 1분만 기다렸다 새로고침을 해보세요.
<이메일 인증 화면>// 위 메일의 "Verify email address"를 클릭하면 Github.com 페이지로 이동됩니다. 이어서 4번을 진행하시면 됩니다.
4. Create a new repository에서 "Repository name"을 "username.github.io"로 입력해줍니다(저의 Username은 "hyun-ko"였습니다).
// Repository name 을 정확하게 "username.github.io"로 입력해야만 정상적으로 호스팅이 가능합니다. username이 옆의 Owner의 내용과 일치하는지 여부도 체크해주세요!
<GitHub에서 Repository 생성하기>// Desciption은 자유이지만, Public/Private 선택 옵션은 'Public'으로 진행해야합니다. (이렇게 될 경우 포폴 소스코드가 공개된다는 점은 미리 인지하고 있어야 합니다. 물론 어떤 것을 사용하던, 개발자도구에서 모두 확인은 가능하니 ...)
// repository는 쉽게 컴퓨터 내 '폴더'로 이해하면 됩니다.(여기에 txt, html, css, js 등 다양한 파일을 저장하는 것)
5. GitHub Desktop 어플리케이션 설치 후 실행
// https://desktop.github.com/ 에서 다운로드 가능하며, Mac과 Windows 모두 지원합니다.
6. "Clone a repository from the Internet..." 버튼을 클릭합니다.
// 이때 github 계정으로 로그인하면 됩니다. 사실 로그인을 언제 하시더라도 상관은 없습니다.
<GitHub 데스크탑 앱 실행 화면>7. GitHub.com 탭에서 "username/github.io" 선택하고, 아래 Local path를 선택한 후 Clone 버튼 클릭!
// URL 탭에서 URL을 직접 입력해도 가능합니다.
// Local path는 웹페이지 파일(HTML, CSS 등)을 올릴 폴더입니다. 조금더 정확하게 이야기하면 GitHub와 연결되는 폴더입니다. 해당 폴더가 비어있지 않을 경우 진행되지 않으므로, 바탕화면과 같은 편하신 곳에 새로운 폴더를 생성해주시는 것이 가장 좋습니다.
<GitHub 데스크탑 앱 연결 화면>// Local path도 정확하게 선택했다면 "Clone" 버튼 클릭!!
// 여기서 git에 대해 잠깐 설명을 하면 폴더와 파일의 역사를 기록하는 소프트웨어라고 생각하시면 됩니다. 대학교에서 팀플을 진행하거나 기말과제를 할 때를 생각해보면, "망할 기말과제_20191219", "망할 기말과제_20191220", "기말과제 마무리", "기말과제 진짜 마무리", "기말과제 진짜 마무리_20191221" 이렇게 끝나지 않은 파일들의 향연을 기억하실 겁니다. git은 바로 이런 파일의 변화들을 알아서 기록하고, 정리하고, 확인할 수 있는 소프트웨어라고 생각하시면 이해하시는데 큰 문제는 없습니다(하지만 사용과 이해는 다르죠..). 여기서 Local path는 인터넷에 연결된 내 git 내용과 내가 지금 사용하는 PC의 폴더를 동기화 하는 작업의 일부라고 생각하시면 됩니다.
8. 웹페이지 리소스 파일(HTML, CSS, 이미지 등) 전체를 "Local path(바탕화면에 새로 만든 폴더)"에 복사 붙여넣기를 합니다.
// 이번에는 무료 웹페이지 리소스를 사용하였으며, 혹시 기존에 만들어 놓은 웹페이지가 있다면, 해당 파일을 사용하셔도 됩니다.
// "index.html" 파일이 가장 밖에 위치해 있는지 꼭 확인해주세요.
// 무료 웹페이지 리소스는 아래 링크에서 다운로드가 가능합니다.
https://themes.getbootstrap.com/
https://startbootstrap.com/themes/
이번 포스팅에서는 https://bootstrapmade.com/demo/DevFolio/ 에서 무료 테마를 다운 받아 사용하였습니다. 해당 테마는 무료로 사용할 수 있지만 편집을 하기 위해서는 라이센스를 구매해야 합니다(https://bootstrapmade.com/license/). 남의 작품을 사용하기 전에는 꼭 라이센스를 확인해주세요!
9. GitHub Desktop 앱에서 해당 파일이 local repository로 복사된 것을 확인한 후 좌측 하단의 Summary 및 Description을 작성하여 "Commit to master" 클릭
// commit에 실패한 경우 상단의 [File > Options]에서 계정정보 다시 확인
// Commit에 실패하였다면, 계정정보가 정확하게 입력되어 있는지를 확인합니다. 제 경우에는 Email 정보를 정확하게 입력하지 않았내요. Github 계정의 이메일을 정확하게 입력해줍니다..
10. commit 작업 완료 후 상단에 "Publlish branch" 클릭
// 이제 끝이 보입니다.. Publish가 정상적으로 완료되었다면, 이제 웹페이지가 생성된 것입니다!
<GitHub 데스크탑 앱 Publish>이제 인터넷 브라우저에서 "username.github.io"를 입력해봅니다.
이번 포스팅에서 만들었던 제 URL로 접속해 봅니다. -완 성-
<완성된(내가 작업하진 않고 무료 다운받은) 웹페이지>GitHub Pages를 이용하여 무료로 손쉽게 호스팅되는 웹 페이지가 완성되었습니다.
username.github.io라는 링크가 마음에 들지 않으시다면, 후이즈, 카페24 등에서 도메인을 구매하여 연결할 수 있습니다.(이 내용은 구글링..)
또한 github.com에서 바로바로 코드를 수정하여 반영할 수 있습니다.
(반영 시에는 꼭 Commit!)
