Blog: Life Beyond WordPress to JAMStack

As I’ve mentioned, I’m trying to get to a stable WordPress for a long time and maybe this time I’ll do it. JAMStack is creatingly better for vanity sites, but maybe this time for my blog as well.

Well, just before the pandemic, I tried to get out of WordPress by going to a go-based static site generator called Hugo and then free hosting on Netlify. it was fast, but I got completely railroaded by the lack of maturity of the CMS system. I tried Forestry and that was a disaster.

The other issue is that except for the resume template, they are all pretty ugly.

I’ve also tried Ghost, but the lack of a good user interface and the myriad of plugins has held me back.

I found lots of gotchas with this setup:

  1. Netlify is only free for personal repos. This doesn’t matter that much for tongfamily.com since it is all published somewhere, but I do wish that there was another alternative. It look like they changed their plans so I think personal private repos can be a free
  2. Netlify is also pretty easy, it is a GitHub application, so when you push you get a deployment to your site. The details are really confusing but it acts as a free DNS so that is nice too. They are terrible on node apps though since they only support node v18. But vercel is the right choice as they can load any node version. They support Hugo as well as long as the verses.json supports specifies the go and Hugo versions.
  3. Hugo is a pain, there isn’t much development here and the Themes are mainly copy or you have to git clone three years ago but it’s much better now. There are many templates and you can load as a go module or as a git module. Hugo mods are somewhat nicer because it’s a single Hugo command
  4. Go is definitely not a language I know well and the way that Hugo uses things like directory searching is very confusing. Also most themes back then work out of exampleSite which is not how you want to deploy. Now that’s fixed. The documentation is way better and the themes don’t need hacking.
  5. I finally ended up just forking from something that I got working which is a really bad idea. I really want to have lots of sites, but you can only do one public fork per identity back then. But now GitHub has templates. More importantly are or Hugo modules remove the restriction.
  6. Ugly templates were a problem but

Net, net Hugo and netlify got much better and it’s nice not to support a sea of JavaScript. The main issues are lack of WYSIWIG editing and ideally some net

Starting all over: in search of context editing

What I really want is something that has:

  1. Works for general blogging. WordPress is nice with iOS applications that do offline blogging, but I rarely blog on the road. But it would be nice to have a decent editor for this. And ideally something an ordinary mortal could use. Which WordPress is not.
  2. Has to look beautiful and free. Hugo failed this test. This is what makes WordPress so strong. Hugo definitely failed here. It’s one thing that squarespace does do so well even though it’s crazy expensive.
  3. Low cost. $10/month WordPress somehow became at least $40 more like $50. Zero is ideal. That’s possible.
  4. Media library and cross linking. I’m addicted to one paste YouTube links, podcast play lists and easy search for relative links. Auto cross posting to social media. It’s probably the big reason to stay with WordPress.
  5. No maintenance. That’s the big Ruediger’s pa
  6. Easy to use editor. WordPress is decent but confusing on web and great for mobile. Has do with for non geeks. Ideally there’s a self host option right out of git for me and a cloud based wysiwig for others. This would allow documentation sites. We use GitHub editor today which is ok but not visual.
  7. Security by cloud login. WordPress pain. I loved learning Linux internals like redis but WordPress bare metal is hard. Cloudways is very slow even at $25/month. Going back to managed hosting is nice.
  8. Handles 6,000 posts. Yes I have that many
  9. Git-backed CMS. Hugo is nice in that it can use Git, but I really would like a real CMS with an editor that posts to Git. The two big choices here are Tina (the former Forestry), but I wonder if there is something small and simple.
  10. Static Site Generator. There is no reason for a database with a blog like mine. I don’t have any comments and most of it is static and is posted to social media sites. There a zillion choices here based on the ultimate rendering framework which can get a sea of older frameworks like React, gatsby.js or newer ones. There are also some generators like Astro which can output anything which is pretty cool.
  11. A simple generation language. Yes, Virginia, these things eventually generate React, Vue.js or something, so you do have to learn this. This was a huge pain with Hugo in that it essentially used Go templates, so I had to learn Go to do anything. I’ve written my own React application and man is that React/Redux stuff confusing. I’m thinking about trying vue.js as an alternative.

Current Choice Dimensions

Well, I need to evaluate but this is what I’m going to have to figure out how to stitch together:

  1. Headless CMS: I’ll try a big one like Tina and then a small one that is lean
  2. Static Site Generator: I’ll try Nuxt.js and Astro (multiple products) or next.js
  3. Generation language: I know a bit about React, but I’ll give vue.js a try as it is supposed to be easier to work with. Client side JavaScript is the big change from Hugo and WordPress

Top choices

So here are some choices:

  1. Managed WordPress. For quick and dirty and no loss of features. I just need to buy that WordPress export or use the built in importer to get 6k entries across. The templates are beautiful but the editing experience for noobs is pretty bad. Well at least impossible. But for a quick and dirty site that looks good it still works well.
  2. Tina.ai with its ugly themes. Or the brain damage of hacking at every data field in each next.js theme. Because the visual editor on Tina cloud is fine for vanity startup sites if I can find a good theme. But the nice themes are not Tina enabled. You have to wrap every field with a use Tina function so it can catch them and then every page has to have a router in Tina so it knows how to get there. The latter is no big deal. The former is pretty bad. The only way out is to stick with Tina.io enabled formats and probably pay for one of their pretty ones.
  3. Drop the CMS and just use raw next.js templates pushed to vercel. This gives up on Tina and contextual editing and is a good choice for a simple product site. It’s ugly thought long term.
  4. Decap. Same idea as Tina. Ugh.
  5. Play with publii which has a notion editor that’s a desktop app. This thing is actually pretty great. Like WordPress they don’t try to be multiple output so it is completely bundled so the contextual editing works great. The problem is the customization of the site is totally bored in JavaScript files so it’s nice for end users and good for vanity sites but hard to see how it can work for blogs. Also you are trapped in their ecosystem so you have to pay for their layout stuff really. (Like Tina which is kind of the point)

