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

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

•  אתר תדמית לעסק
•  אתר פורטפוליו אישי
• אתר לאירוע כמו חתונה או יום הולדת 
•  דף נחיתה 

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

העלות היחידה תהיה עלות הדומיין, עלות של כ $10- $12 לשנה לדומיין com סטנדרטי.

תהליך בניית אתר סטטי

שלב 1: עיצוב ויצירת הקבצים הסטטיים 

שלב 2: הגדרת Cloudflare Pages והעלאת הקבצים

שלב 3: חיבור דומיין מותאם אישית והוספת תעודת TLS להצגת האתר בצורה מאובטחת (HTTPS)

שלב 1: יצירת הקבצים הסטטיים offline

הצעד הראשון שלנו הוא ליצור את קבצי האתר הסטטיים. ישנן דרכים רבות לעשות זאת, כגון שימוש ב-Hugo, התקנה של WordPress בצורה מקומית (LocalWP)  ושימוש בתוסף כמו Simply Static לייצוא האתר, או שימוש בכלים ליצירת דפים סטטיים על המחשב כמו Mobirise ו Nicepage. השימוש בתכונות החינמיות של כלים אלו יספיקו כדי ליצור אתר תדמית לעסק או לאתר פורטפוליו. לצורך הדגמה נשתמש באפליקציית Mobirise.

Mobirise הוא הכלי החינמי הפשוט ביותר שמצאתי לבניית אתרים סטטיים ללא ידע בכתיבת קוד. הוא מאפשר יצירת אתרים מקצועיים באמצעות בלוקים ותבניות מוכנות מראש. האתר יוצא  רספונסיבי,ומאפשר  לייצא את קבצי ה HTML, CSS ו-JavaScript למחשב ולהעלות אותם יותר מאוחר למקור האירוח אחר.

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

הורדה והתקנת Mobirise:

היכנסו לאתר הרשמי של Mobirise, לחצו על כפתור "Download" עבור מערכת ההפעלה Windows, ולאחר סיום ההורדה פתחו את קובץ ההתקנה. 

הריצו את ההתקנה, פעלו לפי ההנחיות ולחצו על "Install". לאחר ההתקנה, פתחו את Mobirise.  וצרו חשבון חדש. פעלו לפי ההוראות על המסך להשלמת שלב זה.

הוספת תוכן (בניית האתר)

כדי לבנות אתר חדש נבחר site->Create New Site

ואז נבחר תבנית מתאימה לאתר שנרצה לבנות

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

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

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

כל התהליך די אינטואטיבי אבל מי שצריך יכול להעזר בדף העזרה של האתר.

לאחר שתסיימו תוכלו לפרסם את האתר כתת דומיין של mobirise, (לדוגמה yoursite.mobirise.com)

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

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

https://pizzatest001.mobirisesite.com/

https://wedding2050.mobirisesite.com

ייצוא האתר

כדי לייצא את האתר נלחץ על Publish בחלק העליון של המסך הראשי

נבחר Local drive folder ונשמור את הקבצים בתיקייה מקומית ריקה (בכונן C לדוגמה)

כדאי לנווט לתיקייה שבה ייצאתם את קבצי האתר ולפתוח את הקובץ index.html בדפדפן כדי לוודא שהאתר מוצג בצורה תקינה במצב לא מקוון.

שלב 2: הגדרת Cloudflare Pages והעלאת הקבצים

ישנם שירותים שונים שניתן להשתמש בהם לאירוח האתר שלנו, כמו AWS S3, Netlify ועוד. במדריך זה, בחרתי להשתמש בפלטפורמת Cloudflare כדי להדגים את התהליך.

Cloudflare מציעה יתרונות רבים לאירוח אתרים סטטיים: הוא מבטיח זמני טעינה מהירים באמצעות רשת CDN גלובלית ומספק אמינות גבוהה. תמיכה מובנית ב-SSL/TLS מבטיחה שהאתר יוצג עם HTTPS,  ותמיכה בפריסות Git (לא רלוונטי כרגע) והעלאות קבצים ישירות (כמו בדוגמה שלנו). התוכנית החינמית נדיבה מאוד ולא תאלץ אותכם לשדרג לתוכנית בתשלום עד שתגיעו למצב של אלפי צפיות ביום, מה שהופך אותה למומלצת וחסכונית.

רישום ותחברות ל-Cloudflare:

היכנסו לאתר Cloudflare Pages ולחצו על "Sign Up" ליצירת חשבון. פעלו לפי ההוראות על המסך להשלמת שלב זה.

פריסת האתר עם Cloudflare Pages

התחברו ללוח הבקרה של Cloudflare ובחרו את החשבון שלכם. בדף הבית של החשבון, בתפריט בצד שמאל בחרו
Workers and pages->Overview

