Code Monkey home page Code Monkey logo

yujo11.github.io's Introduction

Financial Contributors on Open Collective Greenkeeper badge Total alerts Lighthouse score: 100/100 contributions welcome Netlify Status

Twitter: JbeeLjyhanll

한국어🇰🇷

screenshot

In this template...

  • 💄 Code highlight with Fira Code font
  • 🧙 CLI Tool
  • 😄 Emoji (emojione)
  • 🗣 Social share feature (Twitter, Facebook)
  • 💬 Comment feature (disqus, utterances)
  • ☕ 'Buy me a coffee' service
  • 🤖 GA
  • ⭐ Enhance UX
  • ⚙ Configurable

About this Template

Demo

Use case

demo-image

If you're using this template, Please Pull Request for Use case!

😎 Quick Start

1. Create a Gatsby site

# create a new Gatsby site using the blog starter
npx gatsby new my-blog-starter https://github.com/JaeYeopHan/gatsby-starter-bee

If you are not using npx, following Gatsby Getting Started

npm install -g gatsby-cli
gatsby new my-blog-starter https://github.com/JaeYeopHan/gatsby-starter-bee

2. Start developing

cd my-blog-starter/
npm start
# open localhost:8000

3. Add your content

You can write...

  • contents to blog in content/blog directory.
  • resume content/__about directory.

With markdown syntax and some meta data

Support script for creating new post

cli-tool-example

npm run post

👉 Use gatsby-post-gen (https://github.com/JaeYeopHan/gatsby-post-gen)

4. Fix meta data

You can fix meta data of blog in /gatsby-meta-config.js file.

5. Publish with netlify

Deploy to Netlify

💡 if you want to deploy github pages, add following script to package.json

"scripts": {
    "deploy": "gatsby build && gh-pages -d public -b master -r '[email protected]:${your github id}/${github page name}.github.io.git'"
}

🧐 Customize

⚙ Gatsby config

/root
├── gatsby-browser.js // font, polyfill, onClientRender ...
├── gatsby-config.js // Gatsby config
├── gatsby-meta-config.js // Template meta config
└── gatsby-node.js // Gatsby Node config

⛑ Structure

src
├── components // Just component with styling
├── layout // home, post layout
├── pages // routing except post: /(home), /about
├── styles
│   ├── code.scss
│   ├── dark-theme.scss
│   ├── light-theme.scss
│   └── variables.scss
└── templates
    ├── blog-post.js
    └── home.js

🎨 Style

You can customize color in src/styles directory.

src/styles
├── code.scss
├── dark-theme.scss
├── light-theme.scss
└── variables.scss

🍭 Tips (You can change...)

  • Profile image! (replace file in /content/assets/profile.png)
  • Favicon image! (replace file in /content/assets/felog.png)
  • Header gradient! ($theme-gradient /styles/variables.scss)
  • Utterances repository! (replace repository address in /gatsby-meta-config.js)

☕ Like it?

Buy Me A Coffee

🤔 If...

If you are currently writing in the Medium, consider migration with medium-to-own-blog!

🐛 Bug reporting

Issue

🎁 Contributing

Contributing guide

Contributors

Code Contributors

This project exists thanks to all the people who contribute. [Contribute].

Financial Contributors

Become a financial contributor and help us sustain our community. [Contribute]

Individuals

Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]

LICENSE

MIT

Project by @Jbee

yujo11.github.io's People

Contributors

yujo11 avatar

Stargazers

Roman avatar

Watchers

 avatar

yujo11.github.io's Issues

%EC%9A%B0%EC%95%84%ED%95%9C%ED%85%8C%ED%81%AC%EC%BD%94%EC%8A%A4/[%EC%9A%B0%ED%85%8C%EC%BD%94]%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%ED%94%84%EB%A6%AC%EC%BD%94%EC%8A%A4-1%EC%A3%BC%EC%B0%A8-%ED%9B%84%EA%B8%B0/

[우테코]프론트엔드 프리코스 1주차 후기 | yujolog

미션을 진행하면서 느낀 점 🧑‍💻 [우테코]프론트엔드 프리코스 1주차 레포지토리 첫 번째 미션은 숫자야구게임을 구현하는 미션이었습니다. 처음 미션을 받았을 때 1주일이라는 시간 동안 충분히 구현이 가능할거라고 착각했습니다. 처음으로 일정한 코

https://yujo11.github.io/%EC%9A%B0%EC%95%84%ED%95%9C%ED%85%8C%ED%81%AC%EC%BD%94%EC%8A%A4/[%EC%9A%B0%ED%85%8C%EC%BD%94]%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%ED%94%84%EB%A6%AC%EC%BD%94%EC%8A%A4-1%EC%A3%BC%EC%B0%A8-%ED%9B%84%EA%B8%B0/

%EB%B8%94%EB%9E%99%EC%BB%A4%ED%94%BC/%EB%B8%94%EB%9E%99%EC%BB%A4%ED%94%BC-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%8A%A4%ED%84%B0%EB%94%94-%EB%A0%88%EB%B2%A81-%ED%9B%84%EA%B8%B0/

블랙커피 프론트엔드 스터디 레벨1 후기 | yujolog

블랙커피 프론트엔드 스터디 레벨1 후기 ☕️ 블랙커피 프론트엔드 스터디? 블랙커피 프론트엔드 스터디는 nextstep…

