iniziato un post su astro
parent
ce42b2bf15
commit
eb857b6dba
@ -0,0 +1,71 @@
|
|||||||
|
---
|
||||||
|
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.
|
||||||
|
|
||||||
|
## 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`.
|
||||||
|
|
||||||
|
## Deploy
|
||||||
|
|
||||||
|
Una volta creato il progetto possiamo caricare appunti e dispense nella cartella `/public`
|
||||||
|
|
Loading…
Reference in New Issue