Realizzare un sito web rappresenta un investimento significativo, poiché ogni fase della sua creazione comporta dei costi.
Desideri creare un sito web gratuito per la tua crescita personale o professionale? Ecco un metodo per progettare il tuo prossimo sito web con un nome di dominio personalizzato, hosting gratuito a vita e crittografia SSL, il tutto senza alcun costo. Sorprendente, vero? Cosa si potrebbe chiedere di più?
È evidente che avere un sito web incrementa notevolmente le tue prospettive di crescita, e oggi è considerato più un investimento che un semplice lusso. Questo concetto non si applica solo alle aziende, ma anche i singoli individui possono trarre grandi benefici da un sito web personale.
Che tu debba registrare un nome di dominio, ospitare i contenuti del tuo sito web, costruirlo o attivare la crittografia SSL, dovrai prepararti a spendere. A peggiorare le cose, alcune di queste spese sono ricorrenti e continuano nel tempo.
E se ti dicessi che puoi creare un sito web gratuito, includendo tutte le fasi essenziali menzionate sopra? Per quanto possa sembrare incredibile, tutto ciò è possibile se sei uno studente.
Se conosci GitHub, potresti aver sentito parlare di GitHub Pages. È un servizio gratuito offerto con ogni account GitHub. GitHub Pages consente a ciascun utente di creare e ospitare un sito web gratuitamente, ma c’è un grande svantaggio: i nomi di dominio di questi siti web gratuiti terminano con “.github.io”, il che compromette l’aspetto professionale del tuo sito web.
Cos’è il Pacchetto per Sviluppatori Studenti di GitHub?
Un dominio eccessivamente lungo non è mai una buona idea, e un sito web con un nome non professionale potrebbe essere preso meno seriamente dagli utenti. Ma non è questo il punto. Ho promesso di mostrarti un modo per creare un sito web gratuito con un nome di dominio personalizzato, ed ecco come puoi farlo.
GitHub offre un fantastico kit, il GitHub Student Developer Pack, ricco di strumenti online utili per ogni studente iscritto a un corso di laurea o diploma. Questo pacchetto include abbonamenti pro e sconti notevoli su strumenti popolari come Canva, Namecheap, Microsoft Azure, Discord, Name.com e StreamYard, tra molti altri.
In questo articolo, useremo Namecheap per registrare un dominio personalizzato gratuito e GitHub Pages per ospitare il nostro sito web. Vedremo quindi come progettare e caricare i tuoi file HTML, CSS e JavaScript su GitHub Pages. Infine, abiliteremo anche la crittografia SSL per il sito web, ma prima di tutto, dobbiamo iscriverci al Student Developer Pack.
Come Richiedere il Pacchetto per Sviluppatori Studenti di GitHub?
Il processo di registrazione per lo Student Developer Pack si basa principalmente sull’avere un indirizzo email fornito dall’università. Di solito, l’indirizzo email di uno studente termina con il nome di dominio della sua università, ad esempio [email protected] Ci sono anche altri metodi per registrarsi al pacchetto, ma richiedono tempi di revisione più lunghi rispetto all’uso dell’email studentesca. Se hai a disposizione il tuo indirizzo email studentesco, ecco come puoi registrarti al pacchetto:
Passaggio 1: vai alla pagina GitHub Education e clicca sull’opzione Accedi.
Puoi accedere utilizzando le tue credenziali se hai già il pacchetto. Altrimenti, puoi seguire i passaggi successivi.
Clicca sull’opzione “Crea un account” nella finestra di accesso.
Passaggio 2: quindi, registrati usando l’email studentesca e crea un account.
Passaggio 3: quando ti viene chiesto “Quale descrive meglio il tuo status accademico?”, seleziona “Studente”.
Passaggio 4: ora, compila i campi necessari con i dettagli relativi al nome della tua scuola e allo scopo di utilizzo di GitHub.
Passaggio 5: infine, invia la tua domanda utilizzando l’opzione “Invia le tue informazioni”.
Dovresti ricevere un’email di conferma relativa al pacchetto sviluppatore se la tua domanda viene approvata da GitHub. Il processo di solito richiede alcuni giorni, ma i tempi possono variare notevolmente nei periodi di punta.
Come Richiedere il GitHub Student Developer Pack Senza l’Email Studentesca?
GitHub offre anche la possibilità di richiedere il pacchetto utilizzando una carta d’identità studentesca valida o qualsiasi altra prova del tuo status accademico. Gli unici svantaggi sono i lunghi tempi di attesa e una maggiore percentuale di rifiuto. In ogni caso, ecco come puoi richiedere il pacchetto studenti con questo metodo:
Passaggio 1: segui i passaggi menzionati sopra per creare un account utilizzando la tua email personale.
Passaggio 2: ora, carica la prova del tuo status accademico usando l’opzione della fotocamera o carica le foto direttamente su GitHub usando il pulsante “Carica”.
Passaggio 3: successivamente, inserisci tutti i dettagli necessari come il nome della scuola e lo scopo di utilizzo di GitHub.
Passaggio 4: invia la tua domanda.
Come Registrare il Tuo Dominio Personalizzato Usando Namecheap?
Presumo che tu abbia il tuo account GitHub Education attivo e funzionante. I seguenti passaggi implicano l’uso di Namecheap per registrare il tuo dominio personalizzato gratuito e ospitarlo tramite GitHub Pages. Segui questi passaggi per registrare il tuo nome di dominio preferito:
Passaggio 1: accedi al tuo account GitHub Education e vai alla sezione “Vantaggi”.
Dovresti vedere un “Web Dev Kit” e un “Virtual Event Kit”.
Passaggio 2: vai al “Virtual Event Kit” e scorri verso il basso fino a trovare Namecheap.
GitHub offre la registrazione di un nome di dominio per un anno con l’estensione “.me TLD”. Puoi accedervi cliccando sull’opzione “Ottieni accesso”.
Passaggio 3: la finestra successiva ti chiederà di autorizzare Namecheap a connettersi al tuo account GitHub. Autorizza Namecheap e procedi al passaggio successivo.
Dopo l’autorizzazione riuscita, dovresti vedere un messaggio che dice “Abbiamo verificato con successo il tuo pacchetto studenti con GitHub”.
Passaggio 4: cerca il tuo dominio preferito tramite la barra di ricerca e clicca su “Trova”.
Nella schermata successiva, dovresti vedere la disponibilità del nome di dominio. Se il tuo nome di dominio è disponibile, puoi procedere all’acquisto gratuito.
Passaggio 5: effettua il pagamento utilizzando l’indirizzo email di GitHub Education e seleziona “GitHub Pages” come metodo di hosting.
Dopo aver registrato con successo il tuo nome di dominio personalizzato e aver scelto GitHub Pages come hosting, Namecheap dovrebbe creare automaticamente un repository nel tuo account GitHub. Questo repository è completamente vuoto e contiene solo un file README.md.
Puoi accedere a questo repository accedendo al tuo account GitHub e cliccando sulla sezione “I tuoi repository”. GitHub Pages non offre strumenti visivi o temi predefiniti per il tuo sito web. Dovrai codificare manualmente l’intero sito web e caricare i file pertinenti nel repository GitHub appena creato.
Come Creare un Sito Web Gratuito e Ospitarlo su GitHub Pages?
Come accennato in precedenza, dovrai creare tutti i file HTML, CSS e JavaScript relativi al tuo sito web. Se sei appassionato di sviluppo web e sai programmare, puoi caricare i tuoi file nel repository GitHub e rendere operativo il tuo sito web. Puoi saltare alla sezione di questo articolo che si occupa del caricamento del codice del sito web su GitHub Pages.
Se, invece, hai poca o nessuna conoscenza di sviluppo web, ti aiutiamo noi. Puoi seguire i passaggi indicati di seguito e progettare il tuo sito web utilizzando un codice HTML di base:
Passaggio 1: vai su HTML5 UP e scegli il design del sito web che ti piace. Puoi scegliere qualsiasi altro tema predefinito da qualsiasi piattaforma. Qui ho scelto “Massively” da HTML5 UP, ma sei libero di scaricare e personalizzare qualsiasi design di sito web di tua scelta.
Passaggio 2: estrai il file ZIP scaricato dal design del tuo sito web preferito.
Nella cartella estratta, dovresti trovare file chiamati index.html e generic.html e cartelle come risorse e immagini.
Passaggio 3: ora apri i file estratti con Visual Studio Code e seleziona il file index.html.
Passaggio 4: scarica e installa l’estensione “Live Server” in Visual Studio Code, se non la hai già installata.
Passaggio 5: seleziona il file index.html, fai clic con il tasto destro del mouse e seleziona l’opzione “Apri in Live Server”. Questa opzione ti permette di visualizzare le modifiche al tuo file HTML nel browser in tempo reale.
Come Personalizzare il Design del Tuo Sito Web?
Non continuerò il processo oltre questo punto con dei “Passaggi” per la personalizzazione del tuo sito web. La personalizzazione dei file HTML dipende interamente dalle tue preferenze, ma ti mostro come ho personalizzato il design “Massively” da HTML5 UP per convertirlo in un portfolio. Puoi prendere ispirazione da questo o personalizzare il tuo sito web completamente da solo. La scelta è tua!
Modifica dei Tag Titolo e Paragrafo
Come primo passo del mio processo di personalizzazione, ho modificato il tag del titolo “Massively”. Il tag del titolo del tuo file HTML stabilisce il suo nome quando viene aperto in una scheda del browser. Il titolo predefinito di “Massively” è “Massively by HTML5 UP”, e ti consiglio di cambiarlo con qualcosa che si adatti al tuo sito web.
Ho cambiato il tag del titolo in “Samyak Goswami | Tech Content Writer”, dato che si adattava perfettamente al mio portfolio. Successivamente, ho modificato la sezione “Intro” del sito web, che diceva “This is Massively” (contenuto nel tag H1), e l’ho resa “Samyak’s Portfolio” per ovvie ragioni. Quindi, ho modificato il testo sottostante nei tag di paragrafo in “Una vetrina dei miei progetti e delle mie capacità”.
Andando alla sezione Navigazione (Nav) nel file index, ho omesso due dei tre pulsanti di navigazione contenuti nel tag List. Volevo creare un sito web a pagina singola con tutti i dettagli in un’unica pagina, ma sei libero di modificare il numero di pulsanti di navigazione secondo le tue esigenze.
Successivamente ho cambiato il testo “This is massively” nel pulsante di navigazione in “I miei articoli”.
Modifica dei Collegamenti e delle Icone dei Social Media
Potrai anche vedere varie icone dei social media sul server live come Twitter, Facebook, Instagram e GitHub. Ho deciso di omettere Twitter e Facebook e mantenere Instagram e LinkedIn per il mio caso d’uso.
Puoi modificare le icone dei social media e i loro link andando alla sezione Navigazione (Nav) e scorrendo fino al tag “List” con Twitter, Instagram e altri scritti al loro interno.
Nota come non ci siano collegamenti associati a queste icone dei social media, perché il tag href è vuoto. Puoi aggiungere i link al tag href sostituendo “#” con il tuo link preferito.
Modifica dei Contenuti della Homepage
Prima di tutto, ho cambiato il tag H2 in “Mi chiamo Samyak Goswami” e successivamente ho modificato il tag Paragraph in “Sono un appassionato di tecnologia…”. Ti suggerirei di cambiare il tag H2 con qualcosa che corrisponda al contenuto della tua homepage e il tag di paragrafo che lo spieghi.
Ora arriviamo alla parte più importante di questa personalizzazione: la modifica dei contenuti dei riquadri degli articoli.
Per farlo, vai alla sezione “Post” nel file index e dovresti vedere diversi frammenti di codice contenuti nei tag “articolo”. Puoi aggiungere i link alle tue storie modificando la sezione “href”, come abbiamo fatto per aggiungere i link alle icone dei social media.
Successivamente puoi modificare il nome degli articoli cambiando i contenuti all’interno dei tag H2. Puoi anche aggiungere una descrizione ai tuoi articoli usando il tag paragrafo.
Ripeti la procedura per ogni articolo, aggiungendo link, modificando i nomi e inserendo una descrizione per tutti i tuoi articoli.
Aggiunta di Immagini ai Tuoi Siti Web
Avrai notato che l’anteprima è molto diversa dalle immagini presenti sul sito di HTML5 UP. Questo è dovuto alle immagini di aerei e altri elementi non definiti nel file personalizzabile. Rendiamo il nostro sito web più vivace aggiungendo immagini personalizzate.
Immagini originali
Per farlo, vai alla cartella in cui hai estratto il file ZIP “Massively”. Apri la cartella estratta e vai alla cartella “Immagini”. Dovresti vedere diverse immagini denominate bg, pic01, pic02 e così via. Queste sono le immagini collegate ai nostri articoli nel tag “Articolo”.
Puoi aggiungere immagini personalizzate e modificare il file index con i nomi di queste immagini, oppure aggiungere le immagini e rinominarle in modo simile alle immagini predefinite. Assegnare alle immagini nomi identici ci evita di dover modificare il codice, risparmiando così molto tempo.
Immagini modificate
Ti suggerisco di rileggere e modificare altre sezioni del tuo sito web che ritieni non importanti. Ecco il portfolio che ho creato utilizzando i passaggi descritti in precedenza: samyakgoswami.me.
Come Caricare il Codice del Tuo Sito Web su GitHub Pages?
Dopo aver codificato e progettato il tuo sito web, è arrivato il momento di caricarlo su GitHub Pages e renderlo disponibile su Internet.
Ecco come puoi caricare il tuo sito web su GitHub Pages:
Passaggio 1: accedi al tuo account GitHub e vai alla sezione “I miei repository”.
Passaggio 2: dovresti vedere un repository chiamato “your_username.github.io”. Entra in questo repository.
Passaggio 3: dovresti visualizzare un’opzione per creare un file o caricare file nel repository GitHub.
Passaggio 4: seleziona tutti e cinque i file e le cartelle: risorse, immagini, elementi, generici, indici e trascinali nel repository.
Dopo aver caricato i file, effettua il commit del codice e attendi che GitHub elabori i tuoi file.
Passaggio 5: vai su “Impostazioni” > “Pagine GitHub” per vedere lo stato del tuo sito web. Dovresti visualizzare il messaggio “Il tuo sito web è pubblicato sul tuo_dominio_personalizzato”.
Ora puoi andare al tuo indirizzo web e controllare il sito web di persona. Ricorda che il sito web potrebbe richiedere del tempo per essere pubblicato inizialmente.
Come Abilitare la Crittografia SSL in GitHub Pages?
HTTP è un metodo non sicuro per gestire le richieste degli utenti sul tuo sito web. Chiunque abbia intenzioni dannose e conoscenze tecniche avanzate può intercettare le interazioni tra l’utente e il tuo sito web. HTTPS, invece, offre a tutti i tuoi visitatori una sessione di navigazione molto più sicura. GitHub Pages offre la crittografia HTTPS gratuita e ecco come puoi usufruirne:
Scorri fino alla sezione “Pagine” nel repository.
Dovresti visualizzare l’opzione “Applica HTTPS” alla fine della finestra. La crittografia SSL dovrebbe essere attiva non appena selezioni la casella di controllo “Applica HTTPS”.
Nel caso in cui l’opzione “Applica HTTPS” non sia disponibile per il tuo dominio, puoi abilitare la crittografia SSL seguendo i seguenti passaggi:
Passaggio 1: accedi al tuo account Namecheap e vai alla sezione “Elenco domini”.
Passaggio 2: ora vai su “Gestisci dominio” e successivamente alla sezione “DNS avanzato”.
Dovresti visualizzare alcuni record CNAME e A esistenti.
Aggiungi i seguenti record A con host “@” e indirizzo IP “185.199.108.153”. Aggiungi un altro record con host “@” e indirizzo IP “185.199.109.153”.
Segui questa procedura fino ad avere 4 record A, l’ultimo con indirizzo IP “185.199.111.153”.
Rimuovi tutti i precedenti record A.
Passaggio 3: successivamente, aggiungi un record CNAME con Host “www” e Valore con nome utente GitHub (punto) github (punto) io.
Rimuovi i record CNAME precedenti. Alla fine, le tue impostazioni DNS dovrebbero avere 4 record A e 1 record CNAME.
Passaggio 4: ora vai alle pagine di GitHub nella sezione Impostazioni. L’opzione “Applica HTTPS” dovrebbe ora essere disponibile per il tuo dominio.
Riassumendo 👈
GitHub offre una grande opportunità a ogni studente di creare e gestire un sito web gratuito. Anche se GitHub Pages non è adatto per ospitare un traffico elevato, risponde a tutti i requisiti per un sito web statico di piccola scala. Il nome di dominio personalizzato gratuito, l’hosting e la crittografia SSL lo rendono ancora più attraente.
Ora potresti leggere “Come scegliere un host web per il tuo nuovo sito web”.
Ecco alcuni strumenti per monitorare la velocità della pagina, che ti avviseranno se il tuo sito web non funziona.