https://yujo11.github.io/%EB%B8%94%EB%9E%99%EC%BB%A4%ED%94%BC/%EB%B8%94%EB%9E%99%EC%BB%A4%ED%94%BC-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%8A%A4%ED%84%B0%EB%94%94-%EB%A0%88%EB%B2%A81-%ED%9B%84%EA%B8%B0/

%EC%9A%B0%EC%95%84%ED%95%9C%ED%85%8C%ED%81%AC%EC%BD%94%EC%8A%A4/[%EC%9A%B0%ED%85%8C%EC%BD%94]%EB%A0%88%EB%B2%A81-%ED%96%89%EC%9A%B4%EC%9D%98%EB%A1%9C%EB%98%90-step1/

[우테코]레벨1 행운의 로또 step1 후기 | yujolog

  1. 구현 요구사항 🎯 step1 구입 기능 로또 구입 금액을 입력하면, 금액에 해당하는 로또를 발급해야 한다. 로또 1장의 가격은 1,000원이다. 소비자는 자동 구매를 할 수 있어야 한다. 복권 번호는 번호보기 토글 버튼을 클릭하면, 볼 수 있어야 한다. 1. 진행하며 고민하고 배운 점 1

https://yujo11.github.io/%EC%9A%B0%EC%95%84%ED%95%9C%ED%85%8C%ED%81%AC%EC%BD%94%EC%8A%A4/[%EC%9A%B0%ED%85%8C%EC%BD%94]%EB%A0%88%EB%B2%A81-%ED%96%89%EC%9A%B4%EC%9D%98%EB%A1%9C%EB%98%90-step1/

UT/UT-01/

UT(Usability Test)를 통해 찜꽁 프로젝트 UI/UX 개선하기 | yujolog

  1. UT가 뭔가요? UT(Usability Test)는 사용성 테스트라고도 부릅니다. UT는 잠재 사용자들에게 테스트를 진행하여 제품을 평가하는 방법 중 하나입니다. 웹이나 앱이 사용하기에 충분한지, 개발자의 의도대로 사용되는지 확인하면서 제품의 사용성을 테스트 해볼 수 있습니다.

https://yujo11.github.io/UT/UT-01/

React/Parcel%EB%A1%9C%20%EA%B0%84%EB%8B%A8%ED%95%98%EA%B2%8C%20React%20+%20TypeScript%20%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%20%EC%84%B8%ED%8C%85%ED%95%98%EA%B8%B0%20(feat.%20eslint,%20Tailwind)/

Parcel로 간단하게 React + TypeScript 프로젝트 세팅하기 (feat. eslint, Tailwind) | yujolog

📝 description Parcel을 사용해 React + TypeScript 프로젝트를 세팅하는 방법을 정리하는 글입니다. 제가 좋아하는 Tailwind를 세팅하는 법까지 추가로 정리했습니다. Parcel에 대한 정보는 아래 링크를 통해 확인하실 수 있습니다. Parcel Parcel(한국어) 🌏 React + TypeScript 1. 디렉토리 생성 디렉토리 생성 디렉토리 진입 yarn init 2. Parcel Bundl

https://yujo11.github.io/React/Parcel%EB%A1%9C%20%EA%B0%84%EB%8B%A8%ED%95%98%EA%B2%8C%20React%20+%20TypeScript%20%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%20%EC%84%B8%ED%8C%85%ED%95%98%EA%B8%B0%20(feat.%20eslint,%20Tailwind)/

javascript/Vanilla%20JS%20%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%20%EC%84%B8%ED%8C%85%ED%95%98%EA%B8%B0/

Vanilla JS 프로젝트 세팅하기 | yujolog

⚙️ setting 1. yarn init 2. install eslint, prettier 3. install webpack, webpack-dev-server 4. install webpack plugins, loaders 5. install babel 6. setting lint-staged & husky 6-1. install package 6-2. add config 6-3. set husky prepare husky add pre-commit (optional) install…

https://yujo11.github.io/javascript/Vanilla%20JS%20%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%20%EC%84%B8%ED%8C%85%ED%95%98%EA%B8%B0/

%EC%9A%B0%EC%95%84%ED%95%9C%ED%85%8C%ED%81%AC%EC%BD%94%EC%8A%A4/[%EC%9A%B0%ED%85%8C%EC%BD%94]%EB%A0%88%EB%B2%A81-%EC%9E%90%EB%8F%99%EC%B0%A8%EA%B2%BD%EC%A3%BC-step2/

[우테코]레벨1 자동차 경주 게임 step2 후기 | yujolog

  1. 구현 요구사항 🎯🎯 step2 자동차 경주 게임의 턴이 진행 될 때마다 1초의 텀(progressive 재생)을 두고 진행한다. 애니메이션 구현을 위해 setInterval, setTimeout, requestAnimationFrame 을 활용한다. 정상적으로 게임의 턴이 다 동작된 후에는 결과를 보여주고, 2초 후에 축하의 alert 메세지를 띄운다

https://yujo11.github.io/%EC%9A%B0%EC%95%84%ED%95%9C%ED%85%8C%ED%81%AC%EC%BD%94%EC%8A%A4/[%EC%9A%B0%ED%85%8C%EC%BD%94]%EB%A0%88%EB%B2%A81-%EC%9E%90%EB%8F%99%EC%B0%A8%EA%B2%BD%EC%A3%BC-step2/

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.