인기검색어

 
정적사이트
Gatsbyjs 분류

정적사이트를 내 컴퓨터에 띄우고 글 작성 후 배포하기

작성자 정보

컨텐츠 정보

  • 18,199 조회
  • 4 댓글
  • 1 추천
  • 목록

본문



1. 들어가며


이때까지 따라오셨다면


(1) 깃허브 계정과 Vercel과 연결되어 자동으로 배포되어 있고,

(2) 내 컴퓨터와 깃허브 계정이 연동되어 원격으로 수정이 가능하고,

(3) 개발 도구들이 내 컴퓨터에 깔려있고,

(4) C:\Users\사용자\Documents\gatsby\gatsby-starter-minimal-blog


위 경로에 정적사이트 파일들이 있을 것입니다.


이제 내 컴퓨터에 직접 정적사이트를 띄운 후, 파일 수정 후 즉시 변경사항을 확인하는 방법에 대해 알려드리겠습니다.



2. gatsby-config.js 파일 수정하기


C:\Users\사용자\Documents\gatsby\gatsby-starter-minimal-blog\gatsby-config.js


위 경로의 파일을 수정하면 기본적인 셋팅을 할 수 있습니다.


대략 3번째 줄에


siteTitleAlt: `Minimal Blog - Gatsby Theme`,
Bash


위와 같은 내용이 있는데, 이 라인을


// 사이트 이름 설정, 첫 화면 왼쪽 위에 붙는 사이트 이름입니다.
siteTitle: `Lupin`,


// 페이지의 기본 타이틀 이름 설정, 웹브라우저에 붙는 사이트 이름과 내용입니다.
siteTitleAlt: `Minimal Blog - @lekoarts/gatsby-theme-minimal-blog`,


// JSONLD에서 사용되는 내용
siteHeadline: `Minimal Blog - Gatsby Theme from @lekoarts`,


// og:image의 절대경로설정 관련에 쓰입니다. 홈페이지의 정확한 URL을 입력하세요.
siteUrl: `https://minimal-blog.lekoarts.de`,


// SEO에 들어가는 사이트 설정입니다.
siteDescription: `Typography driven, feature-rich blogging theme with minimal aesthetics. Includes tags/categories support and extensive features for code blocks such as live preview, line numbers, and line highlighting.`,


// 사이트 언어를 설정합니다.
siteLanguage: `KR`,


// og:image에 쓰이며, 반드시 `static` 폴더에 있어야 합니다. 사이트 대표이미지라고 보시면 됩니다.
siteImage: `/banner.jpg`,


// 트위터 계정을 넣으면 됩니다. 없어도 될 것 같네요.
author: `@lekoarts_de`,
Bash


위 내용으로 대체합니다. 해당 내용을 읽어보시고 원하는 내용으로 교체하세요.


그리고 밑에 보면 트위터 인스타그램 계정을 넣을 수 있습니다. 원한다면 넣으시구요.


그리고 홈페이지 제목 밑에 Blog About도 원하는 이름으로 바꿀 수 있습니다.


{
  title: `Blog`,
  slug: `/blog`,
},
{
  title: `About`,
  slug: `/about`,
},
Bash


위 내용을


{
  title: `블로그`,
  slug: `/blog`,
},
{
  title: `알아보기`,
  slug: `/about`,
},
Bash


위와 같이 바꾸면 한글로 나타날 것입니다.



그리고 구글 분석 도구를 사용하고 싶다면


resolve: `gatsby-plugin-google-analytics`,
options: {
  trackingId: process.env.GOOGLE_ANALYTICS_ID,
},
Bash


위 내용을


resolve: `gatsby-plugin-google-analytics`,
options: {
  trackingId: "UA-XXXXXXXX-X",
},
Bash


위와 같은 형식으로 바꾸면 됩니다.



추가 설정에 대한 상세한 내용은


https://github.com/LekoArts/gatsby-starter-minimal-blog


https://github.com/LekoArts/gatsby-themes/tree/master/themes/gatsby-theme-minimal-blog


https://juneyr.dev/jekyll-to-gatsby-블로그-👩‍🔧


위 세 링크를 확인하시면 됩니다. 아무래도 UI가 없이 직접 수동으로 설정하는게 귀찮긴 하지만


이 부분은 초기에만 해주고, 주기적으로 변경할 필요가 없기 때문에 받아들일 수 있다고 생각합니다.



3. 내 컴퓨터에 정적사이트 띄우기


이제 내 컴퓨터에서 실제로 어떻게 표현이 되는지 확인할 수 있습니다.


Git Bash에 들어가서


cd ~
Bash


cd Documents/gatsby/gatsby-starter-minimal-blog
Bash


위 두 명령어를 내리면 정적사이트 폴더에 들어와질 것입니다.


먼저 필요한 패키지를 설치할 것입니다.


기본적으로 yarn.lock 파일이 있기 때문에 yarn 명령어로 설치할 것입니다.


yarn install
Bash


위 명령어로 정적사이트를 띄우는데 패키지를 설치합니다.


