ساخت وبلاگ با گیت‌هاب و جکیل

آپدیت دی ۱۳۹۸ / ژانویه ۲۰۲۰

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

منتشر شده در شماره دو ماهنامه سلام‌دنیا –ما می‌خواهیم طی این مقاله یک راه حل آسان ولی گیک‌پسند برای ساخت صفحات وب با محوریت گیت‌هاب یاد بگیریم و با حداقل هزینه بتوانیم به کمک امکانات موجود در اینترنت صفحات ایستا در وب تولید کنیم و آنها را به شکلی دلپذیر و مطمئن مدیریت و به روزرسانی کنیم. اگر شما هم مثل من عاشق گیت و گیت‌هاب هستید ادامه مطلب را از دست ندهید! توجه هم داشته باشید که این روش بیشتر مناسب صفحات شخصی و صفحاتی برای موضوعات خاص و پروژه‌هاست و شما نمی‌توانید به این روش یک فروشگاه الکترونیک یا یک برنامه پایگاه‌داده و مشابه آن بسازید.

اگر تابحال برای خودتان یا اطرافیانتان وبسایت یا وبلاگی راه‌اندازی کرده باشید با عبارات و اططلاحات مقابل آشنا هستید: «ثبت دامنه»،«خرید هاست» (میزبانی وب)، «هک شدن وبسایت»، «بک‌آپ گیری» (نسخه پشتیبان از اطلاعات سایت)، PHP و MySQL (پایگاه‌داده) و مانند اینها. و اگر هم از سیستم‌های مدیریت محتوا مثل وردپرس، جوملا و دروپال استفاده کرده باشید می‌دانید که برای داشتن یک وبلاگ یا وبسایت نیاز است اول پایگاه‌‌داده لازم را ایجاد و سپس این برنامه‌ها را از سایت‌هایشان دانلود و در هاست خودتان کپی و سپس نصب کنید.

اگر تا اینجای مطلب را خوانده‌اید نترسید! من قصد ندارم که چیزهای خیلی بیشتری به اصلاحات بالا اضافه کنم بلکه قصد دارم آنها را از میان بردارم. ولی اول ببینیم روش کار فعلی چگونه است و چرا یک روش بهتر نیاز است. برای داشتن یک وبلاگ یا وبسایت جهت معرفی خودتان یا پروژه‌تان یا باید صفحات آنرا خودتان با تکنولوژی‌های وب، یعنی HTML وCSS و JavaScript بنویسید یا از سیستم‌های مدیریت محتوا استفاده کنید. ارائه دهندگان سیستم‌های مدیریت محتوا مثل وردپرس به شما به رایگان اجازه ثبت وبلاگ می‌دهند ولی هم محدودیت دارند، یعنی شما نمی‌توانید برنامه سایت را به دلخواه خودتان تغییر بدهید و و هم اینکه در ایران از دسترس خارج هستند و البته برای استفاده از دامنه شخصی با سرویس آنها باید جداگانه پول بپردازید که خب پرداخت ممکن نیست. راه حل رایج در این موارد داشتن هاست شخصی است. ولی این راه‌حل مزایا و معایب خودش را دارد که به اختصار شرح می‌دهم.

اول از همه شما باید یک هاست بخرید، خیلی از گیک‌ها خودشان سرور اختصاصی یا هاست اختصاصی دارند، خیلی‌های دیگر هم نه! هاست مورد نظر باید برنامه و پایگاه‌داده مورد استفاده شما را پشتیبانی کند (در مثلا بالا PHP و MySQL) بعد هم باید خاطرتان باشد هرسال آن را تمدید کنید. در ضمن باید مسئولیت نگهداری از آن را خودتان بر عهده بگیرید. هر مشکلی بوجود بیاید باید آنرا رفع کنید و نسبت به بروزرسانی برنامه وبسایت خودتان اقدام کنید. شاید گاه هم وبسایت شما هک بشود و در یک روز صبح باخبر بشوید که بجای وبسایت شیک شما یک صفحه سیاه و چند نوشته و یک پرچم و اسم یک گروه عجیب که کلی شعار داده و خیلی خوشحال است که سایت شما را فتح کرده به نمایش درمی‌آید! خب حالا باید بروید دنبال برگرداندن آخرین بک‌آپ و بروزرسانی و از دست دادن بخشی از محتوا و کامنت‌های سایت و الخ.

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

راه حل

