توی قسمت اول در مورد مقدمه و نصب و راه اندازی سایت با Hugo توضیح دادم.

این قسمت میریم سراغ موارد زیر:

  • ایجاد اولین نوشته
  • تنظیمات مربوط به قالب
  • بارگزاری قالب در گیت هاب

ایجاد اولین نوشته

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

hugo new posts/my-first-post.md

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

hugo server

خب برای مشاهده خروجی میتونید ی سر به آدرس http://localhost:1313 بزنید. اگر پست جدیدی که ایجاد کردید را مشاهده نکردید تعجب نکنید. هنگام ایجاد پست در هیوگو پست به صورت پیش فرض بصورت draft هست. برای اینکه پست را از این حالت خارج کنید کافیه فایل پست جدید را باز کنید و اون را ادیت کنید. پست هایی که ایجاد میکنید در مسیر content/posts قابل دسترس هستند.

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

+++
title = "زنگ تفریح با Hugo قسمت دوم"
description = ""
author = ""
date = 2018-05-01T23:12:41+04:30
tags = []
draft = true
+++

گزینه title که مشخص هست عنوان پست هست. میتونید به هر شکلی که میخواید تغییرش بدید.

گزینه بعدی description هست که مربوط به توضیحات پست هست.

گزینه author هم نام نویسنده.

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

tags هم که مربوط به تگ های این پست هست. برای وارد کردن تگ جدید میتونید بصورت زیر تگ ها را وارد کنید:

tags = [آموزش Hugo, Hugo]

و گزینه آخر که مهمترین گزینه هست وضعیت نوشته را مشخص میکنه. اگر مقدار draft را برابر true قرار بدید نوشته بصورت draft خواهد بود و منتشر نمیشود. اما اگر مقدار این گزینه را برابر false قرار بدید نوشته منتشر میشه. و برای همه نوشته ها یادتون باشه این مقدار را برابر false قرار بدید.

خب محتوای پست جدید را میتونید داخل فایلی که ایجاد کردید بنویسید. قسمت جذابش اینه که با vim یا هر ادیتور دیگه ای هم میتونید این کار را انجام بدید :))

+++
title = "زنگ تفریح با Hugo قسمت دوم"
description = ""
author = ""
date = 2018-05-01T23:12:41+04:30
tags = []
draft = true
+++

محتوا خودتون را اینجا بعد از +++ شروع به نوشتن کنید

محتوا خودتون را اینجا بعد از +++ شروع به نوشتن کنید

محتوا خودتون را اینجا بعد از +++ شروع به نوشتن کنید

محتوا خودتون را اینجا بعد از +++ شروع به نوشتن کنید

تنظیمات قالب

تنظیمات مربوط به سایت در فایل config.toml باید وارد بشه پس برای وارد/ویرایش کردن تنظیمات این فایل را با یک ادیتور باز می کنیم.

baseurl = "https://hossein52hz.github.io/"
title = "Blue Bit"
publishDir = "docs"
theme = "ghostwriter"
disqusShortname = "hossein52hz"

خب اگر میخواید سایت را روی یک هاست آپلود کنید و به یک دامنه متصل کنید. baseurl را باید مقدار دهی کنید و نام دامنه خودتون را وارد کنید.

title هم عنوان سایت هست که بسته به طراحی قالبتون توی صفحه نمایش داده میشه. مثلا من عنوان Blue Bit را وارد کردم که در بالا-وسط صفحه با رنگ آبی نمایش داده شده.

publishDir نام پوشه ای را باید بهش بدید که قرار هست خروجی سایت داخلش قرار بگیره. من یک پوشه به اسم docs درست کردم و اسم پوشه را برای مقدار این گزینه وارد کردم. بعدا دلیلش را توضیح میدم.

theme هم نام قالبی هست که استفاده میکنید.

گزینه disqusShortname هم میتونید نام کاربری تون توی سایت disqus را وارد کنید. که یک سرویس کامنت گذاری هست.

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

بارگزاری قالب در گیت هاب

خب در آخرین قسمت هم میخوایم قالب را داخل گیت هاب بارگزاری کنیم و از گیت هاب به عنوان هاست سایتمون استفاده کنیم :)) همونطور که میدونید میتونید داخل گیت هاب صفحاتی به عنوان داکیومنت داشته باشید که میتونه شامل کدهای html باشه و استایل دهی داشته باشید داخل صفحه.

برای این کار ابتدا وارد اکانت گیت هاب خودتون بشید. بعد از این کار روی گزینه New repository کلیک کنید. طبق تصویر زیر یک نام برای مسیری که میخواید سایتتون قرار بگیره وارد کنید و پروژه هم بصورت public قرار بدید و در پایان روی گزینه Create repository کلیک کنید.

من اسم blog را وارد می کنم و روی گزینه Create repository کلیک میکنم. خب ریپوی ما ساخته شد.

 

خب در ادامه برای اینکه ما فایل های سایت را منتقل کنیم روی گیت هابمون به ترتیب دستورات زیر را اجرا میکنیم(فرض من این هست که با گیت و سایت گیت هاب آشنایی دارید در غیر این صورت یکم از گوگل کمک بگیرید چون خارج از بحث ما هست.)

git remote add origin git@github.com:Hossein52Hz/blog.git
git add --all
git commit -m "Initial my blog by Hugo :)"
git push -u origin master 

بعد از دستور آخر از شما پسورد برای SSH Key خواسته میشه که باید وارد کنید. و کمی صبر کنید تا فایل ها بارگزاری بشن.

خب در ادامه چندتا کوچیک هست که باید انجام بدید تا سایت روی گیت هاب نمایش داده بشه. اولین کار این هست که از قسمت settings ریپوی جدیدی که ساختید از قسمت GitHub Pages گزینه دوم یعنی master branch /docs folder را انتخاب کنید.

خب نکته ای که هست اینه که گیت هاب محتوای داخل پوشه docs را به عنوان مسیر اصلی سایت میشناسه. پس ما باید کل محتوای سایتمون داخل پوشه ای به اسم docs قرار بدیم. برای این کار باید مسیر انتشار فایل های نهایی سایت را تغییر بدیم. یک گزینه ای ما در تنظیمات سایت داشتیم و اگر ندارید کافیه اضافه کنید. پس فایل config.toml را ویرایش میکنیم و مسیر جدید خروجی سایت را تعیین میکنیم:

publishDir = "docs"

حواستون باشه که مسیر جدید حتما باید docs باشه. چون گیت هاب فایل های موجود داخل این پوشه را به عنوان صفحه اصلی میخونه و میشناسه. پس ما دیگه به پوشه public که قبلا خروجی سایت داخل این پوشه قرار میگرفت نیازی نداریم پس میتونیم پاکش کنیم.

rm -R public

مرحله بعدی که باید انجام بدیم این هست که baseurl را تغییر بدیم به آدرسی که گیتهاب هنگام انتخاب master branch /docs folder برامون ایجاد کرد. برای این کار فایل config.toml را من ویرایش می کنم و مقدار زیر را وارد می کنم:

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

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

دوباره من فایل ها را push می کنم داخل گیت هاب.

git add --all
git commit -m "Initial my blog by Hugo :)"
git push -u origin master 

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

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

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

موفق باشید 🙂