Jekyll Visual Editor with CD/CI?

Help
1

Hello! I currently have a Jekyll site that I am hosting out of an AWS S3 bucket. Locally I a using Git and I have a Stage branch and a Master branch. I have a question about CD/CI

For context, my current fork flow is:

  • Create a new branch in Git for whatever post I am working on. Write the post with a text editor Save and commit
  • When I am satified with this post, run bundle exec jekyll build and merge this branch for the post into the Stage branch.
  • Run a locally AWS CLI command to upload the _sites directory to the S3 bucket for the stage site (http://stage.mydomain.com).
  • If I am satified with how the site looks on Stage, merge stage into Master
  • Run a local AWS CLI command to upload the _sites directory to the S3 bucket for the prod site (http://mydomain.com)

My eventual goal to to build a pipeline to automate building the site and deploying to the S3 buckets after Git pushes. I have seen that there are some packages that are GUI admin/editors for Jekyll sites that run locally. I was curious if anyone had any experience using the GUI editors with deployment pipelines. If so, what tools were you using?

2

Hi there.

I like using jekyll-admin or jekyll-manager. See links at the bottom of my page:

You can add one to your Gemfile, install it and when you run serve, you’ll get localhost:4000/admin available.

You can then upload assets, edit and save pages and data and see stats on your site. You have to go to your repo actually commit and push any changes.

My favorite part is that the admin view makes it easy to make a page or post and edit it with rich text editor.

The downside is that since there is no auth to login, that tool can only work for local server.

This can work for your flow if all your editing is local.

3

Alternatively you can use a CMS that only works on your repo remotely but with the advantage that it supports you and invited users to login and it automatically commits when you click save.

For example Forestry which is free and takes no code to setup yet works a lot like Jekyll admin

Or Netlify CMS, which needs you to setup an admin config to describe what fields and data types are allowed. This is typically used for a hosting a site on Netlify but doesn’t have to be. You could use a randomly generated host for serving the site and then only you get to the admin view. Again the auth is controlled for you and invited users to login.

4

With the CMS side covered above, your CI/CD flow seems rather manual and local based.

Consider using Netlify to build the site for you as you can edit on Github or push a local commit and get a build. Even if you keep Forestry or Jekyll Admin as your CMS rather than Netlify CMS. It doesn’t matter how you edit, for now I am just talking deploy

Netlify will build your main branch. But it will also build your feature branch e.g. staging, as a preview URL.

mydomain-preview-12345-random.netlify.app

And then you can merge to main when you are happy.

In both cases you get a build in the cloud without touching your terminal or AWS.

And if you want you host the main branch production content on your own domain, it is free to use Netlify as your host and have your own mydomain.com to serve it.

You can even buy a domain through Netlify at about $20 a month which is on par with another provider price that I like.

5

Thank you very much for the info! I’m pretty set as far a which CI/CD tooling I want to go with since I’m going this partially in preparation for AWS DevOps certification. For now the deployment workflow is local, but eventually I will use CodeBuild. Forestry sounds promising.

6

While learning from @MichaelCurrin 's blog here … and success on first setup and ‘serve’, i’m not able to reach jekyll-admin

say that i run

jek serve -P 4000 --watch --incremental  --verbose

shouldn’t i be able to get to the jekyll-admin panel at http://localhost:4000/admin ?

what am i missing ?

thX !

7

Make sure you’ve added to plugins group

You can see my serve command here.

When things are not as expected, simplify. Take out any extras which might cause issues.

You don’t need to set port or watch flags. They are implied.

Try leave out incremental flag. Either that or livereload clashes with Jekyll Admin. When your server is running with Jekyll Admin, it does not look for changes in files that you save with the IDE. It will however rebuild the site whenever you click Save in the admin.