בניית אתר סטטי בעזרת הוגו

אתר סטטי מול אתר דינמי

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

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

בחירת הכלי והתבנית

קיימים מספר כלים ("מחוללים") פופולאריים לבניית אתר סטטי, כמו למשל ג׳קיל וגטסבי. לאחר מעט התלבטות, בסופו של דבר החלטתי ליצור את האתר הזה עם הוגו. הוגו מתבסס על שפת התכנות GO, ויש לו קהל משתמשים רחב (עם כמעט 47 אלף כוכבים בגיטהאב בעת כתיבת הפוסט). בין משתמשי הוגו נמצאת חברת 1Password, שבנתה את עמוד הבית, עמודי התמיכה והבלוג שלה בעזרת הוגו.

בחרתי בתבנית בשם Wowchemy (בעבר נקראה Academic), שמכילה מגוון רחב של פיצ׳רים נחמדים כמו חיפוש, גלריות תמונות, תמיכה ב-LaTeX ואפילו CMS בסיסי.

ל-Wowchemy יש שלוש תבניות קיימות שמספקות נקודת התחלה טובה. את האתר אחסנתי בקלות ובחינם בנטליפיי לפי מדריך ההתקנה של התבנית. האתר בנטליפיי מסתנכרן באופן אוטומטי עם כל שינוי שנעשה ב-repository בגיטהאב.

הצגת עברית

על מנת שהאתר יוצג בעברית כראוי, צריך קודם כל להגדיר את שפת האתר לעברית. ב-config/_default/languages.yaml יש להגדיר:

he:
  languageCode: he

וב-config/_default/config.yaml להגדיר defaultContentLanguage: he.

במידה ואתם משתמשים בגרסה ישנה יותר של Wowchemy שלא מכילה תרגום לעברית, יש להעתיק מה-repository של Wowchemy את קובץ התרגום לתוך i18n/he.yaml באתר שלכם.

כעת, התבנית אמורה להיות מוצגת בעברית עם מבנה מימין לשמאל, אולם יתכן שחלקים מסוימים עדיין לא יהיו מוצגים כראוי. כדי לבצע שינויים ב-CSS ולתקן זאת, יש ליצור קובץ assets/scss/custom.scss ולכתוב בו את השינויים.

להלן השינויים שעשיתי עד כה (אשמח לקבל הצעות לשיפור):

// changes to _content.scss
ul.share li {
  margin-left: 8px;
  margin-right: 0;
}

ul.share li:last-of-type {
  margin-left: 0;
  margin-right: 0;
}

// changes to _nav.scss
.dropdown-menu {
  text-align: right !important;
}

.navbar-toggler {
  padding-left: 1rem;
}

#navbar-main .main-menu-item {
  text-align: right !important;
  padding-left: 0;
}

ul.nav-icons li {
  padding-left: 1rem;
  padding-right: 0;
}

ul.nav-icons li:last-of-type {
  padding-left: 0;
  padding-right: 0;
}

.ml-auto, .mx-auto {
  margin-left: 0!important;
  margin-right: auto!important;
}

// changes to _widgets.scss
.network-icon li {
  margin-left: 10px;
  margin-right: 0;
}

.network-icon li:last-of-type {
  margin-left: 0;
  margin-right: 0;
}

// fix author profile pic
.mr-3, .mx-3 {
  margin-right: 0!important;
  margin-left: 1rem!important;
}

// changes to _search.scss
.col-search-close {
  text-align: left;
}

// fix alert
div.alert>div:first-child::before {
  left: 0;
  right: -2rem;
}

div.alert>div {
  margin-left: 0;
  margin-right: 2rem;
}

// make sure code block dir is ltr
pre, code {
  text-align: left;
  direction: ltr;
}

// fix tags margin
.badge-light {
  margin-right: 0;
  margin-left: 8px;
}

.article-tags > .badge-light:last-child {
  margin-left: 0;
}

הטמעת תגובות

להוגו קיימת תמיכה בהטמעת תגובות של Disqus. בקובץ config/_default/params.yaml יש לשנות תחת comments: את ערך provider: ל-disqus, ותחת disqus: ב-shortname: לשים את ה-shortname שלכם.

כדי שממשק התגובות של Disqus יוצג בעברית, יש להעתיק מה-repository של Wowchemy את wowchemy/layouts/partials/comments/disqus.html לתוך layouts/partials/comments/disqus.html באתר שלכם, ומתחת לשורה var disqus_config = function () { הוסיפו:

this.language = "he";

מקורות נוספים שיכולים לעזור:

• ה-documentation של Wowchemy
• מדריך להתאמה אישית של עיצוב האתר
• מדריך להוספת אנימציות לאתר