코딩 없이 Next.js 기반 블로그 만들기

Github 계정만 있다면, 쉽게 Next.js 기반 블로그를 만들 수 있습니다.

tailwind-nextjs-starter-blog 를 이용해서 Next.js 기반의 블로그를 코딩 (거의)없이 만드는 방법을 알아보겠습니다.

해당 블로그 템플릿의 예시는 아래 링크에서 확인할 수 있습니다.

https://tailwind-nextjs-starter-blog.vercel.app/

Next.js Starter Blog

 

로컬환경 블로그

먼저 로컬환경에서 블로그 웹페이지를 띄워보겠습니다

tailwind-nextjs-starter-blog git repository 에 접근한 후에 "Use this template > Create a new repository" 를 클릭합니다

https://github.com/timlrx/tailwind-nextjs-starter-blog

 

 

Repository name 을 원하는 이름으로 채워주고 "Create repository" 를 클릭합니다

별도의 도메인이 없다면 Repository name 과 Github 계정 이름을 동일한 것으로 해주어야합니다.

블로그의 URL이 도메인이 없는 경우에는 <github 계정 이름>.github.io 가 될 것입니다

Github의 무료 플랜을 사용 중이라면 Public을 선택해야 블로그 웹페이지로 호스팅할 수 있습니다

 

 

저장소가 만들어졌습니다. 이제 로컬에서 작업하기 위해 저장소를 클론해야하는데요. "Code" 를 클릭해서 터미널에서 클론합니다

 

 

 

$ git clone git@github.com:<user>/<repository>.git

 

 

클론한 다음에, 해당 디렉토리로 이동 후 블로그 웹페이지를 띄워보기 위해서 빌드와 서버 시작을 해봅니다

$ cd <repository>
# yarn
$ yarn; yarn build; yarn start
# npm
$ npm install; npm build; npm start

 

이런 메시지가 뜨면 서버가 시작된 것입니다

RSS feed generated...
   ▲ Next.js 14.0.3
   - Local:        http://localhost:3000

Contentlayer config change detected. Updating type definitions and data...
 ✓ Ready in 3.5s
...
Generated 13 documents in .contentlayer
 ○ Compiling / ...
 ✓ Compiled / in 3.2s (947 modules)
 ✓ Compiled in 295ms (418 modules)

 

http://localhost:3000 으로 접속해보니 블로그가 잘 뜨는 것을 확인할 수 있었습니다

 

 

서비스환경 블로그 웹호스팅

이제는 인터넷을 통해 모두가 나의 블로그에 접근할 수 있도록 호스팅을 해보겠습니다

새로 만들어진 저장소 페이지에서 "Settings > Pages" 로 진입합니다

 

 

Source 를 Github Actions 로 선택합니다

 

 

그러면 이렇게 알아서 Next.js 프로젝트임을 인식하는데요. Actions 설정을 위해서 "Configure" 를 클릭합니다

 

 

이때 기본 제공되는 yml 파일을 수정하지 않고 "Commit changes..." 를 눌러 그대로 커밋하면 됩니다

 

 

Actions 탭에 접근하면, 워크플로우가 자동으로 동작하는 것을 볼 수 있습니다

 

워크플로우가 동작하는 동안, "Settings > Pages" 탭에 접근해서 "Enforce HTTPS"를 설정해둡니다

 

 

워크플로우를 다시 확인했더니 에러가 발생했습니다

읽어보니 next export 명령 대신 next.config.js 파일에 output이 export로 설정되어있어야 하는데 없다는 설명입니다.

 

next.config.js 파일을 아래와 같이 수정하고 커밋합니다. next.config.js 파일은 저장소의 루트에 있습니다.

 

 

에러 메시지에도 명시되었지만, 찾아보니 Next.js 14 버전부터는 export 명령을 사용하지 않는다고 합니다.

next export 명령을 삭제합니다.

 

워크플로우가 무사히 에러없이 끝났습니다

 

저는 도메인을 별도로 적용했는데요

접속해보니 호스팅된 블로그 페이지도 잘 뜨는 것을 확인했습니다!

 

결국 에러때문에 약간(?)의 코딩을 하게 되었는데요. 아주 간단한 작업이어서 어렵지는 않을 것입니다.

 

Next.js 템플릿을 이용해서 만든 블로그이긴 하지만, 거의 대부분이 완성된 상태이므로 시간을 상당히 아낄 수 있습니다. 필요한 부분은 커스터마이징하면 되겠습니다.

 

블로그 포스팅 방법

추후 포스팅을 하려고 하겠지만 결론부터 간단히 말하자면, <repository root>/data/blog 경로 하위에 포함된 .mdx 파일들이 블로그 포스트 원본들입니다. 이 파일들을 참고해서 포스팅하면 될 것입니다.

 

그리고 기타 다른 메타데이터들도 <repository root>/data 경로 하위에서 파일을 수정해서 설정 가능합니다.

 

 

참고한 문서

https://nextjs.org/docs/pages/building-your-application/upgrading/version-14

Upgrading: Version 14 | Next.js

https://nextjs.org/docs/app/building-your-application/deploying/static-exports

Deploying: Static Exports | Next.js

https://www.inflearn.com/questions/1068093/next-export-%EC%A7%88%EB%AC%B8%EC%9E%88%EC%8A%B5%EB%8B%88%EB%8B%A4

next export 질문있습니다 - 인프런

https://github.com/timlrx/tailwind-nextjs-starter-blog

GitHub - timlrx/tailwind-nextjs-starter-blog: This is a Next.js, Tailwind CSS blogging starter template. Comes out of the box co