uzzam
uzzam.dev
uzzam
전체 방문자
819
오늘
4
어제
14
  • 분류 전체보기 (29)
    • 프로젝트 (4)
      • 담타 (4)
    • CS (0)
      • 운영체제 (0)
    • ps, cp (4)
      • 코딩테스트 cheatsheet (3)
      • baekjoon (1)
      • codeforces (0)
    • languages (0)
      • dart (0)
    • frameworks (2)
      • flutter (2)
    • ios (1)
    • 블로그 (10)
    • git (2)
    • blockchain (0)
    • etc. (6)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

  • Apple Silicon(M1) 맥북 공장 초기화하기
    2022.12.07
  • 군대 사지방에서 개발하는 방법들
    2022.12.07
  • netlify 로 gatsby 블로그 자동배포하기
    2022.12.07
  • porkbun에서 깃허브 블로그 도메인 구매하기 및 도메인⋯
    2022.12.07
    porkbun에서 깃허브 블로그 도메인 구매하기 및 도메인⋯
  • 빠르게 Gatsby + Github pages 로 블로그 ⋯
    2022.12.07

태그

  • 블로그

최근 댓글

  • 블로그 글 잘 쓰시네요 ㅎㅎ 잘 보구 갑니당
    alpha-traveler
  • 마침 찾아보던 글인데 글 올려주셔서 감사합니다 ㅎㅎ
    alpha-traveler

최근 글

  • 내 인생 최고의 책
    2023.01.10
    내 인생 최고의 책
  • 새해는 특별하니까
    2023.01.08
    새해는 특별하니까
  • 안드로이드 splash screen 중복 문제 해결하기
    2023.01.07
  • git clean -fdx 하고 잠못자기
    2023.01.06
  • Xcode developer mode disabled 해결⋯
    2023.01.05

티스토리

hELLO · Designed By 정상우.
uzzam

uzzam.dev

블로그

빠르게 Gatsby + Github pages 로 블로그 만들기

2022. 12. 7. 03:32

이 글은 2019년 9월 14일에 첫 작성되었습니다.

(https://github.com/shs395/shs395.github.io/blob/master/content/blog/make-gatsby-blog/index.md)


이 글을 보면 좋은 사람들

  • 영어로 된 공식홈페이지를 읽기 귀찮은 분
  • 빠르고 간결하게 gatsby 블로그를 만들어서 github pages에 배포하고 싶으신 분

개발환경

구름IDE 무료 버전 (Ubuntu 14.04 LTS) - 군대라는 장소적 제약 때문에..

gatsby 선정이유

과거에 jekyll 을 이용한 github 블로그를 만들다가 ruby 가 너무 익숙치 않아서 포기하고(수정을 못하겠다..) 인터넷 검색 중에 gatsby 를 알게 되었다. gatsby는 React(요즘 핫해서,,)로 이루어져 있고 비교적 최신 것이며 star 도 많이 받았기 때문에 선택했다. 게다가 jekyll 블로그 관련 포스팅이 gatsby 관련 포스팅에 비해 2배 많았던 것도 한몫했다.

다른 프레임워크들보다 모든 부분에서 좋댄다
(참고 :https://www.gatsbyjs.org/features/jamstack/gatsby-vs-jekyll-vs-hugo/)

다른 언어가 익숙하다면 jekyll,hugo,hexo 등의 다른 프레임워크를 찾아보는 것도 좋다.

시작하기

설치되어 있어햐 하는 것

node / npm / git /

homebrew 

(설치 안해도 무관)

gatsby 설치

npm install -g gatsby-cli

테마 골라서 설치하기

https://www.gatsbyjs.org/starters/?v=2 에서 원하는 테마 찾아보기
가장 별이 많은 기본 테마로 해보았다.

gatsby new (원하는 폴더 이름) https://github.com/gatsbyjs/gatsby-starter-blog
cd (원하는 폴더 이름)
gatsby develop

까지하면 http://localhost:8000 에서 블로그를 확인할 수 있다!

그런데 VM(구름IDE, Google Cloud Platform 등)을 이용하는 경우에 localhost에 어떻게 접속하지? =>

VM(구름IDE, Google Cloud Platform 등)에서 Gatsby를 이용하는 경우에 localhost에 접속하기

 

글 작성하기

content/blog/gatsby-blog/index.md

---
title: 빠르게 Gatsby + Github pages 로 블로그 만들기
date: "2019-09-14T16:00:00+09:00"
description: Gatsby 와 Github pages 로 빠르게 블로그를 만들고 배포해보자
---

### 이 글을 보면 좋은 사람들
(생략)

블로그 정보 수정하기

gatsby-config.js - 블로그와 관련한 설정을 하는 파일
블로그 이름 등등을 바꿔주자

siteMetadata: {
    title: `블로그 이름`,
    author: `작성자`,
    description: `블로그 설명`,
    siteUrl: `블로그 주소`,
    social: {
    },

github pages 배포

gh-pages package 설치

npm install gh-pages --save-dev

배포하려는 github repository 이름이 username.github.io 가 아닌 경우

gatsby-config.js

module.exports = {
  pathPrefix: "/respository이름",
}

package.json

{
  "scripts": {
    "deploy": "gatsby build --prefix-paths && gh-pages -d public"
  }
}

배포하려는 github repository 이름이 username.github.io 인 경우

gatsby-config.js 수정 X
package.json

{
  "scripts": {
    "deploy": "gatsby build && gh-pages -d public -b master"
  }
}

배포하기!

npm run deploy

username.github.io 혹은 username.github.io/repo이름 에서 확인 가능하다.

'블로그' 카테고리의 다른 글

github pages 로 gatsby 블로그 자동배포하기  (0) 2022.12.07
porkbun에서 깃허브 블로그 도메인 구매하기 및 도메인사이트  (0) 2022.12.07
github branch로 gatsby 블로그 파일 관리하기  (0) 2022.12.07
VM(구름IDE, Google Cloud Platform 등)에서 Gatsby를 이용하는 경우에 localhost에 접속하기  (0) 2022.12.07
github, gatsby 블로그는 허상, 티스토리 블로그 최고  (0) 2022.12.06
    '블로그' 카테고리의 다른 글
    • porkbun에서 깃허브 블로그 도메인 구매하기 및 도메인사이트
    • github branch로 gatsby 블로그 파일 관리하기
    • VM(구름IDE, Google Cloud Platform 등)에서 Gatsby를 이용하는 경우에 localhost에 접속하기
    • github, gatsby 블로그는 허상, 티스토리 블로그 최고
    uzzam
    uzzam
    댓글쓰기
    VM(구름IDE, Google Cloud Platform 등)에서 Gatsby를 이용하는 경우에 localhost에 접속하기
    다음 글
    VM(구름IDE, Google Cloud Platform 등)에서 Gatsby를 이용하는 경우에 localhost에 접속하기
    github, gatsby 블로그는 허상, 티스토리 블로그 최고
    이전 글
    github, gatsby 블로그는 허상, 티스토리 블로그 최고

    티스토리툴바