devblog
1.0.0
DevBlog는 블로그 활동을 원하는 개발자(또는 다른 사람)를 위해 설계된 완전히 사용자 정의 가능한 블로그 템플릿입니다. 즉시 배포할 준비가 되어 있으며(쉽게) 원하는 대로 편집하고 확장할 수 있습니다. 블로그는 GatsbyJS를 통해 완전히 정적으로 생성되고, 기본적으로 구문 강조(PrismJS를 통해) 기능이 제공되며, 무엇보다도 서버측 렌더링이 내장되어 있습니다.
라이브 데모를 보려면 여기를 클릭하세요.
config.js 파일을 통해 사용자 정의 가능 첫 번째 단계는 GatsbyJS CLI를 로컬에 설치하는 것입니다. 이는 npm install --global gatsby-cli 명령을 실행하여 수행할 수 있습니다.
새 Gatsby 사이트를 생성할 때 CLI를 사용하면 스타터를 지정할 수 있습니다. 이 경우 이 저장소에 대한 URL만 제공하면 됩니다. 이는 gatsby new YOUR_BLOG_NAME https://github.com/RyanFitzgerald/devblog 명령을 실행하여 수행할 수 있습니다.
이제 설정이 완료되었으므로 블로그를 사용하거나 필요에 따라 편집할 수 있습니다. 예를 들어 gatsby develop 실행하여 localhost:8000에서 사용 가능한 핫 리로드된 개발 환경을 시작하거나 gatsby build 실행하여 최적화된 프로덕션 빌드를 빌드하세요. Gatsby용 CLI 명령의 전체 목록을 보려면 해당 문서를 살펴보세요.
또는 이 저장소를 간단히 포크하거나 복제하려면 npm install 실행한 다음 나중에 gatsby develop 실행하면 됩니다.
기본 구성은 프로젝트 저장소 루트에 있는 config.js 파일을 통해 수행할 수 있습니다. 이 파일을 통해 블로그의 기본 색상을 편집하고 블로그 작성자 및 설명을 추가하는 등의 작업을 수행할 수 있습니다. 기본값은 다음과 같습니다.
export default {
title : 'Dev Blog' , // Required
author : 'Ryan Fitzgerald' , // Required
description : 'Full-stack Web Developer' ,
primaryColor : '#3498db' , // Required
showHeaderImage : true ,
showShareButtons : true ,
postsPerPage : 5 , // Required
social : {
website : 'https://ryanfitzgerald.ca' ,
github : 'https://github.com/ryanfitzgerald' ,
twitter : 'https://twitter.com/ryanafitzgerald' ,
linkedin : 'https://ca.linkedin.com/in/ryanafitzgerald'
}
} ;참고: 기본 프레젠테이션 목적에는 "필수"로 표시된 모든 구성 옵션이 필요합니다. "필수" 주석이 없는 항목은 사용을 원하지 않는 경우 제거할 수 있습니다.
위에서 참조한 구성 변수는 다음과 같이 사용됩니다.
| 변하기 쉬운 | 사용 설명 |
|---|---|
| 제목 | 블로그 제목입니다. 이는 주로 페이지 제목에 사용됩니다. |
| 작가 | 블로그 작성자입니다. 헤더 이름과 페이지 제목에 사용됩니다. |
| 설명 | 저자의 설명입니다. 작성자 아래의 헤더에 사용됩니다. |
| 기본색상 | 블로그의 기본 색상입니다. |
| 표시헤더이미지 | 헤더 이미지 표시 여부를 나타내는 플래그입니다. |
| 표시공유버튼 | 각 블로그 게시물에 소셜 미디어 공유 버튼을 표시할지 여부를 플래그로 지정하세요. |
| 페이지당 게시물 | 블로그 홈페이지의 페이지당 게시물 수입니다. 이는 페이지 매김에 사용됩니다. |
| 사회의 | 블로그 작성자의 소셜 미디어 프로필입니다. 현재는 개인 웹사이트인 GitHub, Twitter, LinkedIn만 지원됩니다. |
기본 헤더 이미지를 변경하려면 /src 폴더에 있는 main.jpg 파일을 재정의하면 됩니다.
기본 파비콘을 변경하려면 /src 폴더에 있는 favicon.ico 파일을 재정의하면 됩니다.
모든 블로그 게시물은 /src/pages 에서 찾을 수 있으며 gatsby build 명령이 실행되면 정적으로 빌드됩니다. 새 게시물을 작성하려면 /src/pages 에 원하는 URL 이름으로 새 폴더를 만드세요. 예를 들어, URL을 myblog.com/hello-world 로 표시하려면 hello-world 로 폴더를 생성하세요. 폴더가 생성되면 그 안에 index.md 파일을 생성하기만 하면 됩니다.
페이지 상단에는 Gatsby에게 특정 게시물에 대해 필요한 정보를 알려주는 동일한 마크다운이 모두 포함되어야 합니다. 기본 템플릿은 다음과 같습니다.
---
title : New Beginnings
date : " 2018-07-01 "
featuredImage : ' ./featured.jpg '
---
This top portion is the beginning of the post and will show up as the excerpt on the homepage.
<!-- end --> 위의 코드 조각에서 필요한 것은 제목 과 날짜 뿐입니다. 추천 이미지는 선택사항이며, 위 예시처럼 방금 생성한 페이지 폴더에 이미지를 추가하고 참고만 하면 추가할 수 있습니다. 발췌 부분도 선택 사항이며 <!-- end --> 마커를 사용하지 않으면 게시물의 첫 번째 비트가 자동으로 발췌 부분으로 사용됩니다.
이 템플릿에는 코드 조각 사용, 이미지 삽입, 추천 이미지 및 발췌문 사용 등 모든 것이 포함된 3개의 블로그 게시물 예제가 함께 제공됩니다.
블로그를 배포하고 활성화할 준비가 되면 몇 가지 옵션을 사용할 수 있습니다.
블로그를 수동으로 배포하려면 프로덕션 빌드를 생성하기 위해 gatsby build 실행해야 합니다. 그 후에는 Digital Ocean 드롭릿이나 AWS 인스턴스와 같이 일반적으로 React 앱이 사용하는 모든 서버를 사용할 수 있습니다. 필요한 것은 정적 파일을 제공하는 방법뿐입니다.
React 애플리케이션 배포에 익숙하지 않은 경우 다양한 다른 옵션이 있습니다.
GitHub 페이지에 배포하려면 먼저 gatsby-config.js 에서 경로 접두사를 설정해야 합니다. 기본값은 pathPrefix: '/devblog' 이지만 선택한 리포지토리 이름으로 변경해야 합니다. 예를 들어 블로그가 https://github.com/YOURUSERNAME/myblog 에 있고 이를 https://YOURUSERNAME.github.io/myblog 에 배포하려는 경우 경로 접두어를 pathPrefix: '/myblog' 로 설정합니다. pathPrefix: '/myblog' .
다음으로 npm run deploy 실행하면 블로그가 배포됩니다.
또는 https://YOURUSERNAME.github.io (즉, 프로젝트 사이트가 아닌 사용자/조직 사이트)에 배포하려는 경우 몇 가지 추가 변경이 필요합니다. 공식 Gatsby 문서에는 여기에 잘 설명되어 있습니다.
블로그를 배포하는 가장 쉬운 방법 중 하나는 Netlify를 사용하는 것입니다. Netlify에 배포하려면 아래 버튼을 클릭하고 프롬프트를 따르십시오.
위에 설명된 옵션은 블로그 배포에 사용할 수 있는 유일한 옵션이 아닙니다. 공식 Gatsby 문서는 다양한 다른 옵션에 대해 자세히 설명합니다. 배포 옵션에 대해 자세히 알아보려면 여기를 클릭하세요.
MIT 라이선스에 따라 라이선스가 부여됩니다. 자세한 내용은 LICENSE.md를 참조하세요.
