Code Monkey home page Code Monkey logo

yunha-ind-astro's Introduction

Astro Starter Kit: Blog

npm init astro -- --template blog

Open in StackBlitz

πŸ§‘β€πŸš€ Seasoned astronaut? Delete this file. Have fun!

Features:

  • βœ… SEO-friendly setup with canonical URLs and OpenGraph data
  • βœ… Full Markdown support
  • βœ… RSS 2.0 generation
  • βœ… Sitemap.xml generation

πŸš€ Project Structure

Inside of your Astro project, you'll see the following folders and files:

/
β”œβ”€β”€ public/
β”‚   β”œβ”€β”€ robots.txt
β”‚   └── favicon.ico
β”œβ”€β”€ src/
β”‚   β”œβ”€β”€ components/
β”‚   β”‚   └── Tour.astro
β”‚   └── pages/
β”‚       └── index.astro
└── package.json

Astro looks for .astro or .md files in the src/pages/ directory. Each page is exposed as a route based on its file name.

There's nothing special about src/components/, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.

Any static assets, like images, can be placed in the public/ directory.

🧞 Commands

All commands are run from the root of the project, from a terminal:

Command Action
npm install Installs dependencies
npm run dev Starts local dev server at localhost:3000
npm run build Build your production site to ./dist/

πŸ‘€ Want to learn more?

Feel free to check our documentation or jump into our Discord server.

yunha-ind-astro's People

Contributors

llighter avatar

Stargazers

avatar

Watchers

avatar avatar avatar

yunha-ind-astro's Issues

content: TODO Github CLI 기초 κ°•μ˜

  • 이 ν…œν”Œλ¦Ώμ„ μƒˆλ‘œμš΄ κ²Œμ‹œκΈ€μ„ μž‘μ„±ν•˜κΈ° μœ„ν•΄ μ‚¬μš©ν•˜μ„Έμš”.
  • μˆ˜ν–‰ν•  μž‘μ—…κ³Ό κ΄€λ ¨μ—†λŠ” ν•„λ“œλ“€μ€ μ‚­μ œν•˜μ„Έμš”.
  • μˆ˜ν–‰ν•  μž‘μ—…μ— λŒ€ν•œ κ°„λž΅ν•œ μš”μ•½μœΌλ‘œ 이 문제의 제λͺ©μ„ μ—…λ°μ΄νŠΈν•©λ‹ˆλ‹€.

μž‘μ„±ν•  컨텐츠에 λŒ€ν•œ κ°„λ‹¨ν•œ 제λͺ©μ„ μ•Œλ €μ£Όμ„Έμš”

ν„°λ―Έλ„λ‘œ PR ν•˜κΈ°!

μž‘μ„±ν•  컨텐츠에 λŒ€ν•œ κ°„λ‹¨ν•œ μš”μ•½μ„ μ•Œλ €μ£Όμ„Έμš”

ν„°λ―Έλ„μ—μ„œ Github Pull Requestλ₯Ό λ§Œλ“€κ³  λ“±λ‘ν•˜λŠ” 방법에 λŒ€ν•΄ μ•Œμ•„λ³Έλ‹€,
PR을 μž‘μ„±ν•  λ•Œλ§ˆλ‹€ ν™ˆνŽ˜μ΄μ§€μ— λ“€μ–΄μ™€μ„œ μž‘μ—…ν•˜λŠ” 건 μ„±κ°€μ‹  일이닀.
μ‘°κΈˆμ΄λΌλ„ νŽΈν•˜κ³  λ™μΌν•œ ν™˜κ²½μ—μ„œ λͺ¨λ“  μž‘μ—…μ„ μ²˜λ¦¬ν•  수 μžˆλ‹€λ©΄ μ–Όλ§ˆλ‚˜ μ’‹μ„κΉŒ?

이 μ£Όμ œμ— λŒ€ν•΄ 이미 μ‘΄μž¬ν•˜λŠ” μ»¨ν…μΈ λŠ” λ¬΄μ—‡μΈκ°€μš”?

https://cli.github.com/

λˆ„κ°€ 컨텐츠λ₯Ό μž‘μ„±ν•˜κ²Œ λ˜λ‚˜μš”?

Author: @llighter

이 μ»¨ν…μΈ λŠ” 어떀뢄야와 κ΄€λ ¨λ˜μ–΄ μžˆλ‚˜μš”?

Github, CLI, Pull Request

μ–΄λ–€ μ’…λ₯˜μ˜ 컨텐츠λ₯Ό λ§Œλ“œμ‹œλŠ” κ±΄κ°€μš”?

Blog Post

πŸ›  0.21 λ²„μ „μœΌλ‘œ λ§ˆμ΄κ·Έλ ˆμ΄μ…˜

