astro paper 다운로드 - astro paper 소스코드 다운로드

astro paper

기타 카테고리

v4.7.0

다운로드

아스트로페이퍼?

프로젝트 구조

AstroPaper 내부에는 다음 폴더와 파일이 표시됩니다.

/
├── public/
│   ├── assets/
│   │   └── logo.svg
│   │   └── logo.png
│   └── favicon.svg
│   └── astropaper-og.jpg
│   └── robots.txt
│   └── toggle-theme.js
├── src/
│   ├── assets/
│   │   └── socialIcons.ts
│   ├── components/
│   ├── content/
│   │   |  blog/
│   │   |    └── some-blog-posts.md
│   │   └── config.ts
│   ├── layouts/
│   └── pages/
│   └── styles/
│   └── utils/
│   └── config.ts
│   └── types.ts
└── package.json

Astro는 src/pages/ 디렉터리에서 .astro 또는 .md 파일을 찾습니다. 각 페이지는 파일 이름을 기반으로 하는 경로로 노출됩니다.

이미지와 같은 모든 정적 자산은 public/ 디렉터리에 배치할 수 있습니다.

모든 블로그 게시물은 src/content/blog 디렉토리에 저장됩니다.

선적 서류 비치

문서는 마크다운 과 블로그 게시물의 두 가지 형식으로 읽을 수 있습니다.

구성 - 마크다운 | 블로그 게시물
게시물 추가 - 마크다운 | 블로그 게시물
색 구성표 사용자 정의 - 마크다운 | 블로그 게시물
미리 정의된 색 구성표 - markdown | 블로그 게시물

AstroPaper v1의 경우 이 분기와 이 라이브 URL을 확인하세요.

기술 스택

메인 프레임워크 - Astro
유형 검사 - TypeScript
컴포넌트 프레임워크 - ReactJS
스타일링 - TailwindCSS
UI/UX - Figma 디자인 파일
퍼지 검색 - FuseJS
아이콘 - Boxicons | 테이블러스
코드 형식 - 더 예뻐짐
배포 - Cloudflare 페이지
정보 페이지의 일러스트레이션 - https://freesvgdesign.com
린팅 - ESLint

??‍ 로컬에서 실행 중

원하는 디렉터리에서 다음 명령을 실행하여 이 프로젝트를 로컬에서 사용하기 시작할 수 있습니다.

 # npm 6.x
npm create astro@latest --template satnaing/astro-paper

# npm 7+, extra double-dash is needed:
npm create astro@latest -- --template satnaing/astro-paper

# yarn
yarn create astro --template satnaing/astro-paper

# pnpm
pnpm dlx create-astro --template satnaing/astro-paper

경고! yarn 1 사용하는 경우 종속 항목으로 sharp 설치해야 할 수도 있습니다.

그런 다음 다음 명령을 실행하여 프로젝트를 시작합니다.

 # install dependencies
npm run install

# start running the project
npm run dev

대안으로, Docker가 설치되어 있는 경우 Docker를 사용하여 이 프로젝트를 로컬에서 실행할 수 있습니다. 방법은 다음과 같습니다.

 # Build the Docker image
docker build -t astropaper .

# Run the Docker container
docker run -p 4321:80 astropaper

Google 사이트 확인(선택사항)

환경 변수를 사용하여 AstroPaper에 Google 사이트 확인 HTML 태그를 쉽게 추가할 수 있습니다. 이 단계는 선택 사항입니다. 다음 환경 변수를 추가하지 않으면 HTML <head> 섹션에 google-site-verification 태그가 표시되지 않습니다.

 # in your environment variable file (.env)
PUBLIC_GOOGLE_SITE_VERIFICATION=your-google-site-verification-value

Google Search Console에 AstroPaper를 추가하는 방법은 이 토론을 참조하세요.

? 명령

모든 명령은 프로젝트 루트의 터미널에서 실행됩니다.

메모! Docker 명령의 경우 시스템에 Docker 명령이 설치되어 있어야 합니다.

명령	행동
`npm install`	종속성을 설치합니다.
`npm run dev`	`localhost:4321` 에서 로컬 개발 서버를 시작합니다.
`npm run build`	프로덕션 사이트를 `./dist/` 로 구축하세요.
`npm run preview`	배포하기 전에 로컬에서 빌드 미리보기
`npm run format:check`	Prettier로 코드 형식 확인
`npm run format`	Prettier로 코드 형식 지정
`npm run sync`	모든 Astro 모듈에 대한 TypeScript 유형을 생성합니다. 자세히 알아보세요.
`npm run lint`	ESLint를 사용한 린트
`docker compose up -d`	docker에서 AstroPaper를 실행하면, `dev` 명령에 안내된 동일한 호스트 이름과 포트로 접속할 수 있습니다.
`docker compose run app npm install`	위의 명령을 docker 컨테이너에 실행할 수 있습니다.
`docker build -t astropaper .`	AstroPaper용 Docker 이미지를 빌드합니다.
`docker run -p 4321:80 astropaper`	Docker에서 AstroPaper를 실행하세요. 웹 사이트는 `http://localhost:4321` 에서 액세스할 수 있습니다.