Kuidas kasutada Gatsby oma ajaveebi loomiseks ja selle töötamiseks telefonist

Kujutis Jesus Kiteque

Hiljuti otsustasin oma ajaveebi Gatsbysse rännata. Gatsby on lõõmav kiire staatiline saitide generaator, mis põhineb Reaktyl.

Küsimus

Miks armastavad inimesed kirjutada platvormidel nagu Keskmine, selle asemel, et kasutada staatilist saidigeneraatorit?

Inimesi on kahte tüüpi: inimesed, kes kirjutavad sellistele platvormidele nagu Keskmine, ja inimesed, kes ise ajaveebi kodeerivad, kasutades staatilisi saidigeneraatoreid.

Staatiliste saidigeneraatoritega võrreldes on avalikes platvormides, nagu näiteks Keskmine, kirjutamisel palju eeliseid. Kui kirjutate avalikes platvormides, saate kirjutada sülearvutis ja muuta oma telefonis. Kui olete kirjutamise lõpetanud, peate lihtsalt klõpsama nuppu Avalda. Kõik on tehtud, teie ajaveeb on reaalajas ja saate kohe oma publikuni jõuda.

Teisest küljest, kui kirjutate ajaveebi staatilises saidigeneraatoris, peate meeles pidama kõik skriptid, eelvaate ajaveebil localhostis üles ehitama, ajaveebi tootmiseks koostama, muudatused GitHubisse kinnitama ja nendele jõudma ning oma saidi juurutama avalik. Kui midagi läheb valesti, peate võib-olla mõnda toimingut kordama ja ootama mõni minut, kuni veebipäevik on see, mida soovite.

Lõpuks kulutate palju rohkem aega tegemata oluliste asjade tegemisele peale tegeliku kirjutamise.

Miks peaksite avalike platvormide asemel kirjutama Gatsbys?

Ma arvan, et sellepärast loobuvad inimesed lõpuks staatilise saidigeneraatori abil kirjutamisest ja kirjutavad selle asemel keskmisele. Kuid seal on midagi sellist, mida keskmine või Wordpress ei suuda pakkuda: mida rohkem te kirjutate, seda rohkem soovite hoida oma kirjutisi kindlas kohas ja lihtsas vormingus, nagu võiksite päevikuraamatuid aastaid hoida.

Kuid kujutage ette, et ühel päeval soovite rännata kõik, mida kirjutasite, keskmisest kuhugi mujale. Siis loodate, et olete kõik Markdownisse kirjutanud ja teil on nende Markdown-failide majutamiseks sait.

Kuid kuidas saan teha kirjutamise Gatsbys sama lihtsaks kui keskmisel kirjutamine?

Staatilise saidigeneraatori abil kirjutamine ei pea olema keeruline. Usun alati, et mida lihtsam on oma ajaveebi kirjutada ja avaldada, seda rohkem sa kirjutad. Pärast erinevate seadistuste proovimist ja uurimist olen tulemusega päris rahul.

Minu seadistuses koos Travis CI-ga on git push uus nupp "Avalda". Teil on vaja vaid kinnitada ja oma kood sisestada. Ja ma jagan ka seda, kuidas oma telefonis blogi redigeerida.

Jagasin selle postituse viieks osaks:

  1. Kuidas luua Gatsby ajaveebi
  2. Githubi lehtede seadistamine teie ajaveebi hostimiseks
  3. Travise seadistamine automaatseks juurutamiseks
  4. Uue ajaveebi lisamine ja avaldamine
  5. Boonus: kuidas oma telefoni ajaveebi kirjutada

1. Kuidas luua Gatsby ajaveebi

Gatsby abil blogi seadistamiseks on palju õpetusi, mis käsitlevad kõiki võimsaid funktsioone, mida Gatsby pakub. See postitus sellele ei keskendu, kuid näitan siiski mõned põhilised sammud teie ajaveebi üles seadmiseks ja käitamiseks.

Eeldan, et olete juba JavaScripti arendaja ja teate mõnda npm, lõnga ja pideva integreerimise põhitõde. Selle õpetuse jaoks kasutan lõnga, kuid kasutage julgelt npm.

Esiteks installige gatsby-cli ja looge uus repo, kasutades Gatsby ametlikku ajaveebi käivitajat.

