Ospita gratuitamente il tuo sito Angular utilizzando questo semplice processo.
Quando si ospita un sito Web Angular online, è possibile scegliere tra molte piattaforme disponibili. Uno di questi che puoi usare gratuitamente è Netlify.
Se memorizzi una copia del codice sorgente del tuo sito web in un repository GitHub, puoi utilizzare Netlify per ospitare quel sito.
Netlify inoltre ridistribuisce automaticamente il tuo sito quando invii nuove modifiche al ramo del repository che stai ospitando.
Come creare un'app angolare di esempio di base
Puoi creare una semplice applicazione Angular utilizzando un editor come Visual Studio Code. È quindi possibile ospitare questo sito Web utilizzando Netlify.
- Creare un nuova app angolare.
- Crea una semplice home page. Sostituisci il codice nel file
app.component.html file con i seguenti contenuti della pagina di destinazione:
<classe div="intestazione container-dark">
<h2>Il nostro sito web aziendale</h2>
</div>
<classe div="contenitore-bianco">
<classe div="contenuto">
<h2>Il nostro sito web aziendale</h2>
<P>Scopri come progettare, sviluppare e mantenere il tuo sito Web professionale in pochissimo tempo.</P>
</div>
</div>
<classe div="contenitore-arancione">
<classe div="contenuto">
<h2>Cosa facciamo</h2>
<P>Ti diamo gli strumenti per sviluppare siti web e soluzioni uniche per i tuoi clienti. Forniamo anche formazione per
manutenzione e altri argomenti relativi al sito web.</P>
</div>
</div>
<classe div="contenitore-bianco">
<classe div="contenuto">
<h2>Chi siamo</h2>
<P>Siamo una piccola impresa che opera da Melbourne, in Australia. I nostri spazi sono realizzati in modo unico in modo che anche i clienti possano farlo
visitaci di persona.</P>
</div>
</div>
<classe div="piè di pagina container-dark">
<P>Diritto d'autore 2022</P>
</div> - Aggiungi un po' di stile all'app Angular aggiungendo un po' di CSS al file app.component.css file:
* {
famiglia di font: "Aria", sans serif;
}
.intestazione {
imbottitura: 30px 50px;
}
.piè di pagina {
imbottitura: 5px 50px;
text-align: centro;
}
.contenitore-scuro {
colore di sfondo: #202C39;
colore bianco;
display: flessibile;
align-items: centro;
}
.contenitore-arancia {
colore di sfondo: #FFD091;
colore: #202C39;
}
.contenitore-bianco {
colore di sfondo: fumo bianco;
colore: #202C39;
}
.contenuto {
imbottitura: 100px 25%;
display: flessibile;
direzione flessibile: colonna;
altezza linea: 2rem;
dimensione del font: 1.2em;
align-items: centro;
text-align: centro;
} - Aggiungi un po 'di stile per l'app Angular complessiva in styles.css:
corpo {
margine: 0;
imbottitura: 0;
} - Per testare l'app, vai alla sua cartella principale utilizzando un terminale o una riga di comando. Digitare il ng servire comando:
ng servire - Attendi che il tuo codice venga compilato e visita http://localhost: 4200/ in un browser web per visualizzare la tua app.
- Nel .browserlistrc file, rimuovi iOS Safari versione 15.2-15.3. Ciò impedirà la visualizzazione degli errori di compatibilità nella console durante la compilazione del progetto.
l'ultima versione di Chrome
ultima 1 versione di Firefox
ultime 2 versioni principali di Edge
ultime 2 versioni principali di Safari
ultime 2 versioni principali di iOS
ESR di Firefox
nonios_saf 15.2-15.3
nonsafari 15.2-15.3 - Costruisci il tuo codice usando il ng costruire comando nel terminale:
ng costruire - Nel .gitignore file, rimuovere o commentare il file /dist linea. Rimuoverlo assicurerà il dist folder si trova nel set di file che invii al tuo repository GitHub.
# /dist
Come inviare il codice angolare a GitHub
Dovrai memorizzare il tuo codice in un repository remoto affinché Netlify possa accedere al codice sorgente.
Puoi creare un nuovo repository su GitHub e inviare il codice del tuo sito web a quel repository. Se non hai familiarità con GitHub, potrebbe essere utile capirne alcuni Le funzionalità di base di GitHub Primo.
- Crea un nuovo repository su GitHub. Puoi farlo accedendo a GitHub e facendo clic su Nuovo.
- Inserisci i dettagli per il tuo nuovo repository. Dagli un nome come "netlify-app" e una descrizione. Non inizializzare il repository con un file README, un file .gitignore o una licenza.
- In un terminale sul tuo computer, vai alla directory in cui hai memorizzato la tua app Angular. Esegui i seguenti comandi per inizializzare la tua cartella come repository git:
git init
git aggiungi .
idiota commettere -m "prima commettere" - Inserisci il codice all'interno di questa cartella nel nuovo repository remoto che hai creato su GitHub. Segui il git remoto aggiungi originale, ramo git, E spingere git comandi forniti da GitHub sulla pagina del repository remoto:
git remoto aggiungi originale <Il tuo collegamento al repository GitHub>
ramo git -M main
git push -u origine principale - Puoi confermare che il codice dell'app Angular si trova ora nel repository GitHub remoto aggiornando la pagina del repository GitHub.
Come usare Netlify per ospitare il tuo codice
Per ospitare il tuo codice utilizzando Netlify, dovrai dargli accesso al tuo codice sorgente GitHub. Netlify utilizzerà quindi il file dist cartella del tuo progetto Angular per pubblicare la versione compilata del tuo codice.
Puoi configurare tutte queste impostazioni seguendo i passaggi di configurazione durante la creazione di un nuovo sito:
- Accedi o registrati a Netlifica. Puoi farlo utilizzando le tue credenziali GitHub.
- Dalla dashboard principale e dalla pagina dell'elenco dei siti, espandi Aggiungi nuovo sitoe selezionare Importa un progetto esistente.
- Selezionare Git Hub.
- Clicca su Configura Netlify su GitHub.
- Clicca su Installare.
- Netlify visualizzerà un elenco dei tuoi repository GitHub. Seleziona quello che desideri ospitare. Ad esempio, se hai chiamato il tuo repository "netlify-app", seleziona "netlify-app" dall'elenco.
- Nella schermata di configurazione, lasciare il Proprietario, Ramo da distribuire, E Elenco di base campi ai loro valori predefiniti. Se stai pubblicando un ramo specifico, come un ramo "Produzione" separato, puoi aggiungerlo nel file Ramo da distribuire campo. Cambiare il Comando di costruzione campo a "ng build". Per il Pubblica directory campo, digitare dist/
. Se non sai qual è il nome del progetto, puoi navigare nella cartella dist del tuo progetto per trovarlo lì. Ad esempio, "dist/netlify-app". - Clicca su Distribuisci sito.
- Attendere il completamento della distribuzione. L'operazione potrebbe richiedere alcuni minuti e potrebbe essere necessario aggiornare la pagina. Se tutto va bene, sarai in grado di vedere la distribuzione riuscita nell'elenco delle distribuzioni. Fai clic sulla distribuzione pubblicata, ad esempio, Produzione: main@HEAD.
- Clicca sul Distribuzione di produzione aperta pulsante.
- Ora puoi visualizzare il tuo sito Web in un'altra scheda, utilizzando un URL nel formato di
.netlify.app. Se stai ospitando un sito web con più reindirizzamenti, potresti non essere in grado di reindirizzare ad altre pagine. In questo caso, c'è un modo per correggere un reindirizzamento non riuscito su Netlify. Se vuoi, puoi anche modifica il tuo nome di dominio gratuito.
Hosting del tuo sito web utilizzando GitHub e Netlify
Si spera che ora tu possa ospitare con successo un sito Web utilizzando GitHub e Netlify. Puoi configurare distribuzioni automatiche in determinati rami di un repository GitHub. In questo modo, puoi automatizzare e semplificare la distribuzione del tuo sito web.
Ma Netlify non è l'unico modo per distribuire un'app Angular online. Puoi anche utilizzare altre piattaforme come GitHub Pages.
