2.2 KiB
| id | title | description | author | tags | ||
|---|---|---|---|---|---|---|
| pagina-poisson-con-astro | Pagina Poisson con Astro | Vediamo come creare una pagina Poisson moderna con Astro | Antonio De Lucreziis |
|
In questa guida vedremo come creare una pagina Poisson moderna utilizzando Astro, un nuovo framework di sviluppo web statico.
Setup
Se siete sul vostro pc installate VSCode ed il plugin di Astro.
Poi installiamo NodeJS (se siete su Windows è consigliato installare WSL con wsl --install e poi installare i seguenti pacchetti nell'ambiente Linux)
-
NodeJS: https://nodejs.org/en/download/package-manager
curl -fsSL https://fnm.vercel.app/install | bash source ~/.bashrc fnm use --install-if-missing 20 node -v npm -v
Creazione di un nuovo progetto Astro
Per prima cosa dobbiamo creare un nuovo progetto di Astro sul nostro computer, possiamo scegliere uno dei tanti temi disponibili per Astro o partire da un blog di esempio con il seguente comando:
npm create astro@latest -- --template blog
cd nome-del-progetto
npm install
Se ad esempio volessimo usare un tema come Astro Nano possiamo fare così:
git clone https://github.com/markhorn-dev/astro-nano sito-poisson
cd sito-poisson
npm install
L'ultima cosa importante che c'è da cambiare è che le pagine Poisson sono hostate su https://poisson.phc.dm.unipi.it/~nomeutente/ che non è la radice del dominio del sito. Quindi dobbiamo cambiare il file astro.config.mjs:
export default defineConfig({
...
base: '/~nomeutente/',
trailingSlash: 'always',
...
});
Lavorare con Astro
Per vedere il nostro progetto in locale possiamo eseguire il comando:
npm run dev
A questo punto in base al tema scelto possiamo modificare i file dentro src/pages per cambiare il contenuto delle pagine. Molti temi sono preimpostati per scrivere contenuti in Markdown, ad esempio per il template blog possiamo scrivere gli articoli per il nostro blog in src/content/blog/$NOME_POST.md.
Deploy
Una volta creato il progetto possiamo caricare appunti e dispense nella cartella /public