nemanjam.github.io
1.0.0
이것은 내 코딩 블로그 nemanjamitic.com의 저장소입니다. 무료 및 오픈 소스는 코드를 재사용하고 개발자 블로그를 사용자 정의하십시오. 블로그 게시물 (미래)에는 귀속이 필요합니다.
| 방법 | Url |
|---|---|
| nginx | https://nemanjamitic.com |
| Github 페이지 | https://nemanjam.github.io |
| 도커 | https://nmc-docker.arm1.nemanjamitic.com |
https://plausible.arm1.nemanjamitic.com/nemanjamitic.com
2023 년 말까지 나는 평소 매일 코딩 작업에서 둥근 블로그 기사로 통찰력을 캡처하는 것에 대해 생각하기 시작했기 때문에 깨끗하고 최소한의 잘 구성된 블로그 템플릿을 찾기 시작했습니다. 나는 연구를 시작하고 Jekyll, Hugo, Next.js를 고려했지만 결국 Astro는 정적 인 개인 웹 사이트에 가장 적합한 도구라는 것을 깨달았습니다.
그런 다음 재사용 의도로 찾을 수있는 모든 오픈 소스 Astro 예제를 연구하고 검토했지만 스타일을 사용자 정의 할 의도를 지정했지만 코드 구조와 원하는 기능에 대한 선호도를 충족하지 못했기 때문에 모든 부품을 모두 컴파일하기로 결정했습니다. 내가 좋아하는 구조와 코딩 스타일. Credits Section Bellow를 참조하십시오.
앞으로이 웹 사이트를 몇 년 동안 사용하려고하므로 추가 노력이 잘 소비된다고 생각합니다. 또한이 과정에서 Astro에 대한 실용적인 경험을 얻는 데 도움이되었습니다.
개발에서는 기본적으로 초안 게시물을 볼 수 있습니다.
# .env.development
# this var is always without trailing slash '/'
SITE_URL=http://localhost:3000 # .env.production
SITE_URL=https://nemanjamitic.com
# set to true to preview draft posts in production
PREVIEW_MODE= # install packages
yarn install
# copy and set environment variables
cp .env.development.example .env.development
# run development server and visit http://localhost:3000
yarn dev
# delete node_modules and yarn.lock
yarn clean # copy and set environment variables
cp .env.production.example .env.production
# build website
yarn build
# run website and visit http://localhost:3000
yarn start로컬 및 GitHub 작업에는 세 가지 배포 방법이 있습니다. 배포 된 웹 사이트의 바닥 글에서 최신 커밋 정보를 확인하여 항상 현재 배포 된 버전을 쉽게 식별 할 수 있습니다.
GitHub 작업 워크 플로의 경우 GitHub 리포지토리 설정에서 이러한 비밀을 설정해야합니다.
# Dockerhub user and pass
DOCKER_PASSWORD
DOCKER_USERNAME
# remote server ssh credentials
REMOTE_HOST
REMOTE_KEY_ED25519
REMOTE_PORT
REMOTE_USERNAME로컬 배포의 경우 원격 서버의 SSH 별칭을 로컬 SSH 구성 파일에서 설정해야합니다.
# /home/username/.ssh/config
# arm1 ssh alias for remote server
Host arm1 123.123.13.123
HostName 123.123.13.123
IdentityFile ~ /.ssh/my-servers/arm1-ssh-private-key.key
User your-user 모든 Nginx 배포는 웹 사이트를 구축하고 /dist 폴더에서 컴파일 된 파일을 원격 서버의 Nginx 웹 루트 폴더로 복사하는 것입니다.
# package.json
# set your SITE_URL
" build:nginx " : " SITE_URL='https://nemanjamitic.com' astro build " ,
# build the app
yarn build:nginx
# configure ssh for your own "arm1" remote server in /home/username/.ssh/config
# copy compiled app from local /dist folder to Nginx web root on the remote server
" deploy:nginx " : " bash scripts/deploy-nginx.sh '~/traefik-proxy/apps/nmc-nginx-with-volume/website' arm1 " ,
# run deploy
yarn deploy:nginx다음 워크 플로 중 하나를 트리거하십시오.
# .github/workflows
bash__deploy-nginx.yml
default__deploy-nginx.ymlGitHub 작업에서만 사용할 수 있습니다. 다음 워크 플로 중 하나를 트리거하십시오.
# .github/workflows
# uses official Astro action
gh-pages__deploy-astro.yml
# uses manual build, useful for Astro in monorepos
gh-pages__deploy-manual.yml linux/arm64 Docker 이미지를 로컬로 빌드하려면 X86 컴퓨터가 있으면 QEMU 및 BuildX를 로컬로 설치해야합니다.이 자습서를 참조하십시오.
Docker BuildX 및 QEMU가있는 다중 아치 이미지
당신이 우분투에 있다면 아마 이것도 이것을 실행해야 할 것입니다.
# Register QEMU for Docker
docker run --rm --privileged multiarch/qemu-user-static --reset -p yes그 후에는 멀티 플랫폼 이미지를 로컬에서 구축하고 밀 수 있습니다.
# package.json
# open terminal and login with your Dockerhub account, both locally and on remote server
docker login my-user my-pass
# replace "nemanjamitic/nemanjam.github.io" with your image name
# set ARG_SITE_URL_ARM64 to your production url
# set correct architecture for your production server --platform linux/arm64 or linux/amd64
" docker:build:push:arm " : " docker buildx build -f ./docker/Dockerfile -t nemanjamitic/nemanjam.github.io --build-arg ARG_SITE_URL_ARM64='https://nmc-docker.arm1.nemanjamitic.com' --platform linux/arm64 --progress=plain --push . " ,
# build and push Docker image, replace "arm" with your architecture
yarn docker:build:push:arm
# replace "~/traefik-proxy/apps/nmc-docker" with your path to docker-compose.yml
# replace "nemanjamitic/nemanjam.github.io" with your image name
" deploy:docker " : " bash scripts/deploy-docker.sh arm1 '~/traefik-proxy/apps/nmc-docker' nemanjamitic/nemanjam.github.io " ,
# pull and run latest image on your production server
yarn deploy:docker이러한 워크 플로를 트리거합니다.
# .github/workflows
# build and push Docker image
default__build-push-docker.yml
# pull and run latest Docker image
# trigger one of the following:
bash__deploy-docker.yml
default__deploy-docker.yml견고하고 명확하며 포괄적이며 이해하기 쉽고 유지 관리 가능하며 사용자 정의 가능한 코드 구조에 큰주의를 기울입니다. 이것의 의도는 물건을 분리하고 명확하며 읽기 쉽고 명백하게 유지하고 복잡성과 소음을 줄이는 것입니다.
아래는 기능 및 구현에 대한 자세한 개요입니다.
정적으로 생성 된 고성능, 최신 Astro 웹 사이트. .mdx 파일을 사용하여 게시 및 프로젝트 컨텐츠 컬렉션이 있으며 앱의 주요 모델 역할을합니다. 태그 (1 : N)와 카테고리 (1 : 1)는 게시물 간의 관계에 대해 지원됩니다. 전환보기가 활성화되고 게시물은 transition:name 사용하여 모든 페이지에서 애니메이션을 제공합니다. 이미지는 Astro 최적화되어 있으며 모든 이미지 크기는 일관성과 오버 헤드를 줄이기 위해 재사용 가능한 일정한 사전 설정으로 추출됩니다. Post 및 Project List 페이지 모두에 Pagination을 사용할 수 있습니다. 미리보기 모드는 astro preview 스크립트 또는 .env.production 에서 PREVIEW_MODE=true 설정하여 사용할 수 있습니다. RSS 및 JSON 피드는 정적 API 엔드 포인트로 구현됩니다. 클라이언트 측 상호 작용이 필요한 모든 구성 요소에 대한 React 통합이 있습니다.
astro.config.ts 깨끗하고 읽을 수 있도록 통합 및 플러그인을위한 구성을 추출합니다. 모든 웹 사이트 경로는 파일 경로와 동일하게 단일 상수 객체로 중앙 집중식으로 연결됩니다. 레이어는 분리되고 구성되며 모든 유형의 페이지에 대한 중앙 및 전체 폭 레이아웃을 모두 지원합니다. 1 .mdx 주요 응용 프로그램 모델 쿼리 - POST 및 POST 컨텐츠 컬렉션은 깨끗하고 읽을 수있는 getStaticPaths() 위해 /modules 폴더로 추출됩니다.
시맨틱 색상의 밝은/다크 테일 윈드 모드와 색상 테마에 대한 지원이 있습니다. 테마는 CSS 변수로 두 수준으로 구성된 별도의 파일에 저장됩니다. 응답 스타일링은 간격 및 타이포그래피 모두에 지원됩니다. 모든 CSS 코드는 3 개의 테일 윈드 레이어 (기본/구성 요소/유틸리티)로 구성됩니다. 마크 다운 컨텐츠 ( tailwindcss/typography 플러그인 및 prose 클래스)와 사용자 정의 구성 요소간에 타이포그래피 스타일을 동기화하기위한 작업 시스템이 있습니다. 타이포그래피 스타일은 사용자 my-prose 클래스로 사용자 정의 및 추상화됩니다. 대부분의 구성 요소 스타일은 CSS 파일로 추출되며 변형에 대한 class-variance-authority 사용합니다. Dynamic class names are implemented using tailwind-merge and clsx .
메타 데이터는 중앙 집중식 및 유형 또는 모든 유형의 페이지 ( .mdx , 컬렉션 및 목록)입니다. 각 페이지에 적용되는 Satori 및 HTML 템플릿을 사용하여 영웅 이미지 및 임의의 컬러 그라디언트를 사용하여 열린 그래프 이미지를 생성하기위한 API 엔드 포인트가 있습니다. SiteMap은 공식 통합을 사용하여 빌드 타임에 생성됩니다. 사용자 정의 스타일 404 페이지가 제공됩니다.
최적화 된 ( /src ) 및 최적화되지 않은 ( /public ) 이미지를위한 조직화 된 자산 구조가 제공된 기본값이 있습니다. 아이콘의 경우 mdi (Material Design) 아이콘과 로컬 SVG를 지원하는 astro-icon 패키지가 사용됩니다. 필터링 게시물의 경우 다음에 Paginated Pages가 있습니다. Tag - /tags , 범주 - /categories 별, 둘 다 - /explore - 탐색 (아카이브) 페이지가 있습니다. Navbar에는 배열로 저장된 항목이 있으며 현재 경로에 대한 활성 항목 스타일이 있습니다. Markdown 컨텐츠에서 하위 헤더의 계층 구조를 읽는 블로그 게시물의 목차 구성 요소가 있습니다. .mdx 페이지가있는 설계 시스템은 /design 경로에서 사용할 수 있으므로 모든 시각적 구성 요소의 명확한 미리보기 및 디버깅을 제공합니다. 게시물을 공유하기위한 구성 요소는 Twitter, Facebook, Reddit, LinkedIn 및 Hackernews를 지원합니다.
주석은 GISCUS로 수행되며 Dark Mode가 기본 테마와 동기화됩니다. 트윗, YouTube 및 vimeo 비디오를 포함시키고 그래프 링크를 열면 astro-embed 수행됩니다. 임베디드 코드의 구문 강조 표시는 expressive-code 통합을 사용하여 구현됩니다.
모든 코드는 TypeScript로 작성되며 전체 앱의 유형은 별도의 폴더에 있습니다. 런타임 예외를 방지하기 위해 적절한 기본값이있는 Post, Project 및 Config 모델을위한 중앙 집중식 ZOD 스키마가 있습니다. 구성 및 환경 변수는 모두 입력하고 빌드 타임 검증되었습니다. 계산 된 판독 시간과 같은 추가 필드를 포함 할 수있는 게시물 및 프로젝트 컬렉션 모델에는 추상화 된 유형이 있습니다.
tsconfig.json 깨끗하고 조직 된 수입에 대한 경로 별칭을 정의했습니다. 코드는 정렬 된 가져 오기와 함께 Pretier를 사용하여 형식화되며 Eslint는 구문 검사에 사용됩니다.
최신 GIT 커밋 정보는 현재 배포 된 버전을 쉽게 식별하기 위해 웹 사이트 바닥 글에 포함되어 있습니다. 생산 배포에는 세 가지 방법이 있습니다 : 1. Github 페이지, 2. Nginx 및 3. Docker Image는 모두 Github 동작과 로컬에서 지원됩니다. Nginx 및 Docker 이미지를 구축하는 자산 복사는 Bash 스크립트로 추상화되며 GitHub 작업 및 로컬 배치 모두에서 재사용되어 더 쉬운 로컬 디버깅을 위해 재사용됩니다. linux/amd64 및 linux/arm64 Docker Images를 모두 구축하는 것이 지원됩니다.
astro:env 완료로 구성을 확인하십시오.mdx 렌더링재사용하고 검토 한 가장 중요한 프로젝트, 예제, 데모, 리소스 :
내가 재사용하고 검토 한 다른 프로젝트, 예제, 데모, 리소스 :
