Gitlab CI를 사용하여 다른 Repo의 Gatsby 블로그 게시물을 관리하는 방법

본고에서 우리는 다른git 저장소(repo)에서 가격 인하 블로그 게시물을 어떻게 관리하는지 토론할 것이다.Gatsby 사이트에 독립된git 저장소입니다.이것은 내가 관리하는 동일한 과정this repo이다.
따라서 이것은 나의 게이츠비 사이트의 원본 코드가 Gitlab에 있는 portfolio-site의repo에 있다는 것을 의미한다.그리고 나는 모든 블로그 게시물 (가격 인하) 을 위해 또 다른 환매 협의를 준비했다.개츠비 블로그를 구축하는 동안 우리는 articlesgitrepo에서 가격 인하 파일을 가져와 개츠비 블로그의 데이터 원본으로 사용할 것이다.

Git 플러그인

우선, 설치Gatsby git plugin, 이렇게 하면git에서 데이터를 얻을 수 있습니다.

yarn add gatsby-source-git

그리고 플러그인을 articles에 추가해서 데이터의 출처를 알려 줍니다.

warning: Gatsby Filesystem You need to use the gatsby-source-filesystem before the gatsby-source-git. You can read more about it here at this Github issue.

{
  resolve: `gatsby-source-git`,
  options: {
    name: `Articles`,
    remote: "https://gitlab.com/hmajid2301/articles.git",
    branch: `master`,
    patterns: ["**/*", "!**/*/index.md"],
  },
},

우리의 예시에서 나는 this를 사용할 것이다. 이 블로그 글은 같은 환매 협의에서 유래한 것이다.필요한 경우 사용할 브랜치를 지정할 수 있습니다.가장 재미있는 부분은 gatsby-config.js 부분이다.여기에서 포함할 파일과 무시할 파일patterns을 지정할 수 있습니다.이 예에서, 나는 ["**/*", "!**/*/index.md"]라는 모든 파일을 무시하고 싶다. 왜냐하면 이 파일들은 내가 본 Repo의 게이츠비 블로그 예시에서 사용한 파일이기 때문이다.더 많은 정보pattern here를 읽을 수 있습니다.

그래픽 QL

이제 Gatsby와 함께 제공된 GraphQL IDE를 사용하여 글을 올바르게 가져오는지 확인할 수 있습니다.

yarn develop

# Go to localhost:8000/__graphql

다음 질의를 실행합니다.

query MyQuery {
  allMarkdownRemark {
    edges {
      node {
        fileAbsolutePath
      }
    }
  }
}

모든 블로그 게시물/가격 인하 파일이 열거되어 있는 출력을 보셔야 합니다.여기서, 당신은git 환매가 정확한 출처인지 검증할 수 있습니다.

{
  "data": {
    "allMarkdownRemark": {
      "edges": [
        {
          "node": {
            "fileAbsolutePath": "/home/haseeb/projects/personal/articles/35. Gatsby source git/source_code/.cache/gatsby-source-git/Articles/1. Expo with VirtualBox and Genymotion/README.md"
          }
        },
        {
          "node": {
            "fileAbsolutePath": "/home/haseeb/projects/personal/articles/35. Gatsby source git/source_code/.cache/gatsby-source-git/Articles/11. React Navigation with React Native/README.md"
          }
        },
        {
          "node": {
            "fileAbsolutePath": "/home/haseeb/projects/personal/articles/35. Gatsby source git/source_code/.cache/gatsby-source-git/Articles/13. REST API using OpenAPI, Flask & Connexions/README.md"
          }
        }
        // ...
      ]
    }
  }
}

개츠비 노드

현재 index.md 파일에 저희가 얻은 가격 인하 파일마다 블로그 게시물 페이지를 만드는 논리가 있는지 확인하십시오. 즉, 위 목록의 항목마다 블로그 게시물을 만드는 것입니다.

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions;

  const blogPost = path.resolve(`./src/templates/blog-post.js`);
  const result = await graphql(
    `
      {
        allMarkdownRemark(
          sort: { fields: [frontmatter___date], order: DESC }
          limit: 1000
        ) {
          edges {
            node {
              frontmatter {
                title
                slug
              }
            }
          }
        }
      }
    `
  );

  if (result.errors) {
    throw result.errors;
  }

  // Create blog posts pages.
  const posts = result.data.allMarkdownRemark.edges;

  posts.forEach((post, index) => {
    const previous = index === posts.length - 1 ? null : posts[index + 1].node;
    const next = index === 0 ? null : posts[index - 1].node;

    createPage({
      path: post.node.frontmatter.slug,
      component: blogPost,
      context: {
        slug: post.node.frontmatter.slug,
        previous,
        next,
      },
    });
  });
};

Gitlab CI