Ülemaailmne lõng $ gatsby-cli
$ gatsby uus gatsby-ajaveeb https://github.com/gatsbyjs/gatsby-starter-blog
$ cd gatsby-ajaveeb
$ gatsby areneb

Nüüd avage oma brauseris localhost: 8000 ja peaksite loodud brauserit nägema.

2. Seadistage Github Pages oma ajaveebi hostimiseks

Võõrustagem nüüd ajaveebi avalikult.

Teie saidi tasuta hostimiseks on palju võimalusi, kuid eelistaksin panna nii lähtekood kui ka tootmiskood ühte kohta. Kuna pühendan oma koodi GitHubile, eelistan oma saiti hostida GitHub Pages abil. Kasutage oma staatilise saidi majutamiseks ka muid teenuseid.

Märkus. Hiljem pean pärast iga pühendumist veebisaidi automaatseks juurutamiseks kasutama Travis CI-d, nii et peate võib-olla kontrollima ka seda, milliseid platvorme nad toetavad.

Nüüd looge repo nimega kasutajanimi.github.io. See on nii teie saidi lähtekoodi kui ka genereeritud tootmise kogum.

Kuna GitHubi leht teenindab haru sisu, peate juhtseadme lõnga ehitamise käsu loodud avaliku kausta sisu juhtseadmesse juurutama. Peame oma lähtekoodi paigutama teise haru. Me kutsume seda välja arenema.

Loome esialgse kohustuse ja nimetame arendatava haru ümber.

$ git init
$ git lisada.
$ git commit -m “Initial Commit”
$ git filiaal -m areneda

Nüüd peame oma koodi sisestama GitHubisse. Kui olete juba repo nimega kasutajanimi.github.io loonud, lükake oma kood reposse.

$ git serveri lisamine päritolu git@github.com: kasutajanimi / kasutajanimi.github.io.git
$ git push -u päritolu areneb

Veenduge, et teie GitHubi repos pole peaharu ja et vaikimisi haru on loodud arenema.

3. Seadistage Travis automaatseks juurutamiseks

See on oluline samm. Ehkki lõnga juurutamisel saame kasutada juurutamist, on see veel kolm sammu: genereerida avalik kaust, juurutada GitHubi lehele, oodata ja kontrollida võrgus.

Kuid nendest sammudest saame lahti Travis CI abil. Travis CI on hostitud, hajutatud pideva integratsiooni teenus, mida kasutatakse GitHubis hostitavate tarkvaraprojektide loomiseks ja testimiseks.

Kui teie projekt on GitHubis avalik, on Travis CI tasuta. Nüüd looge Travise konto, luues ühenduse oma GitHubiga, ja lisage oma repo Travisse.

Looge projekti juur .travis.yml-fail

keel: sõlme_js
vahemälu:
  kataloogid:
    - ~ / .npm
teated:
  e-post:
    saajad:
      - chen@huchen.me
    on_success: alati
    on_failure: alati
sõlme_js:
  - '9'
git:
  sügavus: 3
skript:
  - lõnga ehitamine
juurutada:
  pakkuja: lehed
  vahelejätmine: tõsi
  pidama ajalugu: tõsi
  github-token: $ GITHUB_TOKEN
  kohalik-dir: avalik
  sihtharu: meister
  peal:
    haru: arendada

Saate vaadata ka saidil Gist. Selgitan seda konfiguratsiooni:

  • teated: palusin Travisel saata mulle e-kiri nii õnnestumise kui ka ebaõnnestumise kohta. Vaikimisi saadab see meilisõnumeid ainult siis, kui olek on muutunud (näiteks kui see oli edu, kuid muudeti nurjumiseks või kui see nurjus ja kui seda muudeti ehituse fikseerimiseks). Kuid ma tahtsin saada meilisõnumeid isegi siis, kui see oli edukas, et saaksin veebis uuesti kontrollida.
  • git: sügavus: 3: Palusin Travisel projekti kloonimisel kasutada sügavust 3, kuna see aitab ehitust kiiremaks muuta.
  • skript: Travise käivitatav skript on lõngaehitus, mis loob avalikus kaustas staatilised failid edasiseks juurutamiseks.
  • juurutamine: palusin Travisel pärast lõnga ehitamise skripti edukust GitHubi lehtedel kasutusele võtta. See kasutab $ GITHUB_TOKENi, mille seadsin Travise repo seadistuses (tulen selle juurde järgmisele), lükkab avaliku kausta sisu GitHubi peaharu ja peaks käivitama ainult arendusharule juurutamise. Konfiguratsiooni juurutamise kohta klõpsake siin.

