gasby site 초기화

site 용 폴더를 생성하고 new 명령을 실행한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
~/$ mkdir gatsby_pages
~/$ cd gatsby_pages
~/gatsby_pages$ gatsby new

create-gatsby version 3.13.1


Welcome to Gatsby!

This command will generate a new Gatsby site for you in /home/qkboo/work-blog/gatsby_pages with the setup you select.
Let's answer some questions:


What would you like to call your site?
✔ · backtest
What would you like to name the folder where your site will be created?
✔ gatsby_pages/ backtest
✔ Will you be using JavaScript or TypeScript?
· JavaScript
✔ Will you be using a CMS?
· No (or I'll add it later)
✔ Would you like to install a styling system?
· No (or I'll add it later)


Thanks! Here's what we'll now do:

🛠 Create a new Gatsby site in the folder backtest


✔ Created site from template
✔ Installed Gatsby
✔ Installed plugins
✔ Created site in backtest
🎉 Your new Gatsby site backtest has been successfully created
at /home/qkboo/work-blog/gatsby_pages/backtest.
Start by going to the directory with

cd backtest

Start the local development server with

npm run develop

See all commands at

https://www.gatsbyjs.com/docs/reference/gatsby-cli/

이렇게 생성된 디렉토리를 살펴보면 다음 같이 gatsby 프로젝트 구조가 생성되어 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
~/gatsby_pages$ ll backtest/
total 1128
drwxr-xr-x 7 qkboo qkboo 4096 Jan 26 22:28 ./
drwxr-xr-x 3 qkboo qkboo 4096 Jan 26 22:25 ../
drwxr-xr-x 22 qkboo qkboo 4096 Jan 26 22:28 .cache/
drwxr-xr-x 8 qkboo qkboo 4096 Jan 26 22:26 .git/
-rw-r--r-- 1 qkboo qkboo 32 Jan 26 22:25 .gitignore
-rw-r--r-- 1 qkboo qkboo 1952 Jan 26 22:25 README.md
-rw-r--r-- 1 qkboo qkboo 160 Jan 26 22:26 gatsby-config.js
drwxr-xr-x 864 qkboo qkboo 36864 Jan 26 22:26 node_modules/
-rw-r--r-- 1 qkboo qkboo 1075858 Jan 26 22:26 package-lock.json
-rw-r--r-- 1 qkboo qkboo 424 Jan 26 22:25 package.json
drwxr-xr-x 5 qkboo qkboo 4096 Jan 26 22:28 public/
drwxr-xr-x 4 qkboo qkboo 4096 Jan 26 22:25 src/

서버 develop 모드 실행

gastby-CLI 명령으로 The development server 에서 서버를 실행해 보자, 개발용 서버는 로컬에서 실행하고 검증하고 좋다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
~/gatsby_pages$ cd backtest/$
~/gatsby_pages$ cd backtest/$ gatsby develop
...

success write out requires - 0.005s

You can now view backtest in the browser.

http://localhost:8000/

View GraphiQL, an in-browser IDE, to explore your site's data and schema

http://localhost:8000/___graphql

Note that the development build is not optimized.
To create a production build, use gatsby build

success Building development bundle - 11.658s
success Writing page-data.json and slice-data.json files to public directory - 0.152s - 3/4 26.32/s

만약 그런데 gatsby 를 전역 환경에 설치하지 못했다면 npm 명령으로 실행할 수 있다.

1
2
3
>~/gatsby_pages/backtest$ npm run develop
backtest@1.0.0 develop
gatsby develop

사이트에 접속해 봊ㄴ

http://localhost:8000/

gatsby 서버 접속을 모든 IP에서 허용하려면 --host=0.0.0.0 옵션을 사용한다.

1
$ gatsby develop --host=0.0.0.0

github 저장소 구성

https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/how-gatsby-works-with-github-pages/

1. site 저장소 초기화 해서 사용하기

Author

Gangtai Goh

Posted on

2024-01-26

Updated on

2024-01-27

Licensed under