I currently use it for:
- My personal blog with 250+ posts and tons of pages[0]
- A podcast platform[1] which is open source[2]
- The landing pages for all of my web development courses (not going to bother linking them since I don't want to seem like I'm fishing HN for sales)
I also recently wrote about my whole site's tech stack here[3]. That post might not fully apply to you since you want to host it on S3. I personally self host everything on DigitalOcean but using S3 wouldn't be a problem.
You mentioned "static assets" and this is where Jekyll shines IMO. The jekyll-assets plugin (optional) will md5 tag your assets for cache busting and bundle your scss / JS too. It's really handy and avoids having to set up more complicated tools. It pretty much works out of the box with close to zero configuration.
The plugin system is nice too. You can do some really useful things like automatically add certain rel attributes to external links with a few dozen lines of Ruby. It's very handy for a blog.
[0]: https://nickjanetakis.com/
[1]: https://runninginproduction.com/
[2]: https://github.com/nickjj/runninginproduction.com
[3]: https://runninginproduction.com/interviews/1-100k-page-views...
1. Look at the huge list of open-source static site generators (literally hundreds![1])
2. Try some out, and fail to find one that works exactly right.
3. Start writing a new one that fits better.
4. Gradually extend it and make it more general.
5. Get excited about how useful it is, and publish it as an open-source project so others can use it, adding it to the already enormous list.
6. Someone else starts at step 1.
[1]: https://www.staticgen.com/
I've taken to just building a new one one to meet whatever my immediate need is, and developing a sort of mental toolkit of techniques rather than trying to smush an existing program into the particular requirements of a specific project. You can get surprisingly far with just a handful of lines of code.
- Single binary distribution. No dependencies or time wasted setting up things. Just extract and use.
- Dozens of themes to pick from [0]
- Straight forward customization of theme's styling
- Tinkering Go templates are fairly easy
- Accepts markdown and Org-mode as input formats
- Tags, categories, multilingual, search, etc.
- Support for comments [1]
I've been using it for my site [2] for more two years now. It has embedded JavaScript/CSS WebGL demos, code blocks with syntax highlighting (again no dependency on Pygments, etc. and has preset themes), images, footnotes, math equations using MathJax, etc. Tools enough to write a well-formatted book.
[0]: https://themes.gohugo.io/
[1]: Disqus, Utterances, Commento, etc.
I've previously used hugo to build some customer sites. It's super quick to build, but we ended up replicating a bunch of work that Gatsby has support for like image optimisation, minification, etc.
Netlify is a good hosting option if you're not married to S3.
So all your content stays in git, and yet you can still collaborate with non-technical partners.
I built https://www.wildernessprime.com/ (https://github.com/dave/wildernessprime) with it.
Also check out https://dlvrit.com/ - this posts new articles to social networks automatically. I've configured it so that:
* There's a tick-box in the forestry config for posting to social networks.
* When this is ticked, Hugo includes the article in a special custom RSS feed.
* dlvr.it uses that custom RSS feed as its input.
So as far as my non-technical collaborator is concerned, when they're happy with the article, they tick the Socials box in the forestry admin and it magically posts to all the social networks. It's awesome.
If you want to do anything fancy, or you have a love for React, I'd suggest Gatsby as an alternative. It also makes it easier to pull in the JS ecosystem. Currently, pulling in JS libraries with Hugo is a bit clunky because it doesn't integrate directly with the standard JS tools (npm, webpack, etc).
Here's the source for my site: https://github.com/brndnmtthws/brndn-io
It is a Python based, "make a blog from theme template and markdown content" engine. There's hundreds of themes and plugins for all sorts of functionality. I spent some time twisting it and its theme engine to make http://snafuhall.com/ (read as, don't blame them for my site, the horrors are all my responsibility)
1. What is your preferred language? For Ruby, it’s probably Jekyll, Middleman, and maybe nanoc. For Javascript, it’s Gatsby and Eleventy. If you don’t mind Go’s templating language, it’s Hugo.
2. What are your priorities for a static-site generator?
- available themes? then it’s probably Jekyll or Gatsby
- easy generation of documentation? Docusaurus might be worth a look
- flexibility? for a front-end developer, Gatsby is insanely flexible
- fast build time? Hugo is probably unbeatable
- small initial payload? not Gatsby then (eleventy looks nice, and was used by Google webrel folks to build the Chrome Dev Summit site). Keep in mind that server-side-rendered React, used in Gatsby, will leave your site non-interactive during the time javascript is loading
My personal preference, as a frontend developer who likes javascript/typescript and React, is Gatsby, but Eleventy is looking increasingly appealing.
I do mine on https://viggy28.dev hosted on Firebase. Source https://gitlab.com/viggy28-websites/viggy28.dev
For my personal site I write html posts as discrete files with filenames that allow me to use bash to cat them easily into pages. Then every time I write a new post for the blog I just run something like, ls -v 2019-*.html | tac | xargs cat > blog-2019.html
To style the raw posts themselves I use HTTP header linked CSS (https://www.w3.org/TR/html4/present/styles.html#h-14.6). It doesn't work in every browser but I don't care about every browser. That's the joy of personal sites. You can just do what you want.
For generating the RSS feed I wrote a small perl script. Everything is hosted from home with nginx running on my main desktop over a cable ISP connection.
https://gist.github.com/hcarvalhoalves/27c3c43f21cd7c7df04ce...
And really static site builders are EASY to build. It's just building strings! It feels like so much of development has turned into libraries and glue code these days. It's nice to have something small and simple.
I think the biggest weakness with these SSGs is the difficulty of switching themes. With a CMS like Wordpress, changing themes takes no work, you just specify a new theme. In any popular SSG, changing themes generally means re-architecting your codebase, requiring a developer to dive into the codebase and spend an insignificant amount of time (leading one to question the value of their SSG framework), or otherwise abandon their current project and start over on the new template from scratch.
Because changing themes is such a hassle and time sink, if you just want to use a pre-made template and be done with it, then I actually recommend you look for the template you want first on ANY popular SSG, and then just use that (Jekyll seems to have the largest section of templates).
If you're planning to make your own custom template and you're a developer, then honestly I recommend you to just create your own project without these SSG frameworks, unless you just really happen to like the (often super overly opinionated) stack that they tie you into (that won't be cool anymore a year later as developers flock to the next shiny thing). Even then I think you'll find yourself working against the framework more often then you'd like, pretty much defeating the purpose. For my needs I found it easier to just parse my own Markdown files and use an npm library like showdown to convert them to HTML, and then just develop in my preferred stack.
Just a 4 step process: https://app.stackbit.com/create
For example
{1 to 10}
1 2 3 4 5 6 7 8 9 10
{(1 to 10)!{.}}
12345678910
Frankenstein’s ___.sh , a bash script that mash some html placeholders together with your multimarkdown content into a bunch of static files. Supports blog, hierarchical and plain pages.
It’s 84 lines in total plus the ”templates”
The mkfile handles deployment (just scp a fixed list, keeps me in control over what is put online) as well as construction of the pages. It also runs checks like spelling and liveliness of links. Local links are checked by first cloning the repo, so that I do not forget to add files.
There is also some custom code in there to add prefetch links for local files.
[0]: https://pandoc.org/
What I've personally used the most is Jekyll, and while it's great, I wouldn't necessarily recommend it anymore in 2019, mainly due to the diminishing ecosystem.
Personally I've moved on to 11ty which is just insanely cool, easy and flexible if you don't hate javascript.
just my 2 cents.
Eleventy is my new Jekyll replacement.
- Node.js based (a simple npx command)
- Easily understood by beginners
- supports multiple template languages
- can build pages programmatically (needed for building pages based on external data sources)
- is quite fast
I’m a huge Gatsby fan but Eleventy is preferred for projects where React isn’t necessary.
Hugo also deserves honorable mention but it’s been relegated behind Jekyll, due to its confusing documentation.
I switched to Gatsby and have generally enjoyed it. Gatsby also has had bugs that take me 10+ hours to fix but there are enough people working on Gatsby that you can often find some blog, SO, or github issue that gets you out of the jam.
Gatsby is awesome. It's all React, you can pull from so many different data sources. The plugins mean you're not needing to re-invent the wheel.
The downside of Gatsby is still the initial learning curve and API. There's a lot of fairly arbitrary feeling parts in gatsby-node.js, gatsby-browser.js, and the plugins/config that you can get stuck on or confused by. But once you generally get where it all lives, I can't imagine switching to something else.
Recent project I built with Gatsby, Material-ui, and google sheets: berlinmusicmap.com
SOURCES += $(shell find -name '*.pug')
OBJECTS += $(patsubst %.pug, %.html, $(filter %.pug, $(SOURCES)))
all: $(OBJECTS)
%.html: %.pug
pug -P $^I tried Harp, Wintersmith, Jekyll, Hugo and Gatsby.
After doing a few tests, I found that Jekyll was the best match for my uses. It seemed the most straightforward and flexible without being unnecessarily complex.
Creation of templates with custom content types was straightforward and templating didn't force the site into an overly specific HTML or directory structure.
Would recommend for similar product based or article sites. Personally haven't had any issues since migrating to Jekyll.
Being familiar with React and Javascript, React Static [1] was really quite great: easy to use, works without Javascript, but for people with Javascript enabled, page loads while navigating the site are way faster and don't require a full page refresh. Plus, it's far easier to use than Gatsby in that it doesn't require you to use a whole local GraphQL database, which is great for use cases in which the pages of your website fit in memory easily.
gatsby is a fun option as well if you dont mind working with react, docs are great, they point you to lots of example sites you can reference for help
The more that exist and rapid development, the worse your experience will be! Those features end up using third-party libraries and other tools. The static builder as well as those libraries/tools keeps getting updated, until each time you try to use the builder you get a long list of warnings (or worse errors). You spend more time updating configuration files, deciphering why you should care about a default changing, wondering what Ubuntu has renamed a package to this week, and somehow end up stubbing your toe on NPM even though you picked the builder because it was in another language. (Minor exaggeration for effect.)
TLDR: pick the builder with the least amount of functionality and development pace to keep things simpler over time.
Here’s a simple example of a blog + standalone pages, similar to what you get with Wordpress install[1].
[0] https://metalsmith.io/ [1] https://github.com/borisovg/metalsmith-blog-example/
I've seen this newer pinegrow editor which looks like the closest replacement for it I've seen: https://pinegrow.com/
I still use notepad ++, sometimes sublime text for easier multi-line template updates sitewide, and various templates like bootstrap, bulma, etc
If I was going to get into these others I've seen people mention on HN like hugo / jeckly and such, I would probably lean towards using wordpress with one of the two static html generator plugins I've found, that way there are many more template and layout options.
(you can use WP to design and crank out pages, shoot out static html and then delete all the wp files... though on sites I zip up the wordpress php files and leave the DB in case I decide to go back and add more posts / pages )
heck bluegriffon or similar can crank out html.. unless I was trying to do some kind of programmatic api connect thing, I just don't see the appeal of these other static generators - but it may just be I've used to more visual things and others are more used to command line kind of things - so long as text hits the web I guess it doesn't matter that much.
now if someone was able to make a connector where these static generators could use the themes from the wordpress.org directory - that would have me looking more closely at them.
Switching to a static site framework or SSR usually means throwing away your existing processes only to be tied into a limited framework that most likely doesn't work with all the tools you already use or want to start using.
Just search for SSR on the issue trackers of some your dependencies to see what I mean - just recently a React Beta/RC broken NextJS sites...
The right approach( as we see it is to stick a prerendering and maybe a CDN in front of your site and call it a day.
Shameless self-promotion:*
I/we run oyato cloud (beta), a proxy service (à la Cloudflare) that does prerending, etc. It's per page so you can e.g. code your site in React, but have only the landing page statically rendered e.g. https://oya.to/
Demo of a Google Lighthouse simulation of the Product Hunt homepage:
- https://oya.to/demo/ph-demo.png
- or edited demo video https://oya.to/demo/ph-demo.mp4
Live demo of a statically rendered version of HN:
- or its onion address http://5kaps5io3job5ayhb2o2riiuw6trcavvdeluq4wfnga27j6zrr3k4...
https://putyourlightson.com/plugins/blitz + https://craftcms.com/ (free if you're building the site for yourself)
There is no absolute best, otherwise everyone would use that and we'd only have one left to choose from. There may be a best for your specific use case, but to find that you'll need to do your own tailored research to decide.
https://nextjs.org/features/static-exporting https://nextjs.org/learn/excel/static-html-export https://nextjs.org/docs#automatic-static-optimization
* Biz site: https://whitefusion.io
* Personal site: https://jaredwhite.com
I use it for generating the guide for one of my projects. It loads a Rails form builder and generates syntax highlighted code samples and output with barely any effort.
You can deploy it to Cloudflare Workers, Azure Blobs, etc; and you get the customization options/rich library of Wordpress.
I don't mind creating templates and have experience wit JS and PHP.
It has native support of code highlighting and LaTeX trough pandoc and is highly customizable.
I was recently asked to propose an alternate website for the church I go to (they ended up rejecting it, which I think is good because I’m not interested in maintaining it) and what I came up with was an mkdocs repo with a hook to auto rerun mkdocs (so like a janky homebrew version of readthedocs.io) with a custom theme (also in the repo).
I’m surprised no one has mentioned it, it’s very complete and I didn’t think it had many dependancies (as far as python projects go.) It just converts a folder full of .md to a folder full of .html and will even add edit buttons to point to a web UI for your repo host (which is really great because that means authentication isn’t your problem, I’ve heard of churches running Wordpress getting their pages replaced with porn because of that which is IMO the worst case for all of this.)
I can’t remember why I didn’t use the one written in go, I tend to gravitate towards go projects since the dependancies usually aren’t so bad and you get a (mostly) statically linked binary at the end.
