You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
81 lines
2.7 KiB
Markdown
81 lines
2.7 KiB
Markdown
---
|
|
id: pagina-poisson-con-astro
|
|
title: Pagina Poisson con Astro
|
|
description: Vediamo come creare una pagina Poisson moderna ⚡ con Astro
|
|
author: Antonio De Lucreziis
|
|
tags: [astro, website]
|
|
---
|
|
|
|
In questa guida vedremo come creare una pagina Poisson moderna utilizzando Astro, un nuovo framework di sviluppo web statico. Per prima cosa installeremo NodeJS sul nostro computer, poi creeremo un nuovo progetto Astro e infine dopo averlo generato, lo caricheremo su Poisson.
|
|
|
|
## 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`](https://learn.microsoft.com/en-us/windows/wsl/install) e poi installare i seguenti pacchetti nell'ambiente Linux)
|
|
|
|
> NodeJS: https://nodejs.org/en/download/package-manager
|
|
|
|
```bash
|
|
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](https://astro.build/themes/) o partire da un blog di esempio con il seguente comando:
|
|
|
|
```bash
|
|
npm create astro@latest -- --template blog
|
|
cd nome-del-progetto
|
|
npm install
|
|
```
|
|
|
|
Se ad esempio volessimo usare un tema come "[Astro Nano](https://github.com/markhorn-dev/astro-nano)" possiamo fare così:
|
|
|
|
```bash
|
|
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`:
|
|
|
|
```javascript
|
|
export default defineConfig({
|
|
...
|
|
base: '/~nomeutente/',
|
|
trailingSlash: 'always',
|
|
...
|
|
});
|
|
```
|
|
|
|
## Lavorare con Astro
|
|
|
|
Per vedere il nostro progetto in locale possiamo eseguire il comando:
|
|
|
|
```bash
|
|
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`.
|
|
|
|
## Appunti
|
|
|
|
Una volta creato il progetto possiamo caricare appunti e dispense nella cartella `/public`
|
|
|
|
## Deploy
|
|
|
|
Per caricare il nostro sito su Poisson possiamo usare il comando `rsync`:
|
|
|
|
```bash
|
|
npm run build
|
|
rsync -avz dist/ username@poisson.phc.dm.unipi.it:public_html/
|
|
```
|
|
|
|
Dove `username` è il nostro username Poisson. Da notare che gli `/` alla fine di `dist/` e `public_html/` sono importanti per evitare di creare delle cartelle per errore.
|