✋ 들어가며
지금 보고있는 이 글의 시리즈에서 알 수 있듯이 얼마전까지는 Jetbrains에서 만든 문서도구인 Writerside↗로 블로그를 운영했었는데 정말 좋은 도구임은 틀림 없지만 블로그와는 좀 맍지 않는 부분이 많이 있었다. (아마도 API 문서 등에 적합할 것 같다.) 그리하여 Gatsby를 이용한 블로그를 만들게 되었다.
☑️ Gatsby는 React와 GraphQL을 사용하여 Node.js 위에 구축된 오픈 소스 정적 사이트 생성기 입니다.
출처 : 위키백과↗
🤔 왜 Gatsby를 선택했나?
-
Markdown 형식의 포스트 (Markdown, JSX가 포함된 MDX)
- Writerside에서 작성한 글들을 최소한의 수정으로 사용하기 위함
- Adsense 등 2500개 이상의 플러그인
- 필자가 더 알아가고 싶은 React 기반
- 많은 수의 레퍼런스
- 블로그를 운영하면서 원하는건 모두 할 수 있을 것 같은 자유도 (GraphQL 등)
🌱 테마 제작기
☑️ 제작한 테마는 누구나 사용할 수 있도록 Github↗에 공개되어있다.
편하게 사용할 수 있도록 devHudi↗님이 공개해주신 소스를 바탕으로 수정을 진행했다.
- SEO 최적화 진행
-
Adsense 광고
- 본문 상/하단, 리스트 사이, ToC 하단에 광고 표시
- 본문 Emoji 영역과 Title 분리
- UI 변경
- 마이너한 버그 수정
🏗️ 테마 설치하기
☀️ 테스트 환경
- NodeJS v22.13.0
- yarn 1.22.22
NodeJS 설치
자신의 OS에 맞는 NodeJS↗ 설치
Yarn 설치
npm install -g yarngatsby-cli 설치
yarn global add gatsby-cligatsby-starter-rundevelrun 테마 설치
gatsby new your-blog-name https://github.com/rundevelrun/gatsby-starter-rundevelrun.git🤖 구동하기
의존성 패키지 설치
cd your-blog-name
yarn install구동
구동 후 http://localhost:8000으로 접속한다.
yarn develop👨💻 사용자화
blog-config.js의 내용을 자신에게 맞게 수정한다.
module.exports = {
title: "YOUR:BLOG:NAME", // SEO Blog title
headerTitle: "YOUR:<em style='color:#ed6c02'>BLOG</em>:NAME", // Logo 1
headerSubTitle: "<em style='color:#ed6c02'>YOUR</em>:BLOG:<em style='color:#ed6c02'>NAME</em>", // Logo 2
copyright: "©YOUR:BLOG:NAME", // copyright in footer
author: "YOUR:NAME", // Your Name
description: "Hi, Nice to meet you !", // description
siteUrl: "https://6developer.com/", // Your Site URL
links: {
github: "https://github.com/rundevelrun",
...
},
giscus: {
...
},
adsense: {
...
}
}- title : SEO에서 사용할 블로그명
- headerTitle : 블로그에 표시될 제목 (HTML 태그 가능)
-
headerSubTitle : 블로그에 표시될 부제목
- HTML 태그 가능
- 옵션 값이며 있는 경우 블로그의 로고 영역이 5초마다 바뀐다.
- copyright : Footer 영역에 표시될 저작권 표시 이름
- author : 루트 페이지와 포스트 하단에 표시되는 작성자 이름
- description : 루트 페이지와 포스트 하단에 표시되는 작성자 설명
- siteUrl : 현재 블로그 URL
- links : 루트 페이지와 포스트 하단에 표시되는 Icon의 링크 목록
- giscus : 댓글 기능을 사용하기 위한 Giscus 정보
- adsense : 광고 기능을 사용하기 위한 Adsense 정보
📝 포스트 작성하기
-
contents/posts폴더에 게시글 파일 생성 (두가지 방법)- pathname으로 사용할 이름의 폴더를 만들고 하위에 'index.md'를 생성
- pathname으로 사용할 이름으로
*.md파일 생성
-
frontmatter 작성
--- emoji: "🚀" title: "어떻게 시작할까요?" date: 2025-01-19 13:53:00 update: 2025-01-19 13:53:00 tags: - rundevelrun - howto series: "Gatsby 블로그 시작하기" ---
🚀 Github Pages 배포하기
Gatsby를 인수한 Netlify를 아용한 아주 쉬운 배포 방법도 있지만 이 글에서는 Github Action을 이용하려고한다.
필자의 경우 Git branch를 2개를 사용하고 있는데 gatsby에는 전체 소스가 올라가고 main에는 빌드된 소스가 배포된다.
workflow 작성 .github/workflows/ci.yml
배포된 소스는 main에 push될 예정이므로 branchs 부분을 main으로 설정했다.
# Simple workflow for deploying static content to GitHub Pages
name: Deploy static content to Pages
on:
# Runs on pushes targeting the default branch
push:
branches: ["main"]
# Allows you to run this workflow manually from the Actions tab
workflow_dispatch:
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
contents: read
pages: write
id-token: write
# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
group: "pages"
cancel-in-progress: false
jobs:
# Single deploy job since we're just deploying
deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Setup Pages
uses: actions/configure-pages@v5
- name: Upload artifact
uses: actions/upload-pages-artifact@v3
with:
# Upload entire repository
path: '.'
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v4배포 스크립트 작성 package.json
빌드된 정적 소스를 main에 배포하는 스크립트
...
"scripts": {
...
"deploy": "gatsby build && gh-pages -d public -b main"
},배포 브랜치 최신화
배포 브랜치(현재 글에서는 main)에 위에서 작성한 ci.yml이 없는 상태라면 Github Action이 동작하지 않기 때문에 먼저 소스를 최신화한다.
배포
main 브랜치에 빌드된 소스 push가 이루어지고 이후 ci.yml의 파이프라인이 동작한다.
yarn deploy👋 마치며
작성하다보니 너무 긴 글을 작성한 것 같다. 다음엔 조절해야지