איך האתר הזה עובד מאחורי הקלעים? איך האתר בנוי? איך קובץ טקסט הופך לעמוד באתר? איך התקבלו החלטות עיצוביות?
קולופון
השם המקצועי של דף מסוג זה הוא ‘קולופון’. משתמשים בו באתרי אינטרנט כדי להסביר איך האתר נבנה, מה גורם לו לעבוד מבחינה טכנית, למה הוא נראה כפי שהוא נראה ואיך התקבלו ההחלטות שהובילו לתוצר הסופי מבחינה ויזואלית והתנהגותית. מה קורה מתחת למכסה המנוע, בגדול.
איך האתר בנוי
האתר בנוי על Quartz - מחולל אתר סטטי [SSG] מהיר ומוכן מהקופסה אשר ממיר קבצי Markdown לאתר אינטרנט חי שעוצב והותאם אישית יתר על המידה.
התהליך עצמו די פשוט:
- נכון לעכשיו אני כותב ועורך ב Notion.
- מייצא את הדף כקובץ מסוג Markdown [.md]
- שומר את הקובץ בתיקיית התוכן של האתר [content /he או /en]
- כל שינוי מתועד ע”י Git - אני מבצע git add < git commit > git push
- כל הקבצים מאוחסנים במאגר ב GitHub - אשר משמש כמאגר הקוד המרכזי של האתר.
- בשלב זה Cloudflare Pages מזהה את השינויים ומטרגר את Quartz לפעולה באופן אוטומטי.
- הקסם מתרחש - Quartz ממיר את קבצי ה Markdown ל HTML סטטי.
- האתר עולה לאוויר באמצעות Cloudflare ותוך דקות התוכן חי באתר על הדומיין.
אין מערכת ניהול תוכן, אין מסד נתונים, אין ממשק אדמין, אין עוגיות, אין מעקב קיצוני - הכל מתחיל ונגמר בקבצי טקסט שמומרים לאתר סטטי. בנוסף, הנה תרשים זרימה קצר, כי למה לא:
Notion → Markdown file → git push → Git repository → GitHub → Cloudflare Pages → Quartz build → Live Website
כמה הערות חשובות:
א. Quartz מחולל אתר סטטי. זו האפשרות הטובה ביותר מכל בחינה עבור אתר מהסוג הזה - בנייה סטטית משמעותה שאין יצירת דפים בזמן גלישה ואין מסד נתונים או שרת שמרנדר את הדפים בזמן אמת - כל דף נטען ומוכן מראש, מה שהופך את האתר למהיר בצורה יוצאת דופן.
ב. ה-URL של רוב הדפים באתר מכיל את השפה, הסוג והשם: /{lang}/{type}/{slug}. המבנה הזה נעול ונבחר בקפידה [ולאחר מחקר של יותר מדי שעות שהתפרסו לאורך כמה ימים] ובמטרה לשרוד לטווח ארוך. כל שינוי עתידי יחייב הפניות מחדש [redirects 301] ידניות.
ג. מבחינת מעקב, נכון לעכשיו האתר אינו משתמש בכלי אנליטיקה כלשהם. אם אוסיף כזה בעתיד, ככל הנראה אשתמש ב- Plausible Analytics אשר נתמך ע”י Quartz באופן מובנה. מדובר בכלי מדידה ממוקד פרטיות שאינו משתמש בעוגיות, אינו עוקב אחר משתמשים בין אתרים ומספק נתוני תנועה בסיסיים בלבד.
החלטות כלליות
1. החזון המקורי
תחילה הקמתי את האתר בוורדפרס. די במהרה הבנתי שזה לא השביל הנכון לצעוד בו. עצרתי הכל ועוד לפני שבחרתי טכנולוגיה אחרת להקמת הפרויקט, כתבתי לי בהרחבה את כל הצרכים הטכנולוגיים שיכולתי להעלות ברוחי, לפניכם רשימה קצרה שנערכה לשם נוחות הקריאה של מה שכתבתי באותה עת. רציתי שהאתר יהיה:
- ציבורי
- נוח לקריאה
- מהיר במיוחד
- מינימליסטי ונקי
- קל לכתיבה ופרסום
- מצב כהה ומצב בהיר
- היררכיית קישורים חכמה
- נוח לשימוש במחשב, בטאבלט ובטלפון
- פופ-אפים עבור לינקים חיצוניים ופנימיים
- גרף המציג קישוריות בין דפים באופן ויזואלי
- כזה שלא דורש ממני להילחם בכלי כדי לכתוב
- שליטה מלאה על עיצוב והתאמה אישית של האתר
בנוסף, כתבתי על סוגי התכנים שרציתי שיהיו באתר - מספר דפים מרכזיים ובהם:
ספריה הכוללת ספרים, מאמרים, תמונות, פודקאסטים, סרטים, סדרות וקבצים נוספים. עמודים עבור שאלות, ציטוטים, פתקים, רעיונות. רשומות של אנשים, ניסויים-עצמיים, מאמרי מחקר מפורטים ומעמיקים.
מבחינת קטגוריות ותגים, מטרתי הייתה:
לבנות היררכיה חכמה וחזקה שתחזיק לטווח ארוך על גבי אתר א ינטרנט אחד המאגד את הכל בצורה נוחה, נקייה - גם עבורי להעלאת תכנים וגם עבור הקורא. UX/UI שהוא לא פחות מפיקסל-פרקפט גם במובייל וגם בדסקטופ. תומך ב 2 שפות: אנגלית ועברית, עם פוטנציאל לשפות נוספות בעתיד.
2. למה דווקא Quartz?
לקח לי הרבה יותר זמן ממה שאני מוכן להודות למצוא את הסטאק הנוכחי, קבלת החלטות היא לא הצד החזק שלי. הפעם הרשיתי לעצמי לקחת את הזמן מכיוון ומדובר בפרויקט של עשורים קדימה.
עוד לפני שבכלל נתקלתי ב-Quartz, בחנתי מס’ אפשרויות וביניהן:WordPress, Ghost, Astro, Hugo, GitBook, Obsidian Publish, Digital Garden, Jekyll, Eleventy ועוד. למזלי בנקודה הזו הייתה לי תמונה כללית על האיך האתר אמור להראות במבט-על, לאחר מחקר ויצירת המון טבלאות יתרונות-חסרונות עם Claude Opus 4.7, הסתמכתי על מה שמתואר בסעיף הראשון של החזון המקורי והצלחתי לצמצם את האפשרויות.
בשלב זה הבחירה הייתה די ברורה, הבנתי כי Quartz עונה על הרוב המוחלט של הדרישות והרצונות שלי כבר מהקופסה, ברמה די קיצונית האמת. אין לי מילים לתאר על כמה אני מודה ל Jacky Zhao על הקמת הפרויקט ויצירתו כ Open-Source. תודה לך איש זר ויקר במיוחד! כדי שבאמת תבינו עד כמה הרגע הזה היה משמעותי בחיי, הנה קטע קצר שנערך קלות ממה שכתבתי לעצמי לאחר הגילוי:
אני במקלחת כותב יומיים אחרי
רק רוצה להזכיר לעצמי העתידי את ההרגשה של אותו לילה [ביום שגיליתי את הקונספט של גינות דיגיטליות יותר לעומק] יותר ספציפית לאחר שבניתי במשך סופש שלם ללא הפסקה אתר בוורדפרס והרגשתי שזה לא הולך להתאים, תסכול נוראי.
למזלי ‘נתקלתי’ ב Quartz - בול בפוני למה שחיפשתי(!) , מעין תחושת אאוריקה ואופוריה קיצונית שלא הרגשתי שנים.. תחושה באמת פאקינג מפליאה.
התחושה של ההבנה עד כמה הפרויקט הזה באמת משמעותי עבורי - אפילו משימת חיי ברמה מסוימת. איך הוא מחבר בין כל כך הרבה תחומים מחיי בבת אחת - בדיוק מה שחיפשתי ורציתי כל הזמן…
ההתאמה הייתה קיצונית - הרי זה בדיוק מה שרציתי. בול. זה בדיוק… חיוך שלא ירד מהפנים
…עליתי על הרכב לסיבוב ופשוט הייתי בתדהמה אופורית למשך כמה דקות.
3. עיצוב וחוויית משתמש
האתר בנוי סביב רעיון מרכזי אחד: חוויית גלישה זורמת ונוחה המאפשרת חקירה, עיון ושיטוט בין תכנים שונים. המטרה היא שגם הקורא שמגיע לאתר לראשונה וגם אני כיוצר האתר נוכל לנווט בו בקלות, במהירות ובאופן אינטואיטיבי - בין אם בקריאת מאמר במובייל, במציאת תכנים קשורים דרך הגרף או סרגל הצד, או במעבר אקראי מדף אחד לאחר.
השתדלתי לצמצם רעשים ככל הניתן. העיצוב הוא מרכיב מהותי במיוחד בעיניי, במיוחד בפרויקט מהסוג הזה - טיפוגרפיה, מרווחים, פלטת צבעים, ניווט, התנהגות הממשק - כל אלו משחקים תפקיד משמעותי עבור חווית הקריאה ועבור תחושת השוטטות שאני רוצה בה. כל אלו אמורים לשרת את התוכן - הם חלק בלתי נפרד ממנו.
3.1 טיפוגרפיה
בעברית:
- כותרות: Open Sans Hebrew Condensed
- לטקסט: Noto Sans Hebrew
באנגלית:
- כותרות: Barlow Condensed
- טקסט: Inter
לקוד: IBM Plex Mono
3.2 צבעים
האתר כולל מצב כהה ומצב בהיר. המצב הכהה קיבל הרבה יותר תשומת לב. זאת פשוט הדרך שבה אני משתמש באתר בעצמי. אגב, מי אתם אנשים שמעדיפים מצב בהיר? למה?
הרקע אינו שחור מוחלט אלא כחול כהה מאוד. גם צבע הטקסט אינו לבן מוחלט אלא בעל גוון קל של אפרפר-תכלת - זה פחות אגרסיבי לעיניים לאורך זמן ולמיטב הבנתי הדרך המומלצת ע”י כותבים בתחום ומומחי UX/UI - לבן מוחלט על שחור מוחלט לא אידאלים וגורמים למאמץ עיניים לאורך זמן.
3.3 שתי שפות
אני כותב באופן טבעי גם בעברית וגם באנגלית. חלק גדול מהפתקים הפרטיים שלי נכתבו באנגלית. חלק גדול מהמחשבות החדשות נכתבות בעברית. חלק מהם משולבים. במקום לבחור שפה אחת, החלטתי לאפשר לשתיהן להתקיים במקביל. לא כל רעיון יופיע בשתי השפות, כן אשתדל לתרגם הכל בסופו של דבר.
בנוסף, אנגלית פותחת את האתר גם עבור הקורא הגלובלי - שזה כשלעצמו יתרון עצום. העברית שומרת על הטון הטבעי לקהל ישראלי דובר עברית. האתר בנוי עם בנייה נפרדת לכל שפה: stamadam.com/he לעברית, stamadam.com/en לאנגלית. כל שפה עצמאית - פונטים, כיווניות, תוכן.
בנוסף, ברוב המקרים הדף ייכתב בשפה אחת במקור ולאחר מכן אתרגם אותו. אני לא רואה צורך לתרגום באופן ידני - התרגום יתבצע באמצעות מחולל שפה ואשתדל לשמור על סגנון הכתיבה כנאמן לטקסט המקורי ככל האפשר, לאחר מכן אעבור על הטקסט על מנת לבצע שינויים ממוקדים.
3.4 מובייל
האתר הותאם בקפידה לקריאה נוחה במובייל - כנראה שרוב בני האדם יתקלו באתר כשהם גולשים באמצעות הטלפון הנייד שלהם ולכן זה חשוב במיוחד. עם זאת, למרות ההתאמות שביצעתי למובייל - אני כן ממליץ לקורא הנלהב להשתמש באתר דרך המחשב. החוויה של האתר, של הקריאה ושל הדפדוף לשם חקר וגישוש בין מאמרים הרבה יותר מהנה ונוח.
במובייל תוכלו למצוא בכל דף 2 כפתורים בתחתית, אחד בצד ימין והשני בצד שמאל - הראשון לשם פתיחת סרגל הצד בו יש את סייר התכנים הראשי והגרף - והשני לשם שימוש בשש הפונקציות המועילות ביותר: בחירת שפה, שינוי ערכת נושא, חיפוש באתר, תוכן עניינים, מעבר לדף אקראי ודפים מקשרים.