Inhoud
- Beginnen
- Gebruik een statische sitegenerator
- Onze inhoud ophalen
- Werkte het?
- Kunnen we onze gegevens opvragen?
- Toon onze berichten
- Maak een postsjabloon
- Volgende stappen
Ik hoorde voor het eerst over de headless CMS-aanpak in een lezing die ik zag vanuit Twin Cities Drupal. Ik hield van het idee van een scheiding van zorgen tussen het schrijven van inhoud en het bekijken ervan.
- De beste webhostingservices in 2019
Ik had al ervaren hoe gemakkelijk een server down kan gaan en alle sites erop kan uitschakelen, wat leidt tot minuten of uren van hartverscheurende paniek (er waren er 24 op de mijne). Ik had ook gezien hoe een monolithische CMS-gebaseerde site een beveiligingscompromis kon ondergaan en veel moeite zou kosten om te repareren (dat kostte me meer dan twee dagen onbetaald werk). Raadpleeg onze gids voor een reeks opties voor webhostingproviders.
- 23 geweldige voorbeelden van WordPress-websites
Ik heb de voordelen gezien van CDN's (Content Delivery Networks) die uw beeld-, audio- en videobestanden kunnen opslaan op servers die zijn geoptimaliseerd voor snelle levering en die bestanden over de hele wereld kunnen dupliceren voor snelle levering aan die regio's indien nodig. Wat als uw hele website zou kunnen profiteren van deze aanpak?
Je zal nodig hebben…
● Een computer met een internetverbinding (obvs)
● Een code-editor (Atom- of VS-code)
● Een commandoregel-shell / terminal
● Een recente versie van Node.js geïnstalleerd (u kunt hier downloaden en installeren)
● Een WordPress-site om inhoud van te halen. Als je er geen hebt, kun je het WordPress.com-platform of dit Heroku-buildpakket gebruiken.
● De bronbestanden van GitHub.
Beginnen
WordPress komt uit de doos met de REST API en dat is wat we gaan gebruiken om uw gegevens op te vragen. We hebben dus niet echt iets anders nodig! Onze weergavesite staat volledig los van onze inhoudssite, dus we hebben geen WordPress-thema's of andere aanpassingen nodig buiten een paar (optionele) plug-ins. Hoewel u deze natuurlijk kunt toevoegen als u dat wilt.
De uitzondering is als u aangepaste metavelden nodig heeft voor extra inhoudsgebieden. U gebruikt hiervoor waarschijnlijk geavanceerde aangepaste velden; u kunt die gegevens aan de WordPress API toevoegen door deze plug-in te installeren.
Gebruik een statische sitegenerator
Nu we onze inhoudsbron hebben, gaan we de gegevens ophalen en weergeven met behulp van een statische sitegenerator. Mijn favoriete wapen in dit rijk is Gatsby, een uitstekende generator voor statische sites die is gebouwd met JavaScript. (Zie deze keuzes voor websitebouwers voor eenvoudige manieren om een site te bouwen.)
Als je op zoek bent naar een goede manier om voort te bouwen op je JavaScript-vaardigheden en React te leren door vast te komen zitten in een bepaalde code, dan raad ik je ten zeerste aan om Gatsby te proberen. Ik heb zelf veel geleerd door ermee te spelen.
Laten we eerst een opdrachtregelprogramma installeren waarmee we Gatsby-sites kunnen maken:
npm install -global gatsby-cli
Navigeer nu naar de map waarin u uw site wilt behouden en voer deze opdracht uit:
gatsby nieuwe blog
Dit zal een nieuwe map met de naam ’blog’ maken en Gatsby en zijn afhankelijkheden voor deze map installeren. Open deze map in uw favoriete teksteditor. Het lijkt erop dat er veel bestanden zijn. Maakt u zich geen zorgen, we bewerken alleen de gatsby-config.js, gatsby-node.js bestanden en de src map, waar onze sjablonen leven.
Als u veel bestanden moet opslaan, is het de moeite waard om uw cloudopslag te upgraden.
Onze inhoud ophalen
De eerste stap die we willen nemen, is onze inhoud ophalen uit de API van de WordPress-site.
Om dat te doen, gaan we installeren gatsby-source-wordpress, een vooraf geschreven plug-in voor WordPress. Dit illustreert een van de belangrijkste redenen waarom ik van Gatsby hou: je kunt je gegevens uit verschillende bronnen halen. Veel statische sitegeneratoren zijn beperkt tot het gebruik van Markdown-bestanden, maar Gatsby is erg flexibel.
Het plug-in-ecosysteem van Gatsby is erg volwassen. Er zijn tal van vooraf geschreven manieren om uw gegevens te verkrijgen en tal van andere slimme functies die ook van pas komen.
Om de plug-in te installeren, verander je eerst de map naar je nieuwe Gatsby-site met behulp van deze opdracht: cd blog.
Voer nu deze opdracht uit: npm install --save gatsbysource-wordpress.
Zodra dat is gebeurd, is het tijd om het bestand gatsby-config.js te openen. Je zult zien dat er al een basisconfiguratie is die Gatsby ons standaard geeft. Daar gaan we op voortbouwen om onze plug-in hier te configureren:
module.exports = {siteMetadata: {title: 'Gatsby Default Starter',}, plug-ins: ['gatsby-plugin-react-helmet', {resolven: "gatsby-source-wordpress", opties: {baseUrl: "my- wordpress-site.com ", protocol:" https ", hostingWPCOM: false, useACF: true, searchAndReplaceContentUrls: {sourceUrl:" https://my-wordpress-site.com ", replacementUrl:" https: // my-static -site.com ",}},},],}
Werkte het?
U kunt dit controleren door uw terminal te openen en te typen gatsby ontwikkelen en kijk wat er gebeurt. Wees gewaarschuwd! Zelfs als je je instellingen correct hebt, krijg je sowieso enkele waarschuwingen - dit kan Gatsby zijn die op zoek is naar inhoud die je nog niet hebt geschreven.
U kunt nu gatsby-starter-default in de browser bekijken.
http: // localhost: 8000 /
Bekijk GraphiQL, een in-browser IDE, om de gegevens en het schema van uw site te verkennen.
http: // localhost: 8000 / ___ graphql
Merk op dat de ontwikkelversie niet is geoptimaliseerd. Gebruik gatsby build om een productie-build te maken.
Als de standaard starer van Gatsby (rechts) niet is wat u krijgt, controleer dan of uw WordPress-site zich niet op een subdomein bevindt, of deze zeker HTTPS of HTTP gebruikt en dat u hetzelfde heeft in uw instellingen.
Nu kunnen we naar http: // localhost: 8000 / gaan en onze Gatsby-site bekijken!
Kunnen we onze gegevens opvragen?
Het is je misschien opgevallen dat hier geen WordPress-inhoud is. Dit komt omdat we Gatsby nog niet hebben verteld wat ze ermee moeten doen. Laten we, voordat we dat doen, eerst controleren of we onze inhoud daadwerkelijk beschikbaar hebben voor Gatsby. Ga hiervoor naar deze url:
http: // localhost: 8000 / ___ graphql
Deze ingebouwde tool heet GraphiQL en is een andere geheime kracht van Gatsby.
GraphQL is vergelijkbaar met REST: het is een manier om gegevens op te vragen. Maar met GraphQL kunt u veel gemakkelijker met uw gegevens communiceren. GraphiQL (een visuele IDE voor GraphQL) kan ons enkele van deze trucs laten zien. Typ in het linkerdeelvenster het volgende:
{allWordpressPost {randen {knooppunt {sjabloonindeling id slug-status}}}}
Dit lijkt misschien een beetje op JSON, maar dat is het niet. Het is een nieuwe querytaal waarvan ik denk dat deze op een dag REST grotendeels zal vervangen als een manier om met API's te communiceren.
Wat kreeg u toen u in GraphiQL op ctrl + enter drukte? Hopelijk heb je je WordPress-berichten en -pagina aan de rechterkant van het scherm gezien.
We gaan deze vraag eigenlijk gebruiken in onze volgende stap, dus houd hem bij de hand! Misschien wilt u zien welke andere gegevens u met GraphiQL kunt krijgen terwijl u hier bent. Als je dat wilt doen, verplaats dan de cursor en typ ctrl + spatie en / of ctrl + enter. Dat zal andere groepen inhoud onthullen.
We hebben nu dus inhoud in Gatsby. Vervolgens moeten we het weergeven.
Toon onze berichten
Voor deze volgende stap gaan we gebruik maken van de gatsby-node.js het dossier.
gatsby-node.js is een bestand dat u kunt gebruiken om te communiceren met de "Node API" van Gatsby. Hier kunt u bepalen hoe uw site wordt gegenereerd en pagina's, berichten en meer maken.
We gaan hier enkele instructies schrijven om Gatsby te vertellen wat hij met onze gegevens moet doen:
const path = vereisen (`pad`); exports.createPages = ({graphql, boundActionCreators}) => {const {createPage} = boundActionCreators retourneren nieuwe belofte ((resoluut, verwerpen) => {graphql (`{allWordpressPost {randen {knooppunt {id slug statussjabloonformaat}}} } `) .then (result => {if (result.errors) {console.log (result.errors) reject (result.errors)} const postTemplate = path.resolve (` ./src/templates/ post.js` ) result.data.allWordpressPost.edges.forEach (edge => {createPage ({path: `/ $ {edge.node.slug} /`, component: postTemplate, context: {id: edge.node.id,}, })}) resolven ()})})}
Deze code maakt pagina's op basis van onze GraphQL-query en gebruikt voor elke pagina een sjabloon die we hebben gedefinieerd (/src/templates/post.js). Dus nu moeten we dat bestand maken!
Maak een postsjabloon
Maak in de map / src / een map met de naam sjablonen en een bestand met de naam post.js. Voeg er deze code aan toe:
importeer React van ’react’ importeer Helmet van ’react-helmet’ class postTemplate breidt React.Component {render () {const post = this.props.data.wordpressPost; const slug = this.props.data.wordpressPost.slug; return (div> Helmet title = {`$ {titleString} | $ {siteTitle}`} /> h1 DangerouslySetInnerHTML = {{__html: post.title}} /> div DangerouslySetInnerHTML = {{__html: post.content}} /> / div>)}} export standaard pageTemplate export const query = graphql` query currentPost ($ id: String!) {wordpressPost (id: {eq: $ id}) {title content slug} site {siteMetadata {title}}}
Dit gebruikt een andere GraphQL-query om gegevens te krijgen over het specifieke bericht dat door de gatsbynode.js bestand en gebruikt vervolgens React om dat in de browser weer te geven.
Als je snel een lijst met al je berichten wilt zien, kun je typen http: // localhost: 8000 / a in de adresbalk van uw browser. Dit brengt je naar een ontwikkeling 404-pagina, waarop al je berichten staan vermeld. Klik erop om het te bezoeken!
Volgende stappen
We hebben de oppervlakte bekrast van het gebruik van WordPress als een headless CMS en ik hoop dat ik je kennis heb gemaakt met een aantal interessante concepten en tools die je in de toekomst misschien kunt gebruiken en waarmee je kunt experimenteren.
Er is veel meer in dit verhaal en mijn collega's en ik hebben er uitgebreid over geblogd bij Indigo Tree. Ik heb ook meer geschreven op mijn persoonlijke blog, Delicious Reverie.
Houd alsjeblieft contact met mij via die kanalen en op Twitter voor meer opwindende ontwikkelingen in de wereld van headless CMS!
Dit artikel is oorspronkelijk gepubliceerd in nummer 308 van netto-, 's werelds best verkochte tijdschrift voor webontwerpers en -ontwikkelaars. Koop nummer 308 hier of schrijf je hier in.
