GitHub pages by Next.js

오랜만에 지킬(jekeyll) 테마 기반의 깃헙 페이지에서 탈출하려고 합니다.

Next.js 리액트 서버사이드 렌더링 프레임워크로 옮겨보았습니다.

 

Mui + Next.js (feat. Typescript)

https://github.com/mui/material-ui/tree/master/examples/material-ui-nextjs-ts

리액트 진영의 컴포넌트는 거의 대부분 MUI를 활용하죠.

그래서 Next.js 예제를 찾아보았더니- 역시 최신 소스가 있군요.

 

Next.js 는 이번 13버전으로 올라오면서 기존 page 라우터 기반에서 App 라우팅 방식으로 구조가 좀 변경되었습니다.

물론 기존 page 기반 라우팅도 선택적으로 활용할 수 있죠.

 

 

위 깃헙 소스를 클론하거나 적용하게 되면 아래와 같은 레이아웃으로 페이지를 확인할 수 있습니다.

전형적인 헤더(GNB), 메뉴(LNB), 콘텐츠(BODY) 3분할 구조이죠.

 

여기서 부터 이제 소스를 수정하면 되겠습니다.

https://github.com/starrything/starrything.github.io

GitHub - starrything/starrything.github.io: My home

참고로 제 깃헙 주소를 올려둡니다.

"init-ver"브랜치가 있다면 초기 세팅한 버전일 겁니다.

(지울 가능성은 거의 없습니다.)

 

main 브랜치의 경우 지속적으로 업데이트 됩니다. 

 

 

---

이제 로컬 개발 환경이 구성되었죠. 

 

그 다음으로 해야할 일은 깃헙 설정입니다.

먼저 본인의 깃헙 리포로 이동합니다.

(repo 명칭은 본인 "계정명.github.io" 입니다.)

 

1. Settings 메뉴를 클릭합니다.
2. Settings > Pages 메뉴를 클릭합니다.
3. Build and deployment 항목의 "Source" 아래 있는 "GitHub Actions"를 선택합니다.

 

 

그리고 화면에 아래와 같은 Next.js Configure 기능을 클릭합니다.

Next.js Configure

 

그러면 아래와 같은 화면을 확인할 수 있습니다.

계속 "Commit changes" 버튼을 클릭해서 넘어갑니다.

 

 

그러면  Action 메뉴를 클릭해 확인하면 배포 스크립트가 실행되는 것을 확인할 수 있습니다.

 

배포 실행 목록

 

빌드 & 배포

 

 

참고로 Next.js 13버전의 App 라우팅 방식의 경우에는 아래와 같이 설정해야 합니다.