개발자 블로그 세팅기

0. 블로그를 만들어보자!

[지금 무료] 쏟아지는 지식을 내 것으로 만드는 방법 (선택, 학습, 체득 가이드) [이정환] | 이정환

이정환 Winterlood | , 📍 유튜브 라이브 링크는1월 16일(목) 문자로 전달드립니다. [사진] [사진] - 상세 소개 | 인프런

www.inflearn.com

요즘 리액트를 공부하고 있어 이정환 님의 "쏟아지는 지식을 내 것으로 만드는 방법" 세미나를 듣게 되었습니다. 학습을 효율적으로 하려면 블로그를 통해 나의 지식을 다른 사람들에게 설명하다 보면 내가 모르는 부분을 알게 되고 정리되어 학습 효율이 좋아진다는 내용이 있었고 인상깊었습니다. "이 기회에 블로그를 만들어보자"라는 생각이 들었고, 나의 블로그 생성 노하우를 남기어 저와 같이 블로그를 만들지 못한 분들에게 조금이라도 도움이 되고자 글을 남기게 되었습니다.

1. 어떤 블로그를 만들 것인가..?

우리나라에는 수많은 블로그가 있습니다. 가장 쉽게 만날 수 있는 네이버 블로그부터 티스토리, velog, jekyll, 워드프레스, github 등을 찾아볼 수 있습니다. 저는 그중에 티스토리를 선택하였습니다. 글 작성에 최적화된 마크다운이 완전히 지원되지 않지만, 자유로운 커스터마이징과 쉬운 사용법, 국내 압도적인 점유율과 함께 저와 10년이란 시간을 함께한 티스토리를 선택하였습니다.

블로그 플랫폼 비교

이름	사용레벨	스킨 수정	검색 유입	마크다운
네이버 블로그	쉬움	거의 못함	네이버만 유입	미지원
티스토리	중간	자유로움	자유로움	기본만 지원
velog	쉬움	못함	자유로움	지원
jekyll (github 블로그)	어려움	자유로움	자유로움	지원

2. 블로그 스킨 추천

티스토리는 수많은 스킨과 템플릿이 존재합니다. 그중에 3가지 스킨을 추천드립니다.

1) 프라치노 Lined Notebook

프라치노 공책

티스토리 스킨 배포, 다운로드. 예쁜 줄공책 모양의 반응형 스킨.

fcnotebook.tistory.com

장점
- 옥스퍼드 노트를 연상케 하는 깔끔한 디자인
단점
- 29달러의 유료 스킨
추천
- 소스코드에 대해서 정리하거나 요약하는 정리형 블로그에 적합

이 스킨은 단지 예뻐서 29달러의 거금을 주고 직접 구매한 티스토리 스킨입니다. 만족도가 상당히 높은 스킨이며, 상당히 고민을 많이 한 스킨입니다. 하지만, 이번 블로그는 정리 및 요약보다 분석 및 후기와 같은 글을 작성할 예정이다 보니 이 스킨은 사용하지 않기로 결정하였습니다.

2) 캥거루 스킨

개발하는 캥거루

개발자를 위한 티스토리 블로그 스킨.

dev-roo.tistory.com

장점
- 심플한 디자인
- 빠른 로딩속도와 부드러운 로딩 효과
단점
- 심플한 디자인
추천
- 일기나 TIL 등 짧은 글 위주의 블로그에 적합

심플한 티스토리 스킨입니다. 심플한 것을 좋아하면 추천하는 스킨이지만, 저는 너무 심플해서;; 선택하지 않았습니다.

3) hELLO

hELLO 티스토리 스킨을 소개합니다.

hELLO 는 2020년 3월 첫 공개 이후 지금에 이르기까지 티스토리에서 많은 블로거분들께 사랑받은 스킨이 되었습니다. 그 결과 가장 영향력 있는 개발자 커뮤니티인 깃허브에서 약 천 개에 달하는

pronist.tistory.com

장점
- 티스토리에서 가장 많이 사용되고 추천하는 스킨
- 최근 24년 12월까지 업데이트 지원
- 비교적 레이아웃은 심플하지만, 문장이 길어도 어울리는 대중적인 디자인
- 블로그 기능은 모두 무료로 사용 가능하며, 첫 페이지(홈화면)가 필요한 경우 유료(15,000원) 필요 (소개페이지, 구매 링크)

단점
- 없음
추천
- 특정 주제에 대해 분석하거나 어떤 문제를 증명하는 블로그에 적합

많은 사용자가 사용하기 때문에 무난하며 대중적인 스킨입니다. 익숙한 스킨이며, 레퍼런스도 많아 수정하기도 편하며 많은 관련 글을 찾아볼 수 있습니다. 저는 블로그를 통하여 포토플리오를 작성할 예정이어서 유료도 충분히 매력적이라고 생각합니다.

3. 설치 방법

① 아래 페이지를 통하여 최신 버전의 배포 파일을 다운로드합니다.

