contentful-hugo
Advanced tools
Comparing version 1.3.7 to 1.3.8
{ | ||
"name": "contentful-hugo", | ||
"version": "1.3.7", | ||
"version": "1.3.8", | ||
"description": "Node module that pulls data from Contentful and turns it into markdown files for Hugo. Can be used with other Static Site Generators, but has some Hugo specific features.", | ||
@@ -5,0 +5,0 @@ "main": "index.js", |
234
readme.md
# Contentful Hugo | ||
[![Codacy Badge](https://api.codacy.com/project/badge/Grade/281eacf31e864217953437f66b7e3a72)](https://www.codacy.com/app/joshmossas/contentful-hugo?utm_source=github.com&utm_medium=referral&utm_content=ModiiMedia/contentful-hugo&utm_campaign=Badge_Grade) | ||
This is a simple Node.js CLI tool that pulls data from Contentful CMS and turns it into Markdown or YAML files for use with a static site generator. It can be used with any static site generator that uses Markdown with YAML frontmatter, but it has some features that are specific to [Hugo](https://gohugo.io). | ||
@@ -7,10 +9,9 @@ | ||
- [Prerequisites](#Prerequisites) | ||
- [Installation](#Installation) | ||
- [Usage](#Usage) | ||
- [Configuration](#Configuration) | ||
- [Expected Output](#Expected-Output) | ||
- [Known Issues](#Known-Issues) | ||
- [Prerequisites](#Prerequisites) | ||
- [Installation](#Installation) | ||
- [Usage](#Usage) | ||
- [Configuration](#Configuration) | ||
- [Expected Output](#Expected-Output) | ||
- [Known Issues](#Known-Issues) | ||
# Prerequisites | ||
@@ -21,7 +22,11 @@ | ||
# Installation | ||
with NPM | ||
``` | ||
npm install contentful-hugo | ||
``` | ||
with Yarn | ||
``` | ||
@@ -33,5 +38,7 @@ yarn add contentful-hugo | ||
## Terminal Commands | ||
Complete [configuration](#configuration) then run the following command(s) in the terminal | ||
## When Installed Globally | ||
### When Installed Globally | ||
@@ -42,3 +49,4 @@ ``` | ||
## When Installed Locally | ||
### When Installed Locally | ||
``` | ||
@@ -61,2 +69,3 @@ npx contentful-hugo | ||
``` | ||
In this example when you run `npm start` it will first use contentful-hugo to pull Contentful data then start hugo server. In the same way when you do the command `npm run build` it will first use contentful-hugo to pull Contentful data then run `hugo --minify` to build a minified version of your hugo site. | ||
@@ -79,2 +88,3 @@ | ||
This can be done with a **.env** file in the root directory of your project. | ||
``` | ||
@@ -84,5 +94,7 @@ CONTENTFUL_SPACE = '<your-space-id>` | ||
``` | ||
You can also declare the environment variables in the command line | ||
**Powershell:** | ||
``` | ||
@@ -107,36 +119,36 @@ $env:CONTENTFUL_SPACE="<contentful_space_id>" | ||
```yaml | ||
singleTypes: | ||
# fetches only the most recently updated entry in a particular content type | ||
# Generated file will be named after the fileName setting | ||
- id: homepage | ||
directory: /content/ | ||
fileName: _index | ||
fileExtension: md | ||
# this will generate a file named "_index.md" in the "content" directory | ||
singleTypes: | ||
# fetches only the most recently updated entry in a particular content type | ||
# Generated file will be named after the fileName setting | ||
- id: homepage | ||
directory: /content/ | ||
fileName: _index | ||
fileExtension: md | ||
- id: siteSettings | ||
directory: /data/ | ||
fileName: settings | ||
fileExtension: yaml | ||
# this will generate a file named settings.yaml in the "data" directory | ||
# this will generate a file named "_index.md" in the "content" directory | ||
- id: siteSettings | ||
directory: /data/ | ||
fileName: settings | ||
fileExtension: yaml | ||
# this will generate a file named settings.yaml in the "data" directory | ||
repeatableTypes: | ||
# fetches all the entries of a content type and places them in a directory. | ||
# Generated files will be named after their Entry ID in Contentful. | ||
- id: posts | ||
directory: /content/posts/ | ||
fileExtension: md | ||
mainContent: content | ||
- id: seoFields | ||
isHeadless: true | ||
directory: /content/seo-fields/ | ||
repeatableTypes: | ||
# fetches all the entries of a content type and places them in a directory. | ||
# Generated files will be named after their Entry ID in Contentful. | ||
- id: posts | ||
directory: /content/posts/ | ||
fileExtension: md | ||
mainContent: content | ||
- id: reviews | ||
directory: /content/reviews/ | ||
mainContent: reviewBody | ||
- id: seoFields | ||
isHeadless: true | ||
directory: /content/seo-fields/ | ||
- id: staff | ||
isHeadless: true | ||
directory: /content/staff/ | ||
- id: reviews | ||
directory: /content/reviews/ | ||
mainContent: reviewBody | ||
- id: staff | ||
isHeadless: true | ||
directory: /content/staff/ | ||
``` | ||
@@ -146,10 +158,10 @@ | ||
| field | required | description | | ||
| ------ | -------- | ------------ | | ||
| id | required | contentful content type ID goes here | | ||
| directory | required | directory where you want the file(s) to be generated (leading and trailing slashes required for the time being) | | ||
| fileName | required (single types only) | name of the file generated | | ||
| fileExtension | optional | can be "md", "yml", or "yaml" (defaults to "md") | | ||
| isHeadless | optional (repeatable types only) | turns all entries in a content type into headless leaf bundles (see [hugo docs](https://gohugo.io/content-management/page-bundles/#headless-bundle)) | | ||
| mainContent | optional | field ID for field you want to be the main Markdown content. (Does not work with rich text fields) | ||
| field | required | description | | ||
| ------------- | -------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| id | required | contentful content type ID goes here | | ||
| directory | required | directory where you want the file(s) to be generated (leading and trailing slashes required for the time being) | | ||
| fileName | required (single types only) | name of the file generated | | ||
| fileExtension | optional | can be "md", "yml", or "yaml" (defaults to "md") | | ||
| isHeadless | optional (repeatable types only) | turns all entries in a content type into headless leaf bundles (see [hugo docs](https://gohugo.io/content-management/page-bundles/#headless-bundle)) | | ||
| mainContent | optional | field ID for field you want to be the main Markdown content. (Does not work with rich text fields) | | ||
@@ -173,10 +185,11 @@ # Expected Output | ||
Asset like images and videos come with some extra information that makes it easy to implement things like alt text or layouts that rely on knowing the image dimensions. The fields are as follows: | ||
```yaml | ||
assetFieldName: | ||
assetType: # indicates the asset type such as "image" "video" "audio" ect. | ||
url: # url of the asset | ||
title: # title of the asset written in Contentful | ||
description: # description of the asset written in Contentful | ||
width: # width of the asset (images only) | ||
height: # height of the asset (images only ) | ||
assetType: # indicates the asset type such as "image" "video" "audio" ect. | ||
url: # url of the asset | ||
title: # title of the asset written in Contentful | ||
description: # description of the asset written in Contentful | ||
width: # width of the asset (images only) | ||
height: # height of the asset (images only ) | ||
``` | ||
@@ -187,20 +200,24 @@ | ||
```html | ||
<img src="{{ .Params.assetFieldName.url }}" width="{{ .Params.assetFieldName.width }}"> | ||
<img | ||
src="{{ .Params.assetFieldName.url }}" | ||
width="{{ .Params.assetFieldName.width }}" | ||
/> | ||
``` | ||
This same information will also appear in asset arrays like a gallery: | ||
```yaml | ||
myGallery: | ||
- assetType: "image/jpg" | ||
url: "//link-to-image.jpg" | ||
title: "Image 1" | ||
description: "Image 1 Description" | ||
width: 500 | ||
height: 500 | ||
- assetType: "image/jpg" | ||
url: "//link-to-image-2.jpg" | ||
title: "Image 2" | ||
description: "Image 2 Description" | ||
width: 1920 | ||
height: 1080 | ||
- assetType: 'image/jpg' | ||
url: '//link-to-image.jpg' | ||
title: 'Image 1' | ||
description: 'Image 1 Description' | ||
width: 500 | ||
height: 500 | ||
- assetType: 'image/jpg' | ||
url: '//link-to-image-2.jpg' | ||
title: 'Image 2' | ||
description: 'Image 2 Description' | ||
width: 1920 | ||
height: 1080 | ||
``` | ||
@@ -214,15 +231,12 @@ | ||
linkedEntry: | ||
id: <contentful-entry-id> | ||
typeId: <content-type-ID> | ||
id: <contentful-entry-id> | ||
typeId: <content-type-ID> | ||
#example with array of linked entries | ||
relatedArticles: | ||
- | ||
id: "41UFfIhszbS1kh95bomMj7" | ||
typeId: "articles" | ||
- | ||
id: "85UFfIhsacS1kh71bpqMj7" | ||
typeId: "articles" | ||
- id: '41UFfIhszbS1kh95bomMj7' | ||
typeId: 'articles' | ||
- id: '85UFfIhsacS1kh71bpqMj7' | ||
typeId: 'articles' | ||
``` | ||
@@ -233,5 +247,5 @@ | ||
```html | ||
{{ with .Site.GetPage "<path-to-file>/<entry-id>.md" }} | ||
{{ .Title }} | ||
{{ end }} | ||
{{ with .Site.GetPage "<path-to-file | ||
>/<entry-id>.md" }} {{ .Title }} {{ end }}</entry-id></path-to-file | ||
> | ||
``` | ||
@@ -245,36 +259,36 @@ | ||
richTextField: | ||
- nodeType: "paragraph" | ||
data: {} | ||
content: | ||
- data: {} | ||
marks: [] | ||
value: "This is a simple paragraph." | ||
nodeType: "text" | ||
- nodeType: "paragraph" | ||
data: {} | ||
content: | ||
- data: {} | ||
marks: [] | ||
value: "This is a paragraph with " | ||
nodeType: "text" | ||
- data: {} | ||
marks: | ||
- type: "italic" | ||
value: "italicized text." | ||
nodeType: "text" | ||
- nodeType: "embedded-asset-block" | ||
data: | ||
assetType: "image/jpeg" | ||
url: "//images.ctfassets.net/some-image-url.jpg" | ||
title: "Image title will appear here" | ||
description: "Image description will appear here" | ||
width: 1920 | ||
height: 1080 | ||
content: [] | ||
- nodeType: 'paragraph' | ||
data: {} | ||
content: | ||
- data: {} | ||
marks: [] | ||
value: 'This is a simple paragraph.' | ||
nodeType: 'text' | ||
- nodeType: 'paragraph' | ||
data: {} | ||
content: | ||
- data: {} | ||
marks: [] | ||
value: 'This is a paragraph with ' | ||
nodeType: 'text' | ||
- data: {} | ||
marks: | ||
- type: 'italic' | ||
value: 'italicized text.' | ||
nodeType: 'text' | ||
- nodeType: 'embedded-asset-block' | ||
data: | ||
assetType: 'image/jpeg' | ||
url: '//images.ctfassets.net/some-image-url.jpg' | ||
title: 'Image title will appear here' | ||
description: 'Image description will appear here' | ||
width: 1920 | ||
height: 1080 | ||
content: [] | ||
``` | ||
In addition a plaintext version of the field will be generated using the field ID appended with "_plaintext". This allows you to quickly fetch the text by itself without any of the other data. A simple use case would be using the plaintext output to automatically generate a meta description for a webpage. | ||
In addition a plaintext version of the field will be generated using the field ID appended with "\_plaintext". This allows you to quickly fetch the text by itself without any of the other data. A simple use case would be using the plaintext output to automatically generate a meta description for a webpage. | ||
```yaml | ||
richTextField_plaintext: "This is a simple paragraph. This is a paragraph with italicized text." | ||
richTextField_plaintext: 'This is a simple paragraph. This is a paragraph with italicized text.' | ||
``` | ||
@@ -286,3 +300,3 @@ | ||
- **Date & Time Field w/o Timezone**: Hugo cannot parse date field if field is set to "date and time without timezone" | ||
- **Fetching Data Before Contentful CDN Updates**: Sometimes when triggering a build from a webhook, it won't always get the latest data. This is because it sometimes takes a couple seconds for the latest data to get distrubuted across Contentful's CDN. If you run into this issue it might be worth it to create a "wait function" just to delay fetching the data by a couple seconds. You could include it in the script you use contentful-hugo by doing something like the following ```"node wait.js && contentful-hugo"``` | ||
- **Date & Time Field w/o Timezone**: Hugo cannot parse date field if field is set to "date and time without timezone" | ||
- **Fetching Data Before Contentful CDN Updates**: Sometimes when triggering a build from a webhook, it won't always get the latest data. This is because it sometimes takes a couple seconds for the latest data to get distrubuted across Contentful's CDN. If you run into this issue it might be worth it to create a "wait function" just to delay fetching the data by a couple seconds. You could include it in the script you use contentful-hugo by doing something like the following `"node wait.js && contentful-hugo"` |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
75368
288