DanLevy.net

לקחים משדרוג הבלוג שלי

Astro, Tailwind, MDX, Pagefind, ועוד!

לאחרונה יצאתי למסע לשדרוג האתר שלי מבוסס Gatsby v1, בן יותר מ-8 שנים.

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

תוכן עניינים

דרישות הפרויקט

לפני הצלילה לשדרוג, קבעתי סט דרישות:

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

כמו כן, הייתי צריך לשמור על התוכן והתכונות הקיימים של האתר, כולל:

בחירת ערימת הטכנולוגיה המתאימה לי

במהלך השנים עבדתי עם כלים רבים לאתרים סטטיים, מ-Jekyll, Hugo, Slate ו-Gatsby. וגם עם מסגרות פרונט-אנד רבות: Ember, Knockout, Angular, Vue וכמובן React.

אז, יש לי בדיוק יותר מדי אפשרויות, שבסופו של דבר צמצמתי ל-Remix, Next.js ו-Astro.

יכולתי לכתוב סדרת בלוגים שלמה על תהליך ההערכה שלי, אבל אסכם זאת כאן:

בחרתי ב-Astro כי מהר מאוד יכולתי לעשות דברים משמעותיים.

עיצוב ה-API שלהם פשוט באופן מרענן. זהו איזון מצוין בין גמישות לדעות עיצוביות טובות.

זה היה קצת מרגיע שלאסטרו אין הטיה ברורה לענן או אג’נדה של מסגרת.

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

אסטרו: עקומת למידה ותכונות מפתח

אסטרו הפכה במהירות לאבן הפינה של השדרוג שלי.

להלן כמה תכונות מפתח שמצאתי שימושיות במיוחד:

כמה דברים היו מעט מפתיעים, כמו עיצוב סביב הסימון המוזרק של Astro, וההשפעה של display:contents.

<style>astro-island,astro-slot,astro-static-slot{display:contents}</style>

השוואת .astro לעומת רכיבי לקוח

רכיבי Astro הם בעצם תבניות HTML עם תבנית רכיבים ומאפיינים עוצמתית. הם יכולים לאחזר נתונים בזמן בנייה, לגשת למשאבי צד שרת, ולשמור מידע רגיש מסוים מוסתר.

הדרך הטובה ביותר להבין את רכיבי .astro של Astro היא להשוות ולהבדיל בינם לבין רכיבי צד לקוח. (React, Vue, Svelte וכו’)

מה צריך לעשות?רכיב .astroרכיב לקוח
יצירת HTML עם תבנית רכיבים+תבניות עוצמתית✅❌
אחזור נתונים בזמן בנייה✅❌
גישה למשאבי צד שרת (ישירות)✅❌
שמירת מידע רגיש מוסתר (טוקני גישה, מפתחות API וכו’)✅❌
הפחתת JavaScript בצד הלקוח✅❌
שימוש ברכיבי לקוח (React, Vue, Svelte וכו’)✅✅
הוספת אינטראקטיביות ומאזיני אירועים (onClick(), onChange() וכו’)❌✅
שימוש במצב ואפקטים של מחזור חיים (useState(), useReducer(), useEffect() וכו’)❌✅
שימוש ב-API של דפדפן בלבד❌✅
שימוש בהוקים מותאמים אישית התלויים במצב, אפקטים או API של דפדפן בלבד❌✅

CSS מודרני: וואו

CSS מודרני: וואו

בחזרה לפיתוח צד לקוח, שמחתי לראות את ההתקדמות ב-CSS המקורי:

חיפוש: Pagefind

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

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

מעט כלים פותרים בעיה כלשהי באותה מידה ש-Pagefind פותר חיפוש מקומי באתר.

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

הוא פתר בצורה מסודרת את כל מה שרציתי. לקח רק דקות לשלב, ורוב העבודה כללה הוספת תג <div id="search"></div> וקצת עיצוב!

תגובות: Utterances

לצערי, נאלצתי להיפרד מ-Disqus ומהתגובות שצברתי במשך שנים רבות.

רציתי שליטה/נראות טובה יותר על הסקריפטים של צד שלישי באתר שלי.

בנוסף, זה צריך להיות פשוט וניתן לתחזוקה.

זה הוביל אותי לבחור בשירות הנהדר Utterances. מערכת התגובות שלו (המבוססת על Issues של GitHub) מתאימה היטב לקהל שלי. בנוסף, קל להגדיר אותו, והוא חינמי.

Tailwind: חרטות

יש רק טכנולוגיה אחת שאני מתחרט יותר ויותר על השימוש בה: Tailwind.

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

סיכום

שדרוג האתר הישן שלי מבוסס Gatsby v1 לסטack מודרני סביב Astro היה חוויה מהנה. 10/10 ממליץ.

אם אתה שוקל לשדרג אתר ישן או לבנות אתר סטטי (או היברידי) חדש, אני ממליץ בחום להסתכל על Astro. עקומת הלמידה עשויה להיות תלולה לפעמים, אבל היתרונות מבחינת ביצועים, חוויית מפתח, והגנה על הפרויקט שלך לעתיד שווים בהחלט את המאמץ.

Loading comments...