איך לבנות אתר מעולה בחינם

הרעיון

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

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

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

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

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

בואו נתחיל.

GitHub Page

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

בשביל שמה שנמצא מאחורי הקלעים באתר שלכם לא יהיו גלוי, צריך להיות מנוי לשירות GitHub Pro. אם אתם סטודנטים אתם יכולים לקבל מנוי כזה בחינם דרך GitHub Student Developer Pack: education.github.com/pack.

תוודאו שיש לכם Domain לכתובת האתר שלכם. אם אתם סטודנטים, אתם יכולים לקבל אחד בחינם עם סיומת me מהאתר Namecheap, או להשתמש בזה של GitHub. אתם גם יכולים לקנות לעצמכם סיומת com בכמה דולרים.

בהגדרות, תוסיפו את הכתובות הבאות, כדי להפנות אותו לשרתי GitHub Pages:

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

אתם גם יכולים להוסיף הגדרות נוספות, למשל בשביל www לפי התיעוד הרשמי.

תפתחו רפוזיטורי (Repository) עם הסיומת your-username.github.io. הרפוזיטורי ישמש כשרת האחסון לאתר שלכם. מאחורי הקלעים, GitHub Pages יפעיל אתר סטטי על ידי קריאה לקובץ index.html ברפוזיטורי, או לקובץ README.md אם אין בנמצא קובץ index.html. כשתפתחו את הדף תהיה לכם גם אפשרות להגדיר חיבור מאובטח (HTTPS) כברירת מחדל - מומלץ לעשות את זה.

עריכה

תורידו את הרפוזיטורי למחשב שלכם בעזרת הפקודה git clone. אפשר גם לערוך את האתר ישירות מ GitHub אבל פחות מומלץ משיקולי נוחות. בתוך הרפוזיטורי, תמצאו קובץ בשם CNAME - תכתבו בתוכו את שם הדומיין שלכם.

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

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

שרת

השרת ירוץ מקומית על המחשב שלכם ויהיה אחראי לאסוף את המידע והמדיה שתרצו להציג מתוך אתרים אחרים (ogData).

הכנה לעבודה

• תוודאו שמותקן במחשב שלכם Node.js. תפתחו תקייה חדשה ותכנסו אליה. תפעילו את הפקודה npm init -y כדי ליצור קובץ package.json ריק.
• תתקינו את ההספריות express, axios, cheerio, ו-cors. אפשר לעשות את זה עם הפקודה npm install express axios cheerio cors.
• בתוך התקייה של השרת, תפתחו קובץ חדש בשם server.js ותכתבו בתוכו את הקוד שיהיה אחראי לאסוף את המידע.

קוד לדוגמה

const express = require('express');
const axios = require('axios');
const cheerio = require('cheerio');
const cors = require('cors');

const app = express();
const PORT = 3000;

app.use(cors());

app.get('/fetch-og-data', async (req, res) => {
    const url = req.query.url;
    if (!url) {
        return res.status(400).json({ error: 'URL is required' });
    }

    try {
        const response = await axios.get(url);
        const html = response.data;
        const $ = cheerio.load(html);

        const ogData = {
            title: $('meta[property="og:title"]').attr('content') || '',
            description: $('meta[property="og:description"]').attr('content') || '',
            image: $('meta[property="og:image"]').attr('content') || ''
        };

        res.json(ogData);

התאמה אישית

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

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

לקוח

הלקוח יהיה אחראי לשלושה דברים:

• לבקש מהשרת את המידע על כל קישור שנצרה להציג באתר
• לחלץ מהמידע הזה אובייקטים שנצאה להציג באתר
• להזין אותם בתוך גוף האתר, כשורות HTML

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

צרו קובץ בשם projects.js עם התוכן הבא:

class Project {
    constructor(link) {
        this.link = link;
        this.title = '';
        this.description = '';
        this.bannerUrl = '';
        // more fields can be added here, like tech stack, icons, etc.
    }

    async fetchOpenGraphData() {
        try {
            const response = await fetch(
                `http://localhost:3000/fetch-og-data?url=${encodeURIComponent(this.link)}`);
            const data = await response.json();
            this.title = data.title || 'No Title';
            this.description = data.description || 'No Description';
            this.bannerUrl = data.image || 'default-banner.jpg';
        } catch (error) {
            console.error('Error fetching Open Graph data:', error);
            this.title = 'Unknown Title';
            this.description = 'No description available.';
            this.bannerUrl = 'default-banner.jpg';
        }
    }
}

מספיק לרכז ללקוח רשימה של לינקים שאנחנו רוצים להציג. שימו לב שאתם יכולים לבדוק איך התוצאות ייראו, או דרך מנתח הפוסטים בתמונות שלמטה: linkedin.com/post-inspector. אתם גם יכולים פשוט להעתיק את הכתובת שלכם ולשלוח לעצמכם אותה בטלפון. אם אתם לא מרוצים אתם יכולים לשנות את התוכן באתר שלכם, אבל יותר מומלץ לשנות אותו ישירות במקורות שלכם ברחבי האינטרנט. ככה תוכלו לשמור על אחידות ועקביות, ולאפשר לאתר להיות ניתן לתחזוקה ולא תלוי בקוד מקומי.

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

const projectsData = {
    "low-level-projects-table": [
        "https://github.com/Dor-sketch/ComplexCalculatorC",
        // Add more projects here
    ],
    // Add more project categories here
};

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

function createProjectCard(project) {
    const card = document.createElement('div');
    card.classList.add('project-card');
    card.innerHTML = `
        <img src="${project.bannerUrl}" class="project-banner" alt="${project.title}">
        <div class="project-content">
            <h4 class="project-title"><a href="${project.link}">${project.title}</a></h4>
            <p class="project-description">${project.description}</p>
            <p><b>Tech:</b> ${project.tech.join(', ')}</p>
        </div>`;
    return card;
}

הטמעה ב-HTML

הטמעת הקוד ב-HTML תיראה ככה, למשל:

<!DOCTYPE html>
<html lang="he">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Projects Display</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <section class="projects-container">
        <h4>Low-Level Programming</h4>
        <div class="carousel-wrapper">
            <div class="carousel" id="low-level-projects-carousel">
                <!-- Project cards will be added here by JavaScript -->
            </div>
        </div>
    </section>
</body>
</html>

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

כמה דקות לאחר מכן האתר שלכם יהיה באוויר. תתחדשו!