인터넷 연결 상태에 따라 다르겠지만 대략 1~10분 정도 걸립니다.


[4/4] Building fresh packages...
Done in 611.03s.
Bash


위 내용이 나오면 패키지 설치가 완료된 것입니다.


[4/4] Building fresh packages...
[1/14] ⠄ core-js
[2/14] ⠄ mozjpeg
[3/14] ⠄ pngquant-bin
[4/14] ⠄ cwebp-bin
error An unexpected error occurred: "C:\\Users\\사용자\\Documents\\gatsby
\\gatsby-minimal\\node_modules\\mozjpeg: UNKNOWN: unknown error, open 'C:\\Users
\\사용자\\AppData\\Local\\Temp\\yarn--1594024851105-0.06416649092093318\\yarn.
cmd'".
info If you think this is a bug, please open a bug report with the information p
Bash


혹시나 위와 같은 에러가 뜬다면


npm install
Bash


위와 같이 npm install을 해줍니다. 그러면


npm WARN acorn-dynamic-import@4.0.0 requires a peer of acorn@^6.0.0 but none is installed. You must install peer dependencies yourself.
added 519 packages from 125 contributors, removed 309 packages, updated 1996 packages and audited 2520 packages in 579.384s
153 packages are looking for funding
  run `npm fund` for details
found 1151 low severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details
Bash


위와 같이 패키지 설치가 잘될 것입니다.



설치가 끝나면


gatsby develop
Bash


위 명령어로 개발전용으로 띄울 수 있습니다.


$ gatsby develop


success open and validate gatsby-configs - 0.301s
success load plugins - 17.103s
warn The Google Analytics plugin requires a tracking ID. Did you mean to add it?
success onPreInit - 0.070s
success initialize cache - 0.135s
success copy gatsby files - 1.284s
success onPreBootstrap - 0.072s
success createSchemaCustomization - 0.033s
success source and transform nodes - 5.727s
success building schema - 1.167s
success createPages - 0.407s
success createPagesStatefully - 0.437s
success updating schema - 0.110s
success onPreExtractQueries - 0.006s
success extract queries from components - 2.431s
success write out redirect data - 0.145s
success Build manifest and related icons - 0.005s
success onPostBootstrap - 0.399s
info bootstrap finished - 58.581s
success run static queries - 0.224s - 2/2 8.93/s
success run page queries - 5.721s - 13/13 2.27/s
success write out requires - 0.070s
success Generating image thumbnails - 30.320s - 7/7 0.23/s


You can now view minimal-blog 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 - 38.459s
Bash


위와 같이 나오면 이제 내 컴퓨터 상에서 띄워진 것입니다.


이제 인터넷 브라우저를 켠 후 주소창에


http://localhost:8000/
Bash


위 내용을 넣습니다.




위와 같은 화면이 나옵니다.


이제 실시간으로 변경된 내용을 적용할 수 있습니다.


테스트로 사이트 제목을 바꿔봅시다.


아까 열었던 gatsby-config.js 를 다시 열어봅니다.


siteTitle: `사이트 이름`,
Bash


위 부분을 원하는대로 다시 바꾼 후 저장합니다. 그런 후 웹브라우저에 가보면 즉시 적용된 것을 볼 수 있을 것입니다. 바로 안바뀐다면 F5 새로고침을 해보면 바로 적용되는 것을 확인할 수 있습니다.


이런 식으로 원하는 부분을 실시간으로 바꿔서 적용 가능합니다.



4. 테스트 글 작성하기


이제 글 작성하는 방법에 대해 알려드리겠습니다.


C:\Users\사용자명\Documents\gatsby\gatsby-starter-minimal-blog\content\posts


윈도우 탐색기에서 위 경로로 가봅니다.


그러면 기존에 있는 글 제목으로 된 폴더가 있는데요.


test라는 폴더를 생성해봅니다.


test 폴더에 들어간 뒤 우클릭 -> 새로 만들기 -> 텍스트문서 클릭 후


index.mdx 로 이름을 바꾸고 파일을 엽니다.


---
title: 테스트 글입니다.
date: 2020-07-06 15:40:10  0900
description: 테스트 글을 작성해봅니다. 이 부분은 글 설명 부분입니다.
tags:
  - Test
slug: "/post-test"
---
### 샵 세번


테스트 글입니다. 이 글은 블로그의 시작이 될 것입니다.


## 샵 두번


잘 출력되겠죠?


# 샵 한번


글자 크기는 어떨까?


### 간단설명


date: 2020-07-06 15:40:10  0900


위 내용은 GMT  9시간으로 우리나라 시각을 대표하는 표기방법이라고 보시면 됩니다.


뒤에 시간을 표기하는 이유는 하루에 여러개의 글을 넣는 경우 순서가 거꾸로 되기 때문에


시간을 표기해주면 정렬 문제는 없어집니다.


### slug는 무엇인가요?


slug: "/post-test"


위 내용은 해당 글의 주소를 지정해주는 부분입니다. slug가 없으면 글의 title 부분이 글의 url이 됩니다.


