Deploy is not updating publish folder (/docs) on github (site hosted on Github Pages)

Hi there,

I built a website using Eleventy that I’m hosting on Github Pages. I recently integrated Netlify CMS to this website but I have trouble updating the publish folder (/docs) in my Github repository after making changes from Netlify CMS.

Locally, my command “npm run build” builds a /docs folder (the static website) from the /_src folder. The /docs folder is part of my commit/push to Github so I can use Github Pages. Everything works fine when building and pushing from my local environment.

When I update the website from Netlify CMS, the deploy triggers as expected and run the “npm run build” command but only my source folder (/_src) is pushed and merged to my Github repository. The built folder (/docs) that I use to serve my site from on Github Pages is not part of the push and merge even though the command built it…

Here are my Build settings :

  • Repository: github.com/elechaudel/outrospection (private)
  • Base directory: Not set
  • Build command: npm run build
  • Publish directory: Not set (tried with “docs” but same issue)
    Builds: Active

More infos:

The few resources I found online:

My question is: how can I integrate the /docs folder to the push and merge after Netlify deploy?

Hope you could help me with that!

Cheers,

Hi @elechaudel and welcome to the community!
I can’t access http://github.com/elechaudel/outrospection (possible private?)
Just to clarify, your /docs is generated during the Netlify build process based on the content in /_src?
In that case you would need to find a way to push that content back to the repo from Netlify build.
One thing I can think of is to use a Netlify build plugin https://docs.netlify.com/configure-builds/build-plugins/.
You would also need to ignore builds when /docs changes:
https://docs.netlify.com/configure-builds/file-based-configuration/#ignore-builds

Does that makes sense?

Hi @erez,

Thank you very much for your reply and your welcome message! :slight_smile:

I’m gonna have a look at the doc you sent me and try to implement your solution. I remember that @jlengstorf recently published a video on how to create a Netlify Build Plugin. I’ll start by refreshing my memory with this one!

Then, I’ll have to figure out why I need to ignore builds when /docs changes because that’s still not clear with my limited knowledge on that topic :slight_smile:

I’ll let you know my progress. Hope I will make it.

Thanks again for suggesting this solution!

Cheers,

1 Like

Hi @elechaudel, sorry for not being clear on that second part.

A build triggers on Netlify every time you make a commit to the repo (by default all commits to the default branch and commits to PRs).
You can control that here https://docs.netlify.com/site-deploys/overview/#branch-deploy-controls

If you commit back to the repo during your build process that will trigger another build which will commit back to the repo and trigger another build which will commit back to the repo and trigger another build, well you get my point…

You might not get all those builds since not all successive builds will generate changes to the /docs folder, but it is best to just ignore that folder.

Hopefully that makes sense :smiley:

Hi there,

Getting back to the discussion I started so I can give you some updates.

Spoiler > I finally found a workaround!

So if you are working with Eleventy and that you want to use Netlify CMS but still being able to serve the website from Github Pages here is how I made it work. Hope it will help you out!

1. Summary of the situation

(A) About my project:

  • The website is built with Eleventy (Static Site Generator)
  • The content of the website is managed through Netlify CMS (Headless CMS)
  • I want the website to be hosted on Github Pages not Netlify

(B) Initial setup and main issue:

  • If I need to build locally I would push the /src and /docs folder to my repo in order to save my source files and serve my website through Github Pages via the /docs folder located at the root of the repo. A new push to the repo would automatically trigger a build in Netlify but this one is useless as I’m not serving the website from Netlify. In this scenario, there is no problem at all.
  • However, if I update and publish the content from Netlify CMS, this would trigger a build from Netlify but would only push the /src folder to my Repo. The /docs folder would not be updated because not build happens from the repo itself. Unlike with a Jekyll based website no build can happen automatically from the repo.

2. What I didn’t know at the time

Github has a built-in feature to manage Jekyll builds command from the repo and unfortunately the articles I was reading about were based on a Jekyll website use case (1, 2).

So, what we need, is to replicate this behaviour. In order to replicate what this built-in feature can do with another Static Site Generator like Eleventy you can take advantage of Github Actions.

3. How to run your Eleventy build command from your repo using Github Actions

Thanks to Github Action you can run your build command from your repo. This is exactly what we need here as we want to update our /docs folder as soon as a new /src folder is pushed or merged to the repo (following a Netlify or local push to the master branch).

For that you will need:

  • a Github deploy key (specific to your repo)
  • a Github Action workflow

I highly recommend you to follow the steps from the article of Daniel Marino and thoroughly read the resources mentioned.
–> Deploying My Eleventy Site to GitHub Pages

I now have a .github/workflows directory at the root of my project where I have my config for the Eleventy build workflow (eleventy_build.yml).

The content of this file is as follow:

name: Eleventy Build

on:
  push:
    branches:
      - master


jobs:
  deploy:
    runs-on: ubuntu-18.04
    steps:
      - uses: actions/checkout@v2

      - name: Setup Node
        uses: actions/setup-node@v1
        with:
          node-version: '12.x'
      
      - name: Cache dependencies
        uses: actions/cache@v1
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-
      - run: npm ci
      - run: npm run build

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          deploy_key: ${{ secrets.ACTION_DEPLOY_KEY }}
          publish_dir: ./docs

4. Final setup

  • I now serve my website from the gh-pages branch of my repo (I was having some issues building and publishing the /docs folder to the master branch with Github Actions)
  • When working locally I only push my /src folder to the repo, the build now happens from the repo.

I’m sorry for not being able to publish a link to my project repo but I need this one to be private… Nevertheless, you can have a look at how Daniel Mariano’s website is strutured from his Githug repo.

5. Final words and acknowledgements

Thank you @erez for your lead regarding Netlify Build Plugin, thanks to that information I was able to search in the right direction!

I also want to thank you Piper who wrote the article Working with Netlify CMS and GitHub Pages and her partner Sam from the studio sb-ph for their help! :slight_smile:

Finally, thank you Daniel Marino for having published an article about this topic, this is priceless!

Good programming everyone.

Cheers,

2 Likes

Thanks @elechaudel for taking the time to post such a detailed solution!

2 Likes