Gatsby.js + Netlify + Github을 사용하여 JAM Stack 블로그 만들기 및 게시

소개

Gatsby.js라는 정적 사이트 생성기로 기술 블로그를 만들고 Netlify라는 호스팅 서비스에서 호스팅하는 흐름을 설명합니다.
이런 느낌의 블로그 를 만들기 위한 순서를 설명하겠습니다.
덧붙여서 Audits(Chrome의 퍼포먼스 측정 기능)로 스코어를 측정한 결과 이런 느낌이 되었습니다.

Gatsby.js란?

정적 사이트를 고속으로 구축할 수 있는 React제의 정적 사이트 제너레이터.
세세한 내용에 관해서는 공식 문서나, 이하의 기사가 참고가 됩니다.
참고 사이트: React 기반 정적 사이트 생성기 Gatsby의 진정한 힘을 보여줍니다.

이번에는 gatsby-starter-lumen이라는 블로그 템플릿을 사용합니다.

Netlify란?

Github와 협력하여 협력 소스를 호스팅하는 정적 웹 호스팅 서비스
기본 무료
참고 사이트: 고기능 호스팅 서비스 Netlify에 대해 알아보고 사용해 보았습니다.

절차

1.Netlify에 Gatsby 프로젝트 배포

1-1.

gatsby-starter-lumen

1-2. Github와 계정 연계를 수행합니다.

Netlify는 Github의 리포지토리를 연동하고 해당 리포지토리의 소스를 호스팅하므로 Github의 계정 연계를 수행해야 합니다.


1-3. 리포지토리 이름을 결정합니다.

리포지토리 이름을 결정하고 Save & Deploy를 누르면 Github에 gatsby-starter-lumen 리포지토리가 만들어지고 Netlify에서 호스팅이 시작됩니다.
참고로 리포지토리의 공개 설정이 public으로 설정된 상태로 만들어지므로 private로 만들고 싶은 사람은 Github에서 설정을 변경해야 합니다.


1-4. 동작 확인

배포 후 Netlify 로그인 후의 화면에 URL이 표시되어 있다고 생각하므로 실제로 액세스하여 표시 확인을 실시한다.
사이트를 변경하려면 Site settings -> Change site name에서 변경 가능

2. 로컬 환경 구축

2-1.Github에서 소스를 clone

1-3 단계에서 Github에 리포지토리를 만들었으므로 Clone하십시오.

2-2.Git, Node, npm, gatsby-cli 설치

아래 링크를 참조하여 Git, Node, npm, gatsby-cli를 소개하십시오.
참고: [Set Up Your Development Environment](

2-3. 로컬 환경의 동작 확인

Github에서 복제된 디렉토리로 이동하여 다음 명령을 실행합니다.

cd ●●● # Gatsbyのプロジェクトディレクトリ
npm install
gatsby develop # 開発サーバを起動

localhost:8000으로 이동하여 블로그가 표시되는지 확인

3. 프로필 변경 및 기사 게시 절차

3-1. 사이드 메뉴의 정보 변경

사이드 메뉴의 프로필을 자신의 정보로 다시 작성해 봅시다.
htps //w w. tsbyys. 오 rg / 쓰리 아 l / 빠 rt - 제로 /
프로필 정보는 config.js에서 관리하므로 각 매개 변수를 다시 씁니다.
연락처를 나타내는 아이콘을 지우려면 config.js 및 use-site-metadata.js에서 해당 매개 변수를 제거해야합니다.
다음 소스에서는 "telegram""rss""vkontakte"를 삭제합니다.
수정 후 "gatsby develop"명령을 실행합니다.

config.js

# 修正イメージ
-----省略-----
  author: {
    name: 'test',
    photo: '/test.jpg',
    bio: 'Test',
    contacts: {
      email: '[email protected]',
      twitter: 'test',
      github: 'test'
    }
  }
-----省略-----

use-site-metadata.js

-----省略-----
contacts {
  email
  twitter
  github
}
-----省略-----             

이 방법으로 아이콘과 프로필 이름이 다시 작성되었는지 확인할 수 있습니다.

3-2 기사 게시

다음 디렉토리에 Markdown 형식의 파일을 작성하여 기사를 작성할 수 있습니다.
시도에 다음 md 파일을 작성해보십시오.
/content/posts/

2019-08-16---test.md

---
title: "タイトルテスト"
date: "2019-08-17T23:46:37.121Z"
template: "post"
draft: false
slug: "/posts/test/"
category: "JS"
tags:
  - "Tech"
  - "Gatsby.js"
  - "JS"
description: "test!"
---

### テスト
+ テスト
+ テストっと

이런 식으로 기사가 만들어집니다.


3-3:Git push하고 Netlify에 반영
기사의 작성이나 프로필의 변경 후에 Git push를 실시하면 자동적으로 Netlify에게도 반영되게 되어 있습니다.
Netlify 편리하네요.