איך לפתוח בלוג ג'קיל ולאחסן אותו בחינם על גיטהאב
ערן העביר היום וובינר על ג'קיל והזכיר לי כמה כיף לפתוח בלוגים. אחרי הוובינר המשכתי לשחק עם הכלי עד שהצלחתי לשים משהו באוויר וזה נראה כך:
https://ynonp.github.io/ynonlearnsrussian/
בשביל שיהיה קל לשחזר את ההישג עם בלוגים עתידיים שארצה או שאתם תרצו לפתוח, אני מסכם כאן את הצעדים המרכזיים ביצירת ופתיחת בלוג ואחסונו אונליין בחינם על גיטהאב.
1. התקנת הכלים
בגדול תצטרכו את ג'קיל על מכונת הפיתוח שלכם. ג'קיל הוא ג'ם לרובי לכן בהנחה שיש לכם רובי מספיק להפעיל פעם אחת:
gem install jekyll
ואתם מסודרים.
2. יצירת שלד לפרויקט
הפקודה jekyll new יוצרת בלוג חדש עם מבנה תיקיות יחסית מינימליסטי של ג'קיל:
$ jekyll new <blogname>
אחרי היצירה תוכלו להיכנס לבלוג, לעדכן את הקובץ about.markdown בשביל לשנות את מסך ה"אודות" או את הקובץ index.markdown בשביל לשנות את הדף הראשי. מה שיותר מעניין יהיה שתוכלו ליצור פוסטים באמצעות הוספת קבצים לתיקיית _posts. כל פוסט הוא קובץ ששמו מתחיל בתאריך ולאחר מכן slug, לדוגמא בבלוג שלי הפוסט היחיד שמור בקובץ בשם 2019-10-31-welcome-to-jekyll.markdown. תוכן הקובץ כתוב ב markdown ואחרי שתכנסו לקובץ הדוגמא שג'קיל יצר תראו שזה ממש פשוט לקרוא ולכתוב כאלה.
אחרי שכל השינויים במקום תוכלו להפעיל:
$ jekyll serve
ולקבל שרת מקומי שרץ על localhost:4000 עם הבלוג שלכם.
3. שינוי הקבצים והתאמת העיצוב
הבעיה הראשונה שנתקלתי בה אחרי יצירת הבלוג היא שרציתי לשנות את העיצוב בשביל העברית (ובכלל בשביל החיים). ג'קיל שומר את כל קבצי העיצוב כחלק מה Theme וכברירת המחדל לא מייצר לכם את הקבצים האלה בתיקיית הפרויקט. זה אומר שבשביל לשנות אותם נצטרך קודם לקחת אותם מה Theme אלינו ורק אז נוכל לעדכן.
ערכת נושא ברירת המחדל נקראת minima. הפקודה הבאה מציגה איפה על המחשב שלכם היא מותקנת:
$ bundle show minima
אצלי התוצאה היא:
/Users/ynonperek/.rvm/gems/ruby-2.6.3/gems/minima-2.5.1
נכנסתי לתיקיה ולקחתי את כל הקבצים ממנה לתיקית הפרויקט. אם אתם על לינוקס או מק מספיק להריץ את הפקודה הבאה מתוך תיקיית הבלוג הראשית:
$ cp -R $(bundle show minima)/* .
עכשיו יש לנו כבר המון קבצים בבלוג ואפשר להתאים אותם לצרכים שלנו, לדוגמא ה CSS ישב בקובץ assets/main.scss.
4. העלאה לגיטהאב
החלק המסובך הראשון הוא להעלות את הבלוג שלכם לגיטהאב. השתמשתי במנגנון שנקרא Github Pages שעובד כך:
אנחנו יוצרים פרויקט גיטהאב חדש ובו ענף חדש בשם gh-pages.
אנחנו מחברים את הבלוג שלנו לענף gh-pages בפרויקט.
אנחנו מעדכנים את הבלוג כך שיגיש את כל הנכסים עם ה base הנכון.
אנחנו גולשים לכתובת מיוחדת של github pages כדי לראות את הבלוג.
אני מניח שאתם יודעים ליצור פרויקט גיטהאב חדש (לא יודעים? יש קורס גיט מעולה כאן באתר). אחרי שיצרתם והעליתם את הענף תוכלו להיכנס להגדרות הפרויקט ולגלול למטה, ושם תמצאו קטע שנקרא GitHub Pages בתוכו תמצאו את ה URL לאתר שלכם. אנחנו צריכים לקחת את ה URL הזה בתור base ב html. בשביל זה נכנס לקובץ _includes/head.html ושם נוסיף את האלמנט:
<base href="{{ site.baseurl }}/">
בנוסף בקובץ _config.yml מהתיקיה הראשית של הבלוג נרשום בשדה url את הדומיין דרך גיטהאב בו הבלוג נמצא (אצלי זה https://ynonp.github.io/) ובשדה baseurl נרשום את הנתיב לבלוג, שזה שם הפרויקט (אצלי זה "/ynonlearnsrussian").
שמירה ודחיפה ואם עשיתם הכל נכון תוכלו להנות מהבלוג שלכם בכתובת בה גיטהאב מפרסמים אותו. הקוד המלא לבלוג שלי נמצא כאן למקרה שפספסתם משהו מהסבר הטקסט או שתרצו לקבל עוד רעיונות: