Come creare un sito Web gratuito con nome di dominio personalizzato, hosting e crittografia SSL?

La creazione di un sito web è un investimento serio; devi pagare per ogni fase della creazione di un sito web.

Vuoi creare un sito web gratuito per la crescita personale o professionale? Ecco un modo per progettare il tuo prossimo sito Web con un nome di dominio personalizzato, hosting gratuito a vita e crittografia SSL assolutamente gratuita. Accidenti! Cos’altro potresti chiedere?

È un gioco da ragazzi che avere un sito Web aumenti notevolmente i tuoi dati di crescita e oggi è più un investimento che un lusso. Questo non vale solo per le aziende, ma anche gli individui possono trarre grandi vantaggi da un sito web personale.

Che tu stia registrando un nome di dominio, ospitando i contenuti del tuo sito Web, costruendo il sito Web o abilitando la crittografia SSL, dovresti essere pronto a svuotare le tasche. Aggiungendo al dolore, alcune di queste spese sono ricorrenti e continuano per sempre.

E se ti dicessi che puoi creare un sito Web gratuito mentre esegui tutti i passaggi cruciali sopra menzionati nella creazione di siti Web anche questo gratuitamente? Per quanto fuori dal mondo possa sembrare, puoi fare tutto questo gratuitamente se sei uno studente.

Se sei a conoscenza di GitHub, potresti conoscere GitHub Pages. È gratuito utilizzare il servizio fornito con ogni account GitHub. GitHub Pages consente a ogni utente di creare un sito Web gratuito e di ospitarlo, ma c’è un enorme avvertimento. I nomi di dominio di questi siti Web gratuiti terminano essenzialmente con github.io, che rovina la professionalità del tuo sito Web.

Che cos’è il pacchetto per sviluppatori per studenti GitHub?

Meno utenti prenderanno sul serio il tuo sito Web e avere un nome di dominio inutilmente lungo non è mai una buona idea. Ma hey! Non siamo qui per parlare dei vantaggi o delle avvertenze delle pagine GitHub. Ho promesso un modo per farti creare un sito Web gratuito con il nome di dominio personalizzato, ed ecco come puoi farlo.

GitHub offre la possibilità di usufruire di un fantastico kit pieno di utili strumenti online per ogni studente iscritto a un corso di laurea o diploma, noto come GitHub Student Developer Pack. Il pacchetto include abbonamenti pro e sconti sbalorditivi su strumenti popolari come Canva, Namecheap, Microsoft Azure, Discord, Name.com e StreamYard, tra un milione di altri.

In questo articolo, utilizzeremo Namecheap per registrare un dominio personalizzato gratuito e utilizzare le pagine GitHub per ospitare il nostro sito Web. Vedremo quindi i modi per progettare e caricare i tuoi file HTML, CSS e JavaScript sulle pagine di GitHub. Alla fine, abiliteremo anche la crittografia SSL per il sito Web, ma prima di tutto dobbiamo registrarci per lo Student Developer Pack.

Come richiedere il pacchetto per sviluppatori per studenti GitHub?

Il processo di registrazione per lo Student Developer Pack si riduce all’avere un indirizzo e-mail dello studente concesso dall’università. L’indirizzo e-mail di uno studente di solito termina con il nome di dominio della tua università, ad esempio [email protected] Esistono altri modi per registrarsi per il pacchetto, ma richiedono tempi di revisione molto più lunghi rispetto all’utilizzo di un’e-mail degli studenti. Se hai pronto il tuo indirizzo email studente, ecco come puoi registrarti per il pacchetto:

Passaggio 1: vai a Istruzione GitHub e fare clic sull’opzione Accedi.

  10 Hosting di server AMD dedicato per le tue applicazioni aziendali

Puoi accedere utilizzando le tue credenziali se hai già il pacchetto. Altrimenti, puoi seguire i passaggi in basso.

Fare clic sull’opzione Crea un account nella finestra di accesso.

Passaggio 2: quindi, registrati utilizzando l’e-mail dello studente e crea un account.

Passaggio 3: quando viene richiesto “Quale descrive meglio il tuo stato accademico?”, Assicurati di selezionare Studente.

Passaggio 4: ora riempi le caselle necessarie con i dettagli relativi al nome della tua scuola e allo scopo dell’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 applicazione viene approvata da GitHub. Il processo di solito richiede alcuni giorni, ma il tempo può variare notevolmente durante le ore di punta.

Come richiedere il GitHub Student Developer Pack senza l’e-mail degli studenti?

GitHub ti dà anche la possibilità di richiedere il pacchetto utilizzando una carta d’identità studentesca valida o qualsiasi altra prova del tuo stato accademico. Gli unici avvertimenti sono il lungo tempo di attesa e il rapporto di rifiuto più elevato. Ad ogni modo, ecco come puoi richiedere il pacchetto studenti attraverso questo metodo:

Passaggio 1: segui i passaggi sopra menzionati per creare un account tramite la tua email personale.

Passaggio 2: ora carica la prova del tuo stato accademico utilizzando l’opzione della fotocamera o carica le foto direttamente su GitHub utilizzando il pulsante Carica.

Passaggio 3: Successivamente, inserisci tutti i dettagli necessari come il nome della scuola e lo scopo dell’utilizzo di GitHub.

Passaggio 4: invia la tua domanda.

Come registrare il tuo dominio personalizzato utilizzando Namecheap?

Presumo che tu abbia il tuo account GitHub Education attivo e funzionante. I seguenti passaggi implicano l’utilizzo 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 per trovare Namecheap.

GitHub offre una registrazione del nome di dominio di 1 anno su .me TLD, a cui puoi accedere facendo clic sull’opzione Ottieni accesso.

Passaggio 3: la finestra seguente ti chiederà di autorizzare la richiesta di connessione da Namecheap al tuo account GitHub. Autorizza Namecheap e procedi al passaggio successivo.

Dovresti vedere un messaggio che dice “Abbiamo verificato con successo il tuo pacchetto studenti con GitHub” dopo l’autorizzazione riuscita.

Passaggio 4: trova il tuo dominio preferito tramite la barra di ricerca e fai clic su Trova.

Dovresti vedere la disponibilità del nome di dominio nella schermata successiva. Se il tuo nome di dominio è disponibile, puoi procedere all’acquisto gratuitamente.

Passaggio 5: effettua il pagamento utilizzando l’indirizzo e-mail di GitHub Education e seleziona GitHub Pages come metodo di hosting mentre procedi.

Dopo aver registrato con successo il tuo nome di dominio personalizzato e aver scelto le pagine GitHub 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 facendo clic sulla sezione “I tuoi repository”. GitHub Pages non offre strumenti visivi e temi predefiniti per il tuo sito web; è necessario codificare manualmente l’intero sito Web e caricare i file correlati 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 ti piace Web Dev e sai come programmare, sei a posto per caricare i tuoi file nel tuo repository GitHub e far funzionare il tuo sito web. Puoi scorrere fino alla sezione di questo articolo che si occupa del caricamento del codice del sito Web su GitHub Pages.

Ma se sei una persona che ha poche o nessuna informazione su Web Dev, ti abbiamo coperto. Puoi utilizzare i passaggi indicati di seguito e progettare il tuo sito Web utilizzando un codice HTML di base:

  9 La migliore piattaforma di hosting MySQL gestita per la tua applicazione

Passaggio 1: vai a HTML5 SU e scorri fino al 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.

Dovresti vedere i file denominati index.html e generic.html e cartelle come risorse e immagini nella cartella estratta.

Passaggio 3: ora apri i file estratti utilizzando Visual Studio Code e seleziona il file index.html.

Passaggio 4: scarica e installa l’estensione “Live Server” nel codice di Visual Studio se non la disponi già.

Passaggio 5: seleziona il file index.html, fai clic con il pulsante destro del mouse e seleziona l’opzione “Apri in Live Server”. Questa opzione ti consente di visualizzare le modifiche nel tuo file HTML nel tuo browser in tempo reale.

Come personalizzare il design del tuo sito web?

Non definirò il processo oltre questo punto come “Passaggi” per la personalizzazione del tuo sito web. La personalizzazione dei file HTML dipende interamente dalle tue preferenze, ma ecco come ho personalizzato il design “Massively” da HTML5 UP e l’ho convertito in un portfolio. Puoi scegliere di prendere ispirazione da questo o personalizzare il tuo sito web interamente da solo. La scelta è tua!

Modifica dei tag Titolo e Paragrafo

Iniziando il mio processo di personalizzazione, ho cambiato il tag del titolo “Massively”. Il tag del titolo del tuo file HTML deciderà il suo nome durante l’apertura in una scheda del browser. Il titolo predefinito per Massively dovrebbe essere “Massively by HTML5 UP” e ti consiglio di cambiarlo in qualcosa che assomigli al tuo sito web.

Ho cambiato il tag del titolo in “Samyak Goswami | Tech Content Writer” poiché 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 reso “Samyak’s Portfolio” per ovvi motivi. Successivamente, ho modificato il testo sotto nei tag di paragrafo in “Una vetrina dei miei progetti e delle mie capacità”.

Andando nella sezione Navigazione (Nav) nel file di indice, 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 dei pulsanti di navigazione a tua scelta.

In seguito ho cambiato il testo “Questo è massicciamente” sul pulsante di navigazione in “I miei articoli”.

Modifica dei collegamenti e delle icone dei social media

Devi anche vedere le 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 collegamenti andando nella sezione Navigazione (Nav) e scorrendo fino a Elenco tag con Twitter, Instagram e altro scritto al loro interno.

Nota come non ci siano collegamenti collegati a queste icone dei social media poiché il tag href è lasciato vuoto. Puoi aggiungere link al tag href sostituendo “#” con il tuo link preferito.

Modifica dei Contenuti della Homepage

Per prima cosa, ho cambiato il tag H2 e l’ho fatto “Mi chiamo Samyak Goswami” e successivamente ho cambiato il tag Paragraph in “Sono un appassionato di tecnologia…”. Ti suggerirei di cambiare il tag H2 con qualcosa che corrisponda al contenuto della tua home page e al tag di paragrafo che lo spiega.

Ora stiamo arrivando alla parte più cruciale di questa personalizzazione; modificando il contenuto dei riquadri dell’articolo.

Per fare ciò, vai alla sezione Post nel file di indice e dovresti vedere più frammenti di codice contenuti nei tag dell’articolo. Puoi aggiungere link alle tue storie modificando la sezione href come abbiamo fatto noi aggiungendo link alle icone dei social media.

  10 migliori hosting di server Terraria per tutti

Successivamente è possibile modificare il nome degli Articoli modificando 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 aggiungendo una descrizione a tutti i tuoi articoli.

Aggiunta di immagini ai tuoi siti web

Avrai notato che l’anteprima è molto diversa dalle immagini presenti sul sito HTML5 UP. Ciò è dovuto all’aereo e alle foto blande nel file personalizzabile. Ravviviamo il nostro sito Web aggiungendo immagini personalizzate.

Immagini originali

Per fare ciò, vai alla cartella in cui avevi precedentemente estratto il file zip “Massively”. Apri la cartella estratta e vai alla cartella Immagini. Dovresti vedere immagini diverse 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 di indice con i nomi di queste immagini oppure aggiungere le immagini e denominarle in modo simile alle immagini predefinite. Dare alle immagini nomi identici ci evita di modificare il codice e di conseguenza molto tempo.

Immagini modificate

Ti suggerisco di rileggere e modificare altre sezioni del tuo sito web che non sono importanti. Ecco il portfolio che ho creato utilizzando i passaggi che ho menzionato sopra: samyakgoswami.me.

Come caricare il codice del tuo sito Web su GitHub Pages?

Dopo aver finalmente codificato e progettato il tuo sito Web, è ora 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 vedere un’opzione per creare il tuo 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 che i file sono stati caricati, esegui 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 vedere il messaggio “Il tuo sito web è pubblicato nel tuo_dominio_personalizzato”.

Ora puoi andare al tuo indirizzo web e controllare tu stesso il sito web. Ricorda, il sito Web può richiedere del tempo prima di essere pubblicato inizialmente.

Come abilitare la crittografia SSL nelle pagine GitHub?

HTTP è un modo non sicuro per gestire le richieste degli utenti sul tuo sito web. Chiunque abbia intenzioni dannose e solide conoscenze tecniche può intercettare le interazioni tra l’utente e il tuo sito web. D’altra parte, HTTPS offre a tutti i tuoi visitatori una sessione di navigazione molto più sicura. Le pagine GitHub offrono la crittografia HTTPS gratuita ed ecco come puoi usufruirne:

Scorri fino alla sezione Pagine nel repository.

Dovresti vedere 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 trovi l’opzione Applica HTTPS non disponibile per il tuo dominio, puoi abilitare la crittografia SSL utilizzando i passaggi seguenti:

Passaggio 1: accedi al tuo account Namecheap e vai alla sezione “Elenco domini”.

Passaggio 2: ora vai a Gestisci dominio e successivamente alla sezione “DNS avanzato”.

Dovresti vedere alcuni record CNAME e A esistenti.

Aggiungi i seguenti record A con host come “@” e indirizzo IP come “185.199.108.153”. Il prossimo con il nome host “@” e l’indirizzo IP come “185.199.109.153”.

Segui la tendenza fino a quando non hai 4 A Record fino all’indirizzo IP “185.199.111.153”.

Rimuovi tutti i record A precedenti.

Passaggio 3: Successivamente, aggiungi un record CNAME con Host come “www” e Value come nome utente GitHub (punto) github (punto) io.

Rimuovere 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 fantastica opportunità a ogni studente di creare un sito Web gratuito e gestirlo. Sebbene non sia possibile utilizzare GitHub Pages per ospitare enormi carichi di traffico, spunta ogni casella di controllo per un sito Web statico su piccola scala. Il nome di dominio personalizzato gratuito, l’hosting e la crittografia SSL lo rendono ancora più meraviglioso da avere.

Ora potresti leggere “Come scegliere un host web per il tuo nuovo sito web”.

Ecco alcuni strumenti di monitoraggio della velocità della pagina per avvisarti quando il tuo sito web non funziona.