Web-Based Editor?

just like @jkeim, I also use Codiad to edit hugo pages.
It’s quite easy to add a link to your template that will take you to the current page in Codiad, e.g.:

<a href="{{ print "https://codiad.server.net/#website_hugo/content/"
.File.Path }}" target="codiad_editor">Edit</a>

The #website_hugo here is the name of the project in Codiad

Then it’s quite easy to edit the site with Codiad’s built in features.
I also do a little more magic with inotifywait which watches for file changes in my /content directory and automatically rebuilds the site if a file is altered and saved.

This solution provides quite a simple workflow.

1 Like

Lot of solutions here, but there is still one annoying thing: instant previews.

Making a Web-UI that connects to github, lists all files of a repo, loads said files’ content for editing, and sends modified strings back to github can be done like in 3/4 hours of coding in vacuum… But the hard part is: how one manages to present a PREVIEW of the modified page ?

I tried both Forestry.io and netlifyCMS.org and they make a great job trying to make previews. But it’s still quite not perfect.

The only approach I see to this problem so far is to allow Hugo templates to be more isomorphic (i.e: usable from both client and server). Are there some Go conversion tools robust enough to let me parse a Hugo template from Javascript ?

Check out Pendulum. It’s listed in the docs. It has a dual pane markdown editor with instant preview.

Searched the docs for this but could not find. Do you mean this:

?

1 Like

Yes. That’s the one. I thought it was in the Docs under GUI tools.

@alexandros doesn’t pendulum just represent my markdown file in html WITHOUT its underlying template and CSS ?

To follow through with my point:

to present a PREVIEW of the modified page [by] allowing Hugo templates to be more isomorphic

I see NetlifyCMS.org actually uses React to render live previews by letting developers expose their template in React language (for what I understand one developer must then implement the same template twice, in both Hugo and React).

So is there a way we could kinda GopherJS-ize Hugo templates so that they have meaning in the browser world ? This would definitely close the gap to have real Web-Based editing experience. In fact, a minimal page with vertical split windows could help non-tech users getting started : left pane with markdown file, right pane with live result, then a button Publish that would just send the markdown content to git.

Obviously, one can think about even greater things in terms of UI/UX like extracting fields from Archtypes to create proper input fields etc… but the critical part is, from my point of view, to present a preview a la wordpress right after changing content and before broadcasting to an audience…

I have not looked into how possible this is. It is on my long list of stuff to investigate …

Both looks promising but honestly I don’t see how it combines with Hugo. They are a correct answer to build isomorphic apps from the ground up though.

I really like forestry.io but I’m having issues with their rich-text editor which munges my MathJax (math notation within dollar signs) – it keeps removing the MathJax markup, and that makes my math not show up right on the site.

E.g. if I have this in my post.md:

let's do some math $e = mc^2$

it removes the $ signs and destroys my math.

Anyone know of a work around? The best would be to simply be able to disable their rich-text editor and not mess with my raw text.

This is a very long thread. I’ve skimmed through it as best as I could, but I wonder if you guys that are more in-tune with this would mind helping me get up to speed?

I’m a technical user, and I don’t need a CMS or editor for myself. I’m perfectly comfortable editing files directly, committing to Git, etc. That’s all fine. But I have other people that need to be able to edit blog posts on one of my websites. So for them, I need an editor.

I looked at Forestry and Netlify, and initially they seemed pretty nice, but when reading through the documentation to see how it’s set up, I got thoroughly put off them. It seems like everything goes through their own websites, and that you need accounts with them, and so on. I don’t want any of that. That’s a deal-breaker for me. I just want a simple admin panel hosted on my own website. I don’t want any third-party websites or third-party accounts.

What I envision is something like an admin.php page on the web server, which looks in the Git repository’s /content/blog/ folder, and displays a list of .md files on the web page. The user picks a file to edit, or creates a new file, and produces their content through a pretty and user-friendly interface. When done, the PHP page generates the appropriate .md file and commits it to the Git repository. A Git hook runs after the commit is made, and re-deploys the website.

Is there anything like this already? Or is anyone working on this? Thanks.

First I’ll say that I never tried it, but it’s the only solution, close to it that I found.

It use a specific webserver (this one I’m using and it’s quite amazing), Caddy (it’s completly free if you compile it yourself) with the following plugin, apparently it’s a bit more difficult to compile Caddy with a specific plugin, but still I think it’s manageable.

If you try it, please share it ;).

Thanks.

What you describe seems to be already doable using a Git web service, such as Github, Gitlab or other Git applications (Gitlab, Gitea) you can install on your own server. No need of an admin.php page.

I tried it sometime ago, but it was not working yet.
I see on the github repo that it’s being actively developed recently, so I might give it a try again.

A post was split to a new topic: How to handle multiple branches in web based editor?

I had been waiting for a good solution of a static site CMS for years. Recently, NetlifyCMS has made big steps forward. It’s almost where it will be really awesome for all my smaller and larger Hugo websites.

Today is a great day: the Netlify CMS lead (erquhart) assured, that my main issue with NetlifyCMS might be their next priority.

If this issue gets solved, we can finally use all the Hugo power and organize our content in Page Bundles (which includes the ability for image processing and other nice things…)

Are others here waiting for this, too? If so, I think it would make sense to follow the issue to Store Assets Relative to Content and maybe help out with our knowledge about Hugo or even help with development (I currently don’t have the necessary React skills - but maybe soon…).

2 Likes

Hi @marcojakob,

This issue is already closed, but it didn’t solve branch bundles where I can add child posts. Or am I missing something?

Thanks.

Static sites come again back in developers who find his better choices especially for small projects.

@zabatonni
You are asking a user about something he posted one year ago.

This is not how things work in this forum. We discourage bumping old topics.

Furthermore your question is about Netlify CMS. Why don’t you ask them at their support forum.