따라서 매번 우리가 글 환매에서 변경을 진행할 때마다 우리는 사이트의 재건을 촉발하기를 바란다.Gitlab을 사용하기 때문에 Gitlab CI를 사용하여 이를 구현하는 방법을 보여 드리겠습니다.주요 지점에 제출될 때마다 우리의 글을 포함하는 환매 협의에서 개츠비 환매 협의에 대한 재건을 촉발할 것이다.

caution: Assumption This next section assumes that you use Gitlab to host your repos. It also assumes that for your Gatsby blog you use Gitlab CI to build/publish it.

예를 들어 나의 용례the article repo에서 the Gatsby repo의 재건을 촉발할 것이다.
우선, 당신의 게이츠비 환매 협의로 넘어가 gatsby-node.js로 넘어가세요.그리고 새 파이프 트리거를 만들고 새로 만든 영패를 CI/CD 변수에 저장합니다.
그리고 표시된 Settings > CI/CD > Pipeline triggers 명령을 복사하고 cURL 명령을 사용하여 다음 내용을 .gitlab-ci.yml 에 추가합니다.

stages:
  - build

rebuild:portfolio-site:
  stage: build
  image: curlimages/curl
  only:
    - master
  script:
    - "curl -X POST -F token=${TRIGGER_TOKEN} -F ref=master https://gitlab.com/api/v4/projects/19260161/trigger/pipeline"

개츠비 블로그의 프로젝트 ID로 바꾸기 cURL 를 확인하십시오. 이것은 우리가 재건을 촉발하려는 환매이기 때문입니다.이것은 우리가 새로운 제출 (즉 한 문장) 을 글의 주요 지점으로 보낼 때마다 게츠비 블로그에서 파이프가 작동하도록 촉발한다는 것을 의미한다.
이것은 실행 19260161 또는 yarn build 할 때, 우리 글gitrepo의 최신 제출에서 가격 인하 데이터를 가져오고, 새로운 글이나 변경 사항을 얻을 수 있음을 의미합니다.우리 개츠비 블로그의 gatsby build 는 이렇게 보일 수 있다.

image: node:12.13.0
cache:
  key: ${CI_COMMIT_REF_SLUG}
  paths:
    - node_modules

stages:
  - build
  - deploy

before_script:
  - yarn install

build:site:
  stage: build
  only:
    - master
  script:
    - yarn run build
  artifacts:
    paths:
      - public

deploy:site:
  stage: deploy
  only:
    - master
  script:
    - npm i -g netlify-cli
    - yarn deploy --site $NETLIFY_SITE_ID --auth $NETLIFY_PERSONAL_TOKEN --message "$CI_COMMIT_TITLE"
  dependencies:
    - build:site

tip: Artifacts The deploy:site job uses the build artifacts from the previous build:site job which has the site data stored in the public folder. Due to the sites default settings on Netlify, this is what is uploaded when we use netlify-cli.

Gitlab CI에서 사이트를 구축하고 배포하여 Netlify의 구축 시간을 절약합니다.당신이 해야 할 일은 당신의 .gitlab-ci 을 얻고 NETLIFY_SITE_ID 을 만드는 것입니다. 이 API는 당신을 대표하여 사이트를 발표할 것을 요청할 수 있습니다.

important: Gitlab CI
You can, of course, change the deploy:site job to suit how you want to deploy your site, i.e. Gitlab pages, Github Pages, Vercel etc.

Netlify 회사

Gitlab CI를 사용하여 개츠비 블로그를 구축하고 게시하지 않으려면 Netlify에서 강제로 재구성하십시오.
다음을 수행할 수 있습니다.매번 우리가 문장 환매의 주요 지점에 새로운 약속을 떠넘긴다.우리는 할 수 있다
웹 훅을 사용하여 Netlify에서 사이트 재구축을 터치합니다.이를 위해 Netlify GUI에서 웹 사이트를 선택하십시오.
그리고 NETLIFY_PERSONAL_TOKEN > Settings > Build & deploy.새 구축 연결을 추가합니다.그리고 복제 Build hooks 명령,
따라서, 당신의 기사 repocURL는 현재 다음과 같이 보입니다.

stages:
  - build

rebuild:portfolio-site:
  stage: build
  image: curlimages/curl
  only:
    - master
  script:
    - curl -X POST -d {} https://api.netlify.com/build_hooks/5f5e9c4f495aebe573c39aef

.gitlab-ci.yml를 CI/CD 변수로 변환해야 합니다. 그렇지 않으면 누구나 사이트를 강제로 재구성할 수 있습니다.
그렇습니다. 우리는 게이츠비 블로그의 단독 환매에서 가격 인하 글을 관리하는 방법을 배웠습니다!Gitlab CI와 Netlify를 사용하여 사이트를 자동으로 재구성하는 방법에 대해 논의했습니다.

부록

Source Code

예시Gatsby blog 재구매

예시Articles 재구매