Gatsby Basic 1

열심히 왜 공인ip로 접속안되는지 확인해보고 찾고 테스트하고.. 삽질했었는데
vscode로 ssh를 연결한 뒤 localhost:8000을 접속하니 잘 된다..
아무튼.. 이제 gatsby 튜토리얼을 따라서 index.js를 수정해보자

// pwd: src/pages/index.js
// Step 1: Import React
import * as React from 'react'

// Step 2: Define your component
const IndexPage = () => {
  return (
    <main>
      <h1>Welcome to my Gatsby site!</h1>
      <p>I'm making this by following the Gatsby Tutorial.</p>
    </main>
  )
}

// You'll learn about this in the next task, just copy it for now
export const Head = () => <title>Home Page</title>

// Step 3: Export your component
export default IndexPage

이렇게 변경 후 저장하면..!

내가 작성(복붙)한 코드대로 사이트 내용물이 바뀌었다

이제 하위 페이지를 만들어보자

// pwd : /src/pages/about.js
// Step 1: Import React
import * as React from 'react'

// Step 2: Define your component
const AboutPage = () => {
  return (
    <main>
      <h1>About Me</h1>
      <p>Hi there! I'm the proud creator of this site, which I built with Gatsby.</p>
    </main>
  )
}

// Step 3: Export your component

export const Head = () => <title>About Me</title>

export default AboutPage

생성한 페이지의 주소는 http://localhost:8000/about/ 이다.

와우
html으로 하나씩 만들수도 있겠지만 차츰 프레임워크가 얼마나 효율적인지 느껴진다.