چگونه با استفاده از صفحات گیت هاب و هوگو یک وب سایت شخصی بسازیم؟

یک وب سایت شخصی مکان مناسبی برای نمایش کارهای شما، پروژه ها یا یادداشت های فنی شما است. سپس چگونه می توان یکی را ساخت؟ در این مقاله ساده ترین راه برای ساخت سایت را معرفی می کنم. (شاید بخواهید ابتدا نگاهی به سایت من بیندازید.)

خط لوله سایت سازی

دو نوع سایت وجود دارد: سایت های استاتیک و سایت های پویا.

• سایت‌های استاتیک صفحات وب را به صورت محلی تولید می‌کنند و آنها را روی سرور قرار می‌دهند، بنابراین هر کاربر با کلیک بر روی پیوند، نمای یکسانی خواهد داشت.

• سایت‌های پویا صفحات مختلفی را برای کاربران مختلف در درخواست‌هایشان نمایش می‌دهند، بنابراین به مواردی مانند پایگاه داده نیاز دارند.

به عنوان مبتدی، ما ساده‌تر را انتخاب می‌کنیم – سایت‌های استاتیک، و پس از یادگیری خط لوله، پیگیری آن آسان است.

شکل 1. خط لوله ساخت یک وب سایت استاتیک

همانطور که در شکل بالا نشان داده شده است، دو مرحله اصلی برای ساخت یک وب سایت استاتیک وجود دارد:

1. صفحات را به صورت محلی ایجاد کنید. ژنراتورهای محبوب سایت استاتیک (یا فریمورک ها) JekyII، Hugo، Hexo و غیره هستند. در اینجا ما از Hugo به عنوان مثال استفاده می کنیم. بسیاری از مردم (از جمله من) هوگو را دوست دارند زیرا ساخت یک سایت بسیار سریع است.
2. سایت را روی سرور مستقر کنید. در اینجا ما از GitHub به عنوان سرور برای ذخیره صفحات استفاده می کنیم.

آنقدر سخت نیست، درست است؟ حالا بیایید به جزئیات بپردازیم.

مرحله 0: آماده سازی

Git را نصب کنید. ما از Git Command برای تولید وب سایت، اتصال به GitHub و فشار دادن صفحات وب به آن استفاده خواهیم کرد.

مرحله 1: صفحات را به صورت محلی ایجاد کنید

1.1 Hugo را نصب کنید

به صفحه نصب Hugo بروید و نصب مربوط به سیستم عامل مورد استفاده خود را پیدا کنید.

من از ویندوز استفاده می کنم و Chocolatey یا Scoop را نصب نکرده ام، بنابراین Hugo را با استفاده از فایل های باینری زیر این آموزش نصب نصب کردم. اگر شما هم مانند مورد من هستید، می توانید مراحل زیر را برای نصب Hugo دنبال کنید.

در مراحل زیر، YourUserName به نام کاربری کامپیوتر سیستم ویندوز شما اشاره دارد. به طور خاص، نامی است که هنگام ورود به ویندوز روی صفحه نمایش داده می شود.

(1) به پوشه بروید C:\Users\YourUserName، و ایجاد یک bin پوشه در آن اگر وجود ندارد. این bin پوشه محل ذخیره فایل باینری Hugo است.

(2) اضافه کنید bin پوشه به PATH. در کادر جستجوی نوار وظیفه ویندوز، را وارد کنید cmd و نتیجه Command Prompt را انتخاب کنید (راست کلیک کرده و گزینه Run as administrator را انتخاب کنید). در Command Prompt وارد کنید:

setx PATH "C:\Users\YourUserName\bin;%PATH%"

سپس Command Prompt را ببندید و دوباره باز کنید، Enter کنید echo %PATH% برای بررسی اینکه آیا bin با موفقیت به اضافه شد PATH.

(3) دانلود کنید .zip فایل از صفحه انتشار هوگو در GitHub. حتما انتخاب کنید نسخه توسعه یافته، که در انتهای لیست آرشیوها یافت می شود.

از .zip فایل باینری را استخراج کنید hugo.exe و آن را به bin پوشه پس از آن، Command Prompt را باز کرده و وارد کنید:

hugo version

اگر Hugo با موفقیت نصب شود، یک سری کاراکتر در مورد اطلاعاتی از جمله نسخه Hugo، سیستم عامل، تاریخ ساخت مشاهده خواهید کرد.

1.2 یک سایت Hugo ایجاد کنید

فرض کنید استفاده می کنید FolderA برای ذخیره فایل های سایت شما کلیک راست FolderA، و “Git Bash Here” را در منو انتخاب کنید تا دستور Git Bash باز شود. حالا وارد کنید:

hugo new site MySite

سپس یک پوشه جدید به نام MySite در ایجاد خواهد شد FolderA، این سایت هوگو شماست.

1.3 یک موضوع را انتخاب کنید و سایت را پیکربندی کنید

از آنجایی که یک سایت جدید ایجاد شده است، شاید بخواهید ببینید سایت هوگو شما چگونه است، اما یک دقیقه صبر کنید، ابتدا باید یک موضوع را انتخاب کنید.

