nemanjam.github.io
1.0.0
هذا هو المستودع لمدونة الترميز الخاصة بي nemanjamitic.com. مجاني ومفتوح المصدر ، لا تتردد في إعادة استخدام التعليمات البرمجية والتخصيص لمدونة المطورين الخاصة بك. منشورات المدونة (المستقبل) تتطلب الإسناد.
| طريقة | عنوان URL |
|---|---|
| nginx | https://nemanjamitic.com |
| صفحات جيثب | https://nemanjam.github.io |
| عامل ميناء | https://nmc-docker.arm1.nemanjamitic.com |
https://plaedible.arm1.nemanjamitic.com/nemanjamitic.com
بحلول نهاية عام 2023. بدأت أفكر في التقاط رؤى من أعمال الترميز اليومية المعتادة في مقالات مدونة مدورة ، لذلك بدأت أبحث عن قالب مدونة نظيف وأبسط ومنظم جيدًا. بدأت البحث وفكرت Jekyll ، Hugo ، Next.js ، لكنني أدركت في النهاية أن Astro حاليًا هو أفضل أداة لموقع ويب ثابت وشخصي.
ثم قمت بالبحث ومراجعة جميع أمثلة 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/workflows
# uses official Astro action
gh-pages__deploy-astro.yml
# uses manual build, useful for Astro in monorepos
gh-pages__deploy-manual.yml لإنشاء صور Docker linux/arm64 محليًا إذا كان لديك جهاز كمبيوتر 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 ويتم استخراج جميع أحجام الصور كإعداد مسبقات ثابتة قابلة لإعادة الاستخدام للاتساق وتقليل النفقات العامة. ترقيم الصفحات متاح لكل من صفحات قائمة البريد وقائمة المشروع. يتوفر وضع المعاينة إما باستخدام برنامج astro preview أو عن طريق إعداد PREVIEW_MODE=true In .env.production . يتم تنفيذ خلاصات RSS و JSON كنقاط نهاية API ثابتة. هناك تكامل رد فعل لجميع المكونات التي تتطلب تفاعلًا جانبيًا للعميل.
يتم استخراج تكوينات التكامل والإضافات للحفاظ على astro.config.ts نظيفة وقابلة للقراءة. جميع طرق موقع الويب مركزية في كائن ثابت واحد ، نفسه بالنسبة لمسارات الملفات. يتم فصل الطبقات وتنظيمها بشكل هرمي ودعم كل من تخطيطات العرض المتمركزة والكاملة لجميع أنواع الصفحات: .mdx . الاستعلام عن نماذج التطبيق الرئيسية - يتم استخراج مجموعات محتوى النشر والمشروع في مجلد /modules من أجل getStaticPaths() .
هناك دعم لكل من أوضاع الريح الخلفية الخفيفة/الظلام وموضوعات الألوان بألوان دلالية. يتم تخزين الموضوعات في ملفات منفصلة كمتغيرات CSS منظمة في مستويين. يتم دعم التصميم المستجيب لكل من الفواصل والطباعة. يتم تنظيم جميع رمز CSS في ثلاث طبقات من الرياح الخلفية (القاعدة/المكونات/الأدوات المساعدة). يوجد نظام تم عمله للحفاظ على أنماط الطباعة متزامنة بين محتوى Markdown (Plugin tailwindcss/typography و prose Class) والمكونات المخصصة. يتم تخصيص أنماط الطباعة وتجريدها في فئة مخصصة my-prose . يتم استخراج معظم أنماط المكونات في ملفات CSS واستخدام class-variance-authority للمتغيرات. يتم تنفيذ أسماء الفئات الديناميكية باستخدام tailwind-merge و clsx .
البيانات الوصفية مركزية وكتابة أو جميع أنواع الصفحات ( .mdx ، المجموعات والقوائم) مع الإعدادات الافتراضية. هناك نقطة نهاية API لإنشاء صور رسم بياني مفتوح مع صورة Hero وتدرج اللون العشوائي باستخدام قالب Satori و HTML المطبق على كل صفحة. يتم إنشاء Sitemap في وقت البناء باستخدام التكامل الرسمي. يتم توفير صفحة 404 مصممة مخصصة.
هناك بنية أصول منظمة لكل من الصور المحسنة ( /src ) والصور غير المحسنة ( /public ) مع الافتراضات المتوفرة. يتم استخدام الرموز الحزمة astro-icon التي تدعم كل من أيقونات تصميم المواد ( mdi ) و SVG المحلية. بالنسبة لتصفية المنشورات ، توجد الصفحات المتصفحة التالية: بواسطة العلامة - /tags ، حسب الفئة - /categories ، من قبل - /explore - استكشاف (أرشيف). يحتوي Navbar على عناصر مخزنة كصفيف ولديها عنصر نشط للمسار الحالي. هناك مكون لجدول المحتويات لمشاركات المدونة التي تقرأ التسلسل الهرمي للرؤساء الفرعيين من محتوى تخفيضات. يتوفر نظام تصميم مع .mdx صفحات في مسار /design ، مما يوفر معاينة واضحة وتصحيح جميع المكونات البصرية. مشاركة مكون لمشاركة المنشورات يدعم Twitter و Facebook و Reddit و LinkedIn و HackerNews.
تتم التعليقات باستخدام GISCUS ومتزامنة الوضع المظلم مع الموضوع الرئيسي. يتم تضمين التغريدات ومقاطع فيديو YouTube و Vimeo ، وروابط الرسم البياني المفتوح باستخدام astro-embed . يتم تنفيذ تسليط الضوء على بناء الجملة للرمز المدمج باستخدام تكامل expressive-code .
جميع التعليمات البرمجية مكتوبة في TypeScript ، وأنواع للتطبيق بأكمله موجودة في مجلد منفصل. هناك مخططات ZOD المركزية لنماذج النشر والمشروع والتكوين مع الافتراضيات المناسبة لمنع استثناءات وقت التشغيل. يتم كتابة كل من متغيرات التكوين والبيئة والتحقق من صحة وقت البناء. هناك أنواع مجردة لنماذج جمع المشاريع والمشاريع التي يمكن أن تشمل حقول إضافية مثل وقت القراءة المحسوب.
قام tsconfig.json بتعريف الأسماء المستعارة للمسار للواردات النظيفة والمنظمة. يتم تنسيق الكود باستخدام أجمل مع الواردات المصنفة ويتم استخدام ESLINT لفحص بناء الجملة.
يتم تضمين أحدث معلومات التزام GIT في تذييل موقع الويب لسهولة تحديد الإصدار الذي تم نشره حاليًا. هناك ثلاث طرق لنشر الإنتاج: 1. صفحات GitHub ، 2. Nginx و 3. صورة Docker وكلها مدعومة في إجراءات GitHub ومحلي. يتم استخلاص الأصول التي تنسخ من أجل Nginx وبناء صور Docker في برامج نصية Bash وإعادة استخدامها في كل من إجراءات GitHub والنشر المحلي لتسهيل تصحيح الأخطاء المحلية. هناك دعم لبناء كل من صور linux/amd64 و linux/arm64 Docker.
astro:env - Done.mdx لـ RSS باستخدام حاويات المكونأهم المشاريع والأمثلة والعروض التوضيحية والموارد التي قمت بإعادة استخدامها ومراجعتها:
مشاريع أخرى ، أمثلة ، عروض تجريبية ، موارد قمت بإعادة استخدامها ومراجعتها:
