Web-Based Editor?


#123

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.


#124

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 ?


#125

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


#126

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

?


#127

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


#128

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


#129

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…


#130

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


#131

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.


#132

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.


#133

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.


#134

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.