Home
Support Forums

Local CMS error - YAMLSyntaxError: All collection items must start at the same column at line 1, column 1:

Hello,

When trying to access my CMS locally via localhost:3000/admin I’m getting the following error:

# Error loading the CMS configuration

**Config Errors:**

YAMLSyntaxError: All collection items must start at the same column at line 1, column 1: <!doctype html> ^^^^^^^^^^^^^^^…

Check your config.yml file.

However, I can access the the CMS perfectly fine in production. Any ideas? Here is my config.yml file:

backend:
  name: git-gateway
  branch: master

local_backend: true

display_url: https://vigorous-mahavira-319660.netlify.app/
logo_url: https://vigorous-mahavira-319660.netlify.app/img/baked-logo.svg

media_folder: "site/static/img"
public_folder: "img"

collections:
  - name: "work"
    label: "Work"
    folder: "site/content/work"
    create: true
    fields:
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Publish Date", name: "date", widget: "datetime"}
      - {label: "Tags", name: "tags", widget: "list"}
      - {label: "Thumbnail Image", name: "image", widget: "image"}
      - {label: "Thumbnail Video", name: "thumbnailVideo", widget: "file"}
      - {label: "Intro Blurb", name: "description", widget: "text"}
      - label: "Body section"
        name: "sections"
        widget: "list"
        collapsed: false
        fields:
          - {label: "Sub title", name: "subtitle", widget: "string"}
          - {label: "Copy", name: "copy", widget: "text"}
      - label: "Gallery"
        name: "carousel"
        widget: "list"
        fields:
          - {label: "Image", name: "image", widget: "image"}
          - {label: "Video", name: "video", widget: "file"}
          - {label: "Alt text", name: "alt", widget: "string"}
  - name: "jobs"
    label: "Jobs"
    folder: "site/content/jobs"
    create: true
    fields:
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Publish Date", name: "date", widget: "datetime"}
      - {label: "Category", name: "category", widget: "string"}
      - {label: "Job Type", name: "jobType", widget: "string"}
      - {label: "Location", name: "location", widget: "string"}
      - {label: "Salary", name: "salary", widget: "string"}
      - {label: "Note", name: "note", widget: "string"}
      - {label: "Body", name: "body", widget: "markdown"}
  - name: "pages"
    label: "Main Pages"
    files:
      - file: "site/content/_index.md"
        label: "Home Page"
        name: "home"
        fields:
          - {label: "Title", name: "title", widget: "string"}
      - file: "site/content/about/_index.md"
        label: "About Page"
        name: "about"
        fields:
          - {label: "Title", name: "title", widget: "string"}
          - {label: "Intro Blurb", name: "description", widget: "text"}
          - {label: "Section title", name: "sectionTitle", widget: "string"}
          - {label: "Section description", name: "sectionDescription", widget: "text"}
          - label: "Image Row 1"
            name: "imageRow1"
            widget: "list"
            allow_add: false
            fields:
              - {label: "Image", name: "image", widget: "image"}
              - {label: "Alt text", name: "alt", widget: "string"}
          - label: "Values"
            name: "values"
            widget: "list"
            fields:
              - {label: "Value title", name: "title", widget: "string"}
              - {label: "Value description", name: "description", widget: "text"}
          - label: "Image Row 2"
            name: "imageRow2"
            widget: "list"
            allow_add: false
            fields:
              - {label: "Image", name: "image", widget: "image"}
              - {label: "Alt text", name: "alt", widget: "string"}
          - label: "Image Row 3"
            name: "imageRow3"
            widget: "list"
            allow_add: false
            fields:
              - {label: "Image", name: "image", widget: "image"}
              - {label: "Alt text", name: "alt", widget: "string"}
      - file: "site/content/contact/_index.md"
        label: "Contact Page"
        name: "contact"
        fields:
          - {label: "Title", name: "title", widget: "string"}
          - {label: "Email", name: "email", widget: "string"}
          - {label: "WhatsApp", name: "whatsapp", widget: "string"}
          - {label: "Body", name: "body", widget: "markdown"}
  - name: "settings"
    label: "Settings"
    files:
      - file: "site/data/settings/navigation.yml"
        label: "Navigation"
        name: "navigation"
        preview: false
        fields:
          - label: "Navigation"
            name: "nav"
            widget: "list"
            fields:
              - {label: "Name", name: "label", widget: "string"}
              - {label: "Path", name: "URL", widget: "string"}
          - label: "Description"
            name: "description"
            widget: "text"
          - label: "Brands"
            name: "brands"
            widget: "list"
            fields:
              - {label: "Brand", name: "label", widget: "string"}
          - label: "Services"
            name: "services"
            widget: "list"
            fields:
              - {label: "Service", name: "label", widget: "string"}
          - label: "Contact"
            name: "contact"
            widget: "string"
      - file: "site/data/settings/footer.yml"
        label: "Footer"
        name: "footer"
        preview: false
        fields:
          - label: "Navigation"
            name: "nav"
            widget: "list"
            fields:
              - {label: "Name", name: "label", widget: "string"}
              - {label: "Path", name: "URL", widget: "string"}
          - label: "Description"
            name: "footerText"
            widget: "text"
          - {label: "Instagram", name: "instagram", widget: "string"}
          - {label: "LinkedIn", name: "linkedin", widget: "string"}
          - {label: "Vimeo", name: "vimeo", widget: "string"}
          - {label: "Spotify", name: "spotify", widget: "string"}
          - {label: "Youtube", name: "youtube", widget: "string"}
          - {label: "Dribbble", name: "dribbble", widget: "string"}
          - {label: "Twitter", name: "twitter", widget: "string"}
  - name: "basic-pages"
    label: "Basic Pages"
    folder: "site/content"
    create: true
    fields:
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Body", name: "body", widget: "markdown"}

