Come usare Gatsby per creare il tuo blog e lavorarci sul tuo telefono

Immagine di Jesus Kiteque

Di recente, ho deciso di migrare il mio blog su Gatsby. Gatsby è un generatore di siti statici estremamente veloce basato su React.

Il problema

Perché la gente ama scrivere su piattaforme come Medium piuttosto che usare un generatore di siti statici?

Esistono due tipi di persone: le persone che scrivono su piattaforme come Medium e le persone che codificano il blog autonomamente utilizzando generatori di siti statici.

Ci sono molti vantaggi nella scrittura su piattaforme pubbliche come Medium su generatori di siti statici. Se si scrive su piattaforme pubbliche, è possibile scrivere su un laptop e modificarlo sul telefono. Una volta terminata la scrittura, devi solo fare clic sul pulsante "Pubblica". Tutto è fatto, il tuo blog è live e puoi raggiungere subito il tuo pubblico.

D'altra parte, se scrivi un blog nel generatore di siti statici, dovrai ricordare tutti gli script, visualizzare l'anteprima del blog su localhost, creare il blog per la produzione, eseguire il commit e inviare le modifiche a GitHub e distribuire il tuo sito nel pubblico. Se qualcosa va storto, potresti dover ripetere alcuni dei passaggi e attendere qualche minuto fino a quando il blog online è quello che desideri.

Alla fine passerai molto più tempo a fare cose non importanti oltre alla scrittura vera e propria.

Perché dovresti scrivere su Gatsby invece che su piattaforme pubbliche?

Immagino che questo sia il motivo per cui le persone alla fine smettono di scrivere usando un generatore di siti statici e scrivono invece su Medium. Ma c'è qualcosa che Medium o Wordpress non possono fornire: più scrivi, più vuoi conservare i tuoi scritti in un luogo sicuro, in un formato semplice, proprio come potresti tenere i tuoi libri del diario per anni.

Ma immagina che un giorno vorrai migrare tutto ciò che hai scritto da Medium in qualche altro posto. Questo è quando speri di aver scritto tutto in Markdown e di avere un sito che ospita quei file Markdown.

Ma come posso rendere la scrittura in Gatsby facile come scrivere su Medium?

Scrivere usando un generatore di siti statici non deve essere difficile. Credo sempre che più è facile scrivere e pubblicare il tuo blog, più scriverai. Dopo aver provato e ricercato diverse configurazioni, sono abbastanza contento del risultato.

Nella mia configurazione con Travis CI, git push è il nuovo pulsante "Pubblica". Tutto quello che devi fare è impegnarti e inviare il tuo codice. E condividerò anche come modificare il blog sul tuo telefono.

Ho diviso questo post in cinque sezioni:

  1. Come creare un blog Gatsby
  2. Impostazione di Github Pages per ospitare il tuo blog
  3. Impostazione di Travis per la distribuzione automatica
  4. Aggiunta di un nuovo blog e pubblicazione
  5. Bonus: come scrivere un blog sul tuo telefono

1. Come creare un blog Gatsby

Ci sono molti tutorial su come configurare un blog usando Gatsby che discutono di tutte le potenti funzionalità fornite da Gatsby. Questo post non si concentrerà su questo, ma mostrerò comunque alcuni passaggi di base per rendere il tuo blog attivo e funzionante.

Presumo che tu sia già uno sviluppatore JavaScript e conosca alcune nozioni di base su npm, thread e integrazione continua. Per questo tutorial, userò il filo ma mi sento libero di usare npm.

Innanzitutto, installa gatsby-cli e crea un nuovo repository utilizzando il blog starter ufficiale di Gatsby.

$ filato globale aggiungi gatsby-cli
$ gatsby new gatsby-blog https://github.com/gatsbyjs/gatsby-starter-blog
$ cd gatsby-blog
$ gatsby sviluppa

