Desktop CMS/GUI App for Hugo?


#1

I’ve been looking into what’s out there, regarding CMS/GUIs that work with Hugo.
Using this big thread as a guide: https://discuss.gohugo.io/t/web-based-editor/

But I am more interested into using a CMS locally alongside Hugo, so that I can preview anything I do inside the CMS with hugo server running in parallel.

I don’t want to connect my site to a public Github repo or use a paid CMS service

Is there anything out there that is Open Source and can be used with Hugo for content management on the humble desktop?

Any pointers are welcome.


#2

Looks like there’s really nothing for the desktop out there.

So as a workaround I’m looking into running a local server.

Just tested Caddy with the Hugo add on and it’s not really much. It doesn’t have an add image button or image previews in compose mode. Just the shortcodes.

So I"m thinking about installing Kirby and see what happens. But I would like to avoid installing PHP.

Netlify CMS looks the best but must be used through Github or their site…

If I find anything decent that works locally I’ll post an update.


#3

Have you looked into Lipi?

(Haven’t used that tool myself, just remembered it reading your post. :slight_smile: )


#4

Yes I’ve seen Lipi. But it seems unmaintained.

Funny you posted just now, as I am kind of appalled by the lack of a GUI/CMS for Hugo.

There are not that many free options really. Caddy addon is very simplistic and not a CMS at all. Prose.io is more of a markdown editor.

And Netlify CMS… Let’s just say that I am super annoyed about how they have tied their “Open Source CMS” to Github.

If you don’t have a Github repo with your site or use their service through netlify.com, you simply cannot use their CMS.

There used to be a netlify-git-api for local development that didn’t require an actual Github repo. It emulated the Github api.

Been trying to set it up all day. Even experimented with going back to the Ember app of Netlify-CMS.

Most of the time it won’t load the backend and if it does load it will not accept my login credentials.


#5

Just sent a pull request to remove the unmaintained Rango and Hugopit frontends from the Hugo Tools documentation of the docs.

(Hope I did it the right way. If not please be kind, as this is my first pull request ever).

https://github.com/spf13/hugo/pull/3498


#6

Your PR looks good to me.

I don’t personally see the draw for a desktop CMS for Hugo. I think that’s why there isn’t so many/high quality ones. What I like about Hugo is the lack of dependencies, focusing on raw Markdown, and managing everything with git through GitHub. That’s the space it lives in.

I’m not saying your wrong or anything like that btw. Everybody has their needs. I just wonder why you don’t use WordPress or Drupal if you want a GUI CMS?


#7

The hosting/CDN requirements of the platforms you mentioned, (so that a site can load within an acceptable time frame) as well as the constant security updates are not for me.

Hugo is super fast in generating a site. And a static site can be hosted anywhere without a lot of costs and load at an acceptable speed.

Also Hugo is very simple (once one grasps its concepts) and the customization options are endless without having to use too many scripts or hacks (if any at all), unlike the aforementioned platforms that are very opinionated.

Now about my need for a CMS/GUI for Hugo…

Currently I am working in a project that requires something like 10-30 images in every content page (of course I defer them and lazy load them on scroll with Javascript -but that’s another discussion-).

Handling that many images is a bit cumbersome with just a text editor -even an amazing one like Sublime Text-.

I need a way to preview the images while I type captions in a WYSIWYG editor.

Sure I can have Hugo Server running in parallel while I edit in Sublime Text -that’s what I am doing right now- but still it’s not that convenient switching windows all the time.

So that’s why I’m looking for a GUI for Hugo or even a Markdown WYSIWYG editor that can accept Hugo shortcodes while giving an image preview (there is none that I know of).

And there are some good frontends for Hugo and other static site generators out there, (the term is Headless CMS) BUT these are hosted solutions and they cost something around $120 per year.

Also I have found out the hard way to never (EVER) trust hosted solutions again.

Anyway I’m still looking at my options and what I can do with existing tools.

A few hours ago I discovered the amazing Dropbox Paper Editor and I’m already thinking of ways I could implement it in my workflow.


#8

About Lipi . I thought I should give it a try after all. (even though its repo hasn’t been updated in like 8 months).

