From 9a1ee0081351c22174d5327f8017669b24a68957 Mon Sep 17 00:00:00 2001 From: kdkdhoho Date: Mon, 27 Nov 2023 15:38:55 +0900 Subject: [PATCH] =?UTF-8?q?blog-config,=20README=20=EC=88=98=EC=A0=95,=20?= =?UTF-8?q?=EC=B2=AB=20=EB=B2=88=EC=A7=B8=20=EA=B8=80=20=EC=9E=91=EC=84=B1?= =?UTF-8?q?=20=ED=85=8C=EC=8A=A4=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README-kr.md | 154 ------------------------ README.md | 167 +------------------------- blog-config.js | 2 +- contents/posts/first-posting/index.md | 17 +++ 4 files changed, 19 insertions(+), 321 deletions(-) delete mode 100644 README-kr.md create mode 100644 contents/posts/first-posting/index.md diff --git a/README-kr.md b/README-kr.md deleted file mode 100644 index d0d21aa8..00000000 --- a/README-kr.md +++ /dev/null @@ -1,154 +0,0 @@ -# gatsby-starter-hoodie - -> gatsby-starter-hoodie가 2023-06-30 부터 Gatsby 5로 마이그레이션 되었습니다. 이제 node.js 20 버전에서도 gatsby-starter-hoodie를 사용하실 수 있습니다. - -## 🚀 gatsby-starter-hoodie 에 대하여 - -gatsby-starter-hoodie 는 기술 블로그를 작성하기 위해 개발된 Gatsby 테마입니다. 마크다운과 많은 프로그래밍 언어의 코드 하이라이팅, 그리고 Katex 문법을 지원합니다. 또한 태그와 시리즈를 통하여 쉽게 게시물을 분류할 수 있습니다. - -다크모드를 지원하는 깔끔한 디자인의 gatsby-starter-hoodie 로 여러분의 블로그를 시작하세요. - -이 프로젝트는 [벨로그](https://velog.io)에서 영감을 얻었습니다. - -## [라이브 데모](https://hoodie.gatsbyjs.io) - -## 주요 기능 - -- 마크다운 -- 코드 하이라이팅 -- Katex 문법 -- 다크모드 (OS 환경설정과 연동) -- 태그 분류 -- 시리즈 분류 -- 반응형 웹 -- SEO -- Utterance (댓글 위젯) - -아래 단계를 따라서 여러분의 블로그를 시작하세요. 굉장히 쉬워요 😉. - -## 1. Gatsby 사이트 생성 - -> 컴퓨터에 **node.js** 와 **gatsby-cli** 가 설치되어 있어야합니다. - -``` -$ npx gatsby new my-hoodie-blog https://github.com/devHudi/gatsby-starter-hoodie -``` - -## 2. 개발 서버 시작 - -``` -$ cd my-hoodie-blog -$ npm run start -``` - -이제 localhost:8000 으로 여러분의 블로그를 접속할 수 있습니다. - -## 3. Github 레포지토리 생성 - -Utterance 댓글 위젯은 **Github 이슈 시스템** 기반입니다. 따라서 각 블로그 별 Github 레포지토리가 필요합니다. 또한 여러분이 Github Pages 혹은 Netlify 로 블로그를 배포하길 원한다면, Github 레포지토리는 필수입니다. - -만약 Github 레포지토리를 생성하는 법을 모른다면, [Github 공식 문서](https://docs.github.com/en/github/getting-started-with-github/create-a-repo) 를 참조하세요. - -### 원격 레포지토리 등록 - -``` -git remote add origin https://github.com/{YOUR_GITHUB_NAME}/{YOUR_REPOSITORY_NAME} -``` - -## 4. blog-config.js 작성 - -```javascript -module.exports = { - title: "MY BLOG", - description: "Hello, This is my blog", - author: "YOUR NAME", - siteUrl: "https://myblog.com", - links: { - github: "https://github.com", - facebook: "https://www.facebook.com", - instagram: "https://www.instagram.com", - etc: "https://www.google.com/", - }, - utterances: { - repo: "{YOUR_GITHUB_NAME}/{YOUR_REPOSITORY_NAME}", - type: "pathname", - }, -} -``` - -gatsby-starter-hoodie 는 `blog-config.js` 라는 설정 파일을 제공합니다. 이 파일에서 블로그 정보, 작성자 프로필, Utterance 설정 등을 작성할 수 있습니다. 여러분 블로그 설정에 맞게 `blog-config.js` 를 설정하세요. 하지만, `utterances.type` 속성은 수정하지 않는 것을 권장합니다. - -## 5. 포스트 추가 - -마크다운 포스트는 `contents/posts` 경로에 위치해있습니다. 해당 경로에서 글을 작성할 수 있습니다. [여기를 클릭하여](https://hoodie.gatsbyjs.io/gatsby-starter-hoodie/writing-guide) 더 자세한 글 작성 방법을 확인하세요. - -## 6. 블로그 배포하기 - -### 6-1 Netlify 를 통해 - -Deploy to Netlify - -[A Step-by-Step Guide: Gatsby on Netlify](https://www.netlify.com/blog/2016/02/24/a-step-by-step-guide-gatsby-on-netlify/) 문서를 참조하여, Netlify 를 Github 레포지토리와 연결할 수 있습니다. 이 과정은 어렵지 않습니다. - -Github 레포지토리와 연결이 되었다면, Github 레포지토리에 변경사항이 발생할 때 마다 자동으로 여러분의 블로그에 배포됩니다. - -### 6-2. Github Pages 를 통해 - -#### 상황 1 - -레포지토리 이름이 `{YOUR_GITHUB_NAME}.github.io` 형태일 경우, 아래 명령어를 실행해주세요. - -``` -$ npm run deploy-gh -``` - -#### 상황 2 - -레포지토리 이름이 `{YOUR_GITHUB_NAME}.github.io` 형태가 아닐 경우, 아래 명령어를 실행해주세요. - -``` -$ npm run deploy-gh-prefix-paths -``` - -만약 위와 같은 경우 `gatsby-config.js` 에서 `pathPrefix` 를 여러분의 레포지토리 이름으로 바꿔야합니다. - -### 6-3. 다른 플랫폼 - -``` -$ npm run build -``` - -위 명령어로 Gastby 웹사이트를 빌드할 수 있습니다. 빌드 결과물은 `/public` 에 저장됩니다. `/public` 디렉토리를 여러분이 사용하는 플랫폼의 배포 명령을 통해 배포해주세요. - -## 7. 커스터마이징 - -### 프로젝트 구조 - -아래 프로젝트 구조를 참고하여 커스터마이징 할 수 있습니다 🙊. - -``` -├── node_modules -├── contents -│   └── posts // your articles are here -├── public // build outputs are here -└── src - ├── assets - │   └── theme // theme config is here - ├── components - │   └── Article - │    └── Body - │    └── StyledMarkdown - │    └── index.jsx // markdown styles are here - │ ... - ├── fonts // webfonts are here - ├── hooks - ├── images - ├── pages // page components are here - ├── reducers - ├── templates // post components are here - └── utils -``` - -## Star History 🌟 - -[![Star History Chart](https://api.star-history.com/svg?repos=devHudi/gatsby-starter-hoodie&type=Date)](https://star-history.com/#devHudi/gatsby-starter-hoodie&Date) diff --git a/README.md b/README.md index 4da8c2fd..924c6e20 100644 --- a/README.md +++ b/README.md @@ -1,166 +1 @@ -