Ora apri localhost: 8000 nel tuo browser e dovresti vedere il blog generato nel tuo browser.

2. Imposta Github Pages per ospitare il tuo blog

Ora, ospitiamo il blog pubblicamente.

Esistono molte opzioni per ospitare gratuitamente il tuo sito, ma preferisco mettere sia il codice sorgente che il codice di produzione in un unico posto. Dato che imposto il mio codice su GitHub, preferisco ospitare il mio sito utilizzando GitHub Pages. Ma sentiti libero di usare altri servizi per ospitare il tuo sito statico.

Nota: in seguito dovrò utilizzare Travis CI per distribuire automaticamente il sito Web dopo ogni commit, quindi potrebbe essere necessario controllare quali piattaforme supportano per la distribuzione.

Ora crea un repository chiamato username.github.io. Questo sarà il repository sia del codice sorgente per il tuo sito sia della build di produzione generata.

Poiché GitHub Page serve il contenuto del ramo principale, sarà necessario distribuire il contenuto della cartella pubblica generata dal comando filato build nel ramo principale. Dovremo inserire il nostro codice sorgente in un altro ramo. Lo chiameremo sviluppare.

Creiamo un commit iniziale e rinominiamo il ramo da sviluppare.

$ git init
$ git add.
$ git commit -m "Initial Commit"
$ git branch -m sviluppa

Ora, dobbiamo inserire il nostro codice in GitHub. Se hai già creato il repository denominato username.github.io, inserisci il tuo codice nel repository.

$ git remote aggiungi origin [email protected]: username / username.github.io.git
$ git push -u origine sviluppo

Assicurarsi che non vi siano rami master nel repository GitHub e che il ramo predefinito sia impostato per lo sviluppo.

3. Installazione di Travis per la distribuzione automatica

Questo è un passo importante. Sebbene sia possibile utilizzare la distribuzione di thread per la distribuzione, ci sono altri tre passaggi: generare una cartella pubblica, distribuirla nella Pagina GitHub, attendere e controllare online.

Ma possiamo sbarazzarci di quei passaggi con Travis CI. Travis CI è un servizio di integrazione continua, ospitato, distribuito utilizzato per creare e testare progetti software ospitati su GitHub.

Se il tuo progetto è pubblico su GitHub, Travis CI è gratuito. Ora, crea un account Travis collegandoti al tuo GitHub e aggiungi il tuo repository in Travis.

Creare un file .travis.yml nella radice del progetto

lingua: node_js
cache:
  directory:
    - ~ / .npm
notifiche:
  e-mail:
    destinatari:
      - [email protected]
    on_success: sempre
    on_failure: sempre
node_js:
  - "9"
idiota:
  profondità: 3
script:
  - costruzione del filato
distribuire:
  provider: pagine
  skip-cleanup: true
  keep-history: vero
  token github: $ GITHUB_TOKEN
  local-dir: public
  target-branch: master
  sopra:
    ramo: sviluppare

Puoi anche visualizzare su Gist. Lasciami spiegare questa configurazione:

  • notifiche: ho chiesto a Travis di inviarmi una e-mail su entrambi i successi e non sono riuscito a creare. Per impostazione predefinita, invia un'e-mail solo se lo stato è cambiato (ad esempio, se ha avuto esito positivo ma è stato modificato in non riuscito o se è fallito e modificato per correggere la build). Ma volevo ricevere e-mail anche se si trattava di un successo, in modo da poter ricontrollare online.
  • git: profondità: 3: ho chiesto a Travis di usare la profondità 3 durante la clonazione del progetto, poiché ciò contribuirà a rendere la costruzione più veloce.
  • script: lo script Travis deve essere eseguito è thread build, che crea file statici nella cartella pubblica per un'ulteriore distribuzione.
  • deploy: ho chiesto a Travis di implementare su GitHub Pages dopo il successo dello script di creazione del filo. Utilizza $ GITHUB_TOKEN che ho impostato nell'impostazione repository di Travis (tornerò su questo punto), inserisce i contenuti nella cartella pubblica nel ramo master di GitHub e dovrebbe attivare la distribuzione solo nel ramo di sviluppo. Fare clic qui per ulteriori informazioni sulla distribuzione di config.

