데일리 투 센트 - 포트폴리오

안녕하세요. Daily Two Cents에 오신 것을 환영합니다. 오늘은 제 포트폴리오 사이트에 대해 조금 살펴보려고 합니다. 나는 그것과 나의 이력서를 모두 업데이트해야 하기 때문에

포트폴리오 사이트를 만들 때 Gatsby을 사용했습니다. 앞서 언급했듯이 저는 사이드 프로젝트에 새로운 기술을 사용하는 것을 즐깁니다. 저는 이 프로젝트를 위해 Gatsby를 선택했습니다.

내가 자랑스럽게 생각하는 한 가지는 Gatsby 플러그인 gatsby-source-filesystem을 사용하는 것입니다. 이를 통해 지정된 폴더(이 경우 프로젝트 폴더)에 있는 각 파일을 살펴볼 수 있습니다.

> projects
  - bujo.md
  - penny.md
  - portfolio.md

따라서 일부 사용자 정의 코드가 포함된 플러그인은 각 파일을 통과하여 마크다운 파일인지 확인한 다음 해당 파일에 대한 슬러그를 생성하므로 나중에 참조할 수 있습니다. 이것은 아래에서 볼 수 있듯이 내가 사용하는 플러그인의 createNodeField 메소드를 사용합니다.

const { createFilePath } = require(`gatsby-source-filesystem`)
exports.onCreateNode = ({ node, getNode, actions }) => {
  const { createNodeField } = actions
  if (node.internal.type === `MarkdownRemark`) {
    const slug = createFilePath({ node, getNode, basePath: `pages` })
    createNodeField({
      node,
      name: `slug`,
      value: slug,
    })
  }
}

그런 다음 생성된 각 슬러그에 대해 해당 슬러그에 대한 페이지를 생성하여 마크다운 파일만으로 프로젝트를 관리할 수 있습니다. 페이지를 생성하기 위해 createPage 메소드를 사용합니다.

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions
  const result = await graphql(`...`)
  result.data.allMarkdownRemark.edges.forEach(({ node }) => {
    createPage({
      path: node.fields.slug,
      component: path.resolve(`./src/templates/project-post.js`),
      context: {
        // Data passed to context is available
        // in page queries as GraphQL variables.
        slug: node.fields.slug,
      },
    })
  })
}

나는 graphql을 사용하여 슬러그를 얻은 다음 해당 파일을 사용하여 페이지를 만듭니다. 파일 자체는 비교적 간단합니다. 내가 필요한 모든 것을 포함하는 마크다운 파일의 앞부분에 데이터를 포함합니다.

---

index: 1
title: "Penny"
startDate: "2020-06-11"
dark:
image: /contactkeeper.jpg
live: https://penny.centanomics.repl.co/
repo: https://github.com/centanomics/Penny
description: "Featured Project"

---

그리고 나머지 마크다운 파일은 내가 만든 템플릿을 사용하여 html로 변환된 일반 마크다운입니다. 나는 주로 메인 페이지에 내 모든 프로젝트를 표시하는 데 사용합니다. 또한 내가 잊기 전에 방금 말한 모든 코드를 확인할 수 있습니다here.

저는 여기에서 서명하고 이 사이트를 다듬는 데 더 집중할 것이므로 내일 뵙겠습니다!