이 κΈ°λŠ₯μš”μ²­πŸŒŸμ΄ μ–΄λ–€ λ¬Έμ œμ™€ 연관이 μžˆλ‚˜μš”? μ„€λͺ…ν•΄μ£Όμ„Έμš”.
κΈ°μ‘΄ 버전은 0.20 버전이고 0.21으둜 λ§ˆμ΄κ·Έλ ˆμ΄μ…˜μ„ ν•΄μ•Όν•œλ‹€.

당신이 λ°”λΌλŠ” ν•΄κ²°μ±…πŸ’‘μ„ μ„€λͺ…ν•΄μ£Όμ„Έμš”.
별도 ν”„λ‘œμ νŠΈλ‘œ μƒˆ λΈ”λ‘œκ·Έ 레포λ₯Ό λ§Œλ“  ν›„ 섀정을 비ꡐ해보고 λ‚΄ λ ˆν¬μ— ν•©μΉœλ‹€,

μœ„ λ‚΄μš©μ΄μ™Έμ— λŒ€μ‹ ν•΄μ„œ μ²˜λ¦¬ν•  수 μžˆλŠ” 방법이 μžˆλ‹€λ©΄ μ•Œλ €μ£Όμ„Έμš”.
곡식적인 μ—…λ°μ΄νŠΈ 방법은 μ—†λŠ” 것 κ°™λ‹€.

좔가적인 정보
μ»΄ν¬λ„ŒνŠΈλ₯Ό λ§ˆν¬λ‹€μš΄μ— μ‚¬μš©ν•  수 μžˆλ„λ‘ λ³€κ²½λ˜μ—ˆλ‹€.

Card UI에 hoverλ₯Ό ν•˜λ©΄ 이미지에 μ—˜λ ˆλ² μ΄μ…˜ν•˜κΈ°

이 κΈ°λŠ₯μš”μ²­πŸŒŸμ΄ μ–΄λ–€ λ¬Έμ œμ™€ 연관이 μžˆλ‚˜μš”? μ„€λͺ…ν•΄μ£Όμ„Έμš”.

#6 μ—μ„œ κ΅¬ν˜„ν•œ μΉ΄λ“œUIλŠ” 기본적인 UI ν˜•νƒœλ§Œ 갖췄을 뿐 μ‚¬μš©μžμ™€ μƒν˜Έμž‘μš©ν•˜μ§€ μ•ŠλŠ”λ‹€. λ”°λΌμ„œ μ‚¬μš©μžμ˜ ν–‰μœ„μ— 따라 λ°˜μ‘ ν•  수 μžˆλ„λ‘ 역동성을 μΆ”κ°€ν•˜κ³ μž ν•œλ‹€.

당신이 λ°”λΌλŠ” ν•΄κ²°μ±…πŸ’‘μ„ μ„€λͺ…ν•΄μ£Όμ„Έμš”.

https://www.youtube.com/watch?v=AYoQfPX31Mg λ₯Ό μ°Έκ³ ν•˜λ©΄ hoverλ™μž‘ μ‹œ μ• λ‹ˆλ©”μ΄μ…˜μ„ 넣을 수 μžˆλ‹€.

좔가적인 정보

Tailwind Trainsition κΈ°λŠ₯을 적극적으둜 ν™œμš©ν•΄λ³΄μž.

πŸ›  글을 μ‘°νšŒν•  수 μžˆλŠ” μΉ΄λ“œ UIλ₯Ό λ§Œλ“€κΈ°

이 κΈ°λŠ₯μš”μ²­πŸŒŸμ΄ μ–΄λ–€ λ¬Έμ œμ™€ 연관이 μžˆλ‚˜μš”? μ„€λͺ…ν•΄μ£Όμ„Έμš”.
메인화면 ν˜Ήμ€ λΈ”λ‘œκ·Έ 글은 λ‚΄κ°€ μž‘μ„±ν•œ 글듀이 μΉ΄λ“œ ν˜•νƒœλ‘œ ν‘œν˜„λ˜λŠ”λ° 이λ₯Ό κ΅¬ν˜„ν•΄μ•Όν•œλ‹€.

당신이 λ°”λΌλŠ” ν•΄κ²°μ±…πŸ’‘μ„ μ„€λͺ…ν•΄μ£Όμ„Έμš”.

  1. web.dev μΉ΄λ“œ ν˜•νƒœλ₯Ό κ·ΈλŒ€λ‘œ κ΅¬ν˜„ν•˜λŠ” 것
  2. Tailwindcssλ₯Ό μ΄μš©ν•΄μ„œ Card λ ˆμ΄μ•„μ›ƒμ„ κ΅¬ν˜„ν•˜λŠ” 것(일반적인 μΉ΄λ“œ or Toss feed μ—μ„œ λ§Œλ“€μ–΄μ§„ μΉ΄λ“œUIλ₯Ό 레퍼런슀둜 μ‚¬μš©)
  3. Tailwindcss둜 λ§Œλ“€μ–΄μ§„ daisyUIλ₯Ό μ΄μš©ν•˜μ—¬ κ΅¬ν˜„ν•˜λŠ” 것