So I installed Java 8 on Ubuntu 16.04.
Downloaded Lipi 0.5.3b.jar and gave it permission to execute.
Double-clicked it.
I saw a Welcome to Lipi screen
Clicked open Open Old Blog (that’s Open Hugo Site in Lipi’s interface).
And that was it…
It crashed and burned faster than I can say sayonara.

Ahem…

Today I had 2 frontend tools removed from the official Hugo Docs. 3 is perhaps too many.

And I definitely don’t want to acquire a Hugo Frontend Slayer reputation, or something. :wink:

So I leave Lipi for someone else to test and hopefully run.

Maybe @digitalcraftsman (since he manages the docs) should take a look and see if Lipi deserves to be in the Frontend Tools Section of the Docs after all.

So that leaves only 2 more frontend tools in the Docs.
I can say that Caddy deserves to be in the Docs. It may be slightly limited but at least it WORKS.

Can’t vouch about the frontend that works with Evernote though (and I don’t plan to test it, since I’m not an Evernote user).


#9

Oh I agree with the benefits of Hugo, that’s why I use it myself.

I guess I understand your point. Would a plugin for Sublime help or is that still not enough? I’m not a fan of Sublime only because it’s a paid for product (though a very good one). I much prefer Atom on the GUI side, though I use Vim myself. I wondering if a Sublime or Atom plugin for Hugo would be useful here.

I wouldn’t mind helping with a product to help users with your needs though building something 100% from scratch would take a lot of time, hence my focus on plugins.

Hosted solutions can be great, but when you’re in control. I stay away from closed off hosted solutions but I love VPS providers like Linode for example. GitHub is one of the few closed hosted solutions I support.


#10

There are plugins for Sublime and other editors . Can’t remember the name of the Sublime one now. I checked it out at some point a few months back. It was pretty basic.

If you plan on developing a plugin first check out what’s out there already. Hugo plugins for Editors are over here: http://gohugo.io/tools/#editor-plugins

I haven’t really experimented with Atom. Vim seems like overkill for my needs. But who knows? I’m always looking for ways to make my workflow more efficient so I might look into the other editors. Also thanks to your comment I just realized that there is some kind of an internal image preview for Sublime. I’m looking into this right now.

But this thread sort of continued into my other one over here: https://discuss.gohugo.io/t/solved-is-there-a-way-to-control-markdown-images-in-hugo/6687/3

And I managed to get a start for what I need by making a small change into Pen, https://sofish.github.io/pen/ the Markdown WYSIWYG Editor.

I’m going to try to configure Pen so that it can live under /static/ for my site. My plan is to hack my way into making a live WYSIWYG frontend to create content on the fly.

I’m thinking of having a menu with different md archetypes. With pre-filled frontmatter. With the ability to upload images that are wrapped around different shortcodes (like hero images for the top of the page and images that will be lazy loaded later on scroll etc)

I prefer this solution over other ones I’ve seen. I like working in the browser and save .md files for Hugo locally or in my Dropbox.

If I manage to do this I will share it in the form of a tutorial or something. Don’t think I’ll go all the way into forking Pen and maintain a repo as I very much doubt I have the chops to handle other people’s issues etc.


#11

Hi! onedrawingperday
I tried Lipi in my windows PC yesterday.
then works full.
no error , no warning.
Do you have windows PC?
pls check it.
If there are some mistakes in English, I’d like to apologize.
thank you!

C:>java -version
java version "1.8.0_131"
Java(TM) SE Runtime Environment (build 1.8.0_131-b11)
Java HotSpot(TM) Client VM (build 25.131-b11, mixed mode)

#12

I’m on Ubuntu 16.04 and tested it with Java 8. (like I’ve already said)

Opening a Hugo site folder with Lipi made it crash straight away.

While opening a content folder made Lipi throw a slew of exception errors.

EDIT
I got at the end of my tether with Windows over a year ago, so I’m afraid that I’m not planning to test Lipi on that operating system.


#13

When I’m doing lengthy edits, I’m doing this “split fullscreen window” thing on macOS with editor on the left and browser with live-reload on the right. And to me, having a preview that is the actual rendered page beats any CMS preview I can imagine.


