להקים אתר מעולה

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 חדש ותעלו את הקוד לרפוזיטורי שלכם.

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