לחצו על לשונית Pages

בחרו באופציה Create using direct upload ולחצו על Upload assets

בשלב הבא ניתן שם לפרויקט ונלחץ על create project

נבחר את התיקיה שהורדנו אליה את הקבצים מ-mobirise בשלב 1 ונעלה אותה על ידי גרירה או בחירת התיקיה ולחיצה על upload folder

נבחר את התיקיה ונבחר Upload

לאחר שהקבצים סיימו לעלות נלחץ על Deploy Site

בסוף שלב זה האתר שלנו יפורסם באינטרנט כתת דומיין  pages ועם סיומת dev.

לדוגמה:

yourbuisnessname.pages.dev 

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

שלב 3: רכישה והגדרת דומיין בהתאמה אישית עם תעודת SSL

כדי להפנות תת-דומיין pages.dev לדומיין המותאם אישית (לדוגמה yourdomain.com) נוכל לבצע ב 2 דרכים

• נרכוש דומיין ישירות מ cloudflare – (הדרך המהירה והקלה)
• נרכוש דומיין מרשם דומיינים חיצוני כמו Namecheap או רשם דומיינים ישראלי ונבצע הפנייה ל cloudflare  – בדרך כלל זול יותר בשנה הראשונה (למעט סיומת co.il. כאן אין לנו ברירה אלא להשתמש ברשם ישראלי ולבצע הפנייה)

לצורך הדוגמה נרכוש את הדומיין ישירות מ Cloudflare 

רכישת דומיין מ Cloudflare

מהתפריט בצד שמאל נבחר Domain Registration -> Register Domains 

ונחפש דומיין פנוי בשורת Search for Domain על ידי הקלדת שם העסק או כל שם אחר שנרצה לתת לאתר. במידה והוא פנוי נוכל לרכוש אותו Purchase.

לצורך הדגמה בחרתי בדומיין שמסתיים ב .party שעולה כ $5 לשנה ויכול להתאים לאירוע או חתונה. לרוב האתרים האחרים (פרופיל או עסק) אני ממליץ להשתמש בסיומת .com (או co.il אבל את סיומת co.il לא תוכלו לרכוש מ cloudflare) סיומת com עולה כ  $10 לשנה

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

שימו לב לסעיף החידוש האוטומטי והסירו את החידוש אם מדובר באתר זמני

(ואל תשכחו לחדש אותו כל שנה אם מדובר באתר קבוע)

שיוך הדומיין לאתר שלנו

לאחר רכישת הדומיין נשייך אותו לאתר ה-dev שלנו כדי שיוצג באינטרנט בצורה הנכונה.

נבחר Workers & Pages -> Overview

ונבחר את הפרויקט שלנו

בלשונית Custom domain נבחר setup a Custom domain

נרשום את שם הדומיין שרכשנו

ונבחר Activate Domain

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

דוגמה לאתר אירוע: 

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

לסיכום

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

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

שאלות נפוצות

1. למה לא להשתמש ב-Wix או בבוני אתרים אחרים?
Wix ובוני אתרים דומים מציעים נוחות, אך יכללו עלויות חודשיות ברגע שנחבר אליהם דומיין בהתאמה אישית (200$+ לשנה לתוכנית הבסיסית ביותר). 

בבניית אתר סטטי והפעלתו דרך Cloudflare, אנחנו מקבלים שליטה מלאה, ללא פרסומות, ומשלמים רק על הדומיין פעם בשנה.

2. איך אני עושה שינויים באתר?
ניתן לעדכן את האתר על ידי עריכת קבצי HTML, CSS, ו-JavaScript במחשב המקומי שלכם ולאחר מכן להעלות אותם מחדש ל-Cloudflare Pages.

3. איזה אלטרנטיבות יש לעיצוב אתר סטטי חוץ מ-Mobirise?

ישנן מספר אלטרנטיבות פופולריות לעיצוב אתרים סטטיים:

•  Hugo או Jekyll: כלים עוצמתיים ליצירת אתרים סטטיים שדורשים ידע בסיסי בקוד.
• Nicepage: דומה ל Mobirise ומציע ממשק ויזואלי לעיצוב אתרים ללא צורך בידע בקוד.
• WordPress עם תוסף כמו Simply Static: מאפשר לבנות אתר דינמי ולהמיר אותו לאתר סטטי.
• Bootstrap Studio: כלי בתשלום לעיצוב מבוסס Bootstrap ליצירת אתרים רספונסיביים .

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

4. איזה אתרים מומלץ לבנות בצורה הזו ואיזה פחות?

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

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

5. כמה זה באמת עולה?
העלות היחידה היא רכישת דומיין מותאם אישית, אשר נעה בין $10 ל-$12 לשנה. השימוש ב mobirise והאירוח באמצעות Cloudflare הוא חינם.