개요

블로그를 오랜만에 다시 만들었다. 거의 한 3년 만인 듯 하다. 최근에 front-end와 웹 앱 관련된 부분들에 관심이 생기면서 JavaScript와 NextJS 같은 프레임워크, css 같은 부분들을 공부 했었다. 원래 목표는 분석이나 모델링 산출물을 간단한 UI를 만들어 그럴듯하게 만들어 보고자 했었다. 그런데 회사에서는 불필요하게 생각하는 것 같아 시간 투자가 어려워 많이 진행하지는 못했다. 그러면서 블로그를 내 손으로 새로 만들어보고 싶다는 생각이 들었다.

한참 동안은 그냥 혼자서 밑바닥부터 만들어 보려고 시도했었다. 생각보다 공부해야 할 것도 많고, 익숙하지 않은 언어를 다루려다 보니 흥미도 떨어지게 되었다. 결국 중간에 포기하게 되는 상황이 발생했다. 그래서 그냥 잘 만들어져 있는 템플릿을 이용하고 추후에 발전시키는 방향으로 하는 것이 맞겠다는 생각이 들었다. github를 찾다가 "tailwind-nextjs-starter-blog"라는 템플릿을 이용하기로 하였다. 사용법도 제법 잘 작성되어 있어 활용하기가 좋다.

해당 템플릿은 많은 기능들이 이미 구현 되어 있어 바로 사용가능한 것이 큰 장점이다. NextJS와 tailwind 3.0을 사용하고 있어, 나중에 커스텀하기 용이할 것으로 생각된다. 검색최적화나 구글 아날리틱스 같은 것을 붙이기도 쉽게 되어있다. 그리고 용량도 줄이기 위해서 많이 노력한 것 같고, lighthouse score도 높은 걸로 보인다. 또 여러 곳에 호스팅 할 수 있는데 나는 그냥 github에 하기로 했다. github.io 도메인이 보다 익숙하고 vercel 같은 서버리스도 이용해보고 싶긴 했지만, 이건 다른 미니 프로젝트에서 해보는게 좋을 것 같다.

사용 방법

이 전에는 ci/cd 같은 개념을 몰라서 다소 불편하게 작업 했었다. 당시에는 github actions가 없었고, travis CI 같은 솔루션이 있었는데 사용이 어려워 포기했었다. 이전에 사용했던 방법은 우선 local에서 markdown 문서를 작성하고, local에서 build 하고 build 된 결과물을 github에 push 하는 방식이었다. github actions를 사용하면 build와 이후 과정을 내가 하지 않아도 된다. 따라서 markdown 작성 후에 push 하면 알아서 build와 deploy를 해준다. 사용법은 우선 로컬에 템플릿을 받아준다.

npx degit 'timlrx/tailwind-nextjs-starter-blog'

그 다음에 필요에 따라 siteMetadata.js와 next.config.js, authors/default.md, projectsData.ts, headerNavLinks.ts 등의 파일을 수정해주면 된다. 포스트는 ./data/blog 안에 작성해주면 된다.

github를 이용할 경우에는 next.config.js를 수정해 주어야 한다. 아래와 같이 output: 'export'를 추가해 준다.

module.exports = () => {
	const plugins = [withContentlayer, withBundleAnalyzer]
		return plugins.reduce((acc, next) => next(acc), {
		reactStrictMode: true,
		pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
		eslint: {
		dirs: ['app', 'components', 'layouts', 'scripts'],
	},
	output: 'export',
	...

그리고 조금 더 내리면 hearders() 부분이 나오는데 이 부분은 주석 처리해준다.

그 다음에는 github에서 몇 가지 설정을 세팅 해주어야 한다. 우선은 레포지토리를 하나 생성해 주어야 한다. 생성 후에는 해당 레포지토리 settings 안에 있는 pages로 이동한다. 중간에 source를 github actions로 선택해준다. NextJS 관련된 workflow를 선택한다. 그대로 해서 배포하면 실패하는데, workflow를 약간 수정해주면 문제 없이 동작한다.

      - name: Build with Next.js
        run: ${{ steps.detect-package-manager.outputs.runner }} next build
        run: ${{ steps.detect-package-manager.outputs.runner }} next export

위 코드를 아래와 같이 수정

      - name: Build with Next.js
        run: ${{ steps.detect-package-manager.outputs.runner }} build

이제 로컬에서 markdown 작성 후 github에 push하면 자동으로 build & deploy 되며 게시글이 업데이트 된다.

추후 계획

디자인을 내 것으로 만들어 보고 싶다. 그리고 꾸준하게 글 작성하기. 기존에도 만들어 놓고 잘 안써서 이번에는 진짜 잘 써보자.