Conclusions for 2024

Well sadly four years since my last look things haven’t gotten much better

  1. For open source mkdocs, GitHub pages have arrived so switch to running mkdocs gh-deploy from netlify.
  2. For beautiful sites with nice gui suck it up and pay for wix or squarespace (although a PE firm just bought square space!)
  3. Managed WordPress still has the nicest free templates and cheap hosters. End users can’t edit anything but you can support a 6,000 post blog and add YouTube and other stuff easily. It limps along. What I recommend for big blogs like tongfamily.com
  4. Hugo on netlify with personal GitHub. Yes redo a simple site with a new theme as a Hugo mod from an admin account to netlify. Try some pretty CMS like paid cloud cannon or free decap or Sveltia
  5. Next.js on git to vercel. It’s react which is nice and vercel makes it free to deploy from GitHub which is great. If you can’t regular users to edit, it’s super fast and easy. And free. the templates look great. End users can’t edit but with instant reload that’s not a big deal. And it lets me learn typescript. But really that’s not that great
  6. Publii on git to vercel. I’m going to spend a little more time figuring out if the templates are good enough, if so paying $100 for a bunch is fine and I don’t have to hack at Tsx files. The main issue is it’s a small company and the templates are blog oriented not bootstrap like. But it is nice it works as a regular app.

Some detailed notes

Best practice setup: decap then theme

1. Start with decap deploy to netlify

2. Only creates to your individual.

3. Move to org in GitHub

4. Relink in netlify.

5. Verify netlify identity works

6. A post works

7. Use only themes that works as submodule

8. Clone into themes

9. Carefully copy exampleSite to root

10. Adjust decap to edit categories like blog etc. https://decapcms.org/docs/add-to-your-site/

11. Main adjustments. Media, imports

12. Change collections to reflect where blog posts are

https://themefisher.com/best-hugo-themes a

https://gethugothemes.com/free-hugo-themes
https://www.gohugothemes.com/theme
https://dev.to/cloudcannon/top-ten-free-hugo-themes-for-2022-57ag

For Edlen.tech, Ironsnow.ltd

✅Kaldi. Business theme. More Info

✅✅✅Meghna. Startup theme. Free

✅✅✅Navigator. Biz with video. Free

✅ ✅Hero. Biz. Free.

Small App. Startup theme. $79. More Info

✅Infinity. SPA Startup free $79. More Info.

Biztrox. Biz theme $79. More Info.

Consulting for Forgepoint partners.com

✅✅Omega. Agency free.

✅✅Airspace. Agency theme Free

✅scroll. SPA. https://github.com/zjedi/hugo-scroll

Redlab – IT theme. $79 More Info

Icelab – Agency theme. $79 . More Info

For Masalabs.org

WishFund- NGO Theme. $79. More Info

Andromeda light. – spa. https://github.com/gethugothemes/andromeda-light-hugo

For Calvintong.com

Blog https://themefisher.com/hugo-blog-themes

Tranquilpeak. Blog theme. Free. More Info. Old 2015

Report. Personal blog. $79. More Info

Galaxy. Dark blog. $79. More Info

Fjord. Personal blog. More Info. Free uses stack it. Dead.

✅Main road. 2024 blog. Free. More Info

✅Wordpress 2020. https://github.com/gethugothemes/twenty-twenty-hugo

Bookworm light. Free. https://github.com/gethugothemes/bookworm-light-hugo

✅Touchy. No widgets. https://github.com/gethugothemes/touchy-hugo

✅Paige. Gomod not submodule https://github.com/willfaught/paige

Stackbit is Netlify Create. https://www.stackbit.com

Tongfamily.com

CMS: WordPress

Host: DigitalOcean

server: tongdamily droplet

Volume: 50GB /var

Volume: 25GB /home/1264501.cloudwaysapps.com/eeaewzxvun/public_html/contents/upload (delete)

Media: Cloudinary

Forgepointpartners.com

To do: bring up find pretty. Non hugoblox

Backend: GitHub.

Organization: Forgepoint

Login: admin@Forgepointpartners.com

Host: Netlify.

Login: Trang@forgepointpartners.com

Identify: netlify

CMS: Decap

Media: GitHub LFS

Theme: Wowchemy. Launch?

Ironsnow.ltd

Notes: where is repo? Very ugly. Find new

Backend: GitHub:

Organization: ironsnow1 (lost?)

Login: admin@ironsnow.ltd

Media: GitHub lfs

CMS: decap

Identity: netlify

Host: netlify

Login: admin@ironsnow.ltd

Edlen.tech

Notes: find pretty non Hugo bloc

Backend: GitHub

Organization: Edlen-tech

Login: admin@edlen.tech

Media: GitHub lfs

Calvintong.com

Notes: find pretty blog, upload, non Hugo blox

Backend: GitHub

Organization: Tongfamily

Login: rich tong

Media: GitHub LFS

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

I’m Rich & Co.

Welcome to Tongfamily, our cozy corner of the internet dedicated to all things technology and interesting. Here, we invite you to join us on a journey of tips, tricks, and traps. Let’s get geeky!

Let’s connect

Recent posts

Loading Mastodon feed…