آموزش ساخت وب سایت های سریع با Hugo the Static Site Generator & Bootstrap 5 (مقدمه)
Build fast websites with Hugo the Static Site Generator & Bootstrap 5 (Introduction)
این دوره مقدمه ای بر تولید سایت استاتیک/طراحی وب استاتیک است.
شما یاد خواهید گرفت که از Hugo برای تولید سایت ایستا و از Bootstrap 5 برای سبک سازی آسان استفاده کنید.
تمام نرم افزارهایی که نیاز دارید رایگان است و همه آنها در درس 1 توضیح داده شده است.
شما نیازی به هیچ تجربه ای در زمینه تولید سایت ایستا، کدنویسی، HTML یا CSS ندارید، اما اگر تجربه ای داشته باشید، درس ها را سریعتر پشت سر خواهید گذاشت.
در حالی که درس‌ها بسیار کوتاه هستند، دوره مروری کلی از همه چیزهایی است که برای شروع کار با Hugo و Bootstrap نیاز دارید.
من استفاده از خط فرمان را به حداقل می‌رسانم تا بتوانید روی یادگیری Hugo و Bootstrap 5 تمرکز کنید. در صورت امکان از رابط‌های گرافیکی استفاده می‌شود.
پروژه این دوره در حال تولید یک وب سایت ساده است که با کلاس های کاربردی Bootstrap 5 CSS کدگذاری شده و با Hugo تولید می شود.
می توانید نمونه ای از پروژه تمام شده را مشاهده کنید.
کد دروس تکمیل شده را خواهید یافت - باید روی دکمه کد کلیک کنید و یک فایل فشرده برای شاخه انتخابی خود دانلود کنید (هر درس در یک شاخه است - برای کمک به ویدیوی دوم مراجعه کنید)
هنگامی که پروژه را به پایان رساندید، می توانید تصاویر صفحه وب سایت را برای بازخورد آپلود کنید. اگر گیر کردید می توانید یک فایل فشرده از پیشرفت خود آپلود کنید و من به کد شما نگاه خواهم کرد. بهترین مکان برای شروع کمک صفحه بحث است.
پیوندها به اسناد هر درس
درس 2
https://git-scm.com/download/
https://desktop.github.com/
درس 3
درس 4
درس 5
https://getbootstrap.com/docs/5.1/layout/grid/
https://getbootstrap.com/docs/5.1/layout/breakpoints/
https://getbootstrap.com/docs/5.1/utilities/spacing/
درس 6
https://getbootstrap.com/docs/5.0/layout/columns/
https://getbootstrap.com/docs/5.0/utilities/display/
درس 7
درس 8
https://getbootstrap.com/docs/5.0/components/navbar/
https://getbootstrap.com/docs/5.0/utilities/background/
درس 9
درس 11
https://gohugo.io/content-management/page-bundles/
https://gohugo.io/templates/pagination/
https://gohugo.io/content-management/summaries/
درس 12
https://gohugo.io/commands/hugo/
https://winscp.net/
درس ها Lessons
-
خلاصه Summary
-
پاورقی با سال کپی رایت خودکار Footer with automatic copyright year
-
یک صفحه واحد ایجاد کنید Create a single page
-
صفحه اصلی با شبکه، دکمه ها و طراحی واکنشگرا Homepage with grid, buttons and responsive design
-
پاداش - وظایف Hugo را با اسکریپت های NPM خودکار کنید Bonus - Automate Hugo tasks with NPM scripts
-
پروژه HUGO را در VS Code راه اندازی کنید Set up HUGO project in VS Code
-
وب سایت را بسازید و آپلود کنید Build and upload the website
-
بوت استرپ 5 را اضافه کنید Add Bootstrap 5
-
Bootstrap 5 Navbar با Hugo Bootstrap 5 Navbar with Hugo
-
پاداش - تقسیم فایل پیکربندی Bonus - Split config file
-
یک صفحه فهرست ایجاد کنید Create a list page
-
مقدمه Intro
-
شروع شدن Getting Started
-
بوت استرپ 5 کارت و تکرار (حلقه) با محدوده Bootstrap 5 Cards and Iteration (looping) with range
-
HUGO و نرم افزار مورد نیاز را نصب کنید Install HUGO and required software
-
صفحه اصلی را با بوت استرپ 5 سفارشی کنید Customise home page with Bootstrap 5
https://donyad.com/d/35a7
Sean Emerson
توسعه دهنده وب و متخصص سایت استاتیک
نمایش نظرات