Hi there, @shunanahara

Thanks for your interest in Netlify CMS. Looks like you posted your question a little while ago, but that you haven’t received a solution yet. Here’s where you might get more help:

netlifycms.org - the site houses our extensive documentation that likely contains helpful information to get you back on track.

netlify cms slack - join our friendly slack channel and chat with other cms pros to get the help you need.

GitHub Issues - think you’ve found a bug, or would like to make a feature request? Make your voice heard here. Netlify CMS is open source - PRs and other contributions are also welcome!

Stack Overflow Check StackOverflow for questions tagged “Netlify CMS” if you don’t get an answer in the Slack or the GH issues. StackOverflow reaches a worldwide audience of knowledgeable people.

Your question will be left open here for anyone to comment - @tomrutgers may have some thoughts as well. We encourage you to check out the above resources if you are still looking for a solution!

The line 1, column 1: <!doctype html> ^^^^^^^^^^^^^^^ kinda makes me believe a layout is being applied to your yaml file. There’s nothing wrong with your config, at least.

1 Like

Hi @shunanahara did you ever figure out the solution to this problem? I’d also love to get local development up and running, but having this exact same issue.

No solution yet, which is making developing on the CMS really difficult. Waiting for build times when changing one small thing is extremely painful

Hi @curtiswallen,

Local development does work perfectly with CMS. If you can share your config or the repo, we can check accordingly.

Thanks for your help, @hrishikesh

The config.yml can be found below.

I don’t know if it matters, but I’m running Windows 10 Version 21H1

In one shell I ran npx netlify-cms-proxy-server and got the following, which seems to be working:

npx: installed 107 in 7.297s
info: Netlify CMS File System Proxy Server configured with C:\Users\curtis\hugo-test\one-click-hugo-cms
info: Netlify CMS Proxy Server listening on port 8081

Then in another shell I ran npm start which compiled successfully and the website loads perfectly at localhost:3000, but if I try to navigate to localhost:3000/admin it gives the below error:

Error loading the CMS configuration
Config Errors:

YAMLSyntaxError: All collection items must start at the same column at line 1, column 1:

<!doctype html>
^^^^^^^^^^^^^^^…

Check your config.yml file.

I got the same error when running yarn start.

The Beta Features page from Netlify CMS says to start the Netlify CMS Proxy Server and then start the “local development server (e.g. run gatsby develop ).” So I also tried launching hugo server rather than npm/yarn start but the hugo server couldn’t even load the page and gives the error:

WARN 2021/08/25 09:45:52 found no layout file for "HTML" for kind "home": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.

config.yml:

backend:
  name: git-gateway

local_backend: true

media_folder: "site/static/img" # Folder where user uploaded files should go
public_folder: "img"

collections: # A list of collections the CMS should be able to edit
  - name: "artists" # Used in routes, ie.: /admin/collections/:slug/edit
    label: "Artists" # Used in the UI, ie.: "New Post"
    identifier_field: "name.last"
    slug: "{{name.first}}-{{name.last}}"
    summary: "{{name.first}} {{name.last}}"
    folder: "site/content/artists" # The path to the folder where the documents are stored
    create: true # Allow users to create new documents in this collection
    fields: # The fields each document in this collection have
      - {label: "Name", name: "name", widget: "object", fields: [
          {label: "First Name", name: "first", widget: "string"},
          {label: "Last Name", name: "last", widget: "string"}]}
      - {label: "Main Image", name: "main_image", widget: "image"}
      - {label: "Image Gallery", name: "image_gallery", widget: "image"}
      - {label: "Biography", name: "description", widget: "text"}
  - name: "exhibitions"
    label: "Exhibitions"
    folder: "site/content/exhibitions"
    create: true
    fields:
      - {label: "Exhibition title", name: "title", widget: "string"}
      - {label: "Start date", name: "start_date", widget: "date"}
      - {label: "End date", name: "end_date", widget: "date"}
      - {label: "Artist(s)", name: "artists", widget: "object", fields: [
          {label: "Gallery artist(s)", name: "gallery_artists", widget: "relation", collection: "artists", search_fields: ["name.last"], value_field: "{{slug}}" , display_fields: ["name.first", "name.last"], multiple: true, required: false},
          {label: "Other Artist(s)", name: "other_artists", widget: "list", required: false, summary: '{{fields.first}} {{fields.last}}', fields: [
            {label: "First name", name: "first", widget: "string"},
            {label: "Last name", name: "last", widget: "string"}]}]}
  - name: "pages"
    label: "Pages"
    files:
      - file: "site/content/_index.md"
        label: "Home Page"
        name: "home"
        fields:
          - {label: Title, name: title, widget: string}
          - {label: Subtitle, name: subtitle, widget: string}
          - {label: Image, name: image, widget: image}
          - {label: "Blurb", name: blurb, widget: object, fields: [
              {label: "Heading", name: "heading", widget: string},
              {label: "Text", name: "text", widget: "text"}]}
          - {label: "Intro", name: intro, widget: object, fields: [
              {label: "Heading", name: "heading", widget: string},
              {label: "Text", name: "text", widget: "text"}]}
          - {label: "Products", name: products, widget: list, fields: [
              {label: "Image", name: "image", widget: "image"},
              {label: "Text", name: "text", widget: "text"}]}
          - {label: "Values", name: "values", widget: "object", fields: [
              {label: "Heading", name: "heading", widget: string},
              {label: "Text", name: "text", widget: "text"}]}
      - file: "site/content/contact/_index.md"
        label: "Contact Page"
        name: "contact"
        fields:
          - {label: Title, name: title, widget: string}
          - {label: Logo, name: logo, widget: image}
          - {label: Body, name: body, widget: markdown}
          - label: Contact Entries
            name: contact_entries
            widget: list
            fields:
              - label: Heading
                name: heading
                widget: string
              - label: Text
                name: text
                widget: text
      - file: "site/content/products/_index.md"
        label: "Products Page"
        name: "products"
        fields:
          - {label: Title, name: title, widget: string}
          - {label: Image, name: image, widget: image}
          - {label: Heading, name: heading, widget: string}
          - {label: Description, name: description, widget: string}
          - {label: Intro, name: intro, widget: object, fields: [{label: Heading, name: heading, widget: string}, {label: Description, name: description, widget: text}, {label: Blurbs, name: blurbs, widget: list, fields: [{label: Image, name: image, widget: image}, {label: Text, name: text, widget: text}]}]}
          - {label: Main, name: main, widget: object, fields: [{label: Heading, name: heading, widget: string}, {label: Description, name: description, widget: text}, {label: Image1, name: image1, widget: object, fields: [{label: Image, name: image, widget: image}, {label: Alt, name: alt, widget: string}]}, {label: Image2, name: image2, widget: object, fields: [{label: Image, name: image, widget: image}, {label: Alt, name: alt, widget: string}]}, {label: Image3, name: image3, widget: object, fields: [{label: Image, name: image, widget: image}, {label: Alt, name: alt, widget: string}]}]}
          - {label: Testimonials, name: testimonials, widget: list, fields: [{label: Quote, name: quote, widget: string}, {label: Author, name: author, widget: string}]}
          - {label: Full_image, name: full_image, widget: image}
          - {label: Pricing, name: pricing, widget: object, fields: [{label: Heading, name: heading, widget: string}, {label: Description, name: description, widget: string}, {label: Plans, name: plans, widget: list, fields: [{label: Plan, name: plan, widget: string}, {label: Price, name: price, widget: string}, {label: Description, name: description, widget: string}, {label: Items, name: items, widget: list}]}]}
      - file: "site/content/values/_index.md"
        label: "Values Page"
        name: "values"
        fields:
          - {label: Title, name: title, widget: string}
          - {label: Image, name: image, widget: image}
          - label: Values
            name: values
            widget: list
            fields:
              - {label: Heading, name: heading, widget: string}
              - {label: Text, name: text, widget: text}
              - {label: Image, name: imageUrl, widget: image}

