- Published on
- Authors
- Name
- 곽선생
- @neochime
1. 개인 블로그 만드는 유형
블로그는 크게 두 가지 방법으로 시작할 수 있습니다
포털 블로그 서비스를 이용하거나, 직접 블로그를 만드는 것입니다.
포털 블로그 서비스를 이용하기
포털 블로그 서비스
대형 포털 사이트에서 제공하는 블로그 서비스를 이용하면 누구나 쉽게 블로그를 시작할 수 있습니다.
이러한 서비스는 가입만 하면 바로 블로그를 시작할 수 있다는 큰 장점이 있습니다. 또한, 블로그 운영에 필요한 각종 관리 도구를 대부분 무료로 제공해주기 때문에 매우 편리합니다.
하지만 특정 플랫폼에 종속되기 때문에 나만의 개성 있는 블로그를 만드는 데는 한계가 있을 수 있습니다.
특히 국내 포털 사이트에서 제공하는 블로그 서비스의 경우 폐쇄적인 생태계에 나의 블로그가 갇혀버리는 느낌을 받을 수 있습니다.
블로그 특화 서비스
포털 사이트 외에도 블로그에 특화된 서비스들이 있습니다.
대표적으로 해외에는 Medium, 국내에는 티스토리와 밸로그, 브런치 등이 있습니다.
이러한 서비스들은 UI가 깔끔하고 블로그를 커스터마이징하기가 좀 더 용이하다는 장점이 있습니다.
그러나 이러한 플랫폼이 서비스를 종료하면 블로그도 함께 없어질 위험이 있으므로, 장기적인 운영을 계획하신다면 이러한 리스크를 고려하셔야 합니다.
직접 블로그 만들기
직접 블로그 만들기
외부 서비스에 의존하지 않고 스스로 블로그를 만드는 방법도 있습니다. 이를 위해 정적 사이트 생성기(Static Site Generator, SSG)를 활용할 수 있습니다. SSG는 마크다운(Markdown)과 같은 간단한 문법을 사용하여 정적 웹사이트를 생성하는 도구입니다. 다양한 SSG 중에서 몇 가지를 소개합니다.
Jekyll
Jekyll은 가장 오래된 SSG 중 하나로, GitHub Pages에서 공식적으로 지원하기 때문에 개발자들 사이에서 인기가 많습니다. 마크다운을 사용하여 콘텐츠를 작성할 수 있으며, Ruby 기반으로 동작합니다.
그러나 Ruby에 익숙하지 않은 경우 문제가 발생했을 때 해결하기 어려울 수 있습니다.
Hexo
Hexo는 자바스크립트 기반의 SSG로, Node.js를 사용합니다. 예쁜 테마와 유용한 플러그인이 많으며, npm
을 통해 쉽게 설치할 수 있습니다.
자바스크립트에 익숙한 개발자들에게 추천할 만한 도구입니다.
Gatsby
Gatsby는 React와 GraphQL을 기반으로 한 SSG입니다. 다양한 소스에서 콘텐츠를 가져와 블로그로 변환할 수 있는 유연함이 특징입니다.
그러나 React와 GraphQL에 대한 학습이 필요하므로, 이에 익숙하지 않다면 진입 장벽이 있을 수 있습니다.
기타 SSG
그 외에도 Hugo, VuePress 등 다양한 SSG가 있습니다. 각 도구마다 특징이 있으므로, 자신의 기술 스택과 목적에 맞는 SSG를 선택하는 것이 중요합니다.
2. 제가 추천하는 블로그 방식
2.1 전제 조건
- 언제든지 쉽게 작성하고 배포할 수 있도록 사용하기 편해야 한다.
- 유지 비용이 들지 않아야 한다.
- 플랫폼에 종속적이지 않아야 한다.
- 블로그 스타일은 내가 원하는대로 커스터마이징이 용이해야 한다.
tailwind nextjs starter blog kit를 추천합니다.
tailwindcss와 nextjs 기반tailwind-nextjs-starter-blog 공식 Github
2.2 주요 특징 및 장점
- 초간단 블로그 설치 스타트 툴킷 방식을 활용하여 즉시 생성 가능
- 전문적인 CSS 지식이 없더라도 tailwindcss가이드](https://tailwindui.com/?ref=top)를 통해 간편하게 커스터마이징 가능
- git 배포방식으로 블로그 컨텐츠를 항상 로컬에 보관하며 언제든 새로운 저장소에 배포 가능
- 호스팅, 도메인 구매 등이 필요없이 github 상에서 github.io 도메인으로 별도 비용없이 블로그 운영 가능
- nextjs mdx 방식으로 정적인 마크다운 표현 뿐 아니라 다양한 고급 기능을 추가로 구현해서 적용 가능
- react nextjs 생태계의 다양한 기법들을 실험하고 적용해 볼 수 있음 - 접속 통계, 댓글, 메일링리스트 등 블로그 운영에 필요한 기능 기본 컴포넌트로 제공 - 블로그 다듬는 과정을 통해 프런트페이지 개발에 대한 안목을 덤으로 높일수 있음
지금부터 tailwind-nextjs-starter-blog 블로그 템플릿을 이용하여 블로그 서비스를 운영 하는 방법을 소개합니다
3. tailwind-nextjs-starter-blog 설치 및 배포 방법
3.1 사전 준비 사항
- Visual Studio Code
로컬 환경에서 직접 tailwind-nextjs-starter-blog를 구동하고 블로그 글을 작성한 후 확인하기 위한 에디터 도구 - git 설치
배포 명령어를 수행하기 위한 git cli - nodejs 설치
tailwind-nextjs-starter-blog 를 실행하기 위한 javascript Runtime - yarn 설치
tailwind-nextjs-starter-blog 라이브러리 패키지 매니저 - github 계정
블로그 페이지 배포 서버
3.2 단계별 설치 및 배포 절차
3.2.1. github.com 사이트에서 "tailwind-nextjs-starter-blog" git을 fork하여 개인 repo 생성
- https://github.com 로그인
- 공식 tailwind-nextjs-starter-blog Repo git url https://github.com/timlrx/tailwind-nextjs-starter-blog 접속 후 상단탭에서 Fork 기능을 이용하여 Fork 진행
- github.io 도메인으로 서비스해야 되므로 repository name은 반드시 [github계정명].github.io 로 해야 됩니다.
3.2.2. 로컬 환경에서 fork를 통해 생성된 git clone
# fork한 Git Repo clone
git clone https://[git토큰]@github.com/[github계정]/[git Repo이름]
# VSCODE 실행
cd myblog
code .
3.2.3. 로컬에서 VSCODE로 블로그 실행하기
- VSCODE에서 터미널 뷰 실행 후 기본 라이브러리 설치 및 실행
# package.json 라이브러리 설치
yarn
# tailwind-nextjs-starter-blog 실행
npm run dev
실행후 콘솔 화면에서 로컬 접속 URL 확인
로컬 URL로 브라우저에서 접속 상태 확인
이 상태에서 블로그 작성 후 실시간 작성 상태 확인이 가능합니다.
3.2.4. github pages 배포하기
github 프로젝트 repo Setting > pages 접속
github action 방식을 "deploy from a branch" 로 설정
Github Action 메뉴애 접속하여 job 최초 실행
정상 배포되었다면 브라우저에서 https://[Github계정].github.io URL을 통해 블로그 사이트가 조회되는지 확인
나만의 블로그가 완성되었습니다.👏
지금부터는 블로그 페이지를 작성하고 git push만 하게 되면 소스코드 내에 있는 github workflow에 의해 github action이 자동 작동되어 https://[Github계정].github.io 에서 변경된 블로그 사이트를 확인할 수 있습니다.
4. 본격적인 블로그 운영을 위한 팁
4.1. 개인용 블로그 작성을 위한 최소한의 설정
최초 설치하게 되면 기본 템플릿과 정보로 되어 있어서 나만의 블로그 용도에 맞는 문구나 정보로 교체해야 됩니다.
vscode에 아래 파일을 오픈하여 나의 블로그 정보에 맞는 정보로 수정해 주세요 SNS, 이메일 정보 등은 실제 사용하는 값으로 교체하고 사용하지 않는 정보는 주석으로 막으면 됩니다. 변경된 상태 정보는 직접 로컬 환경에서 구동중인 블로그 페이지에서 확인하면서 수정해 보세요
data/siteMetadata.js
/** @type {import("pliny/config").PlinyConfig } */
const siteMetadata = {
title: 'Next.js Starter Blog', //블로그 제목
author: 'Tails Azimuth', //블로그 저장명
headerTitle: 'TailwindBlog', //블로그 헤더 타이틀명
description: 'A blog created with Next.js and Tailwind.css',
language: 'en-us',
theme: 'system', // system, dark or light
siteUrl: 'https://tailwind-nextjs-starter-blog.vercel.app',
siteRepo: 'https://github.com/timlrx/tailwind-nextjs-starter-blog',
siteLogo: `${process.env.BASE_PATH || ''}/static/images/logo.png`,
socialBanner: `${process.env.BASE_PATH || ''}/static/images/twitter-card.png`,
mastodon: 'https://mastodon.social/@mastodonuser',
email: 'address@yoursite.com',
github: 'https://github.com',
x: 'https://twitter.com/x',
// twitter: 'https://twitter.com/Twitter',
facebook: 'https://facebook.com',
youtube: 'https://youtube.com',
linkedin: 'https://www.linkedin.com',
threads: 'https://www.threads.net',
instagram: 'https://www.instagram.com',
medium: 'https://medium.com',
bluesky: 'https://bsky.app/',
locale: 'en-US',
// set to true if you want a navbar fixed to the top
stickyNav: false,
analytics: {
// If you want to use an analytics provider you have to add it to the
// content security policy in the `next.config.js` file.
// supports Plausible, Simple Analytics, Umami, Posthog or Google Analytics.
umamiAnalytics: {
// We use an env variable for this site to avoid other users cloning our analytics ID
umamiWebsiteId: process.env.NEXT_UMAMI_ID, // e.g. 123e4567-e89b-12d3-a456-426614174000
// You may also need to overwrite the script if you're storing data in the US - ex:
// src: 'https://us.umami.is/script.js'
// Remember to add 'us.umami.is' in `next.config.js` as a permitted domain for the CSP
},
// plausibleAnalytics: {
// plausibleDataDomain: '', // e.g. tailwind-nextjs-starter-blog.vercel.app
// If you are hosting your own Plausible.
// src: '', // e.g. https://plausible.my-domain.com/js/script.js
// },
// simpleAnalytics: {},
// posthogAnalytics: {
// posthogProjectApiKey: '', // e.g. 123e4567-e89b-12d3-a456-426614174000
// },
// googleAnalytics: {
// googleAnalyticsId: '', // e.g. G-XXXXXXX
// },
},
newsletter: {
// supports mailchimp, buttondown, convertkit, klaviyo, revue, emailoctopus, beehive
// Please add your .env file and modify it according to your selection
provider: 'buttondown',
},
comments: {
// If you want to use an analytics provider you have to add it to the
// content security policy in the `next.config.js` file.
// Select a provider and use the environment variables associated to it
// https://vercel.com/docs/environment-variables
provider: 'giscus', // supported providers: giscus, utterances, disqus
giscusConfig: {
// Visit the link below, and follow the steps in the 'configuration' section
// https://giscus.app/
repo: process.env.NEXT_PUBLIC_GISCUS_REPO,
repositoryId: process.env.NEXT_PUBLIC_GISCUS_REPOSITORY_ID,
category: process.env.NEXT_PUBLIC_GISCUS_CATEGORY,
categoryId: process.env.NEXT_PUBLIC_GISCUS_CATEGORY_ID,
mapping: 'pathname', // supported options: pathname, url, title
reactions: '1', // Emoji reactions: 1 = enable / 0 = disable
// Send discussion metadata periodically to the parent window: 1 = enable / 0 = disable
metadata: '0',
// theme example: light, dark, dark_dimmed, dark_high_contrast
// transparent_dark, preferred_color_scheme, custom
theme: 'light',
// theme when dark mode
darkTheme: 'transparent_dark',
// If the theme option above is set to 'custom`
// please provide a link below to your custom theme css file.
// example: https://giscus.app/themes/custom_example.css
themeURL: '',
// This corresponds to the `data-lang="en"` in giscus's configurations
lang: 'en',
},
},
search: {
provider: 'kbar', // kbar or algolia
kbarConfig: {
searchDocumentsPath: `${process.env.BASE_PATH || ''}/search.json`, // path to load documents to search
},
// provider: 'algolia',
// algoliaConfig: {
// // The application ID provided by Algolia
// appId: 'R2IYF7ETH7',
// // Public API key: it is safe to commit it
// apiKey: '599cec31baffa4868cae4e79f180729b',
// indexName: 'docsearch',
// },
},
}
module.exports = siteMetadata
4.2. 링크 공유를 고려한 페이지 작성
운영하고 있는 블로그 사이트로 직접 도메인을 입력하고 접속하는 사용자도 있겠지만
구글 검색엔진에 의해 검색되어 블로그 페이지 링크로 바로 유입되거나 특정한 목적으로 URL만 링크 공유할 경우가 많습니다. 특히 SNS나 포털 게시판 등에 링크 공유가 될 경우 오픈그래프 메타태그 정보가 잘 등록되어 있어야 링크 정보 하단에 사진과 decription 정보가 깔끔하게 제공됩니다. 블로그 작성시 SEO 형식이 잘 갖추어진 기본 템플릿을 정의한 후 참조해서 내용을 채우는 방식으로 작성해 보세요
4.3. 블로그 기본 템플릿을 개성있는 나만의 스타일로 변경하기
기본 설정값으로 스타일링 되어 있는 tailwind 블로그 사이트의 레이아웃을 서비스 목적과 취향에 맞게 얼마든지 변경해서 구성할 수 있습니다
tailwind 블로그 커스터마이징하기
tailwind-nextjs-starter-blog 공식 Github에서 pull 받은 nextjs 코드는 그대로 사용할 수도 있지만 UI를 본인만의 스타일로 개성있게 수정해서 사용할 수도 있습니다.
nextjs에 대한 기본적인 개발 경험이 있다면 훨씬 간편하게 커스터마이징이 가능합니다.
폴더별 구조는 및 주요 역할은 다음과 같습니다.
폴더명 | 하위폴더명 | 설명 |
---|---|---|
app | 애플리케이션의 시작점 | |
app | about | 나의 소개 페이지 레이아웃 정의 |
app | api | 외부 시스템 연동 API(newsletter 등) |
app | blog | 블로그 페이지 레이아웃 정의 |
app | projects | 소개하고 싶은 프로젝트 페이지 레이아웃 정의 |
app | tags | 블로그별로 태깅된 태그정보 레이아웃 |
components | 모듈화된 공통 라이브러리 | |
css | 모듈화된 공통 라이브러리 | |
data | blog | 마크다운(mdx) 방식으로 작성된 블로그 데이터 업로드 공간 |
layouts | 전체(Top, Body, Footer 등) 블로그 레이아웃 정의 | |
public | 이미지 등 웹 제공용 assets 데이터 공간 |
4.4. mdx 기능으로 동적인 마크다운 페이지 만들기
nextjs에서는 Markdown과 JSX를 결합한 확장형 마크다운기능을 제공합니다. 즉, 일반적인 Markdown 문법을 그대로 사용하면서도 React 컴포넌트를 포함할 수 있습니다. 이를 통해 블로그 페이지에서 인터랙티브한 콘텐츠를 만들 수 있습니다.
4.5. 페이지별 댓글 기능 추가하기
페이지별로 조회자가 반응을 남길 수 있도록 댓글 기능을 추가할 수 있습니다.
tailwind 블로그는 페이지별로 giscus, utterances, disqus 댓글 기능을 추가할 수 있으므로 원하는대로 선택해서 설정할 수 있습니다.
4.6. 접속자 통계 현황 조회하기
블로그 사용자 접속 통계 현황을 파악하는 것은 블로그 운영의 중요한 동기 부여가 됩니다.
tailwind블로그에 GA(Google Analytics) 코드를 연동하고 Looker Studio로 현황판을 만들어서 조회하도록 해 보세요.