به خاطر اینکه من یک مهندس راحت‌طلب هستم و گیت‌هاب را هم خیلی دوست دارم و علاقه‌ای هم ندارم که پول اضافی خرج کنم (دیگر اصلا پولی برایم نمانده!) پس راه حل دیگری را انتخاب کردم. چه خوب است که همه صفحات وبسایت من ایستا باشد، یعنی با همان تکنولوژی‌های وب نوشته بشود بدون هیچ برنامه و پایگاه‌داده سمت سرور! مثل روزهای اول وب. دیگر نه نگرانی دارد، نه نصب می‌خواهد نه آپدیت می‌خواهد نه اصلا هک شدنش مهم است. خب شاید بگویید کجای این شد راه حل؟ الان شرح می‌دهم. خیلی وقت‌ها ما فقط نیاز داریم تا در یک صفحه خودمان یا پروژه‌مان یا یک ایده یا گروه را معرفی کنیم. تصور کنید من می‌خواهم اطلاعات تماس خودم را در اینترنت بگذارم یا یک صفحه برای معرفی گروه کوچک خودم و دوستانم بسازم. یا پروژه‌ای دارم که نیاز است شرحی از آن به همراه لینک دانلودش را در اینترنت قرار بدهم. در این موارد تنها چیزی که برای ما مهم است قرار دادن مطالبمان در اینترنت است. تهیه یک هاست و به جان خریدن دردسرهایش برای همچنین مواردی نمی‌ارزد. پس چه بهتر که از آنچه در اینترنت هست استفاده کنیم و خیالمان را از بابت رسیدگی به وبسایت راحت کنیم. در ضمن سرعت انجام کار در روش ما خیلی بالاست. ما نیازی به تماس گرفتن با ارائه دهندگان هاست نداریم و دیگر هم نیازی نیست برای فعال کردن فلان قابلیت خاص که فلان سیستم مدیریت محتوا نیاز دارد با آنها تماس بگیریم یا مدت زمان مدیدی منتظر پاسخ‌ تیم پشتیبان آنها بمانیم. دیگر هم هر چند وقت یکبار ایمیل دریافت نمی‌کنیم که هاست شما تا فلان روز منقضی می‌شود و باید فلان‌قدر پرداخت کنید و مانند اینها. از همه اینها گذشته وقتی سایت ما روی صفحات گیت‌هاب قرار بگیرد یک شرکت شناخته شده مسئولیت نگهداری از وبسایت ما و انتشار محتوای آنرا بر عهده خواهد داشت.

پیش‌نیازها

• یک حساب کاربری در گیت‌هاب
• یک کامپیوتر مجهز به Git و Jekyll
• یک حساب کاربری در Disqus (اختیاری)
• یک دامنه ثبت شده (اختیاری)

نکته اول. در این روش ما هاست نمی‌خریم پس کل مشکلات هاست که به آنها اشاره کردم را فراموش کنید، خداحافظ هاست! نکته دوم. ما وبسایتمان را روی گیت‌هاب قرار می‌دهیم و عملیات ذخیره و نگهداری تاریخچه تغییراتمان را به گیت‌هاب محول می‌کنیم. نکته سوم (اختیاری). برای فعال کردن کامنت از یک سرویس‌دهنده سوم مثل Disqus استفاده می‌کنیم و وظیفه نگهداری از نظرات و کامنت‌های کاربران را به او محول می‌کنیم. نکته چهارم (اختیاری). بکارگیری دامنه یا زیردامنه شخصی برای نمایش وبسایت ساخته شده.

نحوه راه‌اندازی

در این روش ما از امکانات سکو( پلتفرم) گیت‌هاب برای نگهداری و از صفحات گیت‌هاب انتشار وبسایت خودمان استفاده می‌کنیم فرض من بر اینست که خواننده با گیت و گیت‌هاب آشنایی ابتدایی دارد.اگر با گیت‌ آشنا نیستید توصیه می‌کنم با مراجعه به صفحه آموزش گیت‌هاب و صرف ۱۵ دقیقه وقت با امکانات گیت آشنا شوید چرا که یادگرفتن گیت (و گیت‌هاب) به مجالی جداگانه نیاز دارد و از حوزه این مقاله خارج است. فعلا همین بس که بدانید در حال حاضر گیت‌هاب بزرگترین مخزن نرم‌افزارهای متن‌باز دنیاست و امکانات گیت را به صورت گرافیکی به کاربر ارائه می‌کند. در گیت‌هاب هر کاربر می‌تواند هر تعداد دلخواه مخزن نرم‌افزاری (ریپوزیتوری) ایجاد کند. ما هم برای وبسایتمان یک مخزن ایجاد می‌کنیم. نکته اینجاست که گیت‌هاب اجازه می‌دهد به ازای هر مخزن یک وبسایت تحت دامنه ‍‍‫username.github.io/projectname ایجاد کرد که در حقیقت برای مستندات پروژه در نظر گرفته شده است ولی برای ما مستندات پروژه همان خود پروژه است! یعنی وبسایت. روش گام به گام اینکار را در ادامه شرح می‌دهم. اول به یک حساب کاربری روی گیت‌هاب احتیاج داریم. اگر ندارید همین الان با مراجعه به گیت‌هاب یکی بسازید! در مرحله دوم یک مخزن جدید می‌سازیم. برای اینکار کافیست روی علامت + در صفحه اصلی کلیک کنیم و یک نام برای مخزن جدید انتخاب کنیم. در صفحه ایجاد مخزن جدید گزینه‌ای هست برای افزودن فایل README به پروژه، آنرا هم انتخاب کنید. بعدا می‌توانید شرح کوتاهی در مورد سایت یا پروژه‌تان آنجا بنویسید. من یک مخزن بنام myweblog ایجاد کردم. البته برای ساخت مخزن جدید چند راه وجود دارد که من ساده‌ترین را گفتم. بعد از اتمام کار گیت‌هاب صفحه این مخزن را نمایش می‌دهد، آدرس این مخزن هم در ستون سمت راست قابل مشاهده است. برای من آدرس اینگونه است:

