Github pages + al-folio를 활용한 개인 홈페이지 제작기

약 하루? 정도의 시간을 투자해서 만든 개인 홈페이지!

https://skdbsxir.github.io/

Cheolhee Kim

---

 

몇일 전 개인 홈페이지를 한번 만들어보자! 하는 마음에 템플릿을 찾던 중 발견했던 마음에 드는 것을 발견:

https://github.com/alshedivat/al-folio?tab=readme-ov-file#getting-started

GitHub - alshedivat/al-folio: A beautiful, simple, clean, and responsive Jekyll theme for academics

 

이전 글에서도 언급했듯이 웹 지식이 거의 없지만

open되어 있는 여러 model이나 code를 돌려볼때도 아예 모르는 상태에서 document들을 천천히 보면서 했으니 충분히 할수 있을 것이다! 라고 생각해서 install guide를 보며 따라가기 시작했다.

 

공식에서 제공해주는 설치(?) 가이드

 

가이드를 보면서 내 repository에 옮겨놓기를 완성하고, 난생 처음해보는 Action 설정도 마치고 local에 저장까지 완료.

 

후에 적혀있는 setup guide를 보니 Windows에선 WSL을 설치한 후에

 

1. Docker를 이용해서 로컬 환경 구축 (Recommended)

2. Ruby & bundler를 이용해서 로컬 환경 구축

 

의 2가지 방법 중 마음에 드는 방법으로 로컬 테스팅 환경을 구축하면 된다고 적혀있었다.

 

처음엔

"굳이 로컬에서 서버(?)를 구축하고 여기서 테스팅을 해야하나"

"어짜피 github pages에서 바로 확인할 수 있는거 아닌가"

했는데....

경험자 친구의 조언

 

ㅋㅋㅋ... 나보다 웹을 잘 아는 친구도 그렇고 공식에서 아예 로컬에서 작업한 다음에 repository로 push를 하라고 언급한데에는 이유가 있다.

 

 

4년 전, 학부 종합설계(졸업프로젝트)를 진행하면서 Windows에서 WSL를 설치해놨던 기억은 있는데,

Docker를 설치한 것 까지는 기억이 나는데 사용한 기억이 나질 않아,

공식에서 제공하는 두 가지 방법 중 두번째 방법을 선택하기로 했다.

(그러지 말았어야 했는데......)

 

 

두번째 방법을 보니 공식에서 블로그 글을 하나 소개해주었다:

https://george-gca.github.io/blog/2022/running-local-al-folio/

George C. de Araújo | Running locally your own al-folio website

 

얼추 보니 WSL에 rbenv를 설치하고, bundle을 설치하는 내용.

큰 문제 없이 진행할 수 있겠다 하고 rbenv를 설치하는데

 

gcc가 없다고 한다. ㅋㅋㅋㅋ

당연히 WSL에 기본으로 같이 있는 줄 알았는데 없었을 줄은...

 

그래서 gcc를 다시 설치하고 이제 rbenv를 설치하려고 하는데

 

설치가 안된다. 😂

 

얼추 보니까 extension이 compile 안된다는 소리 같은데,

.log를 하나하나 찾아보기엔 너무 번거로울 것 같아서 버전을 낮춰서 설치하기로 했다. (3.2.3 → 3.1.4)

 

설치 성공.

 

버전 호환성 문제인지 뭔지... 일단 설치는 완료했으니 블로그 포스팅을 보면서 따라가는데

이번엔 bundle이 설치가 안된다 ㅋㅋㅋㅋㅋ😂

 

stack overflow를 찾아보고 했지만 마땅한 해결법은 안나오고, 시간은 흐르고...

 

그래서 결국 공식에서 추천하는 첫번째 방법(Docker 활용)으로 결정.

훨씬 simple하다.

 

WSL은 이미 설치되어 있으니 바로 Docker를 설치하고 실행하려고 하는데

Cannot connect to the Docker daemon at unix:///var/run/docker.sock. Is the docker daemon running?

 

이런 문구가 떴다. 🤔

 

stack overflow, docker forum을 찾아보니

sudo service start docker
sudo systemctl start docker

 

이렇게 하면 된다! 곤 하는데 되지가 않더라. 😂

 

그러던 중 아래 블로그 포스팅을 발견:

https://hyunsooworld.tistory.com/entry/Docker-%EC%98%A4%EB%A5%98-Cannot-connect-to-the-Docker-daemon-at-unixvarrundockersock-Is-the-docker-daemon-running-%EC%98%A4%EB%A5%98-%ED%95%B4%EA%B2%B0

[Docker 오류] Cannot connect to the Docker daemon at unix:///var/run/docker.sock. Is the docker daemon running? 오류 해결

 

한줄한줄 따라가는데 (정확히 어디였는지는 현재 기억이 잘 나지 않지만) 에러가 발생하고,

마음이 꺾이려던 순간 WSL 버전이 1인 경우 service, systemctl 이 동작하지 않는 경우가 있다고 한다.

 

그래서 WSL 버전을 확인해 보니 1........... 🤣

 

Microsoft에서 알려주는 방법대로 WSL을 아예 삭제하고, WSL 2로 다시 설치를 했다.

 

후에 다시 Docker를 설치하고 해당 폴더로 이동해 docker compose pull, docker compose up을 진행하니

 

드디어 된다. 😭

정말 웹 잘하는 분들이 너무 존경스러워지는 순간이었다... ㅋㅋㅋ

 

공식에서 제공하는 customizing tip과 코드를 살펴보며 천천히 입맛대로 수정하고, 빌드하고 를 반복...

로컬 환경 구동 시 걸리는 시간

 

나는 simple한걸 원했는데, 아무래도 범용으로 활용할 수 있도록 다양한 페이지와 기능들을 넣어서 그런지 한번 구동하기까지 시간이 조금 소요됐다.

 

얼추 세팅을 끝내고 상단에 있는 메뉴들을 어떻게 없앨 수 없나 하고 discussion 탭에서 찾아보니 역시나 정보가 있었다:

https://github.com/alshedivat/al-folio/discussions/2031

How to remove tabs in the top bar ? · alshedivat al-folio · Discussion #2031

 

로컬에서 확인한 개인 홈페이지 화면. 사진은 23년 7월 가족여행 갔을때 촬영했던 사진 :)

 

그렇게 내 입맛대로 조금씩 바꾸고, 고치기를 완료한 후 최종 push까지 했다.

이전에 repository에서 설정했던 Action이 있어서 push된 후에,

github에서 바로 컴파일? 같은 작업을 진행하고 배포를 완료해주었다.

Github Pages를 통해 배포된 개인 홈페이지.

 

완성!

 

내가 직접 하나부터 차근차근 만든것은 아니지만, (open-source로 멋진 작업해주시는 분들이 정말 감사할따름...)

그래도 예전부터 나름 위시리스트 중 하나인 개인 홈페이지를 만들어보자! 를 달성하니 뭔가 기분은 엄청 좋았다. ㅎ.ㅎ

 

물론 해당 홈페이지는 어디까지나 내 개인 소개 홈페이지? 같은 느낌으로 두고 있을 것이고,

이런 저런 글을 작성하는건 여기서 진행할 예정이다.

(널리 사용되는 잘 만들어진 서비스가 있다면 그걸 잘 활용하는 것이 옳다고 생각하기에...)

 

E.O.D.