Ask HN: Best tool to build a single page, text-focused static content site?

[arikr]

Strikingly isn't text focused enough - the typography sucks and page load times are huge Squarespace isn't designed for long form content either

If there was a good HTML template I'd buy that and host on S3

Is there a nice way to build a mobile focused single page content site, ideally with a mobile friendly table of contents?

[andythemoron]

I use Jekyll for my blog and have found it to be pretty easy to work with for the most part. You'll probably get 40 other people on this thread also using Jekyll... Most also deploying github pages. I currently deploy my blog on Heroku because I had some familiarity with it after using it for a prior project. Heroku is also easy for deployment, but a free dyno might not suit your needs. (Oh whoops, you're wanting to host on S3...)

I don't have much experience working with CSS, and I generally hate doing it, so I looked around at various themes for some basic styling. I ended up forking a simple theme that I liked (https://github.com/renyuanz/leonids) and then tweaked with it a bit to fit my preferences. Some changes were needed, but the solid foundation made it much easier to make it look good on both desktop and mobile.

[eric_bullington]

> Best tool to build a single page, text-focused static content site?

Vim.

Ok, seriously. You probably want Sphinx. Some very nice, mobile-friendly themes (I like Paramiko), and it can easily build a single page with table of contents automatically from a collection of rst or markdown pages. It's technically for documentation, but some people use it for their static web sites and blogs. Ideal for a text-driven site. I used it once to build a single-page documentation site, with table of contents (no longer online).

If you want a service that supports Sphinx, instead of deploying yourself on s3 or github, you can use readthedocs: https://readthedocs.org/ For no ads, you can use their commercial service at https://readthedocs.com

Mkdocs is another documentation generator like Sphinx with some attractive themes you could customize.

What kind of long-form content? Sounds interesting.

0. Sphinx: http://www.sphinx-doc.org/en/stable/

1. A few Sphinx themes: http://www.writethedocs.org/guide/tools/sphinx-themes/

3. Here's a blog post (written with Sphinx) on using Sphinx as a static site generator: http://echorand.me/site/notes/articles/sphinx/static_html.ht...

[arikr → eric_bullington]

Oh, great idea. Main thing missing for me in readthedocs is the mobile table of contents view feels somewhat unfriendly / poor usability. But I'll do some more mobile ToC usability research.

[interfacesketch]

You might not need a static site generator for a single page website. Why not simply author it directly in HTML and CSS? It might actually be faster (and simpler) to code by hand.

Here are two dummy test pages I made a while ago to see if I could create a fast-loading, fairly lengthy text page for slow mobile connections.

There is no table of contents, but you could add that as a simple list of links to the top of the page.

Version A (no font loading): http://interfacesketch.com/test/energy-book-synopsis-a.html

Version B (loads custom fonts - an extra 40kb approx): http://interfacesketch.com/test/energy-book-synopsis-b.html

[narrowrail]

Because of github pages support, Jekyll is the most popular, but Hugo[0] seems to be the best for other circumstances. The documentation is great and it is written in golang.

[0[https://gohugo.io/

Edit: I should clarify, 'the most popular'... Static Site Generator (SSG)... is Jekyll.

https://en.wikipedia.org/wiki/Jekyll_(software)

In my case, I run Hugo on a local box, push it to S3, and put cloudflare in front of that endpoint.

[DrNuke]

Was looking for same a couple of months ago and the latest 2017 Wordpress theme just came in handy for my own self-hosted blog at http://www.nukepep.com . I understand it is different from building it yourself but, in this case, the solution was just good enough to me and deal done. No fancy widgets, no comments, just pagination and short text posts.

[nataz → DrNuke]

+1

Get site building out of the way of whatever you real goal is.

[thiagocsf]

I've used Middleman[1] in the past to generate static websites. The output can be easily uploaded to S3 and should just work.

I used my own templates at the time but I believe there are mobile friendly and responsive available.

[1] https://middlemanapp.com

[bigzen]

I'm not sure about mobile friendly. You could probably use just about any template and hire a freelancer to touch it up.

But I just want to put my vote in for Jekyll. Makes static site generation a breeze and I use it for any site that I host these days.

[arikr → bigzen]

Nice! And looks like there are some jekyll+scrollspy combinations.

i.e. https://knanne.github.io/posts/how-to-create-custom-post-nav... (no ToC on mobile w this implementation, though)

[_ncxu]

For http://penandpapersoftware.com/accomplish/ and the accompanying blog we entirely used GitHub Pages. Took me about 3 hours to fully make everything in that website from content to style, except the blog posts which were each an hour and were written entirely in markdown. And since we hand rolled all the content and style it was trivial to make it work great on both mobile and desktop. Try scrolling through the blog code snippets, silky smooth!

[tedmiston]

Can you give a little more context on the site you're making?

Bootstrap has a component called Scrollspy [1] that does a nice menu-based list of contents. Is Bootstrap not enough / overkill for what you want to do?

What about just writing some simple HTML and CSS?

[1]: https://v4-alpha.getbootstrap.com/components/scrollspy/

[arikr → tedmiston]

Scrollspy looks great, thank you.

Single page guides with education on specific topics. e.g. "How to do X". Where the alternative would be writing a book, or a long blog post, or maybe an infographic.

And yeah, you're right. Maybe I should just do HTML/CSS. Now leaning that way.

[mabynogy]

Pandoc is nice for markdown text: http://pandoc.org/demos.html

[rwieruch]

Hugo + Digital Ocean [0]. I find it a powerful low cost combination with a lot of flexibility.

- [0] https://www.robinwieruch.de/own-website-in-five-days/

[applecrazy]

GitHub pages + Jekyll + Markdown is very very simple

[anotheryou]

Markdown and some basic css?