한글을 그대로 표시하고 싶다면 없어도 되지만, 원하는 URL이 있다면 직접 지정해주는 것도 하나의 방법입니다.


이제 테스트는 끝났습니다. 감사합니다.
Bash


위 내용을 그대로 복사해서 넣은 후 저장합니다.


그러면 Git bash를 보면


success Re-building development bundle - 0.679s
success run queries - 1.667s - 9/9 5.40/s
success run queries - 0.018s - 1/1 55.93/s
success run queries - 0.016s - 1/1 61.77/s
Error loading a result for the page query in "/post-test". Query was not run and no cached result was found.
Bash


위와 같이 에러가 뜨는데요. 이는 페이지 쿼리가 실행되지 않고, 캐시가 없기 때문입니다.


쿼리를 돌려주려면 index.mdx를 다시 열어서 아무 부분이나 수정해주고 저장해주면 됩니다.


이제 다시 웹브라우저에 확인해보면 자동으로 글이 생성된 것을 볼 수 있습니다.


글이 생성된 이후에는 글 내용을 바꾸고 저장하면 바로 바뀌는 것을 볼 수 있습니다.



5. Github에 업로드 하기


이제 글을 수정했으니, 해당 부분을 깃허브에 올려서 Vercel로 바로 배포되게 합니다.


Git bash에서 컨트롤 C를 두세번 눌러주면 개발 환경에서 빠져나옵니다.


git add -A
Bash


위 명령어로 이때까지 수정한 모든 것을 저장합니다.


git commit -m "first touch"
Bash


위 명령으로 커밋 이름을 지정해줍니다.


[pre 26cac83] first touch
 3 files changed, 62 insertions( ), 3 deletions(-)
 create mode 100644 content/posts/test/index.mdx
 create mode 100644 content/posts/test2/index.mdx
Bash


대략 위와 같이 나올 것입니다.


git push origin pre
Bash


위 명령으로 내 컴퓨터에 수정된 내용을 깃허브의 pre 브랜치에 올려줍니다.


$ git push origin pre
Enumerating objects: 13, done.
Counting objects: 100% (13/13), done.
Delta compression using up to 4 threads
Compressing objects: 100% (7/7), done.
Writing objects: 100% (9/9), 1.48 KiB | 252.00 KiB/s, done.
Total 9 (delta 4), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (4/4), completed with 3 local objects.
To https://github.com/woosungtest/gatsby-starter-minimal-blog
   e809d05..26cac83  pre -> pre
Bash


대략 위와 같이 나오면 깃허브에 올려진 것입니다.


이제 깃허브와 vercel의 대시보드에 가봅니다.


깃허브에는  


pre had recent pushes xx minutes ago
Bash


위와 같이 나왔을 것이고,




vercel의 대시보드에 들어가보면 방금 올린 내용이 위와 같이 Preview Deployments에 있을 것입니다.


DEPLOYMENT에 들어가서 Visit을 눌러보면 잘 뜬 것을 확인할 수 있습니다.



https://www.wsgvet.com/bbs/board.php?bo_table=staticsite&wr_id=7


브랜치를 통합하기 위해 위 링크의 3 ~ 5번을 따라합니다.


이제 pre 브랜치가 master 브랜치와 통합되어, 수정된 내용이 그대로 인터넷에 배포된 것을 확인할 수 있습니다.



6. 마무리


정적사이트 생성 후 Vercel 연동, 깃허브 연동, 수정하는 방법, 내 컴퓨터에 띄워서 직접 수정 후 바로 확인하는 방법에 대해 알려드렸습니다.


글 작성의 경우


웹에서는 notion(https://www.notion.so) 을 추천드립니다.


로컬에서 작성하실 경우 마크다운 에디터인 Typora(https://typora.io)를 추천드립니다.


기존에 있는 글 작성 부분을 잘 살펴보면 어떻게 작성하는게 좋은지 확인할 수 있으니 참조하시구요.


여기까지 따라오셔서 감사합니다!


궁금한 사항이 있다면 언제든지 댓글로 남겨주세요.

태그 , , , ,
no_profile 우성군쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 레벨 62
99%

관련자료

  • 서명
    우성짱의 NAS를 운영하고 있습니다.

    저의 즐거움이 여러분의 즐거움이면 좋겠습니다.

댓글 4 / 1 페이지

궁금해요님의 댓글

본문안에 구글 광고 삽입하는 방법이 궁금합니다....라이믹스는 애드온으로 쉽게 가능한데 그누보드는 방법이 어렵네요 ㅠㅠ

우성짱님의 댓글의 댓글

저는 그냥 자동 광고 사용하고 있습니다. 

<script data-ad-client="ca-pub-123413241234123412" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
PHP


위와 같은 자동광고 코드를 환경설정 -> 기본환경설정 -> 레이아웃 추가설정 -> 추가 script, css 에 그냥 넣으면 자동광고가 시작됩니다.
목록
전체 8 / 1 페이지
RSS
날짜순 조회순 추천순

최근글

새댓글

알림 0