Skip to content

Next.js 로 누구나 쉽게 만드는 Static HTML 이력서

License

Notifications You must be signed in to change notification settings

chicrock/resume

 
 

Repository files navigation

Resume Next.js Logo

Github Star CircleCI Codacy Badge Maintainability
dependencies Status devDependencies Status

Introduce

Install

# fork to your github account & git cloning your forked repository
npm install

Run Development Mode

npm run dev

Structure

  • asset/
    • images, favicon
  • component/
    • React Components
  • pages/
    • index.html 을 렌더링하기 위한 하나의 페이지 뿐이다.
  • payload/
    • Payload 데이터 변경만으로 개인 웹 이력서를 뽑아낼 수 있다.
    • 이력서 렌더링에 필요한 데이터가 포함된다.
    • 하단의 Payload Detail 참고
  • docs/
    • npm run export (next export) 를 실행하면 Static HTML 이 렌더링되어 docs 디렉토리 하단에 생성된다.
    • Github Pages 의 master branch 의 docs/ 디렉토리를 지정하여 Github Pages 호스팅을 할 수 있는데, 이를 위해 export 디렉토리 이름을 docs 로 명명했다.
    • docs/typedoc/ 에는 TypeDoc HTML 이 포함되지만 npm run export 로는 생성하지 않는다. npm run typedoc 으로 TypeDoc 을 생성할 수 있다.

Payload Description

  • TypeDoc: https://uyu423.github.io/resume-nextjs/typedoc
    • TypeDoc 내에 모든 Payload 에 대한 Rendering Sample Screenshot 이 포함되어 있습니다.
  • _global, footer Payload 을 제외한 모든 Payload 에는 disable?: boolean 필드가 존재합니다. 해당 필드가 true 면 해당 Payload 의 Section 을 렌더링하지 않습니다.

Profile

Introduce

Skill

Experience

Project

Open Source

Presentation

Article

Education

ETC

_Global

Export

npm run export
  • /docs 하위에 Static HTML 리소스가 생성된다.
  • Sub Path 가지는 도메인 구조일 경우 (ex. https://uyu423.github.io/resume 로 호스팅) package.json 내의 homepage 필드 값을 호스팅 원하는 도메인으로 변경한다.
    • homepage 필드에 pathname 이 있을 경우 next.config.jsassetPrefix 추가하는 로직이 있음

Export to Github Pages

Repository Setting

  • Options - Github Pages - Source - master branch /docs folder 를 선택
    • Github Pages Source 에 대한 자세한 내용은 help.github.com 을 참고한다.
  • npm run export 를 실행하여 docs 내 Static HTML 을 갱신한다.
  • 외부 도메인이 있는 경우 Custom Domain 항목에 기입한다.
    • Github Pages Hosting 에 필요한 docs/CNAME 파일은 npm run export 과정에서 자동으로 생성됩니다.
    • docs/CNAME 파일 생성에는 package.jsonhomepage 필드를 참고합니다. Custom Domain 사용시 homepage 값을 수정해주세요.
    • package.jsonhomepage 필드가 *.github.io/* 로 추정될 경우 Custom Domain 을 사용하지 않는 것으로 간주하고 docs/CNAME을 생성하지 않습니다.
    • 외부 도메인에 대한 자세한 내용은 help.github.com 를 참고한다.
  • *.github.io 도메인을 그대로 사용하는 경우 http://{username}.github.io/{repository_name} 접속하면 웹 이력서가 나타난다.

Contribution

  • If you want additional features, please pull request. Always open.

Question?

  • Section 의 순서는 어떻게 조절하나요?
    • 현재는 pages/index.tsx 에서 직접 렌더링 순서를 변경하는 수 밖에 없습니다.
    • 데이터나 _global payload 로 핸들링하는 방법을 고민 중입니다.

About

Next.js 로 누구나 쉽게 만드는 Static HTML 이력서

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 94.9%
  • JavaScript 5.1%