안녕 개붕이들아

이번에는 1원도 들이지 않고 정적 웹사이트를 만드는 방법에 대해 알려줄거야.

다시 말하지만 정적 웹사이트야.

즉, 개드립 같은 커뮤니티 사이트는 만들 수 없음...

 

우리가 이번 시간에 만들어볼 사이트는

이런 명함 사이트야.

 

(예시)

jioc.kro.k알

알을 r로 바꾸면 들어갈 수 있어!

 

와 엄청 예쁘지 않아? 우리 개붕이들도 하나 만들어서 친구들에게 자랑하고 다니자!

 

템플릿 다운로드

---

우리들은 모두 아무것도 모르는 늅늅이니깐,

템플릿 받아서 글씨만 바꿔줄거야!

 

근데 만약 명함 말고 다른거 만들고 싶으면,

https://html5up.net/

이 사이트 들어가서 맘에 드는걸로 골라봐!

 

내가 많은 사이트들 왔다리 갔다리 해봤는데, 이 사이트에 올라온것들이 디자인 최고임

애니메이션도 예쁘고 어쨌든 좋음

 

근데말야.. 우리 개붕이들은 초보란 말이지..?

그런 개붕이들을 위해서 내가 미리 다 해놓았어!

 

https://www.드ropbox.com/s/u89ja7h3tnixl3l/identity_edited.zip?dl=0

드 만 d로 바꿔줘!

개드립이 dropbox 링크는 막아놓았네...

(283057424에서 저렇게 드박 링크 올린거 보고 나도 한건데.. 문제 있으면 경고로 부탁할게 승희야...)

 

수정

---

이제 템플릿에서 글씨만 바꿔줄거야!

 

다운받고 압축풀면 이런식으로 여러 파일들이 있을거야.

이중에서 우리가 편집할건 바로 저 index.html 이야.

 

메모장 켜서 거기에 저 index.html 파일 드래그 해주면 돼!

 

이제 CTRL + F 키를 누르면 저 찾기 라는 창이 뜨는데,

거기에다가 이름 이라고 친 다음에 다음 찾기 버튼을 눌러봐!

 

그럼 이렇게 저 이름이라는 글씨가 선택될거야!

이제 저 이름을 개붕이들 이름으로 바꿔주면 돼!

 

그리고 이왕 이렇게 된거, 밑에있는 소개도 바꿔주자!

 

 

그 다음 밑으로 조금만 스크롤 내리면

이런 부분이 나오거든?

여기에 SNS 주소들을 넣어주면 돼!

 

근데 저중에서 특정 SNS 를 안한다?

그러면 그 부분 한 줄을 지우면 돼!

 

난 인스타랑 페이스북을 지워줬어.

 

그 다음 CTRL + S 누르고 메모장 끄면 돼.

 

이제 요 images 폴더로 들어가보자.

 

들어가면 배경.png 랑 얼굴.png 이미지가 있는데, 배경은 사이즈 관계없이 그냥 적당한 배경 이미지로 바꿔주면 되고,

얼굴은 정사각형 이미지로 하나 넣어주면 돼!

꼭 png 확장자야돼.

 

깃허브를 사용해보자

---

이제 서버를 구할거야.

그 서버들 중에 깃허브라고 해서 무료인데다가 https 까지 해주는 아주 좋은게 있거든

그거 사용해보자.

 

https://github.com/

여기로 들어가서 알아서 회원가입 해줘.

 

모르겠다면 구글 검색하면 많이 나오니깐.. 그렇게 해서 회원가입 하고 와!

 

 

우측 상단에 저 아이콘 누르면 저리 탭 뜨거든.

저기서 Your repositories 눌러봐!

 

그럼 뜨는 화면에서, 저 New 버튼을 눌러.

 

이렇게 뜨는데, 이름 마음에 드는걸로 정하고 Create repository 누르면 돼.

 

이제 저 uploading an existing file 눌러줘.

 

아까 다운받고 작업한 파일들 있지?

그거 저리 선택한 다음에 드래그 해서 저기에 놓으면 돼.

 

 

그리고 Commit changes 버튼 눌러줘.

 

도메인 만들기

---

이제 마지막 작업이야.

도메인 같은 경우는 .ga, .ta 같은걸 사용해도 되긴 하지만...

그것들은 사이트가 조금 어렵고 느리고 뭐 어쨌든 난 별로 안좋아해.

 

그래서 우리는 다른걸 사용해볼거야.

내도메인.한국

 

이런 사이트가 있어. 은근 오랜 시간동안 유지되고 있더라 ㄷㄷ

 

위에 회원가입 버튼 눌러서 알아서 회원가입 하고 로그인 해줘.

 

원하는 도메인을 저 일반 도메인 검색에 쳐줄거야.

 

그리고 원하는거 하나 골라서 등록하기 눌러줘.

 

등록 하고나면, 이런 창 뜨는데

우리는 저 밑에 있는 고급설정 (DNS)를 건들일거야.

 

저기 별칭(CNAME) 부분에

깃허브아이디.github.io

를 쳐줄거야.

 

난 이런식으로 해줬어.

그리고 밑에 수정하기 버튼 눌러주자.

 

다시 깃허브로 돌아와서, Settings 버튼을 누르자.

 

 

여기서 쭉 밑으로 스크롤 해보면...

 

GitHub Pages 라는 옵션이 나와.

이제 저 Source 항목의 None ▼ 을 눌러주자.

 

그리고 저 main 이란걸 눌러주면 돼.

 

이제 Save 버튼 눌러서 저장.

 

그럼 이렇게 뜨거든, 

여기서 저 Custom domain 항목에다가 방금 만든 도메인 넣어주자.

그리고 또다시 저장 버튼을 눌러.

 

 

이제 이렇게 되는데.. 좀 기다려야돼.

 

 

저 Enforce HTTPS 체크박스가 눌리게 되면, 이제 저걸 눌러줘.

그리고 한 5분에서 10분정도 기다려주면 완성이야!

 

이제 완성이야!

 

사후관리

---

내도메인.한국 들어가서 도메인 관리 누르면 저렇게 뜨거든,

저게 만료일이 지나면 도메인이 사라져.

그래서 만료일 지나면 저 만료일 글씨를 눌러서 연장해줘야돼!

 

연장 기간이 지나면 저리 빨간색으로 변하는데,

이미 만료일이 지나도 도메인 빼앗아가지 않고, 순순히 연장시켜주더라..

이래서 내가 내도메인.한국을 사용하라고 했던거야.. f뭐시기는 그딴거 안해주고 마음대로 빼앗아가거든..

 

명함 뿐만이 아니라, 

https://html5up.net/

들어가면 좋은 템플릿들 많이 있으니깐, 한번 사이트 만들어봐!