ساخت وب سایت شخصی با پایتون، پلیکان و گیت‌هاب – بخش اول
به عنوان یک فعال حوزه علم داده نیاز خواهید داشت با دو ابزار کاربردی این دو حوزه یعنی پایتون و گیت آشنا باشید. ضرورت آشنایی با پایتون به عنوان رایجترین زبان علم داده نیازی به توضیح ندارد. گیت هم به عنوان ابزاری برای نگهداری تاریخچه تغییرات بر روی کدهای نوشته شده و فراهم آوردن امکان کار گروهی از طریق سایتهای هاست کد مانند گیت‌هاب، گیت‌لب و بیت‌باکت یک ابزار دم دستی و بسیار کارآمد است.
یکی از امکانات بسیار خوبی که گیت‌هاب علاوه بر ذخیره کدهای برنامه نویسان و اشتراک آنها فراهم کرده است، امکان ایجاد وب سایتهای استاتیک با زیردامنه دلخواه از github.io است که معمولاً برای توضیح پروژه‌های متن‌باز استفاده می‌شود. از این امکان ساده و موثر، برای ساخت وب‌سایت های شخصی هم بهره گرفته می‌شود. در این سری مقاله، ابتدا نحوه ساخت یک وب‌سایت شخصی با یک فایل خوشامدگویی ساده با گیت‌هاب آموزش داده خواهد و در ادامه، به کمک پایتون و کتابخانه پلیکان، روند تولید محتوا و قرار دادن آنها روی اینترنت را مکانیزه‌تر و حرفه‌ای‌تر خواهیم کرد.
ساخت یک مخزن‌کد در گیت‌هاب
برای ذخیره داده‌ها و فایلهای سایت شخصی خود نیاز به داشتن یک حساب کاربری در گیت‌هاب داریم. اگر احیاناً در این سایت پرکاربرد هنوز حساب کاربری ندارید، یک حساب ایجاد کنید و سپس از منوی بالای صفحه، علامت + و گزینه New repository را انتخاب کرده تا صفحه ساخت یک مخزن کد به شما نمایش داده شود.
دقت کنید که ابتدای نام ریپوزیتوری شما باید دقیقا با نام کاربری شما یکی باشد و پس از آن هم عبارت .github.io ذکر شود. اگر نام کاربری شما در گیت‌هاب عبارتست از rsip22، یک ریپوزیتوری به نام
rsip22.github.io
ایجاد کنید. بهتر است یک توصیف ساده مثلاً «وب سایت شخصی سید مجتبی بنائی» وارد کنید و نوع ریپوزیتوری را public و گزینه
Initialize this repository with a README
برای ایجاد یک فایل Readme.md درون ریپوزیتوری حتما تیک بخورد. برای اینکه فایلهای موقت پایتون که در هنگام کار ایجاد می‌شود به این مخزن کد ارسال شود، Add .gitignore را برابر python گذاشته و نهایتاً لایسنس یا مجوز استفاده مجدد از این مخزن کد را هم طبق توضیحات این آدرس، انتخاب نمایید. تنظیمات نهایی برای نام کاربری smbanaie باید به صورت زیر باشد :
دکمه Create repository را بزنید تا مخزن کد شما ساخته شود.
اگر همه چیز تا الان بدون مشکل پیش رفته باشد، سایت شما باید اکنون آماده و روی اینترنت قرار گرفته باشد! کافیست آدرس متناظر با مخزن کد یعنی نام کامل ریپوزیتوری که یک آدرس وب است را در مرورگر وارد کنید.
صفحه‌ای مشابه زیر باید مشاهده نمایید :
که همان نام ریپوزیتوری و توصیفی است که برای آن وارد کرده‌ایم. همانطور که مشخص است سایت‌هایی که با گیت‌هاب سرویس‌دهی می‌شوند زیر دامنه‌ای از وب سایت github.io هستند.
برای اینکه مکانیزم کار گیت و نحوه کار با آن را به صورت عملی فرا بگیرید(اگر احیاناً با گیت کار نکرده‌اید)، یک صفحه ساده HTML ایجاد کرده و آنرا صفحه اصلی وب سایت خود قرار می‌دهیم. برای این کار باید نرم افزار گیت را روی سیستم خودمان نصب کرده و فرآیند زیر را انجام دهیم :
- نرم‌افزار گیت را از این آدرس دانلود کرده آنرا روی سیستم خودتان با همان تنظیمات پیش‌فرض نصب کنید.
- پوشه‌ای که قرار است فایلهای سایت خود را در آنجا ایجاد کنید، بسازید.
- وارد پوشه شده، کلیک راست کنید و گزینه git bash here را انتخاب کنید.
- با دستور clone به صورت زیر پروژه و مخزن کدی که اخیراً ساخته‌اید را به سیستم خود منتقل کنید :
git clone https://github.com/smbanaie/smbanaie.github.io
نکته : اگر اولین بار است که از گیت در سیستم تان استفاده می‌کنید، ممکن است خطایی مشاهده کنید که نام کاربر و ایمیل آن وارد نشده است. در انتهای این دستور خطا، نحوه وارد کردن ایمیل و نام کاربری آمده است، آن دو دستور را به ترتیب کپی کرده، ایمیل و نام کاربری خود را وارد نمایید و سپس دستورات گیت را اجرا کنید.
- باید پوشه‌ای با نام smbanaie.github.io روی سیستم خود و در همین پوشه‌ای که هستید، مشاهده کنید. پنجره bash یا خط فرمان گیت را ببندید. وارد پوشه شوید و یک فایل با نام index.html با محتوای زیر در آن ایجاد کنید :
<html>
<head> <title> وب سایت شخصی </title></head>
<body dir=rtl>
<h2> علم داده و کاربردهای آن </h2>
<p>به وب سایت مهندسی داده خوش آمدید. در این وب سایت، مطالب مرتبط با علم داده را با هم مرور خواهیم کرد.</p>
</html>
- اگر با نوت‌پد فایل را ایجاد کرده‌اید، حواستان باشد که آنرا با فرمت utf-8 و با پسوند html به صورت زیر ذخیره کنید :
- اکنون باید پوشه مربوط به فایلهای وب‌سایت شما به صورت زیر باشد :
پوشه .git که تمام اطلاعات مرتبط با گیت در آن ذخیره شده است و تاریخچه تغییرات شما را در خود نگه خواهد داشت، یک پوشه مخفی است و ممکن است بسته به تنظیمات ویندوز شما، نمایش داده نشود.
- اکنون باید این فایل جدید و تغییراتی که در سایت خود داده‌ایم را به مخزن کد اصلی منتقل کنیم تا وب سایت ما به روز شود. کاری که باید بعد از هر تغییر در وب سایت و انتشار مطلب جدید هم انجام دهیم. مجدداً در فضای خالی درون این پوشه کلیک راست کرده و گزینه git bash here را انتخاب کنید. حال ابتدا با دستور git add فایلهای جدیدی که ساخته‌اید را برای کامیت شدن یا ذخیره نهایی در گیت، انتخاب کنید (* نشانگر تمام فایلهای تغییر کرده یا تازه اضافه شده در پوشه جاری است). سپس با دستور git commit ، فایلهای انتخاب شده را ذخیره کنید (برای کامیت یا ذخیره نهایی کدها، حتماً یک پیام که نشانگر تغییرات اخیر مخزن کد باشد را حتماً باید وارد کنید). در مرحله بعد، این تغییرات ذخیره شده را با دستور git push به سرور اصلی منتقل خواهیم کرد. ترتیب دستورات به صورت زیر است :
git add *
git commit –m “Adding index.html”
git push
بعد از این مرحله از شما یوزر و پسورد وب سایت گیت‌هاب پرسیده خواهد شد که بعد از ورود آنها، تغییرات ذخیره شده به سرور اصلی گیت‌هاب منتقل می‌شود.
- حال با رفتن مجدد به آدرس https://smbanaie.github.io باید تغییرات انجام شده را مشاهده کنیم :
- اولین صفحه وب سایت خود را ساخته‌اید. اگر با HTML آشنا هستید کافی است در همین پوشه موجود در سیستم خودتان، سایت خود را با ترکیبی از HTML,JavaScript و CSS آماده کنید، مراحل فوق را انجام دهید تا تغییرات ذخیره شده و به گیت‌هاب منتقل شود.
- برای کمی حرفه‌ای تر شدن کار، از این آدرس یک نمونه وب سایت تک‌صفحه‌ای استاتیک را دانلود کنید و داده‌های آنرا عیناً به پوشه وب سایت خود یعنی پوشه smbanaie.github.io (به جای smbanaie نام کاربری شما در گیت‌هاب) منتقل کنید. فایل index.html باید رونویسی و جایگزین شود که پیغام رونویسی ویندوز را تایید کنید. ساختار پوشه شما اکنون باید شبیه به زیر باشد :
حال می‌توانید فایل index.html را با ادیتوری مثل ++NotePad یا SublimeText یا همان نوت‌پد دم‌دستی ویندوز باز کنید و تغییراتی در متن و محتوای آن بدهید، وارد پوشه images شوید و عکس خودتان را جایگزین pic1.jpg کنید و احیاناً تغییراتی در فونت و رنگ و چینش صفحه اول سایت‌تان ایجاد کنید.
حال مجدداً سه دستور زیر را در خط فرمان گیت که با کلیک راست در فضای خالی و انتخاب گزینه git bash here در دسترس شماست، وارد کنید :
git add .
git commit -m “Adding Single Page Web Site”
git push
همانطور که مشاهده می‌کنید به جای * از . (نقطه) در دستور git add استفاده شده است که نقطه در این دستور، نشان‌دهنده پوشه جاری است و به گیت اعلام می‌کند تمام فایلهای تغییر کرده در پوشه جاری و زیرپوشه‌های آن را برای کامیت و ذخیره ، انتخاب کند. پیغام جلوی دستور کامیت که با پارامتر m حتماً باید هنگام کامیت کردن و ذخیره تغییرات وارد شود هم این دفعه تغییر کرده است.
بعد از این مرحله اگر مجدداً آدرس وب سایت شخصی خود را در مرورگر بزنید یا صفحه قبلی را رفرش کنید، صفحه وبی مشابه زیر خواهید دید :
در بخش دوم این مقاله، همین فرآیند تولید صفحات استاتیک وب را به کمک پلیکان که یک کتابخانه ساده پایتون است انجام خواهیم داد، قالب سایت را از بین قالب‌های آماده شده پلیکان، انتخاب و فارسی سازی کرده، محتوای لازم و امکاناتی مانند تماس با ما و گذاشتن نظر و جستجو به آن اضافه خواهیم کرد و با دستورات گیت، آنرا به وب سایت شخصی خودمان منتقل می‌کنیم. در انتها یاد خواهیم گرفت چگونه این وب سایت موجود در دامنه github.io را به یک دامنه ir. متصل کنیم و به جای آدرس سایت github.io نام دامنه رسمی خودمان را در رزومه و بیوگرافی اعلام کنیم.
سلام
جیکیل هم استاتیک ساز خوبی هست
سلام. حق با شماست و اتفاقا توی درس مهندسی نرم افزار وقتی که گیت را آموزش میدادم ، به عنوان تمرین میگفتم با جکیل سایت شخصی بسازن اما چون بحث علم داده است و زبان پایتون تقریبا حرف اول را می زنه ، سوئیچ کردم روی پایتون
الان هم واقعا باهاش راحتم و سایت شخصی خودم را با هر تغییری که دوست دارم ، به راحتی به روز رسانی می کنم.
موفق باشید.
سلام این مقاله خیلی خیلی خیلی عالی هست
واقعاً شاد و سرزنده باشید
حیف نیست که این وبسایتتان که در گیت هاب ساخته اید را با اطلاعاتِ رندم گذاشتید؟! فکر کنم هر کسی که مثل من آموزش شما را دنبال کرده باشه حتماً به آن سایت هم سر می زند
سلام.
خوشحالم که این آموزش برایتان مفید بوده است. حق باشماست . در حال کار بر روی سایت شخصی خودم بودم که الان با داده های چند سال پیش (از سال ۸۹ تا ۹۴) و همچنین داده های جدید، پر شده است.
نحوه افزودن نظر و فعال سازی جستجو و تنظیماتی از این دست را هم در همان سایت شخصی خودم توضیح خواهم داد.
موفق باشید .