Simple netlify cms integration to edit markdown blog on mobile

rahuketu86 · May 7, 2020, 6:07pm

Hi,

I have been experimenting with Fastpages over last few days. Today I managed to create a partial integration of netlify cms with my blog . Good thing about the setup is

Workflow based on pull request for draft post
Ability to do some editing directly from mobile. ( useful for those long commute to work)

I am wondering if some of these things can be adopted in different ways to future versions of fastpages. I espically like idea of automatic pull request to merge a finished post in netlify cms

hamelsmu · May 7, 2020, 6:46pm

Cool! I’m using Netlify to manage preview builds in fastpages

github.com

fastai/fastpages/blob/61e4e11f115b241177c03c8e494b639856be45c8/.github/workflows/chatops.yaml#L127


  run: |
    rm -rf _site
    sudo chmod -R 777 .
    
- name: Jekyll build with baseurl as root for netifly
  if: steps.get_status.outputs.status == 'private'
  uses: docker://hamelsmu/fastpages-jekyll
  with:
    args: bash -c "gem install bundler && jekyll build"
     
- name: deploy to netlify
  if: steps.get_status.outputs.status == 'private'
  id: py
  run: | 
    sudo npm install netlify-cli -g
    netlify deploy --dir _site | tee _netlify_logs.txt
    cat _netlify_logs.txt | python _action_files/parse_netlify.py


- name: make comment on PR 
  if: steps.get_status.outputs.status == 'private'
  run: |

h3045 · May 13, 2020, 12:51pm

What is happening?

Hi @rahuketu86,

I followed your blog and I have a working cms.

But the netlify website doesn’t seem to render properly.

Here’s how it looks.

I have no programming or web dev experience, but I want to understand what’s going wrong?
I changed the build command in netlify to make server but then the build fails.
Would appreciate your response

rahuketu86 · May 13, 2020, 2:30pm

I think you have not updated your baseurl. Css is looking for path at wrong url. Please change your baseurl in _config.yml and settings.ini as suggested. Welcome to world of programming. I made same mistake initially

h3045 · May 13, 2020, 5:02pm

Hi @rahuketu86,

Thanks for the swift response and the warm welcome

So here’s the actual site: https://4722794.github.io/fastpages-netlify/
This is okay

Here’s the netlify site: https://slow2fast.netlify.app/
This is not okay

Does your answer still apply?

rahuketu86 · May 13, 2020, 5:06pm

Yes. Why don’t you post a link to your repo if it’s open. I can do a quick check tomorrow. You can also check fastpagesdev.netlify.app. repo is rahuketu86/Fastpagesdev on github. This is my test repo. You can do a quick look at config.yml

rahuketu86 · May 13, 2020, 5:07pm

It will only work on one properly depending on ur url. Either github Or netlify not on both

rahuketu86 · May 13, 2020, 5:11pm

Locally sometimes I have to delete. jekyll_cache and _site folder before running make server

h3045 · May 13, 2020, 5:13pm

Repo here: https://github.com/4722794/fastpages-netlify

2 Questions:

This is what I wanted to know. Why not?

When I tried to netlify a standard jekyll blog, it worked fine.

So is that how you use your cms?

i.e Github pages website for proper display & netlify.app website admin access for making edits?

Rest, your tutorial was very clear, and I especially liked the suggestion to silence unnecessary builds in CI.

Thanks!

rahuketu86 · May 13, 2020, 5:22pm

I have my site on a private repo. Mostly as a precaution in case I get a question from work. However i have made an exact replica of setup on test repo shared above. I also have a fork of fastpages which has cms and org pages built in rahuketu86/fastpages. But even then you still need to fix url in config.

Setting should work either way for blog site either or github or netlify.

Reason it doesn’t work on both is because being a static site you generate all the links by supplying a baseurl. It is rendered by liquid template in your page layout and header with {{ site.baseurl}} expansion.
So you have to choose one. In some dynamic apps with server / react you can link it based on some dynamic values provided by a api call or callback

rahuketu86 · May 13, 2020, 5:23pm

This is done at jekyll build step in github action on remote / and fastpages-jekyll locally

rahuketu86 · May 13, 2020, 5:24pm

Then _site folder is generated which is copied to gh-pages

rahuketu86 · May 13, 2020, 5:27pm

If you render gh-pagws branch by mapping to netlify it won’t work. However if you take the build step also in netlify you can probably make it work on both but you will have to modify your github action . Add an addition transfer step as done @hamelsmu before your jekyll build step and do the same build on netlify. But why bother. It will break your upgrade in future

h3045 · May 13, 2020, 5:31pm

True.
Just tinkering here and there because right now it feels like magic. Especially the github actions part.

I’ll take a look in your repo for more clarity.

But really appreciate you taking the time.

rahuketu86 · May 13, 2020, 5:33pm

No worries we are all here to learn. I learn as much from feedback and question as by writing on blog. So keep it coming