Sito statico (solo HTML e CSS, nessun programma da installare) per l'archivio "Prompt biographies". Per ora contiene una sola pagina di biografia (Make it more) e una homepage provvisoria che le elenca.
prompt-biographies/
├── index.html → homepage (elenco delle biografie)
├── make-it-more.html → pagina della biografia "Make it more"
├── css/
│ └── style.css → tutto lo stile del sito (griglia, font, colori)
├── assets/
│ └── images/
│ └── make-it-more/ → immagini usate da questa pagina
│ └── link-thumbnails/ → miniature che compaiono in hover sui link
└── README.md → questo file
Come aggiungere una nuova biografia in futuro:
- Duplica
make-it-more.html, rinominalo (es.nome-del-prompt.html) e sostituisci testo e immagini. - Crea una cartella
assets/images/nome-del-prompt/per le sue immagini. - Apri
index.htmle aggiungi una riga nell'elenco<ul class="biography-list">con il link alla nuova pagina (c'è un commento nel file che spiega dove).
Non serve nessun programma speciale: puoi aprire i file .html con un editor
di testo qualsiasi (es. VS Code, TextEdit) e vederli nel browser trascinandoli
nella finestra di Chrome/Safari.
Il titolo "MAKE IT MORE" usa Clarendon Text Pro, caricato tramite il tuo account Adobe Fonts (Typekit). Il collegamento è già impostato in due punti:
- Nell'
<head>diindex.htmlemake-it-more.htmlc'è il tag<link rel="stylesheet" href="https://use.typekit.net/pht7ogj.css">. - In
css/style.css, le variabili--font-title,--font-title-weighte--font-title-style(in cima al file) dicono al sito quale famiglia, peso e stile usare.
Nel progetto Adobe Fonts al momento hai aggiunto solo il peso Bold
Corsivo. Se preferisci il titolo dritto (non corsivo) come nel design
originale, vai su fonts.adobe.com → il tuo Web Project → aggiungi anche il
peso Regular, poi dimmelo: cambio --font-title-weight e
--font-title-style di conseguenza, senza toccare altro.
Nota: essendo un font caricato da Adobe Fonts (non un file scaricato e incluso nella cartella), serve una connessione internet per vederlo — se il tuo abbonamento Adobe/Creative Cloud dovesse scadere, il titolo tornerebbe al font di sistema di riserva (Georgia).
Nel file Figma alcune didascalie erano ancora segnaposto (es. "Caption
schema", "Caption esempio", "Caption per schema", "Caption immagine"). Le ho
riportate così come sono nel sito, cercale in make-it-more.html (classe
diagram-caption o figure-caption) e sostituiscile con il testo
definitivo quando lo avrai deciso.
Questa è la parte per pubblicare il sito online. Non serve installare nulla sul computer: puoi fare tutto dal sito github.com.
- Vai su github.com e crea un account gratuito (se non ce l'hai già).
- Clicca sul pulsante "+" in alto a destra → "New repository".
- Come nome del repository scrivi
prompt-biographies. - Lascialo Public (deve essere pubblico perché GitHub Pages gratuito funziona solo con repository pubblici).
- Non aggiungere README, .gitignore o licenza (li abbiamo già).
- Clicca "Create repository".
- Nella pagina del repository appena creato, clicca su "uploading an existing file" (o "Add file" → "Upload files").
- Apri sul tuo computer la cartella
prompt-biographiesche ti ho preparato, seleziona tutto il contenuto (i file e le cartelleindex.html,make-it-more.html,css,assets,README.md) e trascinali nella pagina di GitHub.- Importante: trascina il contenuto della cartella, non la cartella stessa, altrimenti i link tra le pagine non funzionano più.
- In basso scrivi un messaggio tipo "primo caricamento del sito" e clicca "Commit changes".
- Nel repository, vai su Settings (in alto).
- Nel menu a sinistra clicca su Pages.
- Sotto "Build and deployment" → "Branch", scegli main e la cartella / (root), poi clicca Save.
- Aspetta un minuto o due: GitHub ti mostrerà un link tipo
https://tuonomeutente.github.io/prompt-biographies/ - Apri quel link: dovresti vedere la homepage del sito. La pagina della
biografia sarà su
https://tuonomeutente.github.io/prompt-biographies/make-it-more.html
Ogni volta che modifichi un file (o ne aggiungi uno nuovo), torna sulla pagina del repository su GitHub e usa di nuovo "Add file" → "Upload files" per caricare la versione aggiornata: GitHub Pages si aggiorna da solo in un minuto o due.
Se preferisci un flusso di lavoro più comodo (senza dover ricaricare i file a mano ogni volta), in futuro possiamo impostare GitHub Desktop, un programma con un'interfaccia semplice che sincronizza automaticamente la cartella sul tuo computer con GitHub — fammi sapere se vuoi che ti guidi anche in quello.