Crea un token per Travis da inviare a GitHub

Dovrai generare un token di accesso personale con l'ambito public_repo o repo (il repository è richiesto per i repository privati) per consentire a Travis di inviare il codice al repository GitHub. Questo perché Travis esegue la creazione di thread e deve inserire la cartella pubblica nel ramo principale in cui viene pubblicata GitHub Pages.

Una volta creato un token, sarà necessario copiarlo e incollarlo nelle impostazioni del repository Travis.

Ora, aggiungi .travis.yml in git e invia le modifiche a GitHub.

$ git aggiungi .travis.yml
$ git commit -m "Aggiungi file di configurazione Travis"
$ git push origin si sviluppa

Ora puoi controllare lo stato su Travis. Dovresti vedere lo stato di Travis cambiato in giallo (in esecuzione). Se tutto va bene, diventerà verde in pochi minuti e dovresti ricevere un'e-mail sulla compilazione riuscita. Puoi visitare https://username.github.io per visualizzare il tuo blog appena creato.

4. Aggiungi un nuovo blog e pubblica

Ecco la parte divertente. Ora dimostrerò quanto sia facile pubblicare un nuovo blog usando questo processo.

Ora, aggiungiamo un nuovo blog.

  1. Crea un file index.md in src / pages / new-blog; . Dovrai creare anche una nuova cartella new-blog.
  2. Inserisci alcuni contenuti semplici in index.md.
---
titolo: Hello New Blog
data: "2018–04–16T23: 46: 37.121Z"
---
Ciao mondo

3. Conferma questo nuovo file e invialo a GitHub

$ git add.
$ git commit -m "Aggiungi un nuovo blog"
$ git push origin si sviluppa

4. Attendi il completamento di Travis e controlla online. Dopo aver ricevuto un'e-mail pochi minuti dopo, puoi controllare di nuovo https://username.github.io. Dovresti vedere il tuo nuovo blog nell'elenco.

5. Bonus: come scrivere il blog dal tuo telefono

Voglio rimuovere un altro ostacolo alla scrittura del tuo blog. Sono stato in grado di scrivere il mio blog solo quando ero con il mio laptop, ma mi chiedevo: avrei potuto usare il mio telefono per creare idee e modificare?

Si è rivelato abbastanza semplice. Tutto quello che devi fare è aggiungere i tuoi file Desktop e Documenti su iCloud Drive e inserire il tuo repository in Desktop o Documenti. Inizialmente potrebbe essere necessario del tempo, ma una volta caricato tutto, gli aggiornamenti sono immediati e posso visualizzare le mie modifiche sul mio laptop, sul mio iPhone e iPad contemporaneamente senza problemi.

Ci sono molte app di markdown su iPhone. Personalmente, trovo che IA Writer sia il migliore: supporta tutte le piattaforme, è elegante e concentrato sulla scrittura e supporta molto bene iCloud Drive.

Anche se posso anche configurare il mio iPhone per eseguire git commit e push, penso che non sia necessario. Se la parte più difficile della scrittura di un blog è già stata fatta, usare un laptop per eseguire il controllo finale e il commit del codice non è un grosso problema per me. git push è semplice come fare clic sul pulsante "Pubblica" su Medium.

Questo è tutto!

Siamo arrivati ​​alla fine di questo tutorial. Grazie per aver letto fino a questo punto.

Questo post è solo la punta dell'iceberg delle funzionalità di Gatsby. Sono sorpreso dalla sua flessibilità e funzionalità potenti. Dovresti assolutamente dare un'occhiata al suo tutorial ufficiale.