ניהול תגובות באמצעות staticman

3 באוקטובר 2020 staticman11ty

בפוסט הקודם הסברתי איך לייבא את התגובות הישנות מ Wordpress ל-11ty. בפוסט הזה, אראה איך להתקין שרת Staticman, ואיך לחבר אליו את טופס התגובות באתר.

Staticman logo Staticman logo by Erlen Masson

גם הפעם הסתמכתי על מדריך קיים שחיבר Travis Downs עבור שילוב Staticman בבלוג מבוסס Jekyll. בסופו של דבר, ביצעתי את השלבים הבאים:

  1. יצירת חשבון בוט ב GitHub (לגמרי לפי המדריך הנ"ל)
  2. הגדרות staticman.yml (גם כן לפי המדריך)
  3. הגדרות staticman בתוך src/globals/site.json. כאן יש הבדל לעומת המדריך, מכוון שקובץ זה יחודי ל 11ty, ובמדריך ההתיחסות היא לסביבת Jekyll. בכל מקרה, העקרונות דומים, וכאן תוכלו לראות את ההגדרות שלי.
  4. הקמת שרת staticman. אחרי יצירת המפתחות, בחרתי בדרך שונה מהמומלץ (הקמה דרך Heroku), ובמקום זה העלתי שרת עצמאי שרץ דרך docker. בניגוד למוסבר בדקומנטציה, כאן יש חוסר בתיעוד המקורי, ויש לזכור להגדיר את מפתחות ההצפנה בקובץ docker-compose.yml
  5. הזמנת הבוט להשתתף ב repo (ע"פ המדריך)
  6. הפעלת reCAPCHA - בעיקר על פי המדריך. יש לשים לב שבחלק המתייחס ל ‎_config.yml יש לבצע את השינויים במקום זאת ב src/globals/site.json
  7. שילוב התגובות באתר. כאן ההבדלים מעט יותר משמעותיים, הן בגלל ההבדלים בין Jekyll ל-11ty, והן בגלל הרצון שלי לתמוך בקינון מעבר לרמה אחת. בנוסף, לא אהבתי את ה JS של הפוסט המקורי שמשתש במעורב ב jQuery ו-Vanilla JS. במקום זה השתמשתי בספריה רזה יותר בשם cash, שמאפשרת סינטקס דמוי jQuery במחיר של תמיכה בפחות פיצ'רים ופחות דפדפנים ישנים (אבל עדיין תומכת ב IE11). על הצגת התגובות כתבתי בפוסט הקודם. העבודה על טופס התגובות החדשות מסתכמת בסופו של דבר בקבצי ה HTML, CSS, ו-JS אותם תוכלו לראות ב repo הסופי.

מוזמנים להגיב למטה ולראות איך כל ה flow עובד. עד לאישור, תוכלו לצפות בתגובות שלכם באזור ה Pull Requests של הבלוג.

מוורדפרס ל-11ty

1 באוגוסט 2020 NunjucksComments11tyוורדפרס

אז אחרי שמחליטים על מעבר ל-11ty, צריך לדאוג לשמר את תוכן הפוסטים והתגובות.

בשלב הראשון של המעבר יש צורך ליצא את כל התוכן מוורדפרס ל-Markdown. לטובת זה השתמשתי בפלאגאין לוורדפרס שפותח דווקא עבור Gatsby ונקרא: WP Gatsby Markdown Exporter. בקישור ניתן לקרוא כיצד להפעיל אותו. אני השתמשתי באופציית ה WP-CLI. משום מה הייתה לו בעיה ליצא את התמונות, ולכן הפעלתי את האופציות שמנטרלות את החלק הזה. הפקודה הסופית הייתה:

wp gatsby-markdown-export --skip_copy_uploads --skip_original_images --directory=/var/www/html/md-export

זה מייצר אוסף של קבצי Markdown, שנראה בערך ככה:

היררכיית קבצים לאחר היצוא מוורפרס

שמות הקבצים בכל תיקייה נלקחים מה slag, ולמזלי הקפדתי לאורך השנים להשתמש בשמות באנגלית, כך שכעת קל למצוא את הפוסטים לפי שנה, חודש וה slag.

בשלב הבא בחרתי ב starter project מתוך דף התבניות של Eleventy. המבחר די דל, ואין עדיין אף תבנית מותאמת עברית. לבסוף, בחרתי בתבנית 11r. זוהי תבנית dark mode, ומבוססת Tailwind CSS, ורוב היפוכי הכוון הגיעו out of the box, ברגע שהוספתי dir=rtl לתגית הראשית של הדף. את התוצאה אחרי הגיור תוכלו למזלג מהריפו שלי. את הפוסטים בהיררכיה המקורית מעלים לתיקיית src/posts, ואחרי מעקב אחרי ההוראות בREADME, אפשר לראות את התוצאה.

החלק היותר מורכב בתהליך הוא תמיכה בתגובות. כאן עדיין אין פתרון בית-ספר, ונאלצתי לאלתר מכמה מקורות. הבעיה הבסיסית היא שאתר סטטי מטיבו אינו מאפשר הוספת תוכן דינמי כמו תגובות. אחד הפתרון האפשריים הוא שימוש בתוסף צד שלישי כמו Disqus, אבל הדעה המקובלת בקרב בעלי האתרים הסטטים הוא שזה לא לעניין, הן בגלל תוספת הקוד לכל דף, והן בגלל טענות על הפרת פרטיות של משתמשי המערכת.

האפשרות שאני בחרתי בה היא שימוש ב Staticman. הרעיון כאן הוא שכל תגובה היא בעצם קובץ שנשמר גם כן בgit, ומנגנון אישור התגובה נעשה באופן דומה לאישור Pull Request. המנוע של Staticman דואג לייצר את ה PR-ים, כך שמבחינת המשתמשים באתר שליחת התגובה מתבצעת באמצעות טופס על הדף, בדומה לוורדפרס.

בנוסף לזה, יש צורך לייבא ולשמר את התגובות מהבלוג הישן. כאן השתמשתי בכלי שבמקור נכתב לטובת העברת תגובות לאתרים סטטים מבוססי Jekyll. נדרשו שינויים קלים, אבל בסופו של דבר גם כאן זה מסתכם בהרצה לפי ה README, והוספה של כל קבצי התגובות תחת התיקיה src/globals/comments כך שכל התגובות לפוסט מסויים מרוכזות תחת תיקיה לפי ה slag של הפוסט. מי שמעוניין יכול לקרוא עוד על מודל הנתונים של Eleventy.

התוספת האחרונה היא מעט קוד שידע לשלוף את התגובות המתאימות לכל פוסט ולהציג אותן לפי ההיררכיה המקורית. הקוד הזה מחולק בין קוד JS, שאותו ניתן למצוא ב /filters/comments-tree.js ונראה כך:

module.exports = (obj) => {
const allComments = obj ? Object.values(obj) : [];
const commentsById = {};
allComments.forEach(c => {
c.id = c.id || c._id;
commentsById[c.id] = c;
});
const rootComments = [];
allComments.forEach(c => {
if (c.parentId && c.parentId !== "0") {
const parent = commentsById[c.parentId];
if (parent) {
parent.replies = parent.replies || [];
parent.replies.push(c);
} else {
console.error(`can't find parentID: ${c.parentId} for ID: ${c.id}`);
}
} else {
rootComments.push(c);
}

});
return rootComments;
};

והחלק המשלים שנמצא בתבנית התגובות src/includes/comments.njk. על ריקורסיה ב nunjucks למדתי מהissue הזה. עכשיו ניתן לראות גם את התגובות בהתאם לדו-שיח שנוהל בזמנו:

תגובות משורשרות

בפוסט הבא ארחיב על הכנת הטופס לתגובות והאינטגרציה עם הבוט של Staticman.

11ty

31 ביולי 2020 SSG11tyבלוג

המעבר לשרת חדש גרם לי לחשוב שוב על WordPress והאם הוא עדיין מתאים לבלוגים ב-2020. כאשר התחלתי את האתר, PHP הייתה אחת משתי שפות התכנות המובילות לווב (יחד עם העולה החדש דאז Ruby on Rails). מאוחר יותר זו גם הייתה שפת התכנות בה עבדתי, וזה נראה לי טבעי להמשיך איתה. מאז עברתי לסביבה חדשה מבוססת NodeJS, ו-PHP נראית לי כמו עוף מוזר (שלא לאמר דינוזאור).

אחרי בחינה של מספר אפשרויות, הגעתי למסקנה שהנתיב הטבעי להמשך הוא Static Site Generators (SSG). הרעיון כאן הוא ליצר את קבצי ה HTML של האתר מתוך התכנים הדינמיים, ומכאן והלאה ההגשה לדפדפן נעשית של קבצים סטטיים בלבד. מתוך המגוון הגדול של האפשרויות, בחרתי את Eleventy (או בקיצור 11ty). הוא מבוסס NodeJS, ויחסית לאחיו הוותיק יותר (Gatsby), הוא פחות אפליקציה ויותר SSG טהור.

ייצור האתר נעשה ע"י הגדרת תבניות והפעלה שלהן על תוכן האתר שהוא קבצי Markdown. את קבצי התוכן שומרים ב git יחד עם הקוד של האתר, כך שנוצר סוג של בלבול בינהם. כדי לבצע את ההפרדה בצורה טובה יותר וגם בגלל התמיכה הבעייתית של Markdown בעברית, בחרתי להשתמש ב Headless CMS: מערכת ניהול תוכן, שבה כתיבה התכנים מנותקת מההצגה שלהן (בניגוד ל WordPress שבה העריכה והתצוגה נעשים באותה מערכת). הרעיון כאן הוא לאפשר לכותבי תוכן שאינם מכירים קוד או אפילו Markdown לערוך את התוכן דרך עורך יעודי (סטייל WordPress), כאשר הקבצים נשלחים מהעורך אל ה git-repo. יתרון משמעותי ליושבים בציון (ובשאר המזרח התיכון) הוא האפשרות לתמיכה הרבה יותר טובה בעריכה ב-RTL.

ל Headless CMS בחרתי את Forestry (ישנן אלטרנטיבות נוספות כמו: Contentful, Netlify CMS), שנראית לי הנקייה ביותר לשימוש. בניגוד ל Contentful, אין לה תמיכה מובנית ב-RTL, אבל באמצעות תפריט "הפוך כוון כתיבה" של Firefox, אפשר לערוך את התוכן בקלות. ל Forestry יש גם תמיכה נוחה בעריכת ה meta-data של הפוסטים (כותרת, קטגוריות וכד'), כך שמקבלים כמעט חוויה מלאה של עורך תוכן משולב, כמו שניתן לראות כאן:

לצורך השוואה, כך נראה ה Markdown של אותו הפוסט ב GitHub:

אז איך עושים את המעבר? על כך בפוסט הבא.

עוברים דירה

18 ביולי 2020 DockerHostingוורדפרסלינוקסקוד פתוח ותוכנה חופשית

Docker אחרי שלוש שנים שבהן האתר הזה רץ מעל שרות האחסון של Scaleway, קיבלתי מהם הודעה שהחומרה שעליה אני רץ (dual core ARM CPU, 2GB RAM, 50GB SSD) תפסיק לעבוד בעוד מספר חודשים. הם הציעו לי לעבור באותו מחיר לשרת VPS מבוסס אינטל, אלא שעוד לפני שהספקתי להגיב, קיבלתי את המכתב שזו כותרתו: We’re evolving our Instances prices, או בתרגום חופשי: נמאס לנו להיות הכי זולים בשוק, אז נעלה את המחיר ב 66%.

החלטתי שזה הזמן לחפש שרות אכסון חדש, והגעתי דרך חבר לעבודה ל OVHcloud. השרת הבסיסי נראה על הנייר חלש יותר (מעבד אחד בלבד ודיסק קטן יותר), אבל בבדיקות ביצועים בשטח הוא משמעותית יותר מהיר. זה מורגש גם בעבודת ההתקנה (פרטים בהמשך) וגם בזמן ריצה, כפי שנמדד ע״י StatusCake. המחיר זהה למחיר (הישן) של Scaleway: שלושה אירו לחודש, בלי התחייבות.

השרת שלי מריץ בנוסף גם שני שרתי node קטנים, כך שהעברת כל הטוב הזה היא לא פשוטה, ולכן החלטתי הפעם ללכת על Docker. למי שלא מכיר את Docker, מומלץ לקרוא את סדרת המאמרים באתר של רן בר-זיק. שם הוא גם מדגים התקנת WordPress. אני בחרתי לעקוב אחרי המדריך של Michael J. Stealey ב GitHub, שממנו גם עשיתי פורק לריפו משלי. המדריך הזה קצת יותר מתאים לסביבה הנוכחית שלי שכוללת MariaDB במקום MySQL, וגם סקריפטים מוכנים לתמיכה ב https, דרך השרות של Let’s Encrypt.

רוב התהליך עוקב אחרי ה README, אבל מכוון שלא התחלתי מאתר חדש כפי שהמדריך מתאר, ביצעתי מספר שינויים, כמו שיחזור של ה DB ומבנה הקבצים מהשרת הנוכחי. זו הייתה טבילת האש הראשונה ל restic שהזכרתי באחד הפוסטים הקודמים והוא הוכיח את עצמו מצויין. שחזור של MySQL שרץ בתוך קונייטנר הוא קצת מורכב, וגם כאן יש לבר-זיק מדריך טוב.

אז נשארו לי כמה קצוות לסגור, כמו חידוש אוטומטי של הסרטיפיקטים ב Let’s Encrypt, והפעלה של גיבויים, אבל בסך הכל נראה שדוקר עושה עבודה טובה, והמעבר הבא יצריך ״רק״:

sudo docker-compose up -d

php 7.4

1 במרץ 2020 nanophpviוורדפרסקוד פתוח ותוכנה חופשיתלינוקס

חלפה למעלה משנה מאז שהתמיכה ב-7.0 php הופסקה, וזה הזמן לשדרג את הבלוג לגרסה 7.4. כרגיל, צריך לקרוא את כל ה breaking changes, אבל אם הבלוג והתוספים מתוחזקים לגרסה העדכנית ביותר, אפשר לסמוך בדרך כלל שהכל יעובד. גיבוי של הקוד והדאטה רצוי גם כן.

את הגיבויים אני מבצע לאחרונה בעזרת restic, כאשר הקבצים מועלים לאכסון (הזול יחסית) של Backblaze B2.

אחרי שמכניסים את הגדרות ל restic למשתני סביבה, סקריפט הגיבוי פשוט למדי:

#!/bin/bash
d=$(date +%Y-%m-%d)
mysqldump -u *** -p *** > ~/backup/sql/yehudab-${d}.sql
gzip ~/backup/sql/*.sql
tar -czf ~/backup/site/yehudab.com-${d}.tar.gz yehudab.com
restic backup ~/backup

לצורך השדרוג, עקבתי אחרי המדריך ב CloudBooklet. מכוון שאני מריץ php דרך ngnix, ביצעתי את הסעיפים הרלוונטים לגרסת fpm.

אה, וכמובן, להשתמש ב vi, כי nano זה לחלשים.

אחרי השדרוג, אני מנסה לשמור את הפוסט הזה ובום error 500. בדיקה מהירה בלוג של nginx על השרת מגלה ששכחתי להתקין את php7.4-memcache שהמדריך הנ"ל לא מחשיב כ common extension. הרצת:

sudo apt install php7.4-memcache

וריסטרט לשרת פתרו את הבעיה.
שדרוג

2020

31 בדצמבר 2019 TwentyTwentyוורדפרס

2020 שנה חדשה היא הזדמנות טובה להחלפת תבנית. אז ברוכים הבאים ל-2020, או כמו ש WordPress קוראים לה: TwentyTwenty.

התבנית קצת יותר ״חמה״ לעומת TwentyNineteen המינימליסטית שבה השתמשתי קודם. התרגום לעברית והתמיכה בכיווניות זקוקים לקצת ״שיוף״, אבל התבנית לגמרי שימושית כפי שהיא.

אז שתהיה לכולם שנה טובה ועשור טוב. מקווה (הפעם באמת) ליצור תוכן מעניין יותר במהלך השנה.

Image license: CC BY-NC 4.0 pngall.com

(דף 1 מתוך 11)