Blog
개발중인 미완성 페이지로, 일부 기능이 동작하지 않을 수 있습니다.

블로그 개발 계획

2024. 5. 24.|2024. 10. 6.

개발 블로그를 개발하기로 했다. 내가 쓰려고.

목차

개발 동기, 고려한 점 및 선택한 플랫폼

일단 고려한 점은 대강 다음과 같다

  1. 무료로 호스팅 가능한가
  2. 댓글 기능을 사용할 수 있는가
  3. 광고를 붙일 수 있는가
  4. 글을 파일로, 특히 Git으로 관리할 수 있는가

예전에 1번부터 3번까지의 조건을 만족하는 티스토리 블로그를 사용한 적이 있었으나, 4번도 안 되고, 마크다운 그대로 올리면 진짜진짜 못생겨서, 할 맛이 안 나서 접었다.

GitHub Pages 놔두고 굳이 티스토리를 선택했던 이유는 1, 2, 3번 조건을 만족하는 게 1, 3, 4번 조건만 만족하는 것보다 나으니까.

그런데 최근에 어쩌다 giscus라는 게 있다는 걸 알게 됐다. GitHub Pages에도 댓글을 무료로 붙일 수 있네?

그래서 바로 개발 착수. 🚀

목표

개발 관련 글을 주로 올릴 계획인데, 개발 관련 글 중 제일 꼴 보기 싫은 게 실행 안 되는 코드, 404 뜨는 링크가 있는 글이었다.

내 글이 그런 똥글이 되면 안 되니까, 매 빌드에서 모든 코드를 실행해보고, 모든 링크를 확인해보고 올리도록 만들 수 있을 것이다.

귀찮게 글마다 블로그 플랫폼 글쓰기 화면에서 글 쓰고 저장하고 스타일 입하고 수정하고... 하기 싫다.

게시 과정이 그냥 파일 수정하고 빌드해서 올리면 끝나게 단순화할 것이다. 빌드 과정이야 글 쓰는 개발자가 알아서 하겠지.

내가 하는 일이 웹 쪽이다 보니, 웹 프론트엔드 코드라면 블로그에서 바로 실행해서 보여줄 수 있으면 좋겠다.
예를 들면 이렇게

Why MDX
'use client';

import { useCallback, useState } from 'react';

export function WhyMDX() {
  const [count, setCount] = useState(0);
  const handleClick = useCallback(
    () => setCount((count) => count + 1),
    [setCount],
  );
  return (
    <button onClick={handleClick}>Click to increase number: {count}</button>
  );
}

기능

언제든지 여기에 없는 기능도 추가 가능!

기본적인 기능

  • 기본적인 정적 블로그
    • 글을 파일로 관리
    • 빌드 시점에서 글에서 사용된 코드 및 링크의 유효성 검사
    • 웹 프론트엔드 코드의 경우 바로 실행해볼 수 있도록
  • Google analytics SuperProxy 또는 HITS를 이용한 페이지뷰 카운터
  • giscus를 이용한 댓글 창

글 관련 기능

  • 자동 생성 목차
  • 코드 하이라이팅
    • 줄 번호, diff 등 각종 기능
  • Katex를 이용한 수학 기호 (예: c=±a2+b2c = \pm\sqrt{a^2 + b^2})
  • 커스텀 리액트 컴포넌트

편의 기능

  • 글을 쓴 시각, 마지막 수정 시각을 직접 적지 않아도 git에서 가져옴

당연한 기능

  • 다크모드
  • 다른 사람도 쓸 수 있도록

개발 방향 및 기술 스택

목표, 기능을 정하고 나니 대충 가닥이 잡힌다.

일단 Next.js와 MDX를 쓸 것이다.

글은 외부 Git 저장소를 clone받아 빌드 스크립트 실행 후 publish하도록, 다른 블로그도 양산할 수 있게 만든다.
이참에 스타일도 외부 Git 저장소에서 불러와도 되겠다.

일정

당장은 너무 바빠서 무리고, 나중에 개발해야지

Comments