이번 글에서는 Github 페이지를 이용하여 로또번호를 생성하는 웹사이트를 만드려고한다.
프로그래밍을 처음접하는 사람도 만들 수 있도록 쉽게 설명하려고 한다
Github 페이지의 경우, 무료 호스팅을 제공하기 때문에 웹사이트를 만드는데 큰 부담이 없다.
대신, 무료이기 때문에 단점도 있다.
1. 속도가 한계가 있다.
2. 정적 홈페이지만 제공한다.
정적 페이지란 무엇일까?
정적(static) 페이지는 HTML과 CSS Javascript로 이루어져있는 사이트를 말한다.
로또번호 생성기와 같은 간단한 사이트는 데이터베이스 등 복잡한 기능이 필요가 없기 때문에 static 페이지를 제공하는 Github 페이지로도 충분히 만들 수 있다.
우선 github에 lotto라는 이름의 repository를 생성한다.
그 다음, index.html을 만들고 다음과 같은 HTML 코드를 작성한다.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
Hello!
</div>
</body>
</html>github에 index.html을 업로드한다.
git init git add . git remote add origin "https://github.com/dev-guardy/lotto" git commit -m "first commit" git push origin master
그 다음 setting에 들어가 master branch를 선택한다.
설정 후 github 페이지에 들어가면 다음과 같이 사이트가 나온다.
github 페이지가 성공적으로 호스팅 되었으니 우린 홈페이지 내부 요소를 채우면 된다.
먼저 head부분을 채우자.
index.html을 다음과 같이 바꾼다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>무료 로또번호 생성기</title>
<meta charset="utf-8">
<meta name="description" content="무료 로또번호 생성기입니다.">
<meta property="og:title" content="무료 로또 번호 생성기"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="https://dev-guardy.github.io/lotto/"/>
<meta property="og:description" content="무료 로또 번호 생성기입니다. 모두 대박나세요!"/>
</head>
<body>
<div>
Hello!
</div>
</body>
</html>title은 사이트를 접속했을 때 url 주소 위에 뜨는 웹사이트 이름이다.
meta og는 무엇일까?
meta 태그는 브라우저와 검색 bot에게 페이지에 내용을 제공한다.
og 태그는 HTML 문서의 meta정보를 쉽게 표시하기 위해서 제목, 설명 등 다양한 요소들에 대해서 통일해서 쓸 수 있도록 정의해놓은 프로토콜이다.
git에 추가후 commit이 완료된 페이지이다.
title이 무료 로또번호 생성기로 바뀐 것을 확인할 수 있다.
다음 글에서는 body 부분의 Top Navigation부터 채워나가도록 하겠다.
'WEB > 로또번호 생성 웹사이트 만들기' 카테고리의 다른 글
| 로또번호 생성 웹사이트 무료로 만들기 6 (0) | 2020.07.17 |
|---|---|
| 로또번호 생성 웹사이트 무료로 만들기 5 (0) | 2020.07.16 |
| 로또번호 생성 웹사이트 무료로 만들기 4 (0) | 2020.07.15 |
| 로또번호 생성 웹사이트 무료로 만들기 3 (0) | 2020.07.14 |
| 로또번호 생성 웹사이트 무료로 만들기 2 (0) | 2020.07.14 |
