این پست با هدف آموزش کوتاه و مختصر چگونگی ساخت یک سایت شخصی با استفاده از GitHub Pages و Jekyll نوشته شده است.

برای شروع این مطلب من فرض رو بر این گذاشتم که خواننده علاوه بر آشنایی با version control و نحوه کارکرد Git و GitHub، بلکه آشنایی مقدماتی با HTML و CSS هم دارد. ضمن اینکه در این مطلب در بخش‌هایی از Markdwon هم استفاده خواهم کرد.

در ضمن از اونجایی که قصد دارم این پست ساده و کوتاه باشه، سعی کردم تا تمامی مراحل رو از طریق رابط کاربری وب GitHub انجام بدم و سراغ CLI نخواهم رفت. اما به طور حتم، در آینده در یک سری پست، درباره نحوه کار با Jekyll و حتی GitHub از طریق CLI، به همراه پیاده سازی بعضی از ویژگی‌های جالب با Jekyll خواهم نوشت.

اگر براتون جالب بود که چرا Jekyll و من چرا تصمیم به ساخت سایت شخصیم به این شکل افتادم، می‌تونید این یادداشت رو بخونید.

GitHub Pages چیست؟

GitHub Pages صفحات وبی هستند که توسط GitHub میزبانی می‌شوند. همه کاربران GitHub می‌توانند به صورت رایگان یک صفحه شخصی بسازند، ضمن اینکه GitHub Pages این قابلیت را به شما می‌دهد تا برای هر پروژه‌‌اتون روی GitHub هم یک صفحه وب بسازید. نحوه کار کردن و ساختن این صفحات مانند کارکردن با خود GitHubه، با این تفاوت که repository مربوط به صفحه‌ای که قصد ایجاد آن را دارید، باید طبق فرمت مشخصی نامگذاری شده باشه و شامل حداقل یک فایل HTML یا Markdown باشد تا بتوانید این فایل را مثل سایت‌های دیگه از طریق مرورگرهاتون ببینید.

GitHub Pages در کنار این قابلیت‌ها دارای یک موتور تولید وب سایت static به نام Jekyllه که به زودی با اون هم آشنا می‌شیم.

شروع کار با GitHub Pages

- شما در ابتدا نیاز به یک حساب کاربری در GitHub دارید، در صورتی که قبلا در GitHub ثبت نام کردید، به حساب کاربریتون وارد بشید و در غیر این صورت یک حساب کاربری جدید برای خودتون بسازید و پس از ورود به GitHub به آدرس https://github.com/new برید یا دکمه مربوط به ساخت repository جدید رو بزنید.

- نام repository جدیدتون رو username.github.io بذارید و به خاطر داشته باشید که به جای قسمت username باید نام کاربری خودتون در GitHub رو جایگزین کنید. ضمنا repository جدیدتون باید public - عمومی - باشه و در صورتی که گزینه ساخت فایل README توسط GitHub در هنگام ایجاد repository فعال باشه، مشکلی وجود ندارد.

و در انتها repository جدیدتون رو بسازید.

- حالا باید یک فایل index.html داخل repository بسازیم.

برای این کار رو گزینه مربوط به اضافه کردن فایل جدید بزنید و اسم فایل جدید رو index.html قرار بدید.

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

<!DOCTYPE html>
<html>
  <head>
    <title>Kianoosh Naghavi</title>
    
	
  </head>
  <body>
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/blog">Blog</a></li>
      </ul>
    </nav>
    <div class="container">
      <div class="main">
        <h1>Hi!</h1>
        <p>This is Kianoosh!</p>
      </div><!-- /.main -->
    </div><!-- /.container -->
    <footer>
      <ul>
        <li><a href="mailto:example@gmail.com">email</a></li>
        <!-- /using mailto is bad, very very bad - only fools and noobs use it -->
        <li><a href="https://github.com/theskn">github.com/theskn</a></li>
      </ul>
    </footer>
  </body>
</html>

- حالا از پایین صفحه روی Commit changes بزنید. شما در این قسمت می‌توانید توضیحاتی در مورد تغییراتی که داخل فایل در حال ویرایش انجام داده‌اید بنویسید.

