Netlify CMS 및Gatsby를 사용하여react 기반 블로그 만들기

이 글은 처음에 나의 블로그에서 공유되었다.create a react blog using gatsby을 읽습니다.
몇 주 전, 나의 동료는 그가 개인 블로그를 위해 만든 개츠비 블로그를 공유했다.
그는 JavaScript Proxies에 아주 좋은 글을 썼으니 너는 좋아할 것이다.
나는 새로운 사이트를 볼 때마다 구글의 페이지 스피드 인사이트에 가서 페이지의 속도를 파악한다.나는 페이지가 도달할 수 있는 속도에 놀랐다.

솔직히 말해서, 나는 지금까지 제킬의 블로그에서 이 숫자들을 찾지 못했다.
그래서 나는 내 개인 개츠비 블로그를 쓰기 시작했다.이 글은 모든 세부 사항을 포함할 것이다. 나는 공교롭게도 이 블로그의 단계를 현재 상황에 처하게 했다.
그 밖에 현재 나는 이 블로그에 개인 게시물을 발표할 개념이 없다. 분명히 아직 완성되지 않았을 때 나는 그것을 개인으로 유지할 수 없다.너는 반드시 이 모든 것을 참아야 한다.

최종 결과

이 시리즈 이후의 마지막 블로그는 present on this URL이 될 것이다.

선결 조건

Gatsby와 Netlify CMS를 사용하여 블로그를 만드는 데는 어떠한 선결 조건도 필요하지 않다고 생각합니다. 만약에 기본 GitHub를 어떻게 변경하고 사용하는지 알고 있다면 블로그를 만드는 것은 상당히 쉽습니다.
이 특정 버전의post에 필요한 기본 내용은 다음과 같습니다.

도메인 이름

나는 이미 도메인 이름이 하나 있는데, 나는 이미 사용하고 있다.만약 네가 그것이 없다면, 그것은 여전히 일할 수 있다.🙏

GitHub 계정

이 강좌를 배우려면 GitHub 계정이 필요합니다. 블로그 코드는 이 계정에 저장할 수 있습니다.코드를 저장할 수 있는 다른 방법도 있지만, 나는 GH가 코드를 유지하는 가장 간단한 방법을 제공했다고 생각한다.

Netlify 계정

배포 및
남은 일은 우리가 글을 올리는 과정에서 해결할 것이다.
갑시다

테마 선택

사용 가능한 테마 목록에서 선택할 수 있습니다.그 중 대부분은 deploy on Netlify 단추가 있습니다. 이 단추는 Netlify에 직접 배치되고 코드를 Netlify 계정에 저장할 수 있습니다.다음에 코드를 변경할 때 넷lify는 자동으로 변경 사항을 감지하고 배치합니다.

나는 기본적인 gatsby-theme-blog을 선택한다.deploy 버튼을 클릭하고 Connect to GitHub 코드를 선택하면 GitHub에서 코드를 호스팅합니다.마지막으로 코드를 포함할 저장소의 이름을 선택하십시오.

변경

사이트가 something.netlify.com에 배치되면 로컬 복제 코드를 변경할 수 있습니다.

git clone https://github.com/your_repo/repo_name

각종 git commands check this post에 대한 더 많은 정보.
파일이 gatsby-config.js이면 먼저 변경해야 합니다.siteMetadata을 다음과 같이 변경합니다.

  siteMetadata: {
    title: `Tutorial blog`,
    author: `Ranvir`,
    description: `Basic description of the blog`,
  ...

푸시 코드, Netlify 계정에 배치된 변경 사항을 볼 수 있습니다.https://app.netlify.com/sites/your_site_id/deploys .

git push origin master

일정 시간 후, 변경은 현재 사이트에서 제공될 것이다.

Netlify CMS 추가

Netlify CMS를 추가하면 게시물을 빠르게 변경하고 버튼을 클릭하여 배포할 수 있습니다.너의 모든 게시물은 한 곳에 있다.
Netlify CMS를 사용하여 쉽게 게시물을 작성하고 편집할 수 있습니다.
Netlify CMS를 추가하고 GitHub 로그인을 사용하여 편집할 수 있도록 코드의 루트 디렉토리에 static 디렉토리를 추가해야 합니다.static/admin/config.yml 파일에 추가합니다.

backend:
  name: github
  repo: singh1114/tutorial
  branch: master

media_folder: static/img
public_folder: /img

collections:
  - name: "blog"
    label: "Blog"
    folder: "content/posts"
    create: true
    slug: "{{slug}}"
    editor:
     preview: false
    fields:
      - { label: "Title", name: "title", widget: "string" }
      - { label: "Publish Date", name: "date", widget: "datetime" }
      - { label: "Image", name: "image", widget: "string", required: false }
      - { label: "Tags", name: "tags", widget: "list", required: false }
      - { label: "Description", name: "description", widget: "string" }
      - { label: "Body", name: "body", widget: "markdown" }

필요에 따라 widget guide을 사용하여 필드를 변경할 수 있습니다.
배포 후, 당신은 https://web.netlify.com/admin을 통해 사이트의 관리 패널을 방문할 수 있습니다.
웹 사이트의 관리 페이지에서 GitHub 로그인을 열어 사용자만 댓글을 편집할 수 있도록 하려면 Netlify 계정으로 OAuth 액세스를 열어야 합니다.settings tab > Access Control > OAuth >Install Provider으로 갑니다.설치할 때 GitHub Application page으로 생성된 인증 자격 증명을 사용해야 합니다.
netlify 주소를 홈 URL로 추가하고 https://api.netlify.com/auth/done을 리셋으로 추가합니다.
완료되면 관리 패널에 로그인하여 게시물을 직접 변경할 수 있습니다.

리디렉션 추가

내가 이미 너에게 말한 바와 같이, 나는 도메인 이름이 하나 있는데, 나는 사이트가 https://blog.ranvir.xyz이 아니라 something.netlify.com에 위탁 관리하기를 바란다.이를 위해서는 도메인 이름 공급업체에 CNAME 레코드를 설정해야 합니다.
간단한 구글 검색을 통해 설정 기록에 대한 더 많은 정보를 찾을 수 있다.
나의 예에서, 내가 자역을 사용할 때, 나는 반드시 blog을 호스트로, something.netlify.com을 값으로 사용해야 한다.
완료되면 리디렉션 파일을 생성하여 something.netlify.com을 blog.ranvir.xyz으로 리디렉션할 수 있습니다.static/_redirects 파일을 만들고 다음 내용을 추가합니다.

# Redirect default Netlify subdomain to primary domain
https://something.netlify.com/* http://blog.ranvir.xyz/:splat 301!

이것은 301의 영구 리디렉션을 생성합니다.

구글 분석 추가

당신의 사이트에 분석을 추가하는 것은 매우 유용합니다. 당신은 주어진 시간에 얼마나 많은 사람들이 당신의 사이트를 보고 있는지 검사할 수 있습니다.
기본적인 npm 패키지를 설치하고 구글 분석 추적 ID를 코드에 추가하기만 하면 된다.

npm install --save gatsby-plugin-google-analytics

현재 프로필의 코드를 변경합니다.

module.exports = {
  plugins: [
    ...
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        trackingId: 'UA-*******-*'
      }
    },
    ...

구글 분석기 테이블에서 추적 ID를 얻을 수 있습니다.