
Ask HN: Best tool to build a single page, text-focused static content site? - arikr
Strikingly isn&#x27;t text focused enough - the typography sucks and page load times are huge
Squarespace isn&#x27;t designed for long form content either<p>If there was a good HTML template I&#x27;d buy that and host on S3<p>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](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/](https://readthedocs.org/) For no ads, you can use
their commercial service at [https://readthedocs.com](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/](http://www.sphinx-
doc.org/en/stable/)

1\. A few Sphinx themes: [http://www.writethedocs.org/guide/tools/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...](http://echorand.me/site/notes/articles/sphinx/static_html.html)

~~~
arikr
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](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](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/](https://gohugo.io/)

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

[https://en.wikipedia.org/wiki/Jekyll_(software)](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](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
+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](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
Nice! And looks like there are some jekyll+scrollspy combinations.

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

------
penpapersw
For
[http://penandpapersoftware.com/accomplish/](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/](https://v4-alpha.getbootstrap.com/components/scrollspy/)

~~~
arikr
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](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/](https://www.robinwieruch.de/own-website-in-five-days/)

------
applecrazy
GitHub pages + Jekyll + Markdown is very very simple

------
anotheryou
Markdown and some basic css?

