nemanjam.github.io
1.0.0
这是我的编码博客nemanjamitic.com的存储库。免费和开源，请随时重复使用代码并为自己的开发人员博客自定义。博客文章（未来）需要归因。
| 方法 | URL |
|---|---|
| nginx | https://nemanjamitic.com |
| github页面 | https://nemanjam.github.io |
| Docker | https://nmc-docker.arm1.nemanjamitic.com |
https://plausible.arm1.neghjamitic.com/neghjamitic.com
By the end of 2023. I started thinking about capturing insights from my usual daily coding work into rounded blog articles, so I started looking for a clean, minimalistic and well structured blog template. I started researching and considered Jekyll, Hugo, Next.js but eventually realized that currently Astro is the best tool for a static, personal website.
然后，我研究并审查了所有我可以找到的所有开源Astro示例，以重复使用并自定义样式，但它们都不符合我对代码结构和所需功能的偏爱，因此我决定将所有这些零件从所有这些中汇编成我自己喜欢的结构和编码样式。请参阅“信用”部分波纹管。
我打算在未来几年内使用此网站，因此我认为花费了额外的努力。此外，它帮助我在此过程中获得了Astro的一些实践经验。
In development you can see draft posts by default.
# .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 startThere are three deployment methods available locally and in Github Actions.您始终可以通过在部署网站的页脚中检查最新的提交信息来轻松识别当前部署的版本。
对于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.ymlOnly available in Github Actions.只是触发以下工作流程之一：
# .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文件的帖子和项目内容收集，它们是该应用程序的主要模型。 Both Tags (1:N) and Categories (1:1) are supported for relations between Posts. View transitions are enabled and posts are animated across all the pages using transition:name props. Images are Astro optimized and all image sizes are extracted as reusable constant presets for consistency and reducing overhead.分页可用于发布和项目列表页面。预览模式可以使用astro preview Script或通过设置PREVIEW_MODE=true in .env.production中。 RSS和JSON提要作为静态API端点实现。对于所有需要客户端交互性的组件都有一个反应集成。
提取集成和插件的配置，以使astro.config.ts保持清洁和可读。所有网站路线都集中到一个常数对象中，用于文件路径。分层分离和组织层次，并支持所有类型的页面的集中和全宽布局： .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).有一个可用的系统，可在Markdown Content（ tailwindcss/typography插件和prose类）和自定义组件之间进行同步版本样式。 Typography styles are customized and abstracted into a custom my-prose class. Most of component styles are extracted into a CSS files and use class-variance-authority for variants.动态类名称是使用tailwind-merge和clsx实现的。
元数据是集中式和键入或所有类型的页面（ .mdx ，集合和列表），默认为后备。有一个API端点，用于使用Satori和HTML模板应用于每个页面的Hero Image和随机颜色梯度生成开放图像。使用官方集成在构建时间生成站点地图。提供了定制样式的404页。
有一个有组织的资产结构，用于优化（ /src ）和未优化的（ /public ）图像，并提供默认图像。对于图标，使用了支持材料设计（ mdi ）图标和本地SVG的astro-icon软件包。对于过滤帖子，有以下分页页面：按tag- /tags ，类别 - /categories ，通过 - /explore explore（存档）页面。 Navbar的项目存储为一个数组，并为当前路线设计了有效物品。博客文章的目录中有一个组件，该组件读取了从Markdown内容中读取子负责人的层次结构。具有.mdx页面的设计系统在/design路径上可用，提供了所有视觉组件的清晰预览和调试。共享分享帖子的组成部分支持Twitter，Facebook，Reddit，LinkedIn和Hackernews。
评论是用giscus完成的，并且“黑暗模式”与主要主题同步。 Embedding Tweets, YouTube and Vimeo videos, and Open Graph links is done with astro-embed . Syntax highlighting for the embedded code is implemented using expressive-code integration.
所有代码均用打字稿编写，整个应用程序的类型都位于单独的文件夹中。有用于邮政，项目和配置模型的集中式ZOD模式，具有适当的默认模型，以防止运行时异常。配置和环境变量均已键入并验证了构建时间。 There are abstracted types for Post and Project collection models that can include additional fields like calculated reading time.
tsconfig.json已确定了干净和有组织的进口的路径别名。 Code is formatted using Prettier with sorted imports and ESLint is used for syntax checking.
最新的Git提交信息包含在网站页脚中，以方便识别当前部署的版本。 There are three methods for production deployments: 1. Github Pages, 2. Nginx and 3. Docker image and all of them are supported both in Github Actions and locally.复制NGINX和构建Docker图像的资产被抽象成Bash脚本，并在GitHub操作和本地部署中重复使用，以便于本地调试。可以支持构建linux/amd64和linux/arm64 Docker图像。
astro:env完成.mdx for RSS using component containers我重复和审查的最重要的项目，示例，演示，资源：
我重复和审查的其他项目，示例，演示，资源：
