nemanjam.github.io
1.0.0
This is the repository for my coding blog nemanjamitic.com. Free and open source, feel free to reuse code and customize for your own developer blog. Blog posts (future) require attribution.
| 方法 | URL |
|---|---|
| nginx | https://nemanjamitic.com |
| github頁面 | https://nemanjam.github.io |
| Docker | https://nmc-docker.arm1.nemanjamitic.com |
https://plausible.arm1.neghjamitic.com/neghjamitic.com
到2023年底。我開始考慮將我通常的日常編碼工作中的見解捕獲到圓形的博客文章中，因此我開始尋找一個乾淨，簡約且結構良好的博客模板。 I started researching and considered Jekyll, Hugo, Next.js but eventually realized that currently Astro is the best tool for a static, personal website.
Then I researched and reviewed all open source Astro examples that I could find with intention to reuse it and just customize styles but none of them met my preference for code structure and desired features, so I decided to compile the best parts from all of them into我自己喜歡的結構和編碼樣式。請參閱“信用”部分波紋管。
我打算在未來幾年內使用此網站，因此我認為花費了額外的努力。此外，它幫助我在此過程中獲得了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 All Nginx deployments come down to building the website and copying the compiled files from the /dist folder into the Nginx web root folder on a remote server.
# 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:nginxJust trigger one of the following workflows:
# .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 Props在所有頁面上對帖子進行動畫。圖像是Astro優化的，所有圖像尺寸均以可重複使用的常量預設提取，以保持一致性和降低開銷。分頁可用於發布和項目列表頁面。預覽模式可以使用astro preview Script或通過設置PREVIEW_MODE=true in .env.production中。 RSS和JSON提要作為靜態API端點實現。對於所有需要客戶端交互性的組件都有一個反應集成。
提取集成和插件的配置，以使astro.config.ts保持清潔和可讀。 All website routes are centralized into a single constant object, same for file paths.分層分離和組織層次，並支持所有類型的頁面的集中和全寬佈局： .mdx頁，2。集合頁面 - 發布和項目，以及3。列出頁面 - 分頁索引。 Querying main application models - Post and Project content collections is extracted into the /modules folder for clean and readable getStaticPaths() .
對輕度/深色尾風模式和帶有語義色彩的顏色主題都有支持。主題存儲在單獨的文件中，因為CSS變量分為兩個級別。間距和版式都支持響應式樣式。 All CSS code is organized into three Tailwind layers (base/components/utilities). There is a worked out system for keeping typography styles in sync between markdown content ( tailwindcss/typography plugin and prose class) and custom components.版式樣式被定制並抽象成自定義的my-prose類。將大多數組件樣式提取到CSS文件中，並使用class-variance-authority進行變體。動態類名稱是使用tailwind-merge和clsx實現的。
元數據是集中式和鍵入或所有類型的頁面（ .mdx ，集合和列表），默認為後備。 There is an API endpoint for generating Open Graph images with hero image and random color gradient using Satori and html template applied to each page.使用官方集成在構建時間生成站點地圖。提供了定製樣式的404頁。
有一個有組織的資產結構，用於優化（ /src ）和未優化的（ /public ）圖像，並提供默認圖像。對於圖標，使用了支持材料設計（ mdi ）圖標和本地SVG的astro-icon軟件包。對於過濾帖子，有以下分頁頁面：按tag- /tags ，類別 - /categories ，通過 - /explore explore（存檔）頁面。 Navbar has items stored as an array and has styled active item for the current route. There is a component for table of contents for blog posts that reads hierarchy of sub-headers from the markdown content. A design system with .mdx pages is available at the /design path, providing a clear preview and debugging of all visual components. Share component for sharing Posts supports Twitter, Facebook, Reddit, LinkedIn and Hackernews.
評論是用giscus完成的，並且“黑暗模式”與主要主題同步。嵌入推文，YouTube和Vimeo視頻以及打開的圖形鏈接使用astro-embed完成。使用expressive-code集成實現了嵌入式代碼的語法突出顯示。
所有代碼均用打字稿編寫，整個應用程序的類型都位於單獨的文件夾中。有用於郵政，項目和配置模型的集中式ZOD模式，具有適當的默認模型，以防止運行時異常。配置和環境變量均已鍵入並驗證了構建時間。有一些用於發布和項目收集模型的抽像類型，可以包括其他字段，例如計算的閱讀時間。
tsconfig.json已確定了乾淨和有組織的進口的路徑別名。 Code is formatted using Prettier with sorted imports and ESLint is used for syntax checking.
Latest git commit info is included in the website footer for easy identification of the currently deployed version.生產部署有三種方法：1。GitHub頁面，2。Nginx和3。DockerImage以及所有這些圖像在GitHub動作和本地都得到了支持。複製NGINX和構建Docker圖像的資產被抽象成Bash腳本，並在GitHub操作和本地部署中重複使用，以便於本地調試。 There is a support for building both linux/amd64 and linux/arm64 Docker images.
astro:env完成.mdxThe most important projects, examples, demos, resources that I reused and reviewed:
我重複和審查的其他項目，示例，演示，資源：