Hi @curtiswallen,

I’m unable to reproduce this when using Netlify CMS v2.10.159. I have created a dead-simple website: GitHub - Hrishikesh-K/NetlifyCMS-Test and the CMS works fine with local_backend. Could you try that and see how it goes?

I’m sure I’m missing something obvious. Thank you for bearing with me.

I cloned that repo, ran npm install then npm start and got the following error:

C:\Users\curtis\hugo-test\NetlifyCMS-Test>npm start
npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path C:\Users\curtis\hugo-test\NetlifyCMS-Test\package.json
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, open 'C:\Users\curtis\hugo-test\NetlifyCMS-Test\package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

Same happened with yarn:

C:\Users\curtis\hugo-test\NetlifyCMS-Test>yarn start
yarn run v1.22.11
error Couldn't find a package.json file in "C:\\Users\\curtis\\hugo-test\\NetlifyCMS-Test"
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Obviously the issue is the lack of package.json file, but I don’t know exactly how it needs to be constructed for the CMS test you put together. Or do I need to be launching a different dev server?

Here is the dir of the NetlifyCMS-Test folder:

 Directory of C:\Users\curtis\hugo-test\NetlifyCMS-Test

08/26/2021  10:41 AM    <DIR>          .
08/26/2021  10:41 AM    <DIR>          ..
08/26/2021  10:38 AM    <DIR>          admin
08/26/2021  10:38 AM               610 index.html
08/26/2021  10:38 AM    <DIR>          js
08/26/2021  10:38 AM    <DIR>          node_modules
08/26/2021  10:39 AM                27 package-lock.json
08/26/2021  10:38 AM                90 yarn.lock
               3 File(s)            727 bytes
               5 Dir(s)  39,412,584,448 bytes free

Try running npx netlify-cms-proxy-server instead. Check out the docs here:

https://www.netlifycms.org/docs/beta-features/#working-with-a-local-git-repository

Hi @tomrutgers

Thanks for your help!