https://github.com/mehdisadeghi/myweblog.git

توجه کنید که ما فایل‌های وبسایتمان را مستقیما در شاخه اصلی قرار نمی‌دهیم. گیت‌هاب فقط فایل‌هایی را در وبسایت هر پروژه منتشر می‌کنید که در یک شاخه بنام gh-pages منتشر شوند. بنابراین ما شاخه‌ای به این نام ایجاد می‌کنیم. اینکار براحتی از رابط گرافیکی سایت و با کلیک روی نام شاخه جاری امکانپذیر است. من اینجا در ترمینال اینکار را انجام می‌دهم. ابتدا یک کپی از این پروژه را دریافت می‌کنیم:

$ git clone https://github.com/mehdisadeghi/myweblog.git

و شاخه gp-pages را می‌سازیم و همزمان به آن سویچ می‌کنیم (با بکارگیری فلگ -b):

$ cd myweblog
$ git checkout -b gh-pages

حالا اولین فایل سایتمان را می‌سازیم:

$ echo “Hello World!” > index.html

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

$ git add index.html
$ git commit -m “First commit”

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

$ git push origin gh-pages

تبریک! همین حالا شما اولین صفحه وبسایت خودتان را روی سکوی گیت‌هاب منتشر کردید! باور نمی‌کنید؟ بعد از یکی دو دقیقه به آدرس سایتمان سر بزنید.

امیدوارم هیجان‌زده شده باشید! خوب است بدانید که هر کاربری در گیت‌هاب می‌تواند یک صفحه خاص نیز با آدرس username.github.io‌ داشته باشد. برای اینکار کافیست تغییرات کوچکی در روش بالا ایجاد کنید. اول اینکه نام پروژه‌ای که در گیت‌هاب می‌سازید باید مطابق فرم username.github.io‌ باشد. مثلا برای من نام این پروژه باید mehdisadeghi.github.io باشد و البته دیگر هم نیازی هم نیست که شاخه gh-pages را بسازید. پس خط مربوط به ساخت این شاخه هم حذف می‌شود. محتویات این مخزن مستقیما در صفحه شما منتشر خواهد شد:

$ git clone https://github.com/mehdisadeghi/mehdisadeghi.github.io.git
$ cd mehdisadeghi.github.io/
$ echo “Hello World!” > index.html
$ git add index.html
$ git commit -m “First commit”
$ git push origin master - دقت کنید که اینجا شاخه مستر را پوش می‌کنیم چون شاخه دیگری نساختیم

نام کاربری و کلمه عبور را وارد کنید و تمام. حالا صفحه شما در آدرس http://username.github.io در دسترس خواهد بود (برای من می‌شود http://mehdisadeghi.github.io).

نحوه بروزرسانی

این قسمت لذت‌بخش‌ترین جای کار است! تغییرات را روی کامپیوتر خودتان انجام بدهید. کامیت کنید. پوش کنید و تمام. ظرف چند دقیقه وبسایت آپدیت خواهد شد. شما می‌تواید فایل‌های رایج وب را به مخزن خودتان اضافه کنید. در این باره در قسمت دوم بیشتر خواهیم گفت.

روشی که طی این مقاله شرح دادم بیشتر کاربران فعلی گیت‌هاب و برنامه‌نویسان را هدف قرار می‌دهد که با گیت‌ احساس راحتی می‌کنند و دوست دارند از آن همه جا استفاده کنند حتی برای وبسایتشان! برای من این روش خاص‌تر از سیستم‌های مدیریت محتواست و مثل یک سرگرمی و بازی می‌ماند. دست هم در تغییر محتوا باز است و روش انجام کار هم خیلی سرراست است. در قسمت دوم مقاله به موارد زیر خواهیم پرداخت:

• استفاده از دامنه دلخواه برای نمایش صفحات گیت‌هاب
• نحوه کار با جِکیل
• افزودن کامنت به سایت با کمک Disqus

جِکیل

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