개요

최근 저는 kubesy.com 에 Hugo라는 정적 사이트 생성기와 github.io를 이용하여 기술 블로그를 생성하였습니다. Hugo의 장점으로는 markdown 기반으로 홈페이지를 쉽게 구성한다는 점과 이미 만들어진 여러 사이트 템플릿이 존재한다는 것인데요. 처음 보는 사람들에게는 쉬운 시작점이 될 수 있겠으나, 이를 커스텀하기 위해서는 역시 또다른 공부가 필요해 보였습니다.

저는 이미 Vue.js를 공부하고 있었습니다. github 블로그의 작동 원리가, repository에 올라온 html 파일을 기반으로 화면을 뿌려주는 것으로 보여지는 상황에서, Hugo를 세세하게 공부하며 커스텀하기 보다, UI를 Vue.js를 이용해 만들고 배포해보는 것이 어떨까 생각이 들었습니다.

그래서 Vue.js의 튜토리얼 일환으로, Hugo 템플릿 중 PaperMod의 UI를 처음부터 쌓아가보는 연습을 해볼까 합니다.

시작

역시 시작은 Vue.js 환경 구성이겠습니다. 저는 금붕어라서 설치법을 항상 여기서 참고하곤 합니다.

바닐라 자바스크립트 위에 CDN을 활용한 방식이 있겠습니다만, Vue의 특징은 프레임워크이니 이 환경을 최대한 활용해보도록 합니다. 우선 그렇기 위해선 npm이 설치되어 있어야 합니다. npm이 설치되어 있음을 가정하고 진행해보도록 합시다.

$ npm init vue@latest

Vue.js - The Progressive JavaScript Framework

✔ Project name: … blog_vue
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › No
✔ Add ESLint for code quality? … No / Yes

Scaffolding project in /root/hugo/blog_vue...

Done. Now run:

  cd blog_vue
  npm install
  npm run dev

짜잔, 설치가 끝났습니다. 제가 선택한 모듈은 Vue Router와 Pinia(피냐) 입니다. 둘의 활용도는 추후에 설명드리도록 하게습니다. 이제 시키는 대로 blog_vue 폴더에 들어가 npm 으로 시작하는 두 명령어를 쳐보겠습니다.

아, 그 전에 생성된 폴더 구조를 살펴보고 가시죠.

$ ls
README.md  index.html  node_modules  package-lock.json  package.json  public  src  vite.config.js

npm install 은 package.json에 정의된 모듈을 레포지토리에 설치하는 명령어입니다. 깃으로 형상관리 시에, node_modules 파일은 gitignore 하기 때문에, 새로 레포지토리를 클론하거나 할 때 마다 위의 명령어를 실행 시켜줘야 합니다.

물론 지금은 특정한 모듈을 사용한 적이 없기 때문에 별 메세지는 뜨지 않을 겁니다. 우리는 추후에 추가적인 모듈을 설치 할 것 입니다.

npm run dev는 개발 환경 상에서 프로젝트를 가동하는 명령어 입니다. 추후에 최종 버젼이 완성이 되면 저희는 npm build를 사용할 것 입니다. 명령어를 치면 다음과 같이 터미널 환경이 바뀝니다!

VITE v4.4.4  ready in 624 ms

  ➜  Local:   <http://127.0.0.1:5174/>
  ➜  Network: use --host to expose
  ➜  press h to show help

http://127.0.0.1:5174/를 눌러 시작페이지를 살펴봅시다. 격려인사와 함께 뷰 프로젝트의 디폴트 화면이 등장합니다. 이 페이지에는 각종 피가되고 살이 되는 (하지만 제대로 보기는 귀찮은) 각종 문서들이 링크되어 있습니다. 뷰를 시작할 때 보면 좋은 것들 입니다.

Untitled

하지만 저는 고리타분하게 문서를 들여다보는 것보단, 뭐라도 뚝딱거리는 걸 좋아하는 편 (아마도 .. 나쁜 습관이라고 생각합니다) 입니다. 메인 화면을 고쳐봅시다!