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 ในกระบวนการ
ในการพัฒนาคุณสามารถดูโพสต์แบบร่างตามค่าเริ่มต้น
# .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 Web Root บนเซิร์ฟเวอร์ระยะไกล
# 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.ymlมีเฉพาะในการกระทำของ GitHub เพียงแค่ทริกเกอร์เวิร์กโฟลว์ต่อไปนี้:
# .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
หากคุณอยู่ใน Ubuntu คุณอาจต้องเรียกใช้สิ่งนี้ด้วย
# 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 preview หรือโดยการตั้งค่า PREVIEW_MODE=true in. .env.production ฟีด RSS และ JSON ถูกนำมาใช้เป็นจุดสิ้นสุด API แบบคงที่ มีการรวมปฏิกิริยาสำหรับส่วนประกอบทั้งหมดที่ต้องการการโต้ตอบด้านลูกค้า
การกำหนดค่าสำหรับการรวมและปลั๊กอินได้รับการแยกเพื่อให้ astro.config.ts สะอาดและอ่านได้ เส้นทางเว็บไซต์ทั้งหมดจะถูกรวมศูนย์ไว้ในวัตถุคงที่เดียวเหมือนกันสำหรับเส้นทางไฟล์ เลเยอร์จะถูกแยกและจัดลำดับชั้นและสนับสนุนทั้งเค้าโครงกึ่งกลางและเต็มรูปแบบสำหรับทุกประเภทของหน้า: 1.. .mdx หน้า, 2. หน้าคอลเลกชัน - โพสต์และโครงการและ 3 หน้ารายการ - ดัชนีที่มีการแบ่งแยก การสืบค้นโมเดลแอปพลิเคชันหลัก - คอลเลกชันเนื้อหาโพสต์และโครงการถูกดึงลงในโฟลเดอร์ /modules สำหรับ getStaticPaths()
มีการรองรับทั้งโหมดแสงลมและสีเข้มและธีมสีที่มีสีความหมาย ชุดรูปแบบจะถูกเก็บไว้ในไฟล์แยกต่างหากเป็นตัวแปร CSS ที่จัดในสองระดับ รองรับสไตล์การตอบสนองได้รับการสนับสนุนสำหรับการเว้นวรรคและการพิมพ์ รหัส CSS ทั้งหมดถูกจัดเป็นสามชั้น tailwind (ฐาน/ส่วนประกอบ/ยูทิลิตี้) มีระบบที่ใช้งานได้สำหรับการรักษารูปแบบการพิมพ์ในการซิงค์ระหว่างเนื้อหา markdown (ปลั๊กอิน tailwindcss/typography และคลาส prose ) และส่วนประกอบที่กำหนดเอง รูปแบบการพิมพ์ได้รับการปรับแต่งและเป็นนามธรรมในชั้น my-prose แบบกำหนดเอง รูปแบบส่วนประกอบส่วนใหญ่จะถูกแยกออกเป็นไฟล์ CSS และใช้ class-variance-authority สำหรับตัวแปร ชื่อคลาสแบบไดนามิกถูกนำมาใช้โดยใช้ tailwind-merge และ clsx
ข้อมูลเมตาเป็นส่วนกลางและพิมพ์หรือหน้าทุกประเภท ( .mdx คอลเลกชันและรายการ) ที่มีค่าเริ่มต้นเป็นทางเลือก มีจุดสิ้นสุดของ API สำหรับการสร้างภาพกราฟที่เปิดด้วยอิมเมจฮีโร่และการไล่ระดับสีแบบสุ่มโดยใช้เทมเพลต Satori และ HTML ที่ใช้กับแต่ละหน้า SiteMap ถูกสร้างขึ้นในเวลาสร้างโดยใช้การรวมอย่างเป็นทางการ มีรูปแบบ 404 สไตล์ที่กำหนดเอง
มีโครงสร้างสินทรัพย์ที่จัดระเบียบสำหรับทั้งภาพที่ปรับให้เหมาะสม ( /src ) และภาพที่ไม่ได้รับการปรับ ( /public ) โดยมีค่าเริ่มต้นที่ให้ไว้ สำหรับไอคอนใช้แพ็คเกจ astro-icon ที่รองรับทั้งไอคอนการออกแบบวัสดุ ( mdi ) และ SVG ในท้องถิ่น สำหรับการกรองโพสต์มีหน้า paginated ต่อไปนี้: โดยแท็ก - /tags ตามหมวดหมู่ - /categories โดยทั้งสอง - /explore - หน้าสำรวจ (เก็บถาวร) Navbar มีรายการที่เก็บไว้เป็นอาร์เรย์และมีสไตล์ที่ใช้งานอยู่สำหรับเส้นทางปัจจุบัน มีส่วนประกอบสำหรับสารบัญสำหรับโพสต์บล็อกที่อ่านลำดับชั้นของหัวย่อยจากเนื้อหา markdown ระบบการออกแบบที่มี .mdx หน้ามีให้บริการที่ /design เส้นทางให้ตัวอย่างที่ชัดเจนและการดีบักของส่วนประกอบภาพทั้งหมด แชร์องค์ประกอบสำหรับการแบ่งปันโพสต์รองรับ Twitter, Facebook, Reddit, LinkedIn และ HackerNews
ความคิดเห็นจะทำด้วย Giscus และมีโหมดมืดซิงค์กับธีมหลัก การฝังทวีต, วิดีโอ YouTube และ Vimeo และลิงก์เปิดกราฟแบบเปิดนั้นทำด้วย astro-embed การไฮไลต์ไวยากรณ์สำหรับรหัสฝังตัวถูกนำมาใช้โดยใช้การรวม expressive-code
รหัสทั้งหมดเขียนเป็น typeScript ประเภทสำหรับแอพทั้งหมดจะอยู่ในโฟลเดอร์แยกต่างหาก มี zod schemas ส่วนกลางสำหรับการโพสต์, โครงการและโมเดลการกำหนดค่าที่มีค่าเริ่มต้นที่เหมาะสมเพื่อป้องกันข้อยกเว้นรันไทม์ ทั้งตัวแปรการกำหนดค่าและสภาพแวดล้อมจะถูกพิมพ์และตรวจสอบเวลาการสร้าง มีประเภทที่เป็นนามธรรมสำหรับโมเดลโพสต์และโครงการที่สามารถรวมฟิลด์เพิ่มเติมเช่นเวลาการอ่านที่คำนวณได้
tsconfig.json ได้กำหนดนามแฝงเส้นทางสำหรับการนำเข้าที่สะอาดและเป็นระเบียบ รหัสถูกจัดรูปแบบโดยใช้ Prettier พร้อมการนำเข้าเรียงลำดับและ ESLINT ใช้สำหรับการตรวจสอบไวยากรณ์
ข้อมูลการกระทำ GIT ล่าสุดรวมอยู่ในส่วนท้ายของเว็บไซต์เพื่อระบุตัวตนของเวอร์ชันที่ปรับใช้ในปัจจุบันได้อย่างง่ายดาย มีสามวิธีสำหรับการปรับใช้การผลิต: 1. หน้า GitHub, 2. Nginx และ 3. ภาพ Docker และทั้งหมดได้รับการสนับสนุนทั้งในการกระทำของ GitHub และในพื้นที่ สินทรัพย์ที่คัดลอกสำหรับ Nginx และการสร้างภาพนักเทียบท่าจะถูกแยกออกเป็นสคริปต์ทุบตีและนำกลับมาใช้ใหม่ทั้งในการกระทำของ GitHub และการปรับใช้ในท้องถิ่นเพื่อการดีบักในท้องถิ่นที่ง่ายขึ้น มีการสนับสนุนสำหรับการสร้างทั้ง linux/amd64 และ linux/arm64 Docker Images
astro:env - เสร็จสิ้น.mdx สำหรับ RSS โดยใช้คอนเทนเนอร์ส่วนประกอบโครงการที่สำคัญที่สุดตัวอย่างการสาธิตทรัพยากรที่ฉันนำกลับมาใช้ใหม่และตรวจสอบ:
โครงการตัวอย่างอื่น ๆ การสาธิตทรัพยากรที่ฉันนำกลับมาใช้ใหม่และตรวจสอบ:
