현재 위와 같이 Gatsby로 블로그를 운영하고 있습니다. ( https://blog.wsgvet.com )

정말 다양한 유무료 테마를 검색해봤고, 설치도 해봤습니다.

그 중에서 가장 마음에 든 Flexiblog를 소개합니다. (테마포레스트 링크)

아쉽게도 유료($29)인데요.

그럼에도 불구하고 추천하고 싶은 이유가 있습니다.

다크모드 지원

요새 무료 테마에서도 기본으로 적용됩니다.

그럼에도 불구하고, 이 테마에는 상당히 많은 Component가 있습니다.

모든 부분을 조화롭게 적용하는 것은 또다른 작업입니다.

이 부분에서도 상당히 만족하고 있습니다.

algolia 검색 지원

무료테마의 경우 검색기능이 없거나, 상당히 힘들게 작업해야되는 단점이 있습니다.

이 테마는 algolia API를 이용하여 정말 편하게 기능을 추가할 수 있습니다.

상업용으로 간다면 당연히 비용을 지불해야겠지만, 개인용 블로그 검색용으론 무료로 이용할 수 있습니다.

disqus 댓글 기능

무료 테마에서도 편하게 적용할 수 있지만, 디자인에 어울리게 배치하는 것은 또 다른 일이죠 ㅎㅎ

편하게 적용할 수 있게 작업되어 있습니다.

관련 글 출력

이미 만들어져있는 모양대로 관련 글을 출력할 수 있습니다.

저는 이미지와 카테고리 등이 모두 잘 나오는 것으로 수정했습니다.

마음에 듭니다. ㅎㅎ

Tag 및 Category 기능

보통 태그는 지원되지만, 카테고리와 동시에 지원되는 경우는 무료테마에서 보기 힘듭니다.

이 부분을 조화롭게 만드는 것은 더 어려운 일이죠.

이 테마에서는 매우 편하게 셋팅할 수 있습니다.

여러가지 테마 및 레이아웃 선택 가능

현재 9개의 테마와 6개의 포스트 레이아웃이 있습니다.

https://flexiblog-sales.firebaseapp.com/

여기에서 바로 확인 가능합니다.

개인 블로그로도 가능하고, 기업용 블로그로도 충분히 쓸 수 있을 정도의 퀄리티입니다.

포스트 레이아웃도 썸네일을 어떻게 보여줄지, 글 폭은 얼마나 할지, disqus 댓글은 어디에 넣을지 모두 커스텀 가능합니다.

정리하며...

제 홈페이지와 병행해서 글을 올리기는 어렵습니다.

그만큼 홈페이지에 집중하고 싶기도 하구요.

그래도 이렇게 완성된 것을 알려드리고 싶기도 하고, Gatsby로 제대로 블로그 만들고 싶은 분께 소개해드리고 싶기도 했습니다. ㅎㅎ

마지막으로 도움이 될만한 글들을 링크해드리겠습니다.

Flexiblog 간단 소개 : https://blog.wsgvet.com/from-minimal-to-flexiblog/

Flexiblog 설치 공식 문서 : https://elegantstack-docs.web.app/flexiblog-theme-documentation/

Flexiblog 다크모드 추가 관련 글 : https://blog.wsgvet.com/dark-mode-enabled/

커스터마이징 하는 방법 : https://blog.wsgvet.com/how-to-edit-gatsby-flexiblog-personal-theme/

gatsby-config.js 수정하는 방법 및 RSS 추가하는 방법 : https://blog.wsgvet.com/gatsby-flexiblog-gatsby-config-and-rss-setting/

Vercel로 배포하는 방법 : https://blog.wsgvet.com/gatsby-flexiblog-vercel-deployment/

Flexiblog 업데이트 하는 방법 : https://blog.wsgvet.com/how-to-update-gatsby-flexiblog-theme/

정적사이트 생성기를 이용하면 DB 및 PHP가 필요없기 때문에 대부분 배포 서비스를 이용할 것입니다.

특히 nextjs를 개발하고 있는 vercel을 이용하면, 서울 CDN을 무료 플랜에서도 쓸 수 있습니다.

vercel의 경우 해당 지역의 사용자가 많으면 그 지역 CDN을 열어주는 편인데요.

미국과 한국 모두 사용자가 많다면 둘다 열어줍니다.

이와 같은 배포 서비스를 이용하지 않고, 개인 홈서버나 클라우드 인스턴스를 이용하여 직접 배포할 수도 있습니다.

음.. 직접 배포하는 이유는 vercel을 제외한 배포 서비스에 우리나라 CDN이 거의 없기 때문에 

우리나라 사용자들에게 최고의 접속환경을 보여드리고 싶기 때문입니다.

2. 기본 준비사항

로컬 컴퓨터에 정적사이트 생성기를 사용할 수 있는 준비가 되어있고,

깃허브와 연동되었으며, 이미 정적사이트 생성기를 이용하여 파일을 만들었다는 가정하에 진행해봅니다.

저의 경우 gatsby로 생성한 파일이 /gatsby/gatsby-minimal에 있습니다.

로컬 컴퓨터에서 Nginx로 바로 배포하려면 그냥 Ngixn에서 /gatsby/gatsby-minimal/public 폴더를 root로 잡으면 끝입니다.

상세한 Nginx 설정은 4번에서 알려드리겠습니다.

3. 빌드 후 빌드된 파일만 깃허브에 업로드하기

저는 오라클 클라우드에 있는 무료 인스턴스를 이용하여 배포할 것입니다.

이제 빌드된 파일이 저장될 /gatsby/gatsby-minimal-public 폴더를 새로 생성하고, 해당 폴더를 새로운 깃허브 저장소와 연결할 것입니다.

우선 로컬 컴퓨터에서 /gatsby/gatsby-minimal-public와 같은 폴더를 생성 후, 

깃허브에 빌드된 파일이 저장될 개인용 저장소(레포)를 생성합니다.

참고로 Private으로 생성하면 git clone이나 git pull 할때 아이디와 비번을 계속 넣어줘야되는 귀찮음이 있습니다.

그리고 로컬 컴퓨터에서 gatsby 파일이 있는 폴더로 갑니다.

[code]

gatsby build

[/code]

위 명령어로 빌드를 진행합니다.

[code]

cp -r public ../gatsby-minimal-public

[/code]

위 명령어로 빌드로 생성된 public 폴더를 원하는 폴더로 복사합니다.

[code]

cd .. && cd gatsby-minimal-public/public

[/code]

이제 위 명령어를 내려서 public 폴더로 갑니다.

[code]

git init

git add -A

git commit -m "initial commit"

[/code]

위 명령어들을 내려, git을 초기화하고, 추가된 파일들을 커밋합니다.

[code]

git remote add origin https://github.com/자신의깃허브계정/개인용저장소

[/code]

위와 같은 형식으로 빌드된 파일이 저장될 개인용 저장소(레포)와 연결합니다.

[code]git push --set-upstream origin master[/code]

위 명령어로 파일을 업로드합니다.

이렇게 하면 빌드된 파일만 원하는 저장소에 저장이 됩니다.

다음에 로컬에서 작업 후 바로 배포하게 될 명령어를 한줄로 만들어보았습니다.

[code]

gatsby build && cp -r public ../gatsby-minimal-public && cd .. && cd gatsby-minimal-public/public && git add -A && git commit -m "public" && git push origin master && cd .. && cd .. && cd gatsby-minimal

[/code]

위 명령어를 내리면 빌드하고, 빌드된 폴더를 복사 후 깃허브에 올리고, 원래 폴더로 돌아옵니다.

이제 원하는 결과물을 깃허브에 올렸습니다. 

4. 클라우드에서 다운 받고, Nginx와 연동하기

클라우드에서 원하는 폴더로 가서 git clone을 합니다.

[code]git clone https://github.com/자신의깃허브계정/개인용저장소[/code]

위와 같이 다운 받을 수 있습니다.

저는 /var/www/gatsby-minimal-public 이 경로에 파일을 다운 받았습니다.

본격적으로 Nginx 설정을 넣을 때 입니다.

[code]

nano /etc/nginx/sites-available/static.site

[/code]

위와 같이 nginx 설정파일을 만듭니다.

[code=nginx]server {

    listen 80;

    listen [::]:80;

    server_name static.hubs.tk; # 사이트 도메인 지정

    location / {

            rewrite ^ https://$host$request_uri? ;

    }

}

server {

listen 443 ssl http2;

listen [::]:443 ssl http2;

server_tokens off;

server_name static.hubs.tk; # 사이트 도메인 지정

index index.html;

autoindex off;

charset urtf-8;

root /var/www/gatsby-minimal-public; # public root 설정하기

error_page 404 /404.html;

rewrite ^([^.\?]*[^/])$ $1/ permanent;

try_files $uri $uri/ $uri/index.html =404;

        location ~* \.(?:html)$ {

          add_header Cache-Control "public, max-age=0, must-revalidate";

          add_header X-Frame-Options SAMEORIGIN;

          add_header X-Content-Type-Options nosniff;

          add_header X-XSS-Protection "1; mode=block";

          add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload";

        }

        location /page-data {

          add_header Cache-Control "public, max-age=0, must-revalidate";

        }

        location = /sw.js {

          add_header Cache-Control "public, max-age=0, must-revalidate";

        }

        location = /manifest.webmanifest {

          add_header Cache-Control "public, max-age=604800, must-revalidate";

        }

        location /static {

          add_header Cache-Control "public, max-age=31536000, immutable";

        }

        location ~* \.(?:js|css|png|jpg)$ {

          add_header Cache-Control "public, max-age=31536000, immutable";

        }

## SSL settings

ssl_certificate /etc/letsencrypt/live/hubs.tk/fullchain.pem; # SSL 경로 지정

ssl_certificate_key /etc/letsencrypt/live/hubs.tk/privkey.pem; # SSL 경로 지정

ssl_trusted_certificate /etc/letsencrypt/live/hubs.tk/chain.pem; # SSL 경로 지정

ssl_dhparam snippets/dhparams.pem; # dhparams.pem 경로 지정

ssl_session_cache shared:SSL:10m;

ssl_session_timeout 1d;

ssl_session_tickets off;

ssl_ecdh_curve X25519:sect571r1:secp521r1:secp384r1;

ssl_stapling on;

ssl_stapling_verify on;

resolver 8.8.8.8 8.8.4.4 valid=300s;

resolver_timeout 10s;

ssl_protocols TLSv1.2 TLSv1.3;

ssl_prefer_server_ciphers off;

ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384;

}[/code]

위 내용을 메모장에 복사 후 한글로 표시한 부분을 자신의 상황에 맞게 수정 후 붙여넣으면 됩니다.

참고로 SSL 인증서 생성은 

https://blog.wsgvet.com/letsencrypt-wildcard-certification-issue-and-mariadb-install/

위 링크를 참조하시면 됩니다.

# dhparams.pem 경로 지정 부분은

[code=bash]

sudo openssl dhparam -out /etc/nginx/snippets/dhparams.pem 2048

[/code]

위 명령어로 dhparams.pem 파일을 생성합니다.

대략 10~20초면 생성이 됩니다.

이제 거의 끝났습니다. 

[code]

ln -s /etc/nginx/sites-available/static.site /etc/nginx/sites-enabled/

[/code]

위 명령어로 설정을 복사한 뒤

[code]

nginx -t

[/code]

위 명령어로 nginx 설정파일에 이상이 없는지 체크 후, 문제가 없다면

[code]

service nginx reload

[/code]

위 명령어로 재시작하면 됩니다.

5. 참조 사이트

https://docs.microsoft.com/ko-kr/azure/static-web-apps/publish-gatsby

https://raghuvirkasturi.com/gatsby-nginx-conf/

https://stackoverflow.com/questions/56963293/define-specific-cache-control-header-for-selected-file-only

https://www.gatsbyjs.org/docs/caching/

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번째 줄에

[code=bash]

siteTitleAlt: `Minimal Blog - Gatsby Theme`,

[/code]

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

[code=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`,

[/code]

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

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

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

[code=bash]

{

  title: `Blog`,

  slug: `/blog`,

},

{

  title: `About`,

  slug: `/about`,

},

[/code]

위 내용을

[code=bash]

{

  title: `블로그`,

  slug: `/blog`,

},

{

  title: `알아보기`,

  slug: `/about`,

},

[/code]

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

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

[code=bash]

resolve: `gatsby-plugin-google-analytics`,

options: {

  trackingId: process.env.GOOGLE_ANALYTICS_ID,

},

[/code]

위 내용을

[code=bash]

resolve: `gatsby-plugin-google-analytics`,

options: {

  trackingId: "UA-XXXXXXXX-X",

},

[/code]

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

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

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-%EB%B8%94%EB%A1%9C%EA%B7%B8-%F0%9F%91%A9%E2%80%8D%F0%9F%94%A7

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

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

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

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

Git Bash에 들어가서

[code=bash]

cd ~

[/code]

[code=bash]

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

[/code]

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

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

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

[code=bash]

yarn install

[/code]

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

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

[code=bash]

[4/4] Building fresh packages...

Done in 611.03s.

[/code]

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

[code=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

[/code]

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

[code=bash]

npm install

[/code]

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

[code=bash]

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

[/code]

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

설치가 끝나면

[code=bash]

gatsby develop

[/code]

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

[code=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

[/code]

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

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

[code=bash]

http://localhost:8000/

[/code]

위 내용을 넣습니다.

{이미지:1}

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

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

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

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

[code=bash]

siteTitle: `사이트 이름`,

[/code]

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

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

4. 테스트 글 작성하기

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

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

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

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

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

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

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

[code=bash]

---

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이 있다면 직접 지정해주는 것도 하나의 방법입니다.

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

[/code]

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

그러면 Git bash를 보면

[code=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.

[/code]

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

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

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

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

5. Github에 업로드 하기

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

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

[code=bash]

git add -A

[/code]

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

[code=bash]

git commit -m "first touch"

[/code]

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

[code=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

[/code]

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

[code=bash]

git push origin pre

[/code]

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

[code=bash]

$ 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

[/code]

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

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

깃허브에는  

[code=bash]

pre had recent pushes xx minutes ago

[/code]

위와 같이 나왔을 것이고,

{이미지:2}

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)를 추천드립니다.

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

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

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

1. 들어가며 

이제 본격적으로 블로그 수정 및 개발을 할 시간입니다.

nodejs, yarn, gatsby-cli를 설치할 예정입니다.

2. nodejs 설치하기

https://nodejs.org/en/download/

위 링크에서 자신의 컴퓨터 환경에 맞는 프로그램을 다운 받습니다.

LTS 버전을 다운 받으면 됩니다. 현재 LTS버전은 12.18.2입니다.

그리고 설치합니다.

이제 Git bash에서 node, npm 명령어를 내릴 수 있습니다.

3. yarn 설치하기

yarn은 npm과 비슷한 패키지 매니저입니다.

같이 깔아두면 좋습니다.

https://classic.yarnpkg.com/en/docs/install

위 링크에서 다운 받고, 설치합니다.

4. gatsby-cli 설치하기

이제 Git bash를 열고

npm install -g gatsby-cli

위 명령어를 내립니다.

그러면 엄청 열심히 설치할 것입니다. 컴퓨터 사양에 따라 다르겠지만 5~10분까지도 걸릴 수 있습니다.

설치가 끝나면 Git bash에서 gatsby 명령어를 내릴 수 있습니다.

5. 설치된 버전 확인하기

Git Bash를 열고 버전을 확인해봅니다.

(1) nodejs 버전 확인하기

node -v

위 명령어를 내리면 아래와 같은 결과가 나올 것입니다.

v12.18.0

(2) npm 버전 확인하기

npm -v

위 명령어를 내리면 아래와 같은 결과가 나올 것입니다.

6.14.4

(3) yarn 버전 확인하기

yarn -v

위 명령어를 내리면 아래와 같은 결과가 나올 것입니다.

1.22.4

(4) gatsby-cli 버전 확인하기

gatsby -v

위 명령어를 내리면 아래와 같은 결과가 나올 것입니다.

Gatsby CLI version: 2.12.46

6. 코드 에디터 프로그램 설치하기

(1) 설치하기

Gatsby에서는 VS Code를 설치하는 것을 추천합니다.

개인 사용은 물론, 기업에서도 무료로 사용할 수 있기 때문입니다.

https://code.visualstudio.com/#alt-downloads

위 링크에서 자신의 컴퓨터에 맞는 프로그램을 다운 받고 설치할 수 있습니다.

(2) Prettier 플러그인 설치하기

코드를 파싱하고 최대 줄 길이를 고려하여 필요한 경우 코드를 래핑하는 자체 규칙으로 다시 인쇄하여 일관된 스타일을 적용합니다.

Gatsby 공식 사이트에서 설치하는 것을 추천합니다.

설치 방법은 VS Code를 설치 후 왼쪽에 확장 버튼을 누른 후 검색창에 Prettier를 넣으면 제일 위에 나오는 Install을 누르면 됩니다.

{이미지:1}

위 스샷을 참조하세요.

(3) 한글 인코딩 자동 인식시키기

한글이 들어간 파일을 수정할 때, 한글이 깨질 경우가 있습니다

VS Code가 한글을 인식하지 못하는 경우인데요.

이때 자동으로 설정해주는 방법이 있습니다. 저는 이것까지 추천드립니다.

{이미지:2}

VS Code 실행 후 위에 File -> Preferences -> Settings에 들어갑니다.

{이미지:3}

Text Editor -> Files -> 제일 위에 있는 Auto Guess Encoding에 체크를 하면 바로 저장됩니다.

이제 기본 준비는 끝났습니다.

다음에는 실제로 자신의 컴퓨터에서 블로그를 띄우고 바로 수정하는 방법에 대해 알려드리겠습니다.

참조사이트

https://www.gatsbyjs.org/tutorial/part-zero/ 

1. 들어가며

이제 홈페이지(정적사이트) 파일을 깃허브에서 다운 받았습니다.

깃허브와 Vercel은 정확하게 연동이 되었지만, 내 컴퓨터와 깃허브는 아직 연결되어 있지 않습니다.

그래서 간단하게 수정 후 깃허브에 연동하여 파일을 올리는 방법부터 알려드리겠습니다.

2. branch의 이해와 생성하기

push는 내 컴퓨터의 파일을 깃허브에 보낸다는 말입니다.

먼저 Git bash를 실행 후 홈페이지 파일이 있는 곳으로 이동합니다.

지난 게시물과 같이 했다면

cd ~

위 명령어로 git bash의 최상위 경로로 옮겨줍니다. 내컴퓨터의 문서폴더로 이동합니다.

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

위 명령어를 내리면 현재 윈도우 PC의 정적사이트 홈페이지 파일경로로 가는 것입니다.

{이미지:1}

위와 같이 폴더가 이동되면 됩니다.

그런데 폴더 이름 옆에 (master) 와 같이 파스텔 색의 글자가 있습니다.

이것은 현재 깃허브 저장소의 브랜치를 표시하는 것입니다.

브랜치는 한글로 나무 줄기의 '줄기'라는 느낌으로 이해하면 되는데요. 가장 메인이 되는 줄기라고 보시면 됩니다.

master는 현재 깃허브와 연동된 Vercel에서 배포되고 있는 바로 그 브랜치입니다. 그래서 master와 바로 연동하기보다는, 내 컴퓨터에서는 pre라는 똑같은 내용의 새로운 브랜치를 만들어서 수정 후 깃허브에 보내고, 문제가 없으면 pre 브랜치 내용물을 master와 같게 만들어 줄 것입니다.

제가 해보니 이렇게 작업하는게 깃허브에서도 관리하기 편하고, vercel과 연동되어 있는 이 상태에서 최선인 것 같습니다.

다시 요약하면, pre 브랜치를 만든 후 내 컴퓨터에서 파일을 수정 후 깃허브에 보내게 되면, vercel에서 자동으로 pre 브랜치를 인식하여 바로 빌드해서 보여줍니다. 그때 에러가 없으면 master와 merge(같게 만들어주는 작업)를 하는 방식입니다. 그렇게 되면 vercel에서도 pre가 master와 같게 작업해주고, 홈페이지에서 바로 반영되게 해줍니다.

이런 내용에 대한 용어의 설명은 

https://rogerdudler.github.io/git-guide/index.ko.html

https://tagilog.tistory.com/377

위 두 링크를 보면 이해가 될 것입니다.

일단 말이 길어졌으니 바로 실습으로 이해해보도록 합니다.

git branch

위 명령어를 내리면 현재의 브랜치 목록을 보여줍니다.

* master 

위와 같이 마스터 브랜치가 있고, 지금 그 브랜치에서 작업하고 있다는 것입니다.

이제 pre라는 브랜치를 만들어 줄 것입니다.

git branch pre

위 명령어로 pre라는 브랜치를 만들었습니다.

이제 pre 브랜치로 작업공간을 옮길 것입니다.

git checkout pre

위 명령을 내리면 master에서 pre 브랜치로 작업 공간을 옮깁니다.

그리고 다시 

git branch

위 명령어를 내리면 

{이미지:2}

위와 같이 master 브랜치와 pre 브랜치가 있고, 현재 pre 브랜치에 *가 있어서 작업공간이 pre로 바뀐 것을 볼 수 있습니다. 

폴더 오른쪽에도 파스텔색으로 (pre)가 있어서 현재 공간이 뭔지 알 수 있습니다.

3. 파일 생성 후 깃허브로 보내기(push)

이제 파일을 하나 만들어볼게요. 윈도우 탐색기에서 만들어도 되고, 그냥 Git bash에서 

nano test.txt

위 명령어로 test.txt을 만들어봅니다.

그리고 12345 내용을 넣고, 컨트롤 + O, 엔터, 컨트롤 + X를 누르면 만들어집니다.

이제 파일을 깃허브에 올려야겠죠?

git add test.txt

위 명령어를 내리면 

$ git add test.txt

warning: LF will be replaced by CRLF in test.txt.

The file will have its original line endings in your working directory

위와 같은 에러 같은 것이 나오는데 당황하지 않으셔도 됩니다.

아무튼 이렇게 내 컴퓨터 로컬 저장소에 test.txt 파일을 추가해줬습니다.

그리고 commit을 해줘야 합니다. 커밋은 기록한다고 생각하시면 됩니다.

git commit -m "test file"

위와 같이 넣으면 test file이라는 내용으로 기록하겠다는 말입니다.

$ git commit -m "test file"

[pre 838fc7a] test file

 1 file changed, 1 insertion(+)

 create mode 100644 test.txt

그러면 위와 같이 1개의 파일이 변경되었고, 1줄이 추가되었다고 나옵니다.

이제 pre 브랜치 깃허브에 올리면 됩니다.

git push origin pre

위 명령어를 내리면 윈도우의 경우 깃허브에 로그인하라고 뜹니다.

{이미지:3}

위와 같이 깃허브 화면이 나오고 아이디와 비번을 넣으면, 드디어 내 컴퓨터와 깃허브가 연동이 되면서 업로드가 됩니다.

{이미지:4}

위와 같이 알아서 업로드 되는 것을 확인할 수 있습니다.

이제 깃허브에 들어가서 자신의 저장소에 들어가봅니다.

{이미지:5}

위와 같이 pre라는 브랜치가 최근에 푸쉬했고,

Branch:master를 눌러보면 pre라는 branch가 새로 생긴 것을 확인할 수 있습니다.

그리고 그 pre를 눌러보면

{이미지:6}

위와 같이 커밋이 되었고, test.txt 파일도 test file이라는 기록으로 추가된 것을 확인할 수 있습니다.

4. Vercel에서 확인하기

{이미지:7}

이제 Vercel에 가서 자신의 프로젝트에 들어가보면 제일 밑에 Preview Deployments가 있고 그 밑에 새로운 내용이 생긴 것을 확인할 수 있습니다.

즉 Vercel이 pre 브랜치가 새로 생긴 것을 인식하고, 다시 빌드 한 것입니다.

왼쪽에 Deployment의 글자를 클릭하면 알아서 빌드했고, Visit을 누르면 자신의 홈페이지와 똑같은 페이지가 나온 것을 확인할 수 있습니다. 

test.txt 파일만 올렸기 때문에 내용이 변하면 안되겠죠? ^^;;

5. 깃허브에서 병합(Merge)하기

이제 이상 없는 것을 확인했기 때문에 깃허브에 가서 master와 병합할 것입니다.

{이미지:8}

위와 같이 pre 브랜치로 바꾼 후 Compare & pull request 를 누릅니다.

{이미지:9}

위와 같이 풀 리퀘스트를 열 수 있습니다. test file에는 현재 기록될 내용

밑에는 코멘트를 원하는대로 남길 수 있고, 밑에 보면 test.txt이 생성된 내용이 나옵니다.

확인한 뒤, Create pull request 를 누릅니다.

{이미지:10}

5초 정도 기다리면 vercel에서 코멘트를 해줍니다. 자동으로 배포되었고 문제가 없다는 내용입니다.

이제 Merge pull request를 누릅니다. 그 후 Confirm merge를 누르면 최종적으로 깃허브에서 pre 브랜치가 master 브랜치로 통합됩니다.

6. Vercel에서 병합 확인하기

다시 Vercel로 가봅니다.

{이미지:11}

위와 같이 Production Deployment에 pre 브랜치로 기록되었고, 밑에 No Preview Deployments라고 아까 있던 프리뷰는 없어진 것을 확인할 수 있습니다.

지금까지 했던 과정들이 앞으로 홈페이지를 수정 후 깃허브에 기록하는 방법의 총 과정이라고 생각하면 됩니다. 처음에는 말도 많고 복잡하지만, 실제로 해보면 정말 간단하고 직관적이며 편하다는 것을 알 수 있을 것입니다.

다음에는 nodejs, yarn, gatsby-cli를 깔고 node 모듈 설치 및 내 컴퓨터에서 직접 홈페이지를 구동해보겠습니다.

1. 도메인 변경하기

지난 글에서 우리는 이미 홈페이지를 가지게 되었습니다.

{이미지:1}

그런데 대시보드에서 자신의 프로젝트를 클릭하면, 위와 같이 주소가 엄청나게 긴 것을 볼 수 있습니다.

우리가 원한 주소가 아니죠? ㅎㅎ

자신의 도메인을 가지고 있다고 생각하고 진행하고 싶지만... 혹시나 도메인이 없거나 테스트용으로 만들고 싶다면 무료 도메인을 생성하는 것도 좋습니다. 

당연히 .com .net .me .dev 등등 인정받는 도메인을 사는 것이 제일 좋지만 그렇지 못할 경우 무료 도메인을 추천드립니다.

무료 홈페이지 주소 받기 : https://blog.wsgvet.com/free-homepage-address-freenom

클라우드플레어 가입 및 네임서버 변경하기 : https://blog.wsgvet.com/cloudflare-sign-in-and-change-nameserver

위의 글을 보고 따라하면, 자신의 무료 도메인이 생기고, DNS등록도 편하게 할 수 있습니다.

이제 자신의 도메인이 있으니, 우리가 가진 홈페이지의 주소로 바꿔줘야겠죠?

{이미지:2}

위와 같이 View Domains를 누릅니다.

{이미지:3}

위와 같이 자신의 주소를 넣고 Add를 누릅니다.

{이미지:4}

위와 같이 A레코드를 76.76.21.21 로 바꿔주는 것을 추천합니다.

{이미지:5}

또는 위와 같이 네임서버를 

[code=bash]

ns1.vercel-dns.com

ns2.vercel-dns.com

[/code]

위와 같이 변경하는 것을 2번째 선택지로 줬는데요. 네임서버 변경의 경우 48시간까지 걸릴 수 있기 때문에 A레코드를 바꿔주는 것을 추천하는 것이죠.

이제 클라우드플레어에 가봅시다. DNS 탭을 누릅니다.

{이미지:6}

위와 같이 +Add record를 누른 후 Type에는 A, Name에는 @, IPv4 address에는 76.76.21.21, Proxy status에는 DNS only를 선택 후 Save를 누릅니다.

참고로 IPv4 address는 개인마다 다를 수 있으니 자신에게 맞는 IP를 넣어줘야 합니다.

이 작업을 하면 sand.ga만 홈페이지와 연결됩니다.

{이미지:7}

그래서 위와 같이 CNAME 타입에 www를 sand.ga 로 연결해줬습니다.

이렇게되면 www.sand.ga에 대해 sand.ga로 연결시켜주는 효과가 생깁니다.

이제 클라우드플레어에서 설정은 끝났습니다. 다시 Vercel에 돌아가서 

{이미지:8}

위와 같이 Refresh를 누릅니다. 그러면 ... 이 나오면서 뭔가 작업하는 것처럼 보입니다.

1~2분 기다려도 변하지 않으면 F5로 페이지를 새로고침 해봅니다.

{이미지:9}

그러면 드디어 유효한 설정, 기본 브랜치에 연결된 것을 확인할 수 있습니다.

자신의 주소를 클릭해보면 자동으로 인증서가 생성되어 접속이 잘 되는 것을 알 수 있습니다.

(옵션 설정)

www 리다이렉트는 www.sand.ga 로 들어왔을 때 sand.ga로 돌리는 설정입니다. 그렇게 하고 싶지 않다면 안하셔도 됩니다.

아까 클라우드플레어에서 생성한 www 주소도 리다이렉스 설정을 해줘야 합니다.

{이미지:10}

위와 같이 www를 붙여서 www.sand.ga를 Add 시키구요.

그 뒤에 Edit를 눌러서 Redirect to 를 누르면 자신의 도메인 주소가 나옵니다.

그것을 클릭 후 Save를 누르면 www.sand.ga로 들어와도 sand.ga로 돌려줍니다.

다만 이 셋팅은 조금 시간이 걸릴 수 있습니다. 되는 것을 기다릴 필요없습니다. 10~20분 뒤에 www가 붙은 주소로 접속해보면 자동으로 www가 없어지는 것을 볼 수 있습니다.

이제 도메인 설정은 끝났습니다.

2. Git 시작하기

도메인까지 연결했으니 이제 본격적으로 홈페이지를 자신에게 맞게 설정하는 것만 남았습니다.

먼저 Git을 자신의 컴퓨터 환경에 맞게 다운 받습니다.

https://git-scm.com/downloads 

위 링크에서 자신에게 맞는 Git을 다운받고 설치합니다.

윈도우의 경우 Git Bash, Git CMD, Git GUI 등이 설치됩니다.

우리는 Git Bash를 쓸 것입니다. 

Git Bash를 실행합니다.

먼저 계정 설정을 해줍니다.

[code=bash]

git config --global user.name "yourid"

[/code]

yourid에 깃허브 아이디를 넣습니다.    

[code=bash]

git config --global user.email "youremail@email.com"

[/code]

youremail@email.com 대신에 깃허브 이메일을 넣습니다.

이제 Git Bash에서 자신의 깃허브 계정으로 작업할 수 있게 됐습니다.

3. 깃허브 저장소 Clone

이제 깃허브에 있는 자료를 자신의 컴퓨터로 복사합니다.

Git Bash를 실행한 뒤, 원하는 폴더로 갑니다. 

저는 탐색기에 있는 내 PC 밑에 있는 문서에 gatsby라는 폴더를 생성 후 그 밑에 복사하겠습니다.

[code=bash]

cd ~

cd Documents

mkdir gatsby

[/code]

위 명령어로 문서 폴더로 이동 후 gatsby 폴더를 생성합니다. (대문자 주의해주세요!)

[code=bash]

cd gatsby

[/code]

위 명령어로 해당 폴더로 들어갑니다.

이제 Git Bash를 실행하면 그때마다 

[code=bash]

cd ~

cd Documents/gatsby

[/code]

명령어를 내려 해당 폴더에서 작업하면 됩니다.

{이미지:13}

실제 파일들은 윈도우 탐색기 왼쪽에 보시면 내 PC가 있는데 거기에 문서를 열면 바로 보입니다.

탐색기에서 직접 파일을 열고 수정하면서 작업하면 됩니다.

-----------------------------

이제 깃허브저장소의 파일을 복사할 것입니다.

[code=bash]

git clone 자신의깃허브저장소주소

[/code]

위와 같은 명령어로 자신의 깃허브 저장소에 있는 주소의 파일을 다운 받습니다.

자신의 깃허브 저장소 주소를 잘 모르겠다면, https://github.com 에 접속 후

{이미지:11}

오른쪽 위에 자신의 아이콘(아이디?)를 클릭한 뒤, Your repositories를 클릭 후 나오는 자신의 저장소를 클릭하면

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

위와 같은 형식의 주소가 인터넷 브라우저 주소창에 뜰 것입니다.

저의 경우는 

git clone https://github.com/woosungchoi/gatsby-starter-minimal-blog

이렇게 해주면 되겠죠? 꼭 자신의 주소로 수정 후 명령어를 내리세요!

주소를 복사 후 마우스 우클릭 후 Paste를 눌러야 명령어를 붙여넣을 수 있습니다.

{이미지:12}

위와 같이 복사가 된 것을 확인할 수 있습니다.

윈도우에서 실제 경로는 C:\Users\자신의윈도우계정\Documents\gatsby\gatsby-starter-minimal-blog

위와 같이 존재함을 탐색기로 확인할 수 있습니다.

이제 드디어 깃허브에 있던 자료를 다운 받았습니다.

다음 글에서는 해당 파일을 직접 개발자 빌드를 하여 자신의 컴퓨터에서 실행한 뒤, 실시간으로 수정 사항을 확인하는 방법에 대해 알려드리겠습니다.