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