Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Jekyll
Webdesign

Configurare Jekyll per GitHub Pages in 60 secondi

by
Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called 60 Second Video Tutorials.
Start Learning Web Design in 60 Seconds
Adobe XD in 60 Seconds

Italian (Italiano) translation by Mirko Pizii (you can also view the original English article)

Jekyll può essere usato con GitHub Pages per creare un semplici siti web statici sotto forma di blog. Questo video ti mostrerà come configurare la struttura di Jekyll in soli 60 secondi!

Una volta che sei pronto e che hai bisogno di ispirazione, guarda cos'è disponibile tra i temi Jekyll su Envato Market.

Se preferisci una spiegazione scritta, ecco qui l'intero processo descritto in semplici passaggi:

Nuovo progetto

Prima di tutto, crea una cartella sul tuo sistema per un nuovo repo. Fai ciò usando il terminale e naviga dove vorresti che la nuova cartella sia, poi inserisci: mkdir mysite. La nostra nuova cartella è chiamata "mysite", ma puoi nominarla come ti piace.

Cambia la cartella in questa nuova cartella scrivendo cd mysite - una volta qui crea un file di configurazione scrivendo il comando vim _config.yml. La tua finestra del terminale ti mostrerà il contenuto di questa cartella quindi, premi i per entrare nella modalità di inserimento, poi aggiungi il seguente contenuto:

Premi Esc per uscire dalla modalità di inserimento, poi scrivi :x per salvare i cambiamenti effettuati.

Creare l'index

Abbiamo bisogno di creare il documento index, quindi scrivi vim index.md e così come hai fatto prima, aggiungi il seguente contenuto:

Aggiungi cartella layouts

Ora crea una nuova cartella scrivendo mkdir _layouts e cambia in questa cartella con cd _layouts. Dai un modello di documento predefinito vim default.html e aggiungi il seguente contenuto:

Inizializzare il nuovo repo

Ora dobbiamo inizializzare la cartella come nuovo repo e fare un commit dei cambiamenti. Quindi cominciamo tornando indietro alla cartella principale del progetto con cd... Poi scrivi git init, seguito da git add --all && git commit --all.

Inviare a GitHub

Passa su GitHub con il browser e crea un nuovo repo.

Ti verranno date alcune opzioni a questo punto, quindi prendi i comandi dove vedi invia un repository esistente da linea di comando. I comandi che leggerai saranno qualcosa simile a:

Incolla questi comandi nel terminale per inviare il tuo repo locale a GitHub.

Impostazioni di GitHub

Infine, nelle Impostazioni del repo di GitHub, scegli di usare il branch master per GitHub Pages, poi premi Salva.

Jekyll è impostato completamente, e il tuo sito è pronto per essere costruito!

Struttura file di Jekyll, spiegazione

  • _config.yml funziona come file di configurazione per Jekyll Questo è cosa GitHub Pages legge per le impostazioni come variabili globali, e altro.
  • index.md è il documento index principale del sito web GitHub Pages.
  • _layouts/default.html è il file template predefinito di cui si baserà index.md.

Risorse utili

Per altre informazioni su come costruire siti web statici usando Jekyll, dai uno sguardo alle seguenti risorse su Envato Tuts+!


Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.