gatsby starter gcn

gatsby-starter-gcn

Eine Startervorlage zum Erstellen erstaunlicher statischer Websites mit Gatsby, Contentful und Netlify. Inspiriert von Gatsby-Contentful-Starter.

Merkmale

• Inhaltliche Integration mit sofort einsatzbereiten Platzhalterinhalten
• Netlify-Integration einschließlich eines vorgefertigten Kontaktformulars
• Minimales responsives Design – zum Anpassen oder Zerlegen
• Paginierungslogik
• Theme-Benutzeroberfläche
• SEO-freundliche Komponente
  • Unterstützung für die gemeinsame Nutzung von OpenGraph
  • Sitemap-Generierung
• Google Analytics
• Progressive Web-App
• Offline-Support
• Gatsby Standardmodul zum Linting von Javascript mit StandardJS
• Stylelint-Unterstützung für Styled Components, um das CSS in JS zu linten

Demo

https://gcn.netlify.app/

Erste Schritte

Installieren

 git clone https://github.com/ryanwiemer/gatsby-starter-gcn.git
yarn install

Oder über die Gatsby-CLI

 gatsby new gatsby-starter-gcn https://github.com/ryanwiemer/gatsby-starter-gcn.git

Contentful einrichten

1. Melden Sie sich bei Contentful an und schaffen Sie einen neuen leeren Raum

2. yarn run setup

3. Geben Sie die angeforderten Informationen für Ihren Contentful-Bereich ein, die Sie hier finden: app.contentful.com → Bereichseinstellungen → API-Schlüssel . Sie müssen sowohl einen Standard-API-Schlüssel (erste Registerkarte) als auch einen Verwaltungsschlüssel (zweite Registerkarte) angeben.

Anpassung

Website-Daten

Bearbeiten Sie siteMeta-Daten in /src/gatsby-config.js

  siteMetadata: {
    title : 'GCN' , // Title of the website
    description : // Description of the website
      'A starter template to build amazing static websites with Gatsby, Contentful and Netlify' ,
    siteUrl : 'https://gcn.netlify.app' , // Website URL. Do not include trailing slash
    image : '/images/share.jpg' , // Path to default image for SEO
    menuLinks : [ // The links used in the top menu
      {
        name : 'Home' ,
        slug : '/' ,
      } ,
      {
        name : 'About' ,
        slug : '/about/' ,
      } ,
      {
        name : 'Contact' ,
        slug : '/contact/' ,
      } ,
    ] ,
    postsPerFirstPage : 7 , // Number of posts on the first page
    postsPerPage : 6 , // Number of posts used on all other pages
    /*
      Root URL for posts and tags
      For example: 'blog' will result in:
        - www.example.com/blog/
        - www.example.com/blog/post-name/
        - www.example.com/blog/tag/tag-name/
    */
    basePath : '/' , // Defaults to the homepage
  }

Hinweis: Wenn sich Ihre Änderungen bei der lokalen Entwicklung nicht widerspiegeln, müssen Sie möglicherweise yarn clean ausführen und anschließend den Server über yarn develop neu starten.

Theme-Benutzeroberfläche

Bearbeiten Sie /src/gatsby-plugin-theme-ui/index.js

 export default {
  colors : {
    background : '#ffffff' ,
    text : '#121212' ,
    primary : '#121212' ,
    secondary : '#e9e9e9' ,
    tertiary : '#f3f3f3' ,
    highlight : '#5b8bf7' ,
  } ,
  fonts : {
    body : '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif' ,
  } ,
  sizes : {
    maxWidth : '1050px' ,
    maxWidthCentered : '650px' ,
  } ,
  responsive : {
    small : '35em' ,
    medium : '50em' ,
    large : '70em' ,
  } ,
}

Verwendung des Gatsby-Standards

1. Überprüfen Sie Ihren Code mit dem yarn test schnell auf Fehler
2. Einzelheiten zur Integration der in diesem Projekt enthaltenen Gatsby Standard-, Stylelint- und Prettier-Module in Ihren Texteditor finden Sie in der README-Datei zu Gatsby Standard

Inhalt und SEO

1. Sie können die Dateien share.jpg und favicon.png im Verzeichnis static/images ersetzen.
2. Meta-Beschreibungen werden in Contentful definiert. Wenn Sie dieses Feld bei neuen Beiträgen leer lassen, wird stattdessen ein 320 Zeichen langer Auszug des Beitrags/der Seite verwendet.

Einsatz

Manuelle Netlify-Bereitstellung

1. Führen Sie gatsby build aus

2. Ziehen Sie den Ordner /public/ per Drag & Drop in Netlify

Netlify-Bereitstellung über Git (empfohlen)

1. Neue Netlify-Website von Git

2. Verbinden Sie sich mit GitHub und wählen Sie Ihr Repo aus

3. Navigieren Sie zu Netlify: Einstellungen → Erstellen und Bereitstellen → Umgebungsvariablen erstellen . Fügen Sie die folgenden Umgebungsvariablen mithilfe der Space-ID und der Content Delivery API hinzu – Zugriffstoken von Contentful. Zusätzlich können Sie bei Bedarf eine Google Analytics ID hinterlegen. Um ordnungsgemäß zu funktionieren, müssen die Variablen genau so benannt werden.

 ACCESS_TOKEN
SPACE_ID
GOOGLE_ANALYTICS

4. Navigieren Sie zu Netlify: Deploys . Klicken Sie auf Trigger deploy um manuell eine Bereitstellung auszulösen und zu bestätigen, dass die Website mithilfe Ihrer Build-Umgebungsvariablen erfolgreich erstellt wird. Beachten Sie an dieser Stelle, dass bei jedem Push-to- master Vorgang automatisch eine Bereitstellung gestartet und in der Produktion veröffentlicht wird.

Zusätzliche Einstellungen

Contentful Webhook (optional)

1. Navigieren Sie zu Netlify: Einstellungen → Erstellen und Bereitstellen → Hooks erstellen . Erstellen Sie einen neuen Build-Hook.

2. Navigieren Sie zu Contentful: app.contentful.com → Space-Einstellungen → Webhooks . Erstellen Sie einen Webhook mit der soeben erstellten Netlify-Build-URL und konfigurieren Sie, welche Ereignisse den Build in der Produktion auslösen sollen. Beispielsweise wird die Produktionswebsite jedes Mal neu erstellt, wenn ein Beitrag oder eine Seite veröffentlicht, unveröffentlicht oder gelöscht wird:

Netlify-Formularbenachrichtigungen (optional)

1. Navigieren Sie zu Netlify: Formulare → Benachrichtigungen

2. Klicken Sie auf das Dropdown-Menü „Benachrichtigung hinzufügen“ und wählen Sie die gewünschte Benachrichtigungsmethode aus.

Nützliche Tipps

• Wenn Sie während der Ausführung yarn develop Änderungen an Ihrem Contentful-Bereich vornehmen, müssen Sie ihn stoppen und den Befehl erneut ausführen, um die Änderungen zu sehen. Beispielsweise wird ein neuer Beitrag oder eine neue Seite erst dann automatisch angezeigt, wenn die Website neu erstellt wurde.
• Speichern Sie Ihre Contentful-Zugriffstokens oder Space-IDs NICHT irgendwo auf GitHub. Behandeln Sie sie wie Passwörter.