Next.js, github pages로 블로그 만들기

Next.js, github pages로 블로그 만들기

1. github pages

github pages에 들어가면, github 레포지토리를 호스팅하는 방법이 자세하게 나온다. 시키는 대로 따라가면 https://[사용자이름].github.io로 웹사이트가 하나 만들어진다.

2. Next.js, typescript, tailwindcss, contentlayer

Next.js를 공부할 겸 블로그를 만들었으니, Next.js로 블로그를 꾸며야 하는데 github pages 튜토리얼대로라면 내 레포지토리엔 index.html 하나밖에 없다. 다행히 Next.js 공식 문서에

빈 레포지토리에 Next.js와 typescript, tailwindcss 설정이 끝났다.

이제 Next.js로 작성한 페이지를 빌드하고, 빌드된 결과물을 호스팅해야 한다. 그 방법도 역시 Next.js의 Deployment 파트에 다 나와있다. 코드 예제는 github 레포지토리에 있다.

간단하게 페이지를 몇 개 만들어보려다 애먼 곳에서 시간을 많이 썼는데, 이유는 간단했다.

github pages로 블로그를 호스팅하기 위해 next export로 static html 파일을 만드는데, Next 13부터 제공하는 app directory routing(beta, 2023.03.04 기준)이 아직 next export는 지원하지 않았기 때문이다.

이렇게 Next.js 세팅이 끝나서 간단하게 라우팅을 하고 페이지를 작성해보려고 했다. 근데 Next.js는 몇달 전에 인강으로 접한 게 전부라 기억도 안 나고, 빨리 뼈대라도 만들어서 배포를 해보고 싶어서 잘 정리된 블로그를 참고했다.(contentlayer라는 패키지가 있어서 mdx를 편하게 쓸 수 있었다. 다음에 좀 자세히 봐야겠다. (나는 있는 것도 잘 못쓰는데 누군가는 도움이 되는 걸 계속 만드는구나..ㅠㅠ))

3. github actions

중간에 깃헙에서 레포지토리를 한번 보니, .gitignore 설정을 제대로 안 해놔서 빌드된 결과물이 레포지토리에 다 올라가 있었다. 다시 .gitignore를 설정한 뒤, 위에 있는 정적 사이트 배포 예제(github 레포지토리)대로 호스팅을 하려고 보니, 스크립트에서 out 디렉토리(빌드 결과물; static html)를 사용하고 있었다.

git 명령어만으로 어떻게 처리할 수 있을까 찾아보다가 결국 github actions를 사용할 수 밖에 없었다. 빨리 결과를 보고 싶어서 역시 잘 정리된 블로그를 참고했다.(감사합니다..)

workflows를 복사해서 레포지토리에 푸시했는데, 빌드에 실패했다. 레포지토리에서 github actions 관련 설정을 해줬어야 했다. [Setting] -> [Code and automation] -> [Actions] -> [General]의

  • Workflow permissions 항목에서 Read adn write permission를 선택하고,
  • Allow Github Actions to create and approve pull requests를 체크하니 github actions가 잘 동작한다. (사진 첨부 예정)

이렇게 허접한 나의 블로그가 완성됐다.(역시 사진 첨부 예정)

4. 해야할 일들(추가 예정)

  검색 최적화
  마크다운에서 이미지 사용
  Next.js 이미지 최적화(지금은 이미지 최적화 설정을 꺼놓은 상태; 2022.03.04)
  컨텐츠 그룹화(routing) -> 넋두리 & 개발 정도면 될듯..?
  기본적인 레이아웃 잡기
  댓글, 좋아요
  메인 배너 추가..?

넋두리

2017년인가.. 교양 수업인 공연 에술 비평에서 교수님이 헤밍웨이의 말을 인용했었다.

The first draft of anything is shit.

  • Ernest Hemingway

코드도 블로그 글도 퇴고를 거쳐야 한다.

참고