μœ„ 방법 쀑 택일

μœ„ λ‚΄μš©μ΄μ™Έμ— λŒ€μ‹ ν•΄μ„œ μ²˜λ¦¬ν•  수 μžˆλŠ” 방법이 μžˆλ‹€λ©΄ μ•Œλ €μ£Όμ„Έμš”.
2번이 적합해보인닀.

좔가적인 정보
μΉ΄λ“œλ₯Ό κ΅¬ν˜„ν•œλ‹€λŠ” 것은 ν™”λ©΄ 넓이에 따라 λ°˜μ‘ν•΄μ•Όν•¨μ„ μ˜λ―Έν•œλ‹€.

이슈 등둝을 μœ„ν•œ ν…œν”Œλ¦Ώ λ§Œλ“€κΈ°

μƒˆλ‘œμš΄ 포슀트λ₯Ό μž‘μ„±ν•˜κ±°λ‚˜ λΈ”λ‘œκ·Έ κΈ°λŠ₯을 μΆ”κ°€ν•˜λŠ” μž‘μ—…μ— λŒ€ν•œ μš”κ΅¬μ‚¬ν•­μ„ κΈ°λ‘ν•˜κ³  진행상황을 μΆ”μ ν•˜κΈ° μœ„ν•΄μ„œλŠ” μ΄μŠˆμ— 등둝을 ν•΄μ•Όν•œλ‹€.

자주 μ‚¬μš©ν•  이슈 양식을 ν…œν”Œλ¦ΏμœΌλ‘œ λ§Œλ“€μ–΄μ„œ κ΄€λ¦¬ν•΄μ•Όν•œλ‹€.

기본적인 이슈 양식은 μ•„λž˜μ™€ κ°™λ‹€.

  • μƒˆλ‘œμš΄ 컨텐츠 μž‘μ„±
  • 버그 리포트
  • κΈ°λŠ₯ μš”μ²­

πŸ›  TailwindCss μ„€μΉ˜ν•˜κΈ°

이 κΈ°λŠ₯μš”μ²­πŸŒŸμ΄ μ–΄λ–€ λ¬Έμ œμ™€ 연관이 μžˆλ‚˜μš”? μ„€λͺ…ν•΄μ£Όμ„Έμš”.
ν™ˆνŽ˜μ΄μ§€ μŠ€νƒ€μΌλ§μ„ ν•˜κΈ° μœ„ν•΄ TailwindCssλ₯Ό μ μš©ν•΄μ•Όν•œλ‹€.

당신이 λ°”λΌλŠ” ν•΄κ²°μ±…πŸ’‘μ„ μ„€λͺ…ν•΄μ£Όμ„Έμš”.
κ³΅μ‹λ¬Έμ„œμ— λ”°λ₯΄λ©΄ πŸƒ Tailwind 을 톡해 Astro 에 TailwindCssλ₯Ό μ„€μΉ˜ν•  수 μžˆλ‹€.

좔가적인 정보
TailwindCssλ₯Ό μ μš©ν•˜λ©΄ κΈ°μ‘΄ νƒœκ·Έλ“€μ— λŒ€ν•œ κΈ°λ³Έ μŠ€νƒ€μΌλ§μ΄ λ³€κ²½λœλ‹€.

πŸ›  Svelte μ‚¬μš© ν™˜κ²½ κ΅¬μ„±ν•˜κΈ°

이 κΈ°λŠ₯μš”μ²­πŸŒŸμ΄ μ–΄λ–€ λ¬Έμ œμ™€ 연관이 μžˆλ‚˜μš”? μ„€λͺ…ν•΄μ£Όμ„Έμš”.
AstroλŠ” .astro ν™•μž₯자 이외에 μ—¬λŸ¬ ν”„λ ˆμž„μ›Œν¬λ₯Ό μ§€μ›ν•œλ‹€. κ·Έ 쀑 Svelteλ₯Ό μ‚¬μš©ν•  수 μžˆλ„λ‘ μΆ”κ°€ν•˜μž.

당신이 λ°”λΌλŠ” ν•΄κ²°μ±…πŸ’‘μ„ μ„€λͺ…ν•΄μ£Όμ„Έμš”.
Svelteλ₯Ό μ‚¬μš©ν•  수 μžˆλ„λ‘ ν™˜κ²½ κ΅¬μ„±ν•˜κΈ°

좔가적인 정보
Intro to Astro + Svelte

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.