NuxtJS로 Github에 블로그 만드는 방법

NuxtJS는 VueJS로 SSR(Server Side Rendering)을 가능하게 하는 프레임워크다.

블로그와 같이 정적인 문서를 다루는 웹페이지에 적합하다.

 

요즘에는 github.io라는 URL 페이지가 심심치 않게 보인다.

보통 jekyll라는 것을 활용하여 좋은 프리셋을 선택해 블로그로 활용하는 듯한데

Nuxt를 이용하면 디자인을 마음대로 바꿀 수 있어서 좋다.

 

리액트에 대해서 잘 알고 있다면 Vue를 조금 공부하더라도

어렵게만 보이는 Nuxt를 쉽게 구현할 수 있다.

 

Nuxt 설치

아래의 create nuxt-app 명령어로 시작하자.

대부분 필요한 것들을 알아서 설치해준다.

 

npx create nuxt-app 프로젝트-폴더-이름

 

생성된 프로젝트 폴더에 진입해서 아래 명령어를 입력하면 바로 실행된다.

 

npm run dev

 

nuxtjs.org/docs/2.x/get-started/installation

 

설정

create nuxt-app이 생성한 구조 대로 돌아가므로 매뉴얼과 폴더 안에 있는 README.md 파일을 꼼꼼히 읽어서

라우팅이나 필요한 파일들을 생성하자.

nuxtjs.org/docs/2.x/get-started/routing

nuxtjs.org/docs/2.x/get-started/directory-structure

 

배포

github.io에 배포하려면 다음 링크를 참고해서 빌드하자.

nuxtjs.org/docs/2.x/deployment/github-pages

 

생성된 dist 폴더의 모든 파일들을 본인의 github.io 리파지토리에 올린다.

예를 들어 리파지토리 이름은 다음과 같아야 한다.

사용자이름.github.io

 

리파지토리의 settings 탭에서 그림처럼 녹색불이 들어와야 한다.

 

 

dist 폴더에 포함된 .nojekyll 파일을 추가하지 않으면 이미지 파일 등을 GET 불러오지 못하니 주의하자.

https://github.community/t/error-404-for-image-file-via-pages-which-exists-in-repository/10880

 

블로그 만들기

Github README.md 파일처럼 HTML 태그를 쓰지 않더라도 .md 파일을 이용해서 태그를 빌드할 수 있다.

즉 .md 파일 포맷에 맞춰서 작성하기만 하면 복잡한 마크업 랭귀지를 쓰지 않더라도 손쉽게 블로그 글을 업데이트 할 수 있다.

문법은 다음을 참고하자.

docs.github.com/en/github/writing-on-github/basic-writing-and-formatting-syntax

 

다만 이를 써먹으려면 규칙을 따라야 한다.

아래 공식문서의 내용을 꼼꼼히 읽고 하나하나 적용해보자.

nuxtjs.org/blog/creating-blog-with-nuxt-content