#14

Yes, I’m doing the split screen trick also, on Gnome 3, but it’ can get a bit confusing, because I have too many img shortcodes on my text editor

Anyway I manage as things are. And I’ll try my plan with the markdown editor Pen and come back and share it with the community, if I get a working solution.

But also I would like to mention once again the great HugoPhotoswipe tool by Gertjan van den Burg https://github.com/GjjvdBurg/HugoPhotoSwipe

It’s easy to customize. And it’s the best tool I’ve found to deal with a lot of images in Hugo.


#15

I am posting this for anyone who needs a simple yet robust solution.

It is a browser based markdown editor with YAML frontmatter support, it offers realtime preview and it also works offline.

It fulfills my needs 100%. And I recommend it.

My img shorcodes are in the form of

{{<img href="images/1.jpg" src="/images/1-thumb.jpg" caption=Blah-blah">}}

And HackMD gives me an instant preview of this, which is amazing.

(Of course the {{ }} are around the image in the preview, but who cares).

EDIT
There is a HackMD desktop electron app. https://github.com/hackmdio/hackmd-desktop

Which is even more convenient, since it also works offline.

Image preview works inside HackMd when the images are served locally by Hugo Server.

It’s a piece of cake to remove http://localhost:1313/ from the md files once work is done.

Also if you setup HackMd on your server you can customize the Electron app so that it is served from your server directly.

So I’ll mark this thread as solved. Because that is really all that I was looking for.


#16

Glad to hear you got it solved! :slightly_smiling:


#17

I am running Hugo locally, ie "hugo server --verbose"
I have the hackMD desktop running locally under Win10.
It does display my content…

How do I actually EDIT the content? I do not see any toolbars, ala hackmd.io
OK, I wasted more time fiddling with this, and there are 3 things one can do:

  1. Custom server, which is what I did first… This omits the hackMD editor stuff… as hugo only serves raw html. But I do not want a server local, just something that works…
  2. Load from URL, pointing to localhost, this uses the hackmd built-in js resources, and its own webserver to create the editor page, and pulls in a file from a URL. OK, but hugo does html files… and we have hackMD and md editor, not going to work.
  3. HackMD running local, using File/Open to load a .md file from my local windows file system. This is better, I can EDIT! but then md vs yaml etc.
    Further Hugo seems to have a default markdown language. Yet HackMD has YAML as its preferred markup. How to bridge this? When I save a local file with the exported YAML, it looks very different after hugo processes it… I want the collaboration stuff hackMD, as I work with a team.

I only have about 20 pages now. I want ONE and only one markdown format.

Is there something similiar to hugo, a file system watcher, that sees changes to only yaml files, then outputs a hugo compatible .md file?
Or a plugin for hugo that does this?

Obviously, I am missing something basic!

Can somebody walk me through this?


#18

The YAML is only for your post’s frontmatter. The rest in hackmd is plain markdown.

You can either import existing posts with “Open History” and then click on a post.

Or just make a new one. Typing on the left pane generates the preview on the right.

There’s not really much more to it. Although if you feel like reviewing the documentation it’s available at hackmd’s Github repo.

Edit
Just saw your edits. Not aware of a file system watcher like Hugo.

Guess you need to find the workflow that suits your needs.


#19

Sigh, I am still confused…

We have multiple markdown languages WITHIN THE SAME DOCUMENT?

How does this make sense? I want to make this easier, and doing things 2 ways in one document does not seem easy.

I want to standardize on a single markdown language, and then produce a website.

Do you think it would be best for me to stick to basic hugo markdown, with a browser window alongside? That works for me, but the collaboration would be super handy.

I still think I am missing something basic…


#20

The way I work with HackMd is to open a post directly from my /content/ folder while having Hugo Server running in the background. That way while editing a post in HackMd I can review my website if I feel like it.

Also HackMd is a markdown editor. Meaning it uses PLAIN markdown and it outputs .md files. The YAML is for your Hugo posts frontmatter. And that’s all there is to it really.

If you need to output html then you should look at a different WYSIYG editor