{"id":16236023,"url":"https://github.com/zoomkoding/gatsby-starter-zoomkoding-alpha","last_synced_at":"2025-03-19T15:30:52.034Z","repository":{"id":53572332,"uuid":"339326011","full_name":"zoomkoding/gatsby-starter-zoomkoding-alpha","owner":"zoomkoding","description":"✍️ Simple \u0026 Neat UI \u0026 Full Featured Blog Template for Developers","archived":false,"fork":false,"pushed_at":"2021-07-21T05:36:43.000Z","size":51232,"stargazers_count":6,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-28T19:32:52.861Z","etag":null,"topics":["bio","code-highlight","emoji","gatsby","google-analytics","graphql","netlify","react","sass","seo-friendly","toc","utterances"],"latest_commit_sha":null,"homepage":"https://www.zoomkoding.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"0bsd","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zoomkoding.png","metadata":{"files":{"readme":"README.ko.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-02-16T08:08:08.000Z","updated_at":"2023-08-23T18:19:46.000Z","dependencies_parsed_at":"2022-08-29T19:11:10.468Z","dependency_job_id":null,"html_url":"https://github.com/zoomkoding/gatsby-starter-zoomkoding-alpha","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zoomkoding%2Fgatsby-starter-zoomkoding-alpha","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zoomkoding%2Fgatsby-starter-zoomkoding-alpha/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zoomkoding%2Fgatsby-starter-zoomkoding-alpha/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zoomkoding%2Fgatsby-starter-zoomkoding-alpha/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zoomkoding","download_url":"https://codeload.github.com/zoomkoding/gatsby-starter-zoomkoding-alpha/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244002760,"owners_count":20382052,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bio","code-highlight","emoji","gatsby","google-analytics","graphql","netlify","react","sass","seo-friendly","toc","utterances"],"created_at":"2024-10-10T13:28:43.098Z","updated_at":"2025-03-19T15:30:51.537Z","avatar_url":"https://github.com/zoomkoding.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n  Gatsby Starter Zoomkoding\n\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/LekoArts/gatsby-starter-zoomkoding/blob/master/LICENSE\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/license-0BSD-blue.svg\" alt=\"Gatsby Starter Zoomkoding is released under the 0BSD license.\" /\u003e\n  \u003c/a\u003e\n  \u003cimg src=\"https://img.shields.io/badge/PRs-welcome-brightgreen.svg\" alt=\"PRs welcome!\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat\" alt=\"contributions welcome\" /\u003e\n\u003c/p\u003e\n\n**Demo Websites**: [**English**](https://zoomkoding.netlify.app) | [**Korean**](https://www.zoomkoding.com)\n\n## 👋 소개\n\n예쁘고 깔끔하면서 검색 엔진 친화적인 개발 블로그를 만들고 싶으신 개발자분들을 위해 만들게 된 블로그 테마입니다.🏅  \n\n\u003e PR, 이슈 모두 엄청나게 환영합니다! 👍\n\n## ✨ 기능\n\n- 😛 미모지와 문자 애니메이션를 통한 자기 소개\n- 💅 코드 하이라이팅 기능\n- 🔍 글 목차 자동 생성(ToC)\n- 💬 Utterances 댓글 기능 지원\n- ⚙️ meta-config를 통한 세부 설정 가능\n- 👨‍💻 About Page 내용 변경 가능\n- 📚 Posts Page 자동 생성\n- 🛠 sitemap.xml, robots.txt 자동 생성\n- 📈 Google Analytics 지원\n- 🧢 Emoji 지원\n- 𝑓 Mathjax 지원\n\n## 🚀 시작하기\n\n아래 과정을 진행하면 현재 블로그를 로컬 환경에서 실행하고 배포할 수 있습니다. \n\n### 🔧 설치하기\n\n아래 버튼을 활용하면 개인 계정에 `gatsby-starter-zoomkoding`를 사용하고 있는 Repository 생성과 Netlify에 배포를 동시에 진행할 수 있습니다. 이후에, 생성된 Repository를 clone합니다.\n\n[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/zoomkoding/gatsby-starter-zoomkoding)\n\n### 🏃‍♀️ 실행하기\n\n아래 명령어를 실행하여 로컬 환경에 블로그를 실행합니다.\n\n```bash\n# Install dependencies\n$ npm install\n\n# Start development server\n$ npm start\n```\n\u003cbr/\u003e\n\n위 명령어가 문제 없이 실행됐다면 [http://localhost:8000](http://localhost:8000)에서 블로그를 확인하실 수 있습니다.\n\n## ⚙️ 기본 정보 입력하기\n\ngatsby-meta-config.js라는 파일의 내용을 수정하면 블로그의 여러 내용을 변경할 수 있습니다!\n\n### 1. default\n블로그의 title, description, author, siteUrl, ogImage, social 정보를 입력합니다. (**title**은 블로그 상단에 보이는 블로그 이름을 나타냅니다.)\n\n```js\nmodule.exports = {\n    title: '', // zoomkoding.dev\n    description: '', // 줌코딩의 개발일기\n    author: '', // zoomkoding\n\n    siteUrl: '', // https://gatsby-starter-zoomkoding.netlify.com\n    ogImage: '', // 공유할 때 보이는 미리보기 이미지\n    social: {\n        github: '', // https://github.com/zoomKoding\n        linkedIn: '', // https://www.linkedin.com/in/jinhyeok-jeong-800871192\n        email: '', // zoomkoding@gmail.com\n    },\n    ...\n}\n```\n\n### 2. bio\n\n**bio**는 홈페이지에 글쓴이를 소개하는 섹션에서 사용됩니다. 현재 영어와 한국어 두개 다 지원을 합니다. \n**description**은 자신을 설명하는 문구를 여러개 넣을 수 있습니다. bio에서 사용하는 **미모지를 수정**하고 싶다면 `src/assets/author.mp4`에 동영상을 삽입하면 됩니다.\n\n\u003e 🤖 언어에 따라 description의 포맷이 달라지니 마음에 드시는 형태에 맞게 description을 작성해주세요. \n\n\n```js\nmodule.exports = {\n    ...\n\n    bio: {\n        language: 'ko', // ko, en 선택 가능(영어 선택시 어순이 변경됩니다.)\n        name: '', // 줌코딩\n        description: ['이로운 것을 만드는', '배움을 좋아하는', '글로 나누길 좋아하는'],\n    },\n    ...\n}\n```\n\n### 3. comments\n\n**comments**는 포스팅에 댓글 기능을 제공할 서비스의 정보를 받습니다. 현재는 github 계정으로 댓글을 작성할 수 있는 utterances만 지원합니다.\n\n\u003e 🦄 utterances 사용방법은 [링크](https://utteranc.es/)를 참고해주세요!\n\n```js\nmodule.exports = {\n    ...\n\n    comments: {\n        utterances: {\n            repo: '' // zoomkoding/gatsby-starter-zoomkoding\n        },\n    },\n    ...\n}\n```\n\n## 👤 about page 만들기\nabout 페이지 또한 gatsby-meta-config.js를 통해 생성됩니다. about 하위에 있는 timestamps와 projects에 각각 정보를 입력하시면 about 페이지가 자동 생성됩니다.\n\n### 1. timestamps\n\n아래와 같이 각 timestamp 정보를 배열로 제공해주시면 입력하신 순서에 맞춰서 timestamps section에 보여지게 됩니다.\n\n\u003e links에 해당 정보가 없다면 생략해도 됩니다.\n\n```js\nmodule.exports = {\n    ...\n\n    about: {\n        timestamps: [\n            {\n                date: '', // 기간\n                activity: '', // 활동\n                links: { // 링크가 없다면 지우셔도 됩니다.\n                    post: '', // 블로그 포스팅 링크\n                    googlePlay: '', // 구글플레이 링크\n                    appStore: '' // 앱스토어 링크\n                    github: '' // 깃헙링크\n                },\n            }\n            ...\n        ],\n        ...\n    },\n    ...\n}\n```\n\n### 2. projects\n마찬가지로 각 project 정보를 배열로 제공해주시면 입력하신 순서에 맞춰서 projects section에 보여지게 됩니다.\n\n```js\nmodule.exports = {\n    ...\n\n    about: {\n        ...\n\n        projects: [\n            {\n                title: '', // 프로젝트 제목,\n                description: '', // 설명,\n                techStack: ['flutter', 'nodejs'], // 기술 스택\n                thumbnailUrl: '', // 썸네일 이미지 주소\n                links: { // 링크가 없다면 지우셔도 됩니다.\n                    post: '', // 블로그 포스팅 링크\n                    googlePlay: '', // 구글플레이 링크\n                    appStore: '' // 앱스토어 링크\n                    github: '' // 깃헙링크\n                },\n            },\n            ...\n        ],\n        ...\n    },\n    ...\n}\n```\n\n\u003cbr/\u003e\n\n그렇게 내용을 문제 없이 입력하셨다면 나만의 블로그가 탄생한 것을 확인하실 수 있습니다.🎉\n\n\u003e 변동사항을 실행 중인 블로그에서 확인하시려면 `npm start`를 통해 재실행해주세요!\n\n## ✍️ 글 쓰기\n\n본격적으로 블로그에 글을 쓰려면 `/content` 아래에 디렉토리를 생성하고 `index.md`에 markdown으로 작성하시면 됩니다.\n\u003e 이 때, 폴더의 이름은 경로를 생성하는데 됩니다. \n\n### ℹ️ 메타 정보\n\nindex.md 파일의 상단에는 아래와 같이 emoji, title, date, author, tags, categories 정보를 제공해야 합니다.\n\u003e emoji는 글머리에 보여지게 되며, categories는 띄어쓰기로 나누어 여러개를 입력할 수 있습니다.\n\n```\n---\nemoji: 🧢\ntitle: Getting Started\ndate: '2021-03-22 23:00:00'\nauthor: 줌코딩\ntags: tutorial\ncategories: tutorial\n---\n```\n\n### 🖼 이미지 경로\n\n글에 이미지를 첨부하고 싶으시다면 같은 디렉토리에 이미지 파일을 추가하셔서 아래와 같이 사용하시면 됩니다.\n\n```\n![사진](./[이미지 파일명])\n```\n\n### 🔍 목차 생성\n\n글의 우측에 목차가 보이기를 원하신다면 `index.md` 파일 맨 아래에 다음 내용을 추가하시면 자동으로 목차가 생성됩니다.\n\n    ```toc\n    ```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzoomkoding%2Fgatsby-starter-zoomkoding-alpha","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzoomkoding%2Fgatsby-starter-zoomkoding-alpha","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzoomkoding%2Fgatsby-starter-zoomkoding-alpha/lists"}