שלום אורח התחבר

איך לפתוח בלוג ג'קיל ולאחסן אותו בחינם על גיטהאב

נושאים:יומי

ערן העביר היום וובינר על ג'קיל והזכיר לי כמה כיף לפתוח בלוגים. אחרי הוובינר המשכתי לשחק עם הכלי עד שהצלחתי לשים משהו באוויר וזה נראה כך:

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 שעובד כך:

  1. אנחנו יוצרים פרויקט גיטהאב חדש ובו ענף חדש בשם gh-pages.

  2. אנחנו מחברים את הבלוג שלנו לענף gh-pages בפרויקט.

  3. אנחנו מעדכנים את הבלוג כך שיגיש את כל הנכסים עם ה base הנכון.

  4. אנחנו גולשים לכתובת מיוחדת של github pages כדי לראות את הבלוג.

אני מניח שאתם יודעים ליצור פרויקט גיטהאב חדש (לא יודעים? יש קורס גיט מעולה כאן באתר). אחרי שיצרתם והעליתם את הענף תוכלו להיכנס להגדרות הפרויקט ולגלול למטה, ושם תמצאו קטע שנקרא GitHub Pages בתוכו תמצאו את ה URL לאתר שלכם. אנחנו צריכים לקחת את ה URL הזה בתור base ב html. בשביל זה נכנס לקובץ _includes/head.html ושם נוסיף את האלמנט:

 <base href="{{ site.baseurl }}/">

בנוסף בקובץ _config.yml מהתיקיה הראשית של הבלוג נרשום בשדה url את הדומיין דרך גיטהאב בו הבלוג נמצא (אצלי זה https://ynonp.github.io/) ובשדה baseurl נרשום את הנתיב לבלוג, שזה שם הפרויקט (אצלי זה "/ynonlearnsrussian").

שמירה ודחיפה ואם עשיתם הכל נכון תוכלו להנות מהבלוג שלכם בכתובת בה גיטהאב מפרסמים אותו. הקוד המלא לבלוג שלי נמצא כאן למקרה שפספסתם משהו מהסבר הטקסט או שתרצו לקבל עוד רעיונות:

https://github.com/ynonp/ynonlearnsrussian/tree/gh-pages

מעדיפים לקרוא מהטלגרם? בקרו אותנו ב:@tocodeil

או הזינו את כתובת המייל וקבלו את הפוסט היומי בכל בוקר אליכם לתיבה:


נהניתם מהפוסט? מוזמנים לשתף ולהגיב