Is there any tool to create static blog posts?
EDIT: For anyone interested, I ended up creating my own platform: https://github.com/Cristy94/markdown-blog
I want to add some blog posts (articles) on my static site. Is there any tool that allows me to write markdown (or has a visual editor) and export plain HTML/CSS that I can add to my site as a blog post and also save/version in git similar to the other static pages.
In other words, I want an editor to create a blog post and the ability to export it to HTML/CSS, while prefrably also being able to somehow version the original source files.
Important: The tool needs to be self-hosted, or just be able to run it locally. I just want a nice local WYSIWYG editor that allows for the source to be versioned (or ability to continue editing the output) and comes with default themes/styles (so I don't have to spend time designing my own).
LE: For example, I could write myself the HTML/CSS but that wouldn't be a nice editing experience and I will also spend designing the blog post. So I am asking more for pre-made blog post template that's somehow easily editable.
40 open-source gems to replace your SaaS subscriptions 🔥 🚀
After 19,314 lines of code, i'm shutting down my project
Need feedback for my product.
We are live on Product Hunt
Don't be a Jerk. Use this Tip Calculator.
Like mentioned Jekyll, Gatsby, I personally use 11ty https://www.11ty.dev/
11ty looks pretty good, does it also have a visual (WYSIYG) editor?
You'd have to pair any static site generated system with a CMS. Netlify CMS is pretty good and looks like something you want: https://templates.netlify.com/template/eleventy-netlify-boilerplate/
Netlify sounds like overkill for my case when I just need a WYSIWYG editor. Plus it's a service, right? Not a local tool?
True, but free service if you don't have many builds
I use the netlify CMS indeed, but most of the time I just write my Markdown files and view those locally in visual studio...
You can use Jekyll for that https://jekyllrb.com/
I used jekyll for mine too and you can find themes for it online 👍
i started using jekyll for my portfolio page recently. it has a bit of a learning curve, but once you devote a bit of time to it (will probably take a little longer if you're not too technical), it's fairly straightforward. and decent documentation/community. one really nice thing about it is easy hosting with github pages, so if you already know how to use git/github it's super simple to spin up a basic jekyll site.
one word of warning: choose a theme that you want to stay with for a while before you start adding content b/c changing themes is not a particularly simple process.
Thanks for the suggestion! Had a quick look over it but looks a hassle to setup (needs Ruby and I never used Ruby before), plus the documentation is not that great. It also looks too complex for needs, I think I mostly need a simple wsiwyg editor that can export to plain html/css and comes with a default blog theme. I am now really considering creating such editor as it should be easy to implement.
On a mac, just use homebrew. After installing it, type
brew install rubyfrom your terminal to get the latest. On Windows use the official download.Even after doing that, this is just the first step, then I have to learn their build process, find themes, find how to customize those themes how to deploy, etc.
I prefer the other solution mentioned of just having a markdown preview plugin for my editor, than I can just write markdown, preview it as I type and save it as HTML all from the editor. Plus I can easily stylize the output HTML with a few css rules, or just get a generic CSS stylesheet for text/markdown content.
In that case, you might find https://dillinger.io useful
That's nice, but I realized that VSCode has default markdown support. Just create a .md file and press CTRL/CMD+SHIFT+V and you have markdown preview. The cool thing is that you can also use your own stylesheet so you can preview the markdown with the same styling as on your site.
Yeah, I use the VS Code markdown previewer, too! Can it export the Markdown to an HTML file, though? If so, how do you do it?
That's what used to use dillinger for.
I actually found a better solution in my case. As my site is hosted on a PHP server and I use PHP, I now use Parsedown (PHP markdown parser) and include the .md file directly on my site. This means I have no build process, I can edit the .md files directly and the results will be seen on the site. I will create a post soon with my final solution, as I think it's a really neat/simple one to create content without any build process or services.
This comment was deleted 5 years ago.
Another much simpler suggestion if you just want to have the HTML. Download the Atom editor (https://atom.io/, free) and install the Markdown Preview plugin (https://atom.io/packages/markdown-preview, free).
When you edit a .MD file you can show the preview on the right and if your right click it, you have the options "Save as HTML" and "Copy as HTML".
Just tried it and it works like a charm :)
I think I will actually go with this solution, I really like it. The only drawback that I see is that I will have 2 files for each page (the source markdown .md, and the exported .html), but I could just ignore the html files from my git, or keep them and don't mind about them. The link I posted previosuly to VSCode markdown also has a gulp task example to automatically watch and convert .md files to .html.
Thanks! I was actually thinking about this, I use VSCode and looked if there was any markdown/HTML editor extension for VSCode, but didn't find anything.
I see there is also a Markdown preview extension for VSCode:
https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced
And to export it the markdown-it package seems to be recommended: https://code.visualstudio.com/Docs/languages/markdown#_compiling-markdown-into-html
But I am also fine with using a different editor (Atom) if it has easier HTML export.
Now the only part left would be theming/styling, but I guess I can easily do that by getting a CSS file to style basic markdown export tags (h1 tags, paragraphs, images, lists).
Yeah, CSS should be enough for styling.
This comment was deleted 5 years ago.
I ended up with a PHP solution (as my site was already in PHP so that I could include header/footer everywhere). I write the posts in .md and preview them in VSCode (as it has default markdown preview support), than include the .md directly on my site and output it using Parsedown PHP markdown parser.
So now I have a single source file (.md), live preview and no build step.
I read this a few times, and the first time I was like, that doesn't make any sense, the second time, I was like wait it actually does, and that would make a nice product. Then I realized it already exists: Sandvox. http://www.karelia.com/products/sandvox/
Thanks for the suggestion, this looks pretty suitable, unforunately I am on Windows. Also, the product seems a bit outdated, not sure if it's still maintained.
Good point about being out of date, looks like they stalled out in 2017. Too bad, they’ve been around for over a decade.
I've researched this quite a bit and recommend Hugo for your use case. It's very simple to download and get started with. Some of the other solutions like Gatsby/Ghost seemed overkill or bloated with dependencies.
I made this free online markdown editor www.markdown.site . You can download as html(and .md)
Oh, and also as I need some styling, theming, it could also let you choose from several CSS stylesheets to apply to the exported HTML (eg. also able to download a .css file stylizing all the exported HTML content).
Thanks, this is very close to what I need. Some features that would make it perfect:
Another comment actually mentioned that I could do this using a Markdown preview extension for the editor (Atom, VSCode) and export it as HTML.
This site is not popular, I hardly get 100 uses per month, it's not inspiring to put my time in this. But o will consider adding the save file with different name feature.
You can use https://gohugo.io or https://www.gatsbyjs.org/
The tool you want is https://forestry.io/
It's backed by git commits and a static site generator. But it has a Markdown and WYSIWYG editor.
Basically it's like Jekyll/Gatsby/11ty but with a nice optional UX. And you can host anywhere.
I haven't actually used it, but it's one of the tools I want to use for my next site. I was doing research and also looking for something like you used.
Thank you! This looks very close to what I need, only that I'm looking for a self-hosted solution, so I can just edit everything locally.
This comment was deleted 5 years ago.
There are a plethora of static site generators out there that can solve your problem. Maybe my tool in that area with a UI is something for you: Moopato Website Builder
Drives some of my sites. Probably I am the main user anyways.
I believe Gatsby can do that, there are other static site builders with templates you can use.
All of that is a huge waste of time I found, developers will swear by them tools though.
That is why I built https://versoly.com/features/blog, you can get a blog up in 5 minutes and start sharing content instead of worrying about all the little things.
Thanks for the reply!
Your tool looks breat but I would prefer something self-hosted, mostly because I already have my static site and hosting setup and I want the blog pages to be integrated within the current design.
The problem with site builders is that they are usually not local or they are bloated when it comes to the generated static content (eg. WordPress is way too complex and heavy for my needs).
Agreed wordpress is bloated :)
If I can be candid if https://www.usertrack.net/ is your current design redoing it will increase your conversions a lot.
I know, I am currently redesigning the site, planning to publish the new version later today. I ignored it for a long time while focusing only on improving the product itself.
This comment was deleted 5 years ago.
I use https://gohugo.io/. It's also popular among the Hacker News folks, as it recently came out (there was a "Post Your Blog" thread).
GatsbyJS is my favorite. Here is a great template for one.
https://www.gatsbyjs.org/starters/gatsbyjs/gatsby-starter-blog/
Takes about 10 minutes to set up and launch on the internet using Zeit or Netlify.
This isn’t what you describe, but offers some of the utility you mention: https://blot.im/
may i ask, what are you using to host your static site? I am myself considering hosting a static blog in the cheapest way possible.
I bought a 3 year shared hosting "business" plan from Hostgator, it was about $150, that's ~$4/mo and I host multiple sites on it (static site, PHP sites, WordPress blogs, etc). Performance is not amazing but I use Cloudflare on top to cache everything, and the sites are fast and has free HTTPS.
I see others are recommending "cloud" hosting services, but I never got the hype behind them, as you don't have a lot of control on what files you can add on them and their configuration. With a shared hosting or VPS you just get all the goodies, FTP, unlimited domains, email servers, etc.
How about INK?
I'm using it to write articles on our blog and I really like this tool.
Hey, thanks for the suggestion! I was actually thinking of developing a desktop app like this for myself - maybe now I wont have to...
Thanks! That sounds interesting (their landing page is really confusing though), but I'm looking for a local tool that doesn't require internet access or me going to a specific website to write my content.
So far the best suggestion was using a markdown preview editor plugin and just exporting it to HTML from the editor itself (such as Atom or VSCode).
It's a desktop app :) but I agree their landing page looks confusing.
I made a guide on creating a blog using Alpas. Obviously, it would take time to get to work for your specific needs and you'd need to learn about a new framework; but the basics are all there.
Thanks for the comment! Alpas looks nice, but it's overkill for my needs. @haltakov suggested a pretty simple and noice solution where I install a Markdown preview extension for my editor, I can write markdown and view results there and then just save it as HTML through the editor.
FYI the issue with this approach is you'll have to add the header and footer to every page manually then.
I recommended Sandvox in another reply, but it's possible MarsEdit might be able to do this too. IIRC MarsEdit has a built in preview you can customize, I think you could add your header and footer there, and then export the HTML.
I already have the code to add header/footer everywhere (I just use PHP includes, as I already have wamp installed locally and my server can run PHP).
I saw Sandvox, unforunately I am on Windows, not Mac, and also I have started trying the VSCode markdown idea, it actually comes with default markdown preview support.
Got it, didn’t realize you already had a PHP competent! That approach makes sense, FYI if you already have PHP, you probably don’t need to convert to HTML at all, you could just use a PHP library to convert to HTML. That’s how most static blogging engines work, your posts are stored as Markdown and are converted to HTML by the blogging engine.
This is actually a really good idea, this way I can just write Markdown and even publish it as markdown. I am going to use: https://github.com/erusev/parsedown
FWIW, we're using Gatsby for our marketing site, and regret it. If you're just doing a blog you might be safe, but essentially if you ever want to do something slightly differently than the creators intended, it's an absolute nightmare. I have heard good things about Ghost.js, which is a CMS, but ships with admin and front end software.
There is static page CMS as desktop standalone software - https://getpublii.com/
This looks like ideal solution for you. 🙂
do the gatsby + netlify stack. and you can write markdown
If you're up for tinkering with a bit of Javascript, Contentful is pretty nice for this. But something like Jekyll or Gatsby probably means more control for you without the backend aspect :)
getgrav, octobercms,getpublii...
How is your static site currently built? Just plain html+css stuff or are you using anything?
Mostly html+css but I write my code in PHP files so I can use templates and import files in other files, but I have no build step.
One crazy but simple way would be to just use notion.
Notion has an AMAZING rich text editor, with layouting, links, tables and much more.
and they allow to export the page/pages as static html. you would just need to reupload everything again, so no build step
https://www.gatsbyjs.org/
From their description, it generated React.js output, I am looking for something that just outputs plain HTML/CSS.
11ty and nuxtjs (it now supports fully static outputs)
This comment was deleted 4 years ago.
Have you tried nextjs? How does it compare?
I use NextJS at my full-time job and it's not comparable with Gatsby. Gatsby is optimized for static speed (thus easy to deploy, etc.). NextJS is a hybrid solution that also allows for partial server side rendering (so the loading speed is better than a regular web-app).
If you don't need a server or don't have dynamic content, gatsbyjs is the way to go (especially for markdown)
This comment was deleted 4 years ago.