Releases · pronist/hello

😎 당신의 블로그를 위한 최고의 티스토리 스킨. Contribute to pronist/hello development by creating an account on GitHub.

github.com

② 다운로드한 파일의 압축을 풀고, 하위 디렉터리 안에 있는 모든 파일을 하나의 디렉터리에 저장합니다. images 디렉토리 안에 있는 파일을 메인 디렉터리로 모두 이동시켜 줍니다.

③ 관리자 페이지 > 스킨 변경 > 스킨 등록 > 추가 버튼을 통하여 2번 과정의 파일을 모두 업로드시켜 줍니다.

④ 스킨이 등록되면 블로그에 스킨이 적용됩니다. 블로그에 들어가 스킨이 잘 적용되었는지 확인해 봅니다.

⑤ 모바일의 경우 관리자 - 모바일웹 설정 - 티스토리 모바일웹 자동 연결을 사용하지 않습니다로 설정합니다.
⑥ 관리자 - 메뉴바/구독 설정 - 블로그 메뉴바를 표시합니다로 설정합니다.

4. 기타 설정

1) 코드 하이라이팅 스킨 설정

개발자 블로그에서 코드를 하이라이팅은 매우 중요한 부분입니다. 티스토리는 일반 테마와 다크테마 두 가지의 코드 하이라이팅을 제공해 주지만, 실제로 코드 하이라이팅은 수많은 스킨을 제공해주고 있습니다. 다양한 색상의 코드 하이라이팅을 제공하므로 강력한 코드 하이라이팅을 사용할 수 있습니다.

① 코드 하이라이팅 데모 페이지를 통하여 내가 원하는 코드 하이라이팅 스킨 테마를 찾습니다.

Demo - highlight.js

...

highlightjs.org

② 관리자 페이지 > 스킨 변경 > 사용 중인 스킨 변경 > 사용 중인 스킨 편집 > 코드 하이라이팅의 테마를 변경합니다.

③ 변경된 코드 블록을 확인합니다.

④ hELLO 스킨은 하이라이트 11.10 버전을 사용하기 때문에 테마목록은 아래 페이지에서 확인 가능합니다. (단, 스킨을 변경하여도 스킨의 일관성을 유지하기 위해 코드의 배경색은 변경되지 않습니다)

highlight.js/src/styles at 11.10.0 · highlightjs/highlight.js

JavaScript syntax highlighter with language auto-detection and zero dependencies. - highlightjs/highlight.js

github.com

2) 코드 라인넘버 추가

① 관리자 페이지 > 스킨 변경 > 사용 중인 스킨 편집 > HTML에 다음 코드를 추가합니다.

<head>
    <!--Syntax Highlighter Start -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>

    <script> 
        hljs.highlightAll();
        hljs.initLineNumbersOnLoad();
    </script>
    <!--Syntax Highlighter End -->
</head>

#content .hljs-ln-numbers {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-align: center;
    color: #ccc;
    border-right: 1px solid #CCC;
    vertical-align: top;
    padding-right: 5px;
}
 
#content .hljs-ln-code {
    padding-left: 10px;
}

3) 코드 하이라이팅 폰트 변경

코드 블록의 기본 폰트는 듣보잡 폰트이기 때문에 저는 intellij에서 사용하는 폰트로 변경하였습니다.

① 관리자 페이지 > 스킨 변경 > 사용 중인 스킨 변경 > HTML 추가

<head>
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap" rel="stylesheet">
/<head>

② 관리자 페이지 > 스킨 변경 > 사용 중인 스킨 변경 > CSS 변경

code,
kbd,
samp,
pre {
  font-family: "JetBrains Mono", "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

5. 라이센스

스킨을 개조하는 것은 허용합니다. 단, 원 저작자가 누구인지 표기해야 합니다.
스킨의 코드를 관리하는 링크를 반드시 포함해야 합니다. (https://github.com/pronist/hello)
스킨을 1회성 구매(39,000원)를 한 경우 아래와 같은 권리가 생깁니다. 단, 하나의 블로그에만 해당됩니다.
스킨 구입은 pronist@naver.com을 통해 문의하시기 바랍니다.

6. 마치며

앞으로 이 글을 통하여 많은 개발자가 블로그를 통하여 자신의 지식을 정리하고 공유하여 개발 생태계에 긍정적인 영향을 많이 받았으면 좋겠습니다. 다들, 못생긴 블로그가 아니라 예쁜 블로그로 시작을 하는 여러분이 되기를 바랍니다.

0. 블로그를 만들어보자!

1. 어떤 블로그를 만들 것인가..?

2. 블로그 스킨 추천

1) 프라치노 Lined Notebook

2) 캥거루 스킨

3) hELLO

3. 설치 방법

4. 기타 설정

1) 코드 하이라이팅 스킨 설정

2) 코드 라인넘버 추가

3) 코드 하이라이팅 폰트 변경

5. 라이센스

6. 마치며

티스토리툴바