GitHubisse jõudmiseks looge Travise jaoks luba

Peate genereerima isikliku juurdepääsu loa koos public_repo või repo ulatusega (privaatsete hoidlate jaoks on vaja repot), et võimaldada Travisel sisestada kood GitHubi reposse. Selle põhjuseks on asjaolu, et Travis juhib lõngakontrolli ja peab avaliku kausta suruma ülemise harusse, kus GitHub Pages töötab.

Kui märk on loodud, peate selle kopeerima ja kleepima oma Travise reposätetesse.

Nüüd lisage gitisse .travis.yml ja lükake muudatused GitHubisse.

$ git add .travis.yml
$ git activ -m “Travise konfiguratsioonifaili lisamine”
$ git push päritolu areneb

Nüüd saate Travise olekut kontrollida. Peaksite nägema Travise olekut kollaseks (töötab). Kui kõik on korras, muutub see mõne minuti pärast roheliseks ja eduka ehituse kohta peaksite saama meili. Äsja loodud ajaveebi vaatamiseks võite külastada lehte https://username.github.io.

4. Lisage uus ajaveeb ja avaldage

Siit tuleb lõbus osa. Nüüd näitan, kui lihtne on seda protsessi kasutades uus ajaveeb avaldada.

Lisame nüüd uue ajaveebi.

  1. Looge fail index.md src / pages / new-blogis; . Peate looma ka uue kausta new-blog.
  2. Pange index.md-sse mõni lihtne sisu.
---
pealkiri: Tere uus blogi
kuupäev: "2018–04–16T23: 46: 37.121Z"
---
Tere, Maailm

3. Pange see uus fail tööle ja sisestage GitHub

$ git lisada.
$ git activ -m “Lisa uus ajaveeb”
$ git push päritolu areneb

4. Oodake, kuni Travis on lõpetanud ja kontrollige veebis. Kui olete mõni minut hiljem e-kirja saanud, saate uuesti kontrollida aadressi https://username.github.io. Peaksite oma uut ajaveebi nimekirjas nägema.

5. Boonus: kuidas kirjutada ajaveeb oma telefonist

Tahan eemaldada teie blogi kirjutamisel veel ühe tõkke. Suutsin oma ajaveebi kirjutada alles siis, kui olin oma sülearvutiga kaasas, kuid mõtlesin: kas saaksin oma telefoni ideede koostamiseks ja redigeerimiseks kasutada?

See osutus üsna lihtsaks. Kõik, mida peate tegema, on lisada oma töölaua- ja dokumendifailid iCloud Drive'i ja panna repoteesid kas töölauale või dokumentidesse. Algselt võib see võtta veidi aega, kuid kui kõik on üles laaditud, on värskendused kohe saadaval ja saan vaadata oma muudatusi sülearvutis, iPhone'is ja iPadis ilma probleemideta.

IPhone'is on palju märkimisrakendusi. Isiklikult leian, et IA Writer on parim: see toetab kõiki platvorme, on elegantne ja keskendunud kirjutamisele ning toetab iCloud Drive'i väga hästi.

Ehkki ma saan ka oma iPhone'i seadistada nii, et see paneks toime ja suruks, tunnen, et see pole vajalik. Kui ajaveebi kirjutamise kõige raskem osa on juba tehtud, pole sülearvuti kasutamine lõplikuks kontrollimiseks ja koodi kinnitamiseks minu jaoks suur probleem. git push on sama lihtne kui klõpsate keskmisel nupul „Avalda”.

See selleks!

Oleme jõudnud selle õpetuse lõpuni. Täname, et lugesite seda kaugelt.

See postitus on vaid Gatsby funktsioonide jäämäe tipp. Mind hämmastab selle paindlikkus ja võimsad omadused. Peaksite kindlasti kontrollima selle ametlikku õpetust.