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!
Finally, thank you Daniel Marino for having published an article about this topic, this is priceless!
Good programming everyone.
Cheers,