That is the documentation I’ve been following.

I ran npx netlify-cms-proxy-server as per Step 3 of those docs, but then Step 4 says:

  1. Start your local development server (e.g. run gatsby develop ).

Which is why I tried to run npm start and yarn start in a separate shell, to get the dev server running.

Running npx netlify-cms-proxy-server works, and the shell reports:

npx: installed 107 in 7.195s
info: Netlify CMS File System Proxy Server configured with C:\Users\curtis\hugo-test\NetlifyCMS-Test
info: Netlify CMS Proxy Server listening on port 8081

localhost:8081 loads as follows:

localhost-8081

And localhost:8081/admin loads the same, but says Cannot GET /admin

Maybe I’m reading the documentation wrong? But it appears not to be working when followed as written.

I also tried loading localhost:8000/admin as per Step 5 of the docs, but that results in a connection error. I assume port 8000 is specific to gatsby develop (used as the example in the documentation)

I used npm start because that is what the GitHub - netlify-templates/one-click-hugo-cms: Hugo template with Netlify CMS docs say to use for the Hugo dev server. It launches on port 3000, which was where I was getting the config.yml error noted in my first post in this thread.

I think you don’t actually have to visit localhost:8081, that’s something CMS will connect to.

You should be able to visit /admin when you start your gatsby develop. Is that what you’re trying?

Ah OK cool that’s what I thought. Was trying everything I could think of just in case.

I’m not using Gatsby in my project, I’m using Hugo. So I didn’t use gatsby develop but npm start (as outlined in the Netlify CMS Hugo One Click documentation.)

I tried running gatsby develop from your NetlifyCMS-Test project and got the following error:

gatsby <develop> can only be run for a gatsby site.
Either the current working directory does not contain a valid package.json or 'gatsby' is not specified as a dependency

The command for starting your hugo site is hugo server. Try visiting http://localhost:1313/admin/ after you run it.

Thanks, @tomrutgers

I tried that too (from the one-click-hugo-cms repo), but the server wouldn’t start, it gave the error:

WARN 2021/08/25 09:45:52 found no layout file for "HTML" for kind "home": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.

All the templates and layouts were default as cloned from the original Netlify repo. I used the Netlify one click set up, where it linked to my github account and cloned the repo automatically. (Netlify App)

Maybe there’s something amiss with the config on the one-click setup? Will try creating a new hugo project and configure it with Netlify CMS manually and see if I can get that working locally.

I followed the instructions here https://www.netlifycms.org/docs/hugo/ and now the local dev server and cms are working properly. So something must be wrong with the one-click settings as far as local dev goes. Easy enough to copy and paste all of my previous work into this new repo and work from here though. Ty for the help!

2 Likes

Chances are the template is using an older Hugo version and something changed in the newer versions the you might be using.

Yeah, I should have cleared it saying it’s not a Gatsby site. You needed to run a simple HTTP server in that repo.

But, great to see you up and running.

I think I diagnosed what was going wrong. I was using the “one-click-hugo-cms” repo that is used during the one-click template set up here: Start with a Template | Netlify CMS | Open-Source Content Management System

That repo does not follow the standard Hugo folder structure. The content, layouts, etc. are not in the root of the repo, but one folder deeper called “site”. If I launch hugo server from within the “site” folder it works, sort of. The content renders, and I can access localhost:1313/admin, but none of the javascript or css loads, so the site is completely unstyled.

I think this is happening because that template uses webpack for those resources, so they are in a folder, called “src”, one level up from the “site” folder. It appears Netlify can handle that structure fine when deployed in production because of the associated config files in the root folder, but the local Hugo dev server doesn’t have access to that information because it’s a level back in the folder structure.

So for anyone searching the forums in the future because they found themselves facing this issue and want to do local development: don’t set up your Hugo/Netlify CMS site via the one-click template, follow the guide here instead: Hugo | Netlify CMS | Open-Source Content Management System

@shunanahara tagging you here just in case this info is useful for you.