init
gatsby 에서 만든 심플 테마 시작!!
# create
gatsby new zuhern.github.io_gatsby https://github.com/gatsbyjs/gatsby-starter-blog
# start development server
gatsby develop
# create a production build
gatsby build
# serve the production build locally
gatsby serve로컬에서 기본 화면 뜨는 것을 확인한 후,
jekyll 과 동일하게 내 username.github.io repository에 올라면 될까해서
무작정 커밋하고 접속해봄.
그러면 gatsby serve 로 본 화면과는 다른
netlify 로 deploy 를 유도하는 화면이 나온다.
원한다면 사용하면 됌.
하지만 나는 zuhern.github.io 주소가 맘에 들기에, github page 를 이용하는 방법을 찾아야 한다.
1번째 방법
npm install gh-pages --save-dev// package.json
{
"scripts": {
"deploy": "gatsby build --prefix-paths && gh-pages -d public"
}
}// gatsby-config.js
module.exports = {
pathPrefix: "/zuhern.github.io",
}그 뒤 npm run deploy를 호출 하면
public 폴더가 gh-pages 브랜치로 이동이 된다고 함.
gh-pages 를 꼭 생성해 두고 하라고 함.
결과
소스가 blog-gatsby 레퍼지토리에 있었는데
npm run deploy 하니
https://zuhern.github.io/blog-gatsby/ 로 올라갔다.
주의
여기서 메인화면은 위 경로이나, 포스트를 클릭하면
https://zuhern.github.io/**(pathPrefix)**/my-first-post
이런 식으로 주소가 부여된다.
pathPrefix는 코드가 있는 레퍼지토리 명 (ex: blog-gatsby) 을 써야한다.
난 https://zuhern.github.io 뒤에 바로 포스트 주소가 붙게 하고 싶기 때문에
이 방법은 패스
2번째 방법
username.github.io 레포지토리의 master 브랜치에 public 코드를 push 한다.
메모: 이미 코드가 있는 폴더에 git 연결하기
git remote add origin https://github.com/username/username.github.io.git
git push origin master// package.json
{
"scripts": {
"deploy": "gatsby build && gh-pages -d public -b master"
}
}결과
소스가 blog-gatsby 레퍼지토리에 있었는데
npm run deploy 하니
blog-gatsby 의 master 로 바로 올라가 버렸다.
코드가 master 에 있는 경우 다 엎어 쳐진다.
그럼 코드 branch 를 따로 생성 해야겠다.
username.github.io / develop 브랜치에 코드를 넣고 deploy 를 한다.
그러면 master 에 빌드된 코드가 들어간다.
이 때 https://username.github.io 로 들어가면 화면이 나오지 않는다…
왜일까. 혹시 이벤트가 안들어가서 github 에서 인지를 못한게 아닐까 생각이 들어서
github > username.github.io > master > README.md 파일을 수정하니
바로 반영이 되었다.
삽질
처음에 개인이 만든 테마로 시작할 때
맘에 든 테마로 시작
gatsby new zuhern.github.io https://github.com/greglobinski/gatsby-starter-personal-blog.git결국.. 선택한 테마는 버전이 낮아서 버림. 확인하고 설치하자
npm install 했을 때 이상한 에러가 발생
../../nan/nan_implementation_12_inl.h:356:37: error: too few arguments to function call, expected 2, have 1
return v8::StringObject::New(value).As<v8::StringObject>();
~~~~~~~~~~~~~~~~~~~~~ ^
/Users/heather/.node-gyp/12.4.0/include/node/v8.h:5380:3: note: 'New' declared here
static Local<Value> New(Isolate* isolate, Local<String> value);
^
In file included from ../src/common.cc:24:
In file included from ../../nan/nan.h:223:
In file included from ../../nan/nan_new.h:189:
../../nan/nan_implementation_12_inl.h:356:58: error: expected '(' for function-style cast or type construction
return v8::StringObject::New(value).As<v8::StringObject>();npm update 하니 해결 됨