خب، حالا با موفقیت اولین سایت خودتون رو با GitHub Pages ساختید. برای دیدن سایتتون به آدرس https://username.github.io مراجعه کنید. گاهی اوقات ساخته شدن و در دسترس قرار گرفتن سایت تازه ساخته شده با GitHub Pages بین ۵ تا ۱۰ دقیقه زمان می‌برد، ولی در غالب موارد، همزمان با Commit کردن فایل index.html برای اولین بار، سایت شما آماده است.

- خب حالا بهتره که یه ذره سر و شکلی به صفحه سایتمون بدیم.

برای این کار دوباره به صفحه اول repository خودتون برگردید و یک فایل جدید به اسم css/main.css ایجاد کنید.

من در حالت کلی، همیشه سعی می‌کنم تا در حد ممکن ساختار پوشه و فایل بندی پروژه‌هام تفکیک شده و خوانا باشه و فایل‌هایی مثل فایل‌های مربوط به style sheet رو در مسیر assets/css/filename.css قرار می‌دم.

در ضمن قسمت /css در هنگام نام گذاری فایل جدید، باعث میشه تا GitHub به صورت اتوماتیک داخل repository شما subdirectory مربوط رو بسازه.

حالا کد زیر رو داخل فایل main.css قرار بدید:

body {
    margin: 60px auto;
    width: 70%;
}
nav ul, footer ul {
    font-family:'Consolas';
    padding: 0px;
    list-style: none;
    font-weight: bold;
}
nav ul li, footer ul li {
    display: inline;
    margin-right: 20px;
}
a {
    text-decoration: none;
    color: #999;
}
a:hover {
    text-decoration: underline;
}
h1 {
    font-size: 3em;
    font-family:'Consolas';
}
p {
    font-size: 1.5em;
    line-height: 1.4em;
    color: #333;
}
footer {
    border-top: 1px solid #d5d5d5;
    font-size: .8em;
}

ul.posts { 
    margin: 20px auto 40px; 
    font-size: 1.5em;
}

ul.posts li {
    list-style: none;
}

فراموش نکنید که تغییرات انجام شده رو Commit کنید.

ما در مرحله قبلی و هنگام نوشتن کد مربوط به فایل index.html، این فایل رو با فایل main.css مرتبط کردیم. برای چگونگی این اتفاق به خط ششم کد فایل index.html مراجعه کنید.

خب، حالا دوباره به آدرس https://username.github.io سر بزنید.

Jekyll چیست؟

Jekyll یک سیستم مدیریت و تولید سایت‌های ایستا[۱]ی قدرتمند است. استفاده از Jekyll و یا سایر سیستم‌های مشابه کار را برای ایجاد و مدیریت سایت‌هایی مانند دورانی که صفحات وب از به صورت ایستا ساخته می‌شدند و محتوای آنها در پایگاه داده ذخیره نمی‌شد، آسان می‌کند.

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

از آنجایی که موتور Jekyll برای استفاده به همراه GitHub Pages بر روی GitHub موجود است، باز هم با رعایت کردن ساختار مشخصی در نامگذاری‌ فایل‌ها و پوشه‌هامون، می‌تونیم شرایط استفاده از این قابلیت رو ایجاد کنیم. تحت این شرایط، هر بار که فایل جدیدی را به repository خودمون commit کنیم، Jekyll یک بار از ابتدا تمام صفحات HTML را دوباره تولید می‌کند و محتوای سایت در صورت تغییر به روز رسانی می‌شود.

به نظر من بهترین حالت برای کار کردن با Jekyll نصب اون روی کامپیوتر شخصی خودتونه، به این ترتیب که قبل از commit کردن تغییرات جدید به repository، بتونید سایت خودتون رو به صورت local روی کامپیوتر شخصی خودتون مشاهده کنید، مزیت بزرگ این کار، جلوگیری از افزایش تعداد reversionها و شلوغ، کثیف و نامرتبط شدن repository کاربران است.

