【Gatsby×Netlify×가볍고 멋지게 블로그를 쓰고 싶으신 분들은 이거 읽어주세요!!

⚠️Attention!! 이 보도를 읽기에 적합한 사람

어쨌든 블로그를 쓰고 싶어요!
• 멋진 블로그를 쓰고 싶지만 처음부터 HTML, CSS를 쓰는 것은 번거롭다...😢
・Gatsby× Netlify × Netlify cms로 블로그를 만들고 싶어요!

개요

여기 Gatsby 블로그 템플릿으로 블로그를 만들었어요.
비망록도 겸하여 구체적인 제작 절차를 쓰다✍🏻
https://www.gatsbyjs.com/starters/papan01/gatsby-starter-papan01

사전 준비

• Netlif 계정 미리 만들기
・Node.js 설치
・npm install -g gatsby-cli Gatsby를 사용할 수 있도록 실행
(없어도 곤란하지 않지만 있었으면 좋겠다)
・siteGATrackingID
Google Analytics 사용
일반 에뮬레이션 속성을 사용하는 것이 중요합니다!
https://support.google.com/analytics/answer/10269537
・disqusShortname
Disqus에 로그인하여 쇼트 프로그램 제작
・사이트 표지
/프로필 이미지

대략적인 절차

템플릿 삭제

편집config

GiitHub

로 Push

Netlify 제휴

통합 Netliffycms

1. 템플릿 삭제

$ gatsby new 【YOUR-PROJECT-NAME】 https://github.com/papan01/gatsby-starter-papan01에서 템플릿을 제거하여 로컬 환경에서 실행

2. config 편집

/config/의 siteConfig에 있습니다.js 편집
구체적으로 이렇게 ↓의 일본어 부분을 편집하면 OK👌🏻

　author: "作者名", // Site owner
　siteTitle: "サイト名", // Site title.　　siteTitleShort: "GatsbyJS P01", 
  // Short site title for homescreen (PWA). Preferably should be under 12 characters to prevent truncation.
  siteTitleAlt: "サイト名の別名",  // Alternative site title for SEO.
  siteLanguage: "en", // Site language.
  siteDescription:"サイトの紹介", 
  // Website description used for RSS feeds/meta description tag.
  siteLogo: "static/favicons/favicon.png", // Logo used for manifest.
  siteUrl: "Netlifyに設定するサイトのURL", 
  // Domain of your website without pathPrefix.
  pathPrefix: "/", // Prefixes all links. For cases when deployed to example.github.io/gatsby-material-starter/.
  siteRss: "サイトURL/rss.xml", // Path to the RSS file.
  siteFBAppID: "無いなら入力しなくてOK", // FB Application ID for using app insights
  siteGATrackingID: "無いなら入力しなくてOK", // Tracking code ID for google analytics.
  disqusShortname: "無いなら入力しなくてOK", // Disqus shortname.
  twitterUserName: "無いなら入力しなくてOK", // twitter creator for SEO
  datePublished: "サイト作成日", // for SEO
  copyrightYear: "サイト作成年", // for SEO

config에서 ↑ 이외에GiitHub와 메일 주소를 입력한 곳이 있으면 기입하십시오
안 써도 돼.👌🏻
/static/favicons에 로고가 있으니 직접 로고를 사용하고 싶을 때 바꿔주세요.
/static/의 Konfest입니다.프로필 이미지에 png이 사용되기 때문에
자기가 만든 프로필 사진을 사용하고 싶은 사람은 바꿀 수 있다gatsby develop 구축 시도
이때Error: ENOENT: no such file or directory, unlink /Users/****/ディレクトリ名/public/images/1.webp오류가 발생하면/static/images/의 그림을 적당한 그림으로 바꾸면 해결됩니다
이런 느낌.
http://localhost:8000/부터 사이트 제작 상황을 확인하세요.😉

3. GiitHub로 밀어붙이기

GiitHub에서 웹 사이트용 창고 만들기
편집된 config를 저장하고 제작된 창고로 밀어넣기🤩

4. Netlify 와 협력

Netlify와 함께 기사를 공개해 보도록 하겠습니다.
지금부터 콜라보를 해보도록 하겠습니다.

GiitHub 선택

아까 GiitHub으로 밀린 디렉터리를 선택하세요.

다음 구문 설정
빌드 명령 설정gatsby develop디렉토리를public으로 설정

Deploysite 를 클릭하면 완료
이럴 때 사이트의 URL을 config로 변경하세요.
지금 이 빨간 밑줄 부분은 URL입니다.

편집해주세요.
여기를 클릭하십시오.

여기서 URL을 편집하십시오

URL 설정이 끝나면 기사를 공개해 보도록 하겠습니다.develop site를 클릭하여 디버깅을 시작합니다.🚀🚀

5. Netlify cms 통합

다음은 Netlifycms가 공동으로 글을 편집하도록 하겠습니다.✍🏻http://localhost:8001/admin/에서 Netliffy cms로
Netlify 에서 설정한 URL 을 입력하십시오.

합작 성공 후 보도 편집
편집 후 여기를 클릭하면 GiitHub로 밀어냄

Netlify 에서 Deploy site 를 사용하면 공개된 웹 사이트의 내용이 업데이트됩니다.🚀🚀🚀
이제 할 일은 끝났어요.🎉
수고하셨습니다.🍵
여기까지 읽어주셔서 감사합니다.😆
이렇게 하면 자신의 블로그를 쓸 수 있다!
일단 성공하면 다른 Gatsby의 블로그 템플릿으로 사이트 제작에 도전하는 것도 재미있어요.👍🏻