تم چیست؟

شما می توانید آن را به عنوان طراحی وب سایت خود در نظر بگیرید. سایت Hugo Themes دارای تم های مختلفی است. هنگامی که یک تم را انتخاب می کنید، می توانید آن را از مخزن GitHub آن دانلود کنید.

چگونه یک تم انتخاب کنیم؟

در اینجا می‌خواهم برای صرفه‌جویی در وقت خود در انتخاب تم به شما توصیه‌هایی کنم، زیرا من زمان زیادی را روی تم‌های هوگو صرف کرده‌ام، یکی را انتخاب کرده، پیکربندی کرده‌ام و سپس به یکی دیگر تغییر داده‌ام.

(1) موضوعی که دارای یک exampleSite استفاده از پوشه راحت تر است. تم های مختلف تنظیمات مختلفی دارند، به عنوان مثال، در انتخاب پوشه برای ذخیره پست ها. مهمترین فایل در exampleSite هست config.toml ( یا config.yml، یا config.json ) فایل، که نمونه ای برای پیکربندی شما ارائه می دهد، بنابراین می دانید که کدام پارامترها را تغییر دهید تا به نتیجه دلخواه برسید. بدون exampleSite، برای پیکربندی آن به زمان بسیار بیشتری نیاز دارید.

(2) هنگام پیش نمایش تم، باید به برخی از ویژگی هایی که استفاده می کنید توجه کنید. به عنوان مثال، اگر مقاله های فنی می نویسید، باید بررسی کنید که آیا موضوع معادلات ریاضی را نشان می دهد و بلوک های کد را به خوبی برجسته می کند.

پس از انتخاب یک تم، چگونه آن را پیکربندی کنم؟

پوشه تمی که دانلود کرده اید را در آن کپی کنید MySite > themes پوشه

اگر پوشه تم شامل exampleSite، می توانید فایل ها را در آن کپی کنید exampleSite به MySite پوشه پس از آن، پوشه های دیگر را کپی کنید به جز exampleSite ( بخصوص archetypes، layouts، static پوشه ها) به MySite پوشه

برخی از تم ها ندارند exampleSite. اگر مبتدی هستید، استفاده از آن را در حال حاضر به شما توصیه نمی‌کنم، زیرا زمان بسیار بیشتری را صرف تعیین نحوه تنظیم پارامترها خواهید کرد. وقتی این مقاله را نوشتم، از Hyde به عنوان موضوع سایتم استفاده می کردم. طراحی ساده اش را دوست دارم. ندارد exampleSite . با این حال، من قبلا از چندین تم استفاده کرده ام، بنابراین استفاده کردم config فایل تم های قبلی را تغییر داد و برخی از پارامترها را به عنوان تم هاید تنظیم کرد.

سپس Git Bash Prompt را روشن کنید MySite پوشه و وارد کنید:

hugo server

پس از اتمام، URL نمایش داده شده در ترمینال خود را باز کنید و نمونه سایت را به صورت محلی خواهید دید. اگر پارامترها را در config.toml، صفحه در همان زمان تغییرات مربوطه را ایجاد می کند. به این ترتیب می توانید سایت خود را پیکربندی کنید.

در آینده، هنگامی که یک پست جدید می نویسید یا برخی اصلاحات را انجام می دهید، همچنان می توانید از آن استفاده کنید hugo server برای مشاهده سایت خود به صورت محلی قبل از فشار دادن به GitHub.

1.4 نوشتن پست

برای ایجاد یک پست جدید، دستور Git Bash را باز کنید MySite پوشه و وارد کنید:

hugo new new_post.md

یک فایل علامت گذاری جدید به نام “new_post” در آن ایجاد می کند MySite > content پوشه اما اگر استفاده کنید hugo server، ممکن است پست جدید را نبینید. چرا؟

(1) بسته به موضوعی که انتخاب می کنید، ممکن است لازم باشد آن را قرار دهید new_post.md به post (یا posts ) پوشه در content پوشه برای تولید صفحه وب در این صورت می توانید دستور زیر را برای ایجاد یک پست جدید نیز وارد کنید:

hugo new post/new_post.md

(2) پست جدید را در ویرایشگر خود باز کنید (Typora، VS Code و غیره). در هدر پست، تنظیمات مربوط به پست وجود دارد (به آن موضوع front نیز می گویند). پیدا کردن draft: true ، یعنی این پست یک پیش نویس است و شما نمی خواهید اکنون آن را منتشر کنید. آن را به draft: false تا پست در سایت منتشر شود. علاوه بر title در هدر به عنوان پست اشاره دارد، و در هنگام ایجاد نام فایل تنظیم شده است (به عنوان مثال، “new_post” در اینجا). شما می توانید آن را به هر چیزی که می خواهید در ویرایشگر خود تغییر دهید.

1.5 چگونه تصاویر را نمایش دهیم؟

اگرچه بسیاری از آموزش‌ها به نحوه درج و نمایش تصاویر اشاره نکرده‌اند، من فکر می‌کنم برای مبتدیان این بخش مهمی در فرآیند ساخت است، زیرا ممکن است تصاویری را اضافه کنید تا درک مطلب خود را آسان‌تر یا بهتر به نظر برسانید.

1. برای تصاویر محلی

در هوگو، تصاویر محلی در آن ذخیره می شوند MySite > static پوشه به منظور نمایش داده شود. فرض کنید شما یک تصویر به نام دارید image1.jpg، پس از قرار دادن آن در static پوشه، می توانید آن را به این شکل در پست خود درج کنید:

![image1_title](/image1.jpg)

یا می توانید تمام تصاویر را در یک پوشه قرار دهید: MySite > static > imgs، سپس تصویر را در پست خود درج کنید:

![image1_title](/imgs/image1.jpg)

اما روش بالا عنوان تصویر را نمایش نمی دهد. اگر می خواهید عنوان را همراه با تصویر نشان دهید، می توانید از:

{{< figure src="/image1.jpg" title="image1_title" >}}

در اینجا لطفا به فضای بین براکت های زاویه توجه کنید ( < و > ) و محتوا.

شکل خط لوله ای که در بخش “خط لوله ساخت سایت” مشاهده کردید به این ترتیب درج شد.

2. برای تصاویر وب

اگر تصویر شما در وب ذخیره شده است، می توانید تصویر را با استفاده از پیوند وب آن به یکی از سه روش زیر وارد کنید:

Way-1: show the image without the title
![image2_title](image2_weblink)

Way-2: show the image with the title
{{< figure src=image2_weblink title=image2_title >}}

Way-3: show the image without the title
<img src=image2_weblink alt=image2_title align=center />

در راه-2 و راه-3، هیچ نقل قول دوگانه ای وجود ندارد image2_weblink یا image2_title، یعنی بنویسید image2_weblink، نه “image2_weblink”.

برای مشاهده نمونه نمایش تصویر وب می توانید به پست سایت من نگاه کنید.

مرحله 2: سایت را در GitHub مستقر کنید

2.1 یک مخزن GitHub ایجاد کنید

وارد GitHub شوید و یک مخزن عمومی به نام ایجاد کنید YourGitHubName.github.io، اینجا جایی است که می خواهید صفحات وب خود را در GitHub ذخیره کنید تا دیگران بتوانند سایت شما را مشاهده کنند. اینجا لطفا مطمئن شوید YourGitHubName همان نام کاربری GitHub شما است.

2.2 سایت خود را بسازید و آن را به مخزن در GitHub فشار دهید

من مراحل معرفی شده در این آموزش را دنبال کردم.

کارهایی که باید قبل از استقرار برای اولین بار انجام دهید:

برای اولین بار، شما نیاز به اتصال دارید MySite > public پوشه را در مخزن GitHub خود قرار دهید. این public پوشه مکانی برای ذخیره فایل های سایت شما پس از تولید توسط Hugo است. آن را به مخزن GitHub خود متصل کنید تا فایل های سایت در GitHub همگام شوند.

دستور Git Bash را روشن کنید MySite پوشه، وارد کنید:

cd public
git init
git remote add upstream https://github.com/YourGitHubName/YourGitHubName.github.io.git

پس از آن، پارامتر را تنظیم کنید baseurl که در config.toml برای اینکه مخزن GitHub شما در بالا باشد:

baseurl = "https://YourGitHubName.github.io/"

کارهای زیر هر بار که سایت خود را به GitHub فشار می دهید انجام می دهید:

ابتدا فایل های سایت را تولید کنید:

دستور Git Bash را روشن کنید MySite پوشه، وارد کنید:

hugo

وقتی این کار تمام شد، Hugo فایل های سایت را تولید و در آن ذخیره می کند public پوشه

سپس این فایل‌ها را به GitHub فشار می‌دهیم و وارد کردن زیر را ادامه می‌دهیم:

cd public
git add .
git commit -m"your_commit_message"
git push upstream master

از دستورات بالا استفاده می شود git remote add upstream... و git push upstream master، من هم از این دو دستور استفاده کردم. من یک استفاده آموزشی دیدم origin بجای upstream، یعنی git remote add origin... و git push origin master، که کار می کند. ممکن است امتحان کنید.

کار آینده

برخی از آموزش‌ها اکشن‌های GitHub را برای خودکارسازی پیاده‌سازی معرفی کرده‌اند، و در ادامه قصد دارم آن را یاد بگیرم.

منابع

1. Hui Gong: چگونه با استفاده از GitHub Pages و Hugo وبلاگ شخصی بسازیم

2. Flavio Copes: چگونه با استفاده از Hugo یک وبلاگ راه اندازی کنیم

3. نصب هوگو: https://www.brycewray.com/posts/2022/10/how-i-install-hugo/

4. تم هوگو را به سرعت تنظیم کنید: https://www.tomasbeuzen.com/post/making-a-website-with-hugo/ (کاش قبلاً مرحله 4 آن را در مورد پیکربندی وب سایت می خواندم، کارآمد است.)

5. استقرار سایت Hugo در GitHub: https://jdhao.github.io/2018/10/10/hexo_to_hugo/