- gatsby-starter-hoodie -

- -

- A gatsby starter developed for developers to build tech blogs. -

- -![](mockup.png) - -> gatsby-starter-hoodie has been migrated to **Gatsby 5** as of 2023-06-30. gatsby-starter-hoodie is now available for **node.js 20**. - -## 🚀 About gatsby-starter-hoodie - -[한국어 문서 바로가기](https://github.com/devHudi/gatsby-starter-hoodie/blob/main/README-kr.md) - -gatsby-starter-hoodie is a gatsby starter created for writing tech blogs. Markdown, Code Highlighting in various programming languages, and Katex syntax are supported. Also, you can easily categorize articles into tags and series. - -Start your blog with a neatly designed gatsby-starter-hoodie that supports dark mode. - -This project inspired by [velog](https://velog.io). - -## [Live Demo](https://hoodie.gatsbyjs.io) - -## Features - -- Markdown -- Code Highlighting -- Katex Syntax -- Dark Mode (Responsive to the settings of the OS) -- Tag Categoriazation -- Series Categorization -- Responsive Web -- SEO -- Utterance (Comment widget) - -Getting started your blog with gatsby-starter-hoodie by following steps below. It's very easy 😉. - -## 1. Create a Gatsby site - -> Make sure you have **node.js** and **gatsby-cli** installed on your computer. - -``` -$ npx gatsby new my-hoodie-blog https://github.com/devHudi/gatsby-starter-hoodie -``` - -## 2. Start dev server - -``` -$ cd my-hoodie-blog -$ npm run start -``` - -Now you can access to your blog at localhost:8000. - -## 3. Create your own Github repository - -Utterance comment widget is based on **Github issue system**. So you need your own GitHub repository. Also, if you want to publish your blog through Github Pages or Netlify, the Github Repository is a necessary. - -If you don't know how to create a GitHub repository, follow the [official GitHub documentation](https://docs.github.com/en/github/getting-started-with-github/create-a-repo). - -### Add remote repository - -``` -git remote add origin https://github.com/{YOUR_GITHUB_NAME}/{YOUR_REPOSITORY_NAME} -``` - -## 4. Write blog-config.js - -```javascript -module.exports = { - title: "MY BLOG", - description: "Hello, This is my blog", - author: "YOUR NAME", - siteUrl: "https://myblog.com", - links: { - github: "https://github.com", - facebook: "https://www.facebook.com", - instagram: "https://www.instagram.com", - etc: "https://www.google.com/", - }, - utterances: { - repo: "{YOUR_GITHUB_NAME}/{YOUR_REPOSITORY_NAME}", - type: "pathname", - }, -} -``` - -gatsby-starter-hoodie provides a configuration file called `blog-config.js`. In this file, you can configure blog, biography (profile), and utterance. - -Configure `blog-config.js` to suit your blog. However, it is recommended not to modify `utterances.type`. - -## 5. Add your content - -Markdown content is in `contents/posts`. You can write and add your articles. [Click here](https://hoodie.gatsbyjs.io/gatsby-starter-hoodie/writing-guide) to see the detail writing guide. - -## 6. Deploy your blog - -### 6-1 via Netlify - -Deploy to Netlify - -Follow the Connecting to Netlify steps in [A Step-by-Step Guide: Gatsby on Netlify](https://www.netlify.com/blog/2016/02/24/a-step-by-step-guide-gatsby-on-netlify/). It's not difficult. - -If you connect the github repository using Netlify, it is automatically distributed whenever you push it, so it is convenient. - -### 6-2. via Github Pages - -#### Case 1 - -If the repository name is in the form of `{YOUR_GITHUB_NAME} .github.io`, run it below. - -``` -$ npm run deploy-gh -``` - -#### Case 2 - -If the repository name is not in the form of `{YOUR_GITHUB_NAME} .github.io`, run it below. - -``` -$ npm run deploy-gh-prefix-paths -``` - -In the above case, you need to change `pathPrefix` in `gatsby-config.js` to your repository name. - -### 6-3. other platforms - -``` -$ npm run build -``` - -You can build the gatsby website with the command above. The build output is created in the `/public` directory. Deploy the `/public` directory using the command for the platform you want to deploy. - -## 7. Cutomize - -### Project Structure - -You can customize your own gatsby-starter-hoodie by referring to the following file structure 🙊. - -``` -├── node_modules -├── contents -│   └── posts // your articles are here -├── public // build outputs are here -└── src - ├── assets - │   └── theme // theme config is here - ├── components - │   └── Article - │    └── Body - │    └── StyledMarkdown - │    └── index.jsx // markdown styles are here - │ ... - ├── fonts // webfonts are here - ├── hooks - ├── images - ├── pages // page components are here - ├── reducers - ├── templates // post components are here - └── utils -``` - -## Star History 🌟 - -[![Star History Chart](https://api.star-history.com/svg?repos=devHudi/gatsby-starter-hoodie&type=Date)](https://star-history.com/#devHudi/gatsby-starter-hoodie&Date) +# log4dh \ No newline at end of file diff --git a/blog-config.js b/blog-config.js index 79d128d6..74a20423 100644 --- a/blog-config.js +++ b/blog-config.js @@ -5,7 +5,7 @@ module.exports = { siteUrl: "https://kdkdhoho.github.io/", links: { github: "https://github.com/kdkdhoho", - linkedIn: "https://velog.io/@donghokim1998", + blogger: "https://velog.io/@donghokim1998", }, utterances: { repo: "kdkdhoho/kdkdhoho.github.io", diff --git a/contents/posts/first-posting/index.md b/contents/posts/first-posting/index.md new file mode 100644 index 00000000..7ae26aef --- /dev/null +++ b/contents/posts/first-posting/index.md @@ -0,0 +1,17 @@ +--- +title: "글 작성 테스트" +description: "테스트테스트테스트테스트" +date: 2023-11-27 +update: 2021-11-27 +tags: + - kdkdhoho + - posting-test +--- + +# 테 + +스트 글 + +## 테스 + +트 글 \ No newline at end of file