Skip to content

Document (Version 2, OLD)

Jump to bottom
Junho Baik edited this page Dec 29, 2019 · 1 revision

Gatsby 정적 페이지 제작 프레임워크를 사용해 제작한 블로그.

gatsby-starter-default를 clone 으로 개발 시작.

  • 다른 사용자가 커스터마이징하여 사용할 수 있게 테마 형식으로 배포
  • master 브랜치는 build 된 파일로, 개발 브랜치는 develop-v2 브랜치입니다.
  • Github Page 에 배포를 위해 제작되었습니다.
  • SEO 적용으로 구글 및 네이버 검색이 가능합니다.
  • 웹 표준 준수로 Safari 브라우저의 Reader Mode가 사용 가능합니다.
  • 반응형 웹으로 모바일에서도 쾌적하게 볼 수 있도록 제작하였습니다.
  • Google Analytics, Adsense를 사용할 수 있습니다.
  • RSS Feed 생성으로 RSS 구독 가능

Built with:

  • Gatsby
  • React
  • Webpack
  • SASS (SCSS)
  • typography.js, Google Fonts
  • Google Analytics
  • Google AdSense

Install

$ git clone -b develop-v2 https://github.com/junhobaik/junhobaik.github.io.git [SITE_DIRECTORY]
$ npm install

Basic Setting

Modify config.js

root 경로에 위치한 config.js를 본인의 정보에 맞춰 수정해주세요,
additional 설정을 제외한 모든 값은 필수 값입니다.

module.exports = {
  title: `HUNDRED`, // 사이트의 제목
  author: 'Junho Baik', // 사이트의 소유자
  description: "Junho Baik's blog", // 사이트의 설명
  siteUrl: 'https://junhobaik.github.io', // 사이트의 주소

  // header config
  titleLogo: () => {
    // return require(''); // 이미지 파일 사용시 활성화하세요. ex.require('./src/images/profile.png')
    return 'https://source.unsplash.com/random/100x100'; // 랜덤 이미지, 윗줄의 프로필 이미지를 사용시 주석 처리
  },
  titleLogoShow: true, // 타이틀 로고의 출력 유무, boolean, default=false
  bio: 'Hello World!', // 타이틀 제목 아래의 부제목
  bioShow: true, // 부제목의 출력 유무, boolean, default=true

  // addtional
  googleAnalyticsTrackingId: 'UA-111111111-1', // 구글 애널리틱스 추적ID, 비활성화: ''
  disqusShortname: 'hundred-blog' // 댓글 기능을 위한 Disqus의 shortname, 비활성화: ''
}

Markdown YAML Front matter

---
title: title here...
date: 2018-01-01
tags:
  - javascript
  - ES6
keywords:
  - keyword1
  - keyword2
published: true
---

contents here...
Variable Description
title (필수값) 해당 포스트의 제목을 입력
date (필수값) 해당 포스트의 작성일을 입력
tags (선택) 게시물의 태그(#)를 입력
keywords (선택) SEO meta keywords에 해당하는 것으로 검색엔진의 검색 결과에 추가 반영
published (선택) default=ture 배포 시 포스트 노출 여부를 결정

+ 모든 값은 '', ""로 감싸지 않습니다.

# date Examples

## Case 1
date: 2018-09-01

## Case 2
date: 2018-09-01 22:00:00

## 'Time zone' Not Support
## There is no error but ignores the time zone
date: 2018-09-01 20:00:00 +0900

# tags & keywords Examples

## Case 1
tags: onlyOneTag

## Case 2
tags: [tag1, tag2]

## Case 3
tags:
  - tag1
  - tag2

Deploy

배포 전 확인 할 사항

  • github repository 이름이 'username.github.io' 인지 확인하세요.
  • 현재 작업 중인 브랜치가 master 가 아닌지 확인하세요. master 브랜치는 배포 전용 브랜치로 배포 시 빌드된 파일이 올라갑니다.
    처음 git clone 시 develop 브랜치가 기본 브랜치로 clone 되므로 여기에 다른 수정사항이 없었다면 develop에서 작업 중 일것입니다.

배포하기

npm run deploy

위 명령어를 실행하면 빌드가 실행되며 gh-pages 로 배포가 이루어집니다.

...

success Building production JavaScript and CSS bundles — 14.759 s
success Building static HTML for pages — 1.559 s — 76/76 115.44 pages/second
info Done building in 23.422 sec

Published

위와 같이 마지막으로 Published라는 문구가 출력되었다면 정상적으로 배포가 되었으며,
반영되기까지는 수십초 정도, 때로는 최대 수분의 시간이 소요됩니다.
username.github.io 주소로 들어가 확인해보시면 됩니다.

Customize

Modify ./src/utils/vatiavles.scss

테마와 전반적인 스타일을 수정할 수 있습니다.

$theme 값을 수정하여 색 테마를 변경할 수 있습니다.

Theme list

  • basic
  • white
  • ocean
  • modern
/** theme (default: basic) */
$theme: white;
/////////////////////////////

...

Modify ./src/utils/typography.js

구글 폰트를 이용할 수 있습니다.

//...

const googleFont = [
  {
    name: 'Nanum Gothic Coding' // google font 이름은 필수 값입니다.
  },
  {
    name: 'Nanum Gothic',
    bold: [400, 700] // 필요 시 blod값을 입력 할 수 있습니다.
  }
]

const typography = new Typography({
  baseFontSize: '16px',
  baseLineHeight: 1.666,
  headerFontFamily: [
    'Nanum Gothic'
  ],
  bodyFontFamily: ['Nanum Gothic Coding'],
})

//...
Clone this wiki locally