اما همانطور که در ابتدا اشاره کردم، برای سرعت دادن در مرور کلیت بحث، این بار تنها از طریق رابط کاربری وب GitHub سایتمون رو راه اندازی می‌کنیم.

مزیت بزرگ Jekyll و سایر سیستم‌های مشابه برای کاری که قصد انجام آن را داریم، در این است که این سیستم‌ها می‌توانند صفحات وب ما را با استفاده از قالب‌هایی که برای اون‌ها نوشتیم تولید کنند؛ به زبان ساده‌تر یعنی برای داشتن "فهرست کناری صفحات سایت" لازم نیست تا کد این قسمت را در همه صفحات تکرار کنیم، ما یک بار در فایلی جداگانه که به آن قالب، Template یا Layout می‌گوییم، کد این فهرست را می‌نویسیم و از حالا به بعد هر جا که نیاز به استفاده از این فهرست داشتیم، تنها از فراخوانی این قالب استفاده می‌کنیم. تولید این قالب و بارگذاری کد نوشته شده در بین فایل‌های دیگر بر عهده موتوری مانند Jekyll است. حالا تصور کنید که "فهرست صفحات سایت" قرار بود تا در هر صفحه جدید در محلی متفاوت قرار بگیرد و یا تغییراتی دیگر داشته باشد، قطعا روشن است که با استفاده از یک موتور تولید سایت ایستا مانند Jekyll چقدر می‌توان در زمان صرفه جویی کرد و جلوی دوباره و چندباره کاری‌ها را گرفت.

استفاده از Jekyll در GitHub

همانطوری که گفتم برای فعال کردن امکان استفاده از Jekyll بر روی سایتمان باید ساختار مشخصی را در نحوه نامگذاری فایل‌ها و پوشه‌هامون رعایت کنیم. ساختار Jekyll را مرحله به مرحله به سایتمون اضافه می‌کنیم و در مورد اون صحبت خواهیم کرد.

- در اولین قدم در شاخه اصلی repository سایت یک فایل به اسم gitignore. می‌سازیم و داخل این فایل به GitHub دستور می‌دهیم تا از اضافه کردن پوشه site_ به داخل repository جلوگیری کند؛ این پوشه هر بار بعد از هر commit که Jekyll اقدام به تولید مجدد سایت می‌کند، به صورت اتوماتیک توسط Jekyll در پروژه ساخته می‌شود و به همین دلیلی نیازی نیست تا این پوشه شامل شرایط version control باشد.

این کد را از طریق ویرایگشر متنی GitHub در فایل gitignore. وارد کنید:

_site/

- حالا داخل شاخه اصلی repository یک فایل جدید به نام config.yml_ ایجاد می‌کنیم که شامل اطلاعاتی است که از آنها برای کنترل و تنظیمات Jekyll استفاده می‌شود.

# Site settings
title: "Just another test website"
name: "Kianoosh Naghavi"
author: Kianoosh Naghavi

# Build settings
markdown: kramdown
encoding: utf-8
timezone: Asia/Tehran

در اینجا ما به Jekyll اطلاعاتی در مورد عنوان سایت، نام سایت و نویسنده سایت به همراه نسخه Markdown مورد استفاده، encoding مورد استفاده و منطقه زمانی خودمان داده‌ایم.

این مقادیر را با مقادیر دلخواه خودتان تعویض کنید.

- حالا یک پوشه به نام layout_ بسازید و در داخل آن فایلی جدید به نام default.html ایجاد کنید.

این فایل قالب اصلی ما خواهد بود که حاوی عناصر تکرار شونده مانند tagهای <head> و <footer> خواهد بود. با استفاده از این قالب دیگر لازم نیست تا در هنگام ساخت هر صفحه جدید کدهای مربوط به این قسمت‌ها را دوباره بنویسیم. ضمن اینکه خطاگیری، نگهداری و تغییر در این قسمت‌ها بسیار ساده و آسان شده و در صورت نیاز به تغییر، ما تنها یک بار فایل default.html را ویرایش خواهیم کرد و این تغییر در تمامی صفحات سایت اعمال خواهد شد.

پس در اولین قدم کدهای مربوط به فایل index.html را به داخل فایل default.html منتقل می‌کنیم و در نهایت باید فایلمان به شکل زیر باشد:

<!DOCTYPE html>
<html>
  <head>
    <title>{{ page.title }}</title>
    
	
  </head>
  <body>
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/blog">Blog</a></li>
      </ul>
    </nav>
    <div class="container">
      <div class="main">
        <h1>Hi!</h1>
        <p>
        
      		{{ content }}
      		
      	</p>
      </div><!-- /.main -->
    </div><!-- /.container -->
    <footer>
      <ul>
        <li><a href="mailto:example@gmail.com">email</a></li>
        <!-- /using mailto is bad, very very bad - only fools and noobs use it -->
        <li><a href="https://github.com/theskn">github.com/theskn</a></li>
      </ul>
    </footer>
  </body>
</html>

لازم به ذکر است که tagهای {{ page.title }} و {{ content }} همان tagهایی هستند که قرار است ما از طریق آنها، مطالب و محتوای مورد نظرمان را به قالبمان طزریق کنیم. Jekyll این دست از tagها را liquid tags یا tagهای شناور می‌نامد.

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

---
layout: default
title: Kianoosh Naghavi, inject
---

This is Kianoosh Naghavi!

and this is content injection using jekyll!

در این قطعه plain text بالای صفحه در Jekyll به نام Front-matter شناخته می‌شود. هر فایلی که در سایت دارای ساختاری مشابه در ابتدای خود باشد، توسط Jekyll پردازش خواهد شد.

هر باری که ما یک فایل HTML جدید ایجاد کنیم و در آن مقدار layout: default را برای Jekyll مشخص کرده باشیم، Jekyll قالب layouts/defaul.html_ را برداشته و با جاگذاری مقدار {{ content }} با متن وارد شده در پایین قسمت Front-matter یک فایل HTML جدید برای ما تولید می‌کند.

حالا دوباره سایتتان را چک کنید!

راه اندازی بلاگ

ساختن یک بلاگ با Jekyll هم همانطور که در گذشته دیدیم کار پیچیده و سختی نیست و فقط قواعد و ساختار خاصی دارد که در صورت پیروی از اون‌ها، به راحتی می‌تونیم بلاگ خودمون رو بسازیم.

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

- در اولین قدم برای پست‌هامون یک قالب جدید می‌سازیم. برای این کار فایل جدیدی با نام blog.html در داخل پوشه layouts_ می‌سازیم.

فایل جدید ما باید حاوی قطعه زیر باشد:

---
layout: default
---

{{ page.title }}

{{ page.date | date_to_string }}

{{ content }}

توجه داشته باشید که خود قالب پست‌هایمان در حال استفاده از قالب default به عنوان قالب اصلی است و ما با استفاده از قسمت {{ content }} آن tagهای شناور جدیدی به قالب اصلی طزریق می‌کنیم.

- حالا تو مسیر اصلی repository یک پوشه جدید با نام posts_ می‌سازیم. این پوشه محل ذخیره سازی و نگهداری پست‌هایی است که در بلاگ منتشر شده‌اند. نکته مهم درباره این پست‌ها ساختار نامگذاری آنهاست، نام هر پست باید از قاعده YYYY-MM-DD-title-of-the-blog-post.md پیروی کند. نام هر فایل در ادامه تبدیل به permalink مربوط به آن پست می‌شود، برای مثال فایلی با نام 2016-03-31-frst-blog-post.md ایجاد کنید:

---
layout: post
title: "Firs blog post"
date: 2016-03-31 01:50:00 +0330
---
and this is our first blog post.
typical Hello world?
0_0

حتما دقت داشته باشید که در قسمت date زمان را با فرمتی که در اینجا وارد کرده‌ام، وارد کنید. در نسخه‌های قدیمی‌تر موتور Jekyll تنها وارد کردن سال، ماه و روز کافی بود، اما در حال حاضر باید این اطلاعات به صورت کامل و به همراه، ساعت، دقیقه، ثانیه و منطقه زمانی با ساختار UTC offset وارد شود، یعنی به شکل YYYY-MM-DD HH:MM:SS +/-TTTT.

پسوند md. پسوند مربوط به فایل‌های Markdown است، syntax به کار گرفته شده در این فایل‌ها توسط Jekyll تبدیل به HTML می‌شود. Markdown یک زبان "نشانه گذاری" است و ساختار آن شبیه plain text است. هدف از استفاده از Markdown سهولت بخشیدن به امر نوشتن است به طوری که بتوانیم به سرعت محتوای HTML خود را تولید کنیم. در صورت تمایل میتوانید Markdown cheatsheet را نگاهی بیاندازید.

- حالا قصد داریم تا صفحه‌ای جهت لیست کردن و نمایش تمامی پست‌های سایتمون درست کنیم. برای این کار یک پوشه جدید با نام blog می‌سازیم و در داخل آن فایل جدیدی با نام index.html ایجاد می‌کنیم. ما از این شیوه تنها به دلیل جدا بودن صفحات سایتمان و ذخیره کردن هر کدام از آنها در پوشه مخصوص به خود استفاده می‌کنیم در غیر این صورت و در صورت تمایل می‌توانیم فایل blog.html را در مسیر اصلی repository هم ایجاد کنیم. شایان ذکر است که این دو رویکرد تفاوت کوچکی در نحوه ایجاد URL برای دسترسی به صفحه مورد نظر دارند. برای مثال در رویکرد اول آدرس صفحه مورد نظر ما، در اینجا blog به شکل http://example.com/blog است و در رویکرد دوم برای دسترسی به صفحه مورد نظر، باید آدرس http://example.com/blog.html را وارد کنیم.

ما فرض را بر انجام همان رویکرد نخست می‌گیریم، پس فایل index.html ایجاد شده باید دارای محتوای زیر باشد:

---
layout: default
title: Blog archive
---
	

{{ page.title }}

    {% for post in site.posts %}
  • {{ post.date | date_to_string }} »
  • {% endfor %}

ما برای ساخت یک لیست غیر مرتب از تمام پست‌های منتشر شده در سایتمان از حلقه foreach بر روی site.posts استفاده می‌کنیم، یعنی برای تمام فایل‌های موجود در پوشه post. در ادامه واضح است که برای هر پست موجود در این پوشه، مقادیر زمان، یعنی post.date و عنوان، یعنی post.title را در داخل یک لیست نامرتب فهرست می‌کنیم.

خب حالا بهتره تا نگاهی به https://username.github.io/blog بیاندازید.

سفارشی سازی بلاگ

یکی از قابلیت‌های خوب Jekyll، امکان مدیریت ساختار permalinks هاست، برای این کار به سراغ ویرایش فایل config.yml_ می‌رویم.

این خط را به فایل config.yml_ اضافه کنید:

#outputting
permalink: :posts/:title.html

این تغییر باعث می‌شود تا از این به بعد بتوانید پست‌های خودتون رو در آدرسی مانند http://username.github.io/:posts/name-of-your-post.html ببینید.

استفاده از ساختار زیر هم بسیار پرکاربرد است:

#outputting
permalink: /blog/:year/:month/:day/:title

این ساختار باعث می‌شود تا پست‌هایتان را بتوانید در آدرسی مانند http://username.github.io/blog/YYYY/MM/DD/name-of-your-post.html مشاهده کنید.

جمع بندی

خب تا اینجا فکر کنم به مقدار خوبی با نحوه ایجاد یک سایت با استفاده از GitHub Pages و Jekyll آشنا شدیم، به عنوان تمرین بد نیست که خودتون تلاش کنید تا صفحات جدیدی مثل about یا cv برای سایتتون بسازید.

من در آینده سعی خواهم کردم تا یک سری مطالب درباره نحوه نصب GitHub و Jekyll بر روی رایانه‌های شخصی بنویسم و طرز استفاده از این دو برنامه از طریق CLI رو هم در اون‌ها بررسی کنیم و تعدادی از ویژگی‌های جالبی که با Jekyll می‌تونیم پیاده سازی کنیم رو با هم ببینیم.

منتظر نظرات و سوالاتتون هستم.

پا نویس:

[۱]: Static site generator