خبر و ترفند روز

خبر و ترفند های روز را اینجا بخوانید!

شروع کار با هوگو: چگونه یک وب سایت ساده ایجاد کنیم

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

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

از آنجایی که Hugo بیشتر برای وب سایت های ثابت استفاده می شود، برای ایجاد وبلاگ ها، نمونه کارها یا سایت های مستندسازی عالی است.

شما به راحتی می توانید با استفاده از تم Hugo از پیش ساخته شده، یک وب سایت Hugo راه اندازی و ایجاد کنید. تنها با چند مرحله کوتاه، می توانید محتوا و صفحات را با استفاده از Markdown به وب سایت خود اضافه کنید.

نحوه نصب هوگو

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

مک

می توانید Hugo را با استفاده از Homebrew نصب کنید.

  1. ترمینال macOS خود را باز کنید.
  2. مدیر بسته Homebrew را نصب کنید./bin/bash -c “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)”
  3. Hugo.brew install hugo را نصب کنید

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

brew install hugo

ویندوز

شما به یک پکیج منیجر معادل برای ویندوز نیاز دارید. برای مثال می توانید از Scoop package manager استفاده کنید.

  1. Windows PowerShell را باز کنید، که قبلاً باید بخشی از سیستم عامل ویندوز شما باشد.
  2. اگر برای اولین بار است که Scoop را نصب می کنید، ممکن است لازم باشد Execution Policy خود را تنظیم کنید. Set-ExecutionPolicy RemoteSigned -scope CurrentUser
  3. Scoop:iex (new-object net.webclient).downloadstring(‘https://get.scoop.sh’) را نصب کنید
  4. Hugo:Scoop install hugo را نصب کنید

Set-ExecutionPolicy RemoteSigned -scope CurrentUser

iex (new-object net.webclient).downloadstring('https://get.scoop.sh')

scoop install hugo

چگونه یک پروژه هوگو ایجاد کنیم

برای ایجاد یک پروژه Hugo جدید، باید از دستور داخلی hugo new site استفاده کنید.

  1. ترمینال یا خط فرمان خود را باز کنید. به پوشه ای که می خواهید پروژه خود را ایجاد کنید بروید.
  2. دستور hugo new site:hugo new site new-hugo-website را اجرا کنید
  3. در فایل اکسپلورر خود به محل پروژه Hugo خود بروید.
  4. پوشه پروژه را باز کنید. خواهید دید که وب سایت Hugo جدید شما دارای ساختار فایل و پوشه مورد نیاز برای کار کردن وب سایت شما است.

hugo new site new-hugo-website

File Explorer برای مشاهده ساختار فایل و پوشه Hugo باز می شود

چگونه یک تم اضافه کنیم

در حال حاضر، پروژه شما فقط شامل پوشه های اصلی برای پروژه Hugo است. اجرای محلی وب سایت شما در این مرحله فقط یک صفحه خالی را نشان می دهد. از آنجایی که هنوز هیچ طرح HTML، CSS یا UI برای وب سایت خود تنظیم نکرده اید، باید آنها را اضافه کنید.

مطلب مرتبط:   ساخت یک React Application با استفاده از Radix UI

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

  1. موضوعی را که دوست دارید انتخاب کنید. هر تم ممکن است دستورالعمل‌های تنظیم کمی متفاوت داشته باشد که در صفحه پیش‌نمایش مربوطه نشان داده شده است. این آموزش از تم Tale به عنوان مثال استفاده می کند.
  2. به پوشه ریشه پروژه خود در ترمینال یا command line.cd new-hugo-website بروید.
  3. دستور اضافه کردن تم Tale را اجرا کنید. می توانید موضوع را به عنوان یک زیر ماژول اضافه کنید، که یک پوشه جدید به نام tale در داخل تم ایجاد می کند. مخزن داستان GitHub در پوشه themes کلون project.git شما https://github.com/EmielH/tale-hugo.git themes/tale
  4. به پوشه پروژه خود بروید. روی پوشه themes کلیک کنید تا باز شود. صرف نظر از اینکه از کدام دستور استفاده کرده اید، یک پوشه tale جدید وجود خواهد داشت که تم تازه دانلود شده را ذخیره می کند.
  5. در فایل config.toml، تم داستان را به عنوان بخشی از پیکربندی اضافه کنید. این به هوگو می‌گوید که از HTML، CSS و دیگر سبک‌هایی که تم داستان شامل می‌شود استفاده کند.theme = “tale”

وب سایت Hugo Themes با پیش نمایش تم داستان باز شد

cd new-hugo-website

git init
git submodule add https://github.com/EmielH/tale-hugo.git themes/tale

git clone https://github.com/EmielH/tale-hugo.git themes/tale

Windows Explorer پوشه تم "Tale" را که به تازگی دانلود شده را نشان می دهد

theme = "tale"

چگونه صفحات را به وب سایت خود اضافه کنید

شما می توانید محتوای خود را در هر قالبی که هوگو قبول دارد بنویسید. Hugo سپس فایل های شما را به صورت خودکار به فایل های HTML تبدیل می کند که آنها را به کاربر ارائه می دهد. این باعث می شود که هم ساخت و هم استقرار آن سریع باشد. این مثال از Markdown، یک زبان ساده متن ساده، به عنوان قالب محتوای شما استفاده می کند.

مطلب مرتبط:   نحوه آموزش YOLOv8 بر روی داده های سفارشی

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

برای افزودن یک صفحه فرعی یا پست جدید به وب سایت خود، باید یک فایل Markdown جدید را به پوشه محتوا اضافه کنید. هر پست یا صفحه دارای فایل Markdown مربوط به خود است.

  1. پوشه محتوای داخل پروژه Hugo خود را باز کنید. یک فایل Markdown جدید به نام myFirstPost.md ایجاد کنید.
  2. فایل را در هر ویرایشگر متنی مانند Notepad++ یا Visual Studio Code باز کنید.
  3. در بالای فایل، مقداری فراداده اضافه کنید. این شامل اطلاعات مهمی در مورد پست خواهد بود. طرح زمینه ای که استفاده می کنید این اطلاعات را به روش خاصی در صفحه قالب بندی می کند.—نویسنده: “نام شما” عنوان: “اولین پست من”تاریخ: “17-05-2022”—
  4. پس از اینکه متادیتا را اضافه کردید، می‌توانید با استفاده از Markdown محتوای خود را اضافه کنید. این اولین پست من در وب‌سایت هوگو من است! تم Hugo که برای این سایت استفاده می‌شود Tale نام دارد. نصب و پیکربندی آن بسیار ساده است.# SubheadingThis مقداری محتوا است.# عنوان فرعی دیگر این محتوای بیشتر است.
  5. برای افزودن صفحات بیشتر به وب سایت خود، می توانید فایل های علامت گذاری بیشتری اضافه کنید.

یک فایل علامت گذاری myFirstPost در پوشه محتوا ایجاد کنید

---
author: "Your Name"
title: "My First Post"
date: "2022-05-17"
---

This is my very first post on my Hugo website!
The Hugo theme being used for this site is called Tale.
It is very simple to install and configure.
# Subheading
This is some content.
# Another Subheading
This is more content.

چگونه وب سایت Hugo خود را به صورت محلی اجرا و آزمایش کنید

برای اجرای وب سایت خود از دستور hugo serve استفاده کنید.

  1. ترمینال یا خط فرمان را باز کنید.
  2. به پوشه ریشه پروژه Hugo خود بروید.
  3. دستور hugo serve را اجرا کنید:hugo serve
  4. منتظر بمانید تا وب سایت مراحل راه اندازی را تکمیل کند. پس از تکمیل، ترمینال پیامی را چاپ می کند که نشان می دهد از کدام آدرس محلی می توانید به وب سایت دسترسی پیدا کنید. معمولاً این http://localhost:1313/ است.
  5. یک مرورگر وب باز کنید و http://localhost:1313/ یا هر آدرسی که ترمینال به شما داده است را وارد کنید. صفحه اصلی وب سایت هوگو خود را خواهید دید.
  6. در صفحه فهرستی از پست ها برای هر فایل نشانه گذاری که دارید وجود دارد. در این مورد، دو فایل علامت گذاری پر از محتوا وجود دارد. این شامل صفحه myFirstPost.md است که قبلاً ساخته اید. همچنین شامل یک پست جدید به نام bananaCakeRecipe.md است.
  7. روی پیوند عنوان در یکی از پیش نمایش ها کلیک کنید. شما را به صفحه کامل آن پست خاص می برد.

hugo serve

فرمان Hugo Serve در ترمینال، با خروجی نشان دهنده آدرس محلیسایت Hugo در حال اجرا است و محتوای نشانه گذاری نمونه را نشان می دهدنمونه Hugo Post که دستور پخت را نشان می دهد

میزبانی وب سایت هوگو شما

راه اندازی و راه اندازی یک وب سایت استاتیک با Hugo ساده و سریع است. می توانید از تم های از پیش ساخته شده استفاده و پیکربندی کنید و وب سایت Hugo خود را به صورت محلی برای آزمایش اجرا کنید. همچنین می توانید با استفاده از Markdown صفحات محتوا را به وب سایت خود اضافه کنید.

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

هنگامی که وب سایت Hugo خود را ایجاد کردید، می توانید شروع به یادگیری بیشتر در مورد نحوه میزبانی آن کنید. گزینه‌های میزبانی وب‌سایت رایگان زیادی وجود دارد که می‌توانید از میان آنها یکی را انتخاب کنید، مانند Dropbox، Google Drive یا OneDrive.