Giter Club home page Giter Club logo

resume-nextjs's Introduction

Resume Next.js Logo

Github Star CircleCI Codacy Badge Maintainability

Introduce

Contributors

Requirements

  • Node.js < 18
    • 현재 Node.js 18 이상 버전에서 npm run dev 실행 시 ERR_OSSL_EVP_UNSUPPORTED 이슈가 있습니다.
    • .nvmrc 에 기재된 Node.js 버전 사용을 권고합니다.

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?

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

resume-nextjs's People

Contributors

codacy-badger avatar dal-ya avatar dependabot[bot] avatar heli-os avatar lizard-kim avatar uyu423 avatar zerohertz avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

resume-nextjs's Issues

Export 중 발생한 오류 조치한 것 공유드립니다.

안녕하세요~!
npm run export 명령 실행중 오류 조치한 내용이 있어 내용 공유 드립니다.

eslint 'component/**/*' 'pages/**/*' 'payload/**/*' '*.ts' --fix

Oops! Something went wrong! :(

ESLint: 6.8.0.

No files matching the pattern "'component/**/*'" were found.
Please check for typing mistakes in the pattern.

package.json 파일의 lint 부분 코드를 수정하여 조치했습니다.

"lint": "eslint \"component/**/*\" \"pages/**/*\" \"payload/**/*\" \"*.ts\" --fix",

이미지, CSS 404 에러 발생

[에러]
npm run export 실행 시, docs 폴더 내에 index.html이 생성이되어지는데, 이미지, CSS가 404 에러가 발생함

[해결방법]
https://{--}.github.io/---/ 으로 사용하시는 분들은 아래와 같은 코드를 추가해주세요

next.config.js 파일에 assetPrefix: '.'을 추가해주세요.
정상적으로 화면에 출력됩니다.

[예시]
/_next/static/images/_12345.jpg (x)
./_next/static/images/_12345.jpg (o)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.