컴퓨터 못만지는거/HTML과 CSS

30분 안에 홈페이지 만들기 #1 | 휴고 블로그를 이용한 웹사이트 만들기(Github, Netlify, Forestry를 이용하는)

김무명01 2021. 9. 26.

Hugo 웹사이트가 필요한 사람? & Netlify + Forestry로 블로그를 쓰기로 한 이유!

1. 내 웹사이트 구축 배경과 사용 목적

Wowchemy의 Academic Resumé 템플릿. 다크 모드는 더 예쁘다.

컨택용 웹 사이트(?)를 만들면서 요약된 CV와 나의 공부기록을 올려놓을 포트폴리오용 사이트를 만들고 싶은 욕구가 올라왔다. 구글링을 해보면 공부한 것들을 잘 정리해서 올려놓는 사람들이 많은데 나는 감사하게 잘 읽겠습니다~하는 부류였다. 이제는 좀 올려볼 생각으로 템플릿을 찾았더니 휴고 블로그에서 적당해보이는 템플릿을 찾았다. 

 

2. AWS 서버에서 갑자기 Github + Netlify + Forestry 조합으로 넘어온 이유

묻지도 따지지도 않고 그냥 이 조합으로 쓰려는 사람은 안 읽어도 됨.

 

사실 AWS에 1년간 무료로 쓸 수 있는 그 서비스를 이용해서 연습삼아 서버를 돌려봤는데, 짜증나게도 .. 자꾸 요금이 부과되는 것이었다.

구글 검색을 허용하지도 않아서 트래픽이 많이 발생할 이유가 전혀 없었다. 그래서 돈을 내야되는 게 너무 억울했다!!

그전에는 repository를 username.github.io로 무조건 해야되는 줄 알았는데, 그런 것도 아니었다. forestry를 같이 쓰면 CMS도 지원이 되고.. netlify도 상상이상으로 편했다!

 

해보니까 너무 쉬워서 정말 초딩도 컴맹도 30분 안에 쉽게 홈페이지를 만들 수 있다. 

 

 

더보기

준비물: Github 계정과 Hugo 웹사이트 템플릿

 

준비물1. Github 계정

>> 이전 글 #1. Github 계정 만들기: 코드, 웹페이지 올려놓는 클라우드, 코드 관리

여기서 github 계정 만드는 방법을 올렸다. Netlify, Forestry는 Github 계정에 연결해서 쓸 수 있다. 

 

 

준비물2. Hugo template

구글에 Hugo free template이라고 검색하면 정리해놓은 글이 여러 개 있다. 유료 템플릿도 예쁘고 활용도 좋아보이는 것이 있는데 무료 공개된 버전으로 일단 써 보려고 했다. 

나는 wowchemy와 parsa 이렇게 두 가지를 써보았는데 두 가지 모두 매우 추천한다.

 

Wowchemy의 Academic resume 템플릿을 기준으로 설명해보려 한다.

 

 

 

어떤 템플릿이든 GitHub에서 코드를 다운받을 수 있게 해 놓았다. Github로 들어간다.

 

 

 

Github를 처음 본다면 코드를 어떻게 받아야될지도 잘 모를 수 있는데

Code - Download ZIP 버튼을 눌러주면 코드를 통째 받아올 수 있다. 

 

 

이걸 내 Repository에 업로드하면 끝난다.

아래 글과 다른 점은 repository의 이름은 무엇이 되어도 상관없다. 비공개로 해놓아도 상관없다.

>>업로드 방법

 

 

다음으로는 Netlify에서 도메인을 연결하고, Forestry에서 웹사이트에 글 올리고 관리하는 것을 소개한다.

 

댓글