Building a fast, secured and free static site in less than three hours | Hacker News Reader

Building a fast, secured and free static site in less than three hours

fillmem.com

387 pointsleoht196 comments

Open articleView on HN

Neocities [0] does all of this!

- It's free (though you can become a supporter and get some extra benefits) [1]

- It's fast, since it uses it's own CDN. [2]

- It's secure, all pages support SSL, even with custom domains. [3]

- It has a command line tool [4] that can be wrapped to automate upload of pages, or used in a Git hook.

- It has a plethora of learning resources [5].

[0] https://neocities.org

[1] https://neocities.org/supporter

[2] https://www.youtube.com/watch?v=-i6wvix6buI

[3] https://blog.neocities.org/default-ssl.html

[4] https://neocities.org/cli

[5] https://neocities.org/tutorials

Nice, thanks for posting. I'm using Gitlab Pages right now, and it's fine, but having my deploy process depend on Git is kind of weird. Plus Gitlab isn't really a web host: they're a Git host. I'll definitely check this out soon.

thanks. i've just been thinking how i wanted an easy way to schedule updates. the cli should work nicely.

If you don't like to play with CLI and want to host files on Amazon's S3, go with the Sheetsu Pages [1] (I'm co-founder). - It's uses Amazon's S3 CDN, actually your site is deployed to their all edge locations - supports https - you can add your custom domain - you upload files to Google Drive, click sync button and it's done

[1] https://pages.sheetsu.com

Bad ssl

Why?

> pages.sheetsu.com uses an invalid security certificate. The certificate is only valid for the following names: sheetsu.com, www.sheetsu.com Error code: SSL_ERROR_BAD_CERT_DOMAIN

All the pages hosted with Sheetsu Pages are hosted under sheetsu.io domain. Which has wildcard SSL.

Except the cert for `pages.sheetsu.com` is only valid for `sheetsu.com`.

Replying to the child comment from whorleater - that's a good catch! Our mistake with the domain redirects and certs. Will fix it ASAP. Thanks for spotting this bug.

I host mine on Digital Ocean. I commit the code to github, dev branch is deployed to stg.mydomain and master is deployed to mydomain.

In terms of deployment, I use Caddy which, with ~3 lines of config will auto-TLS your site using Lets Encrypt, and handle renewing the certs for you each month. Caddy also automatically pulls your changes, builds them with hugo and deploys them with ~2 more lines of config.

It's the easiest solution (as a developer) I've come across where I just commit to Github and my blog is updated, and Caddy deals with my cert renewals.

Assuming your blog is technical, this would have been a good chance to get some more traffic by at least mentioning the actual domain, linking to the github repo, or having one or both of those in your profile.

Edit: Not sure why this has been met with a stream of downvotes. Is there something wrong with saying "I use a different approach to publish this blog: [link]," especially if it's technical and would be of interest to HN anyway? I see many people do it constantly, even when it's not relevant to the article or discussion at hand.

Edit 2: I don't generally care where a post is but this went from -2 to +6 pretty quickly. Weird?

How do you down vote on HN?

There is a karma threshold before you can see the down vote arrow (underneath the up vote arrow). It was 200 when I got it, it may be up to 500 by now? I don't think they publish the number.

I'm between 200 and 300 and can't downvote, so they seem to have increased the threshold.

Right, that's why I recently started checking people's profiles before posting a dissenting reply, and not making the reply if they've enough karma to downvote me.

You can't down vote direct replies.

If you care deeply enough about fake internet points to go to that much trouble, IMHO, you're doing it wrong.

Are you feeling picked-on because of what you're saying, or how you're saying it?

I, for example, speak english as second language, and frequently a comment of mine is read more aggressively than I meant it, so it ends up at -10 or worse, even when being factually correct.

So I’m reducing my activity on HN in general as far as possible, and only post as uncontroversial opinions as possible, because I fear that going against the established opinion would just get me downvoted again.

> frequently a comment of mine is read more aggressively than I meant it

This is a common occurrence. Written communication involves both the writer and the reader(s), and unfortunately that results in losing other channels of communication such as intonation and body language. I think written communication is a skill that can be improved with purposeful practice if you think it's worth your time (and to be fair, whether or not one considers posting on HN personally valuable is not a given :).

It sounds like it's at least a little important to you. I personally think the effort is worthwhile in general, as it's useful to know how one comes across in various media, and particularly if you feel you have something valuable to contribute.

I've got a few resources in my profile that I find useful to return to—and have, repeatedly done so to deepen my internalization of them. I'd encourage you to take a look and see if they might be useful to you as well.

Edit to add: I hadn't read this entire thread before responding. 'mikekchar has captured a lot of what I also think about in their comment here:

https://news.ycombinator.com/item?id=15234749

For example look at https://news.ycombinator.com/item?id=15231085

Where is the reason that ever of my comments in that comment chain was originally voted to -4?

I jist don't get it. It's not attacking anyone, providing additional information about the parent comment, and factually correct (as another user even provides a cdc source later on)

Dangerous territory, here :) To be very clear, this is my speculation on what's going on in other people's minds. It can be useful to think about (as it's an exercise in empathy) but often dangerous to explicitly list everything publicly, as one has to evaluate charitable and uncharitable readings, and in general expressing the uncharitable ones, while realistic, tend to draw the most attention (it's just human nature), and in effective communication one should strive to act on the charitable interpretations while seeking to avoid the uncharitable ones. So, please be gentle ;)

The primary issue I see here is that it's an iPhone thread on the day of an announcement. Emotions are going to be even higher than normal and I always take extra care when entering such waters. I remind myself that effective communication takes two parties, and this particular ground is already seeded with land mines.

Questions I'd ask myself, even of facts:

Is this worth saying? Does it add to the discussion? How much does it add to the discussion even if I am able to couch it in the best possible way? Am I correcting someone? How do people react to correction, even if I'm right? What is the reaction to the least charitable reading of what I'm posting? Am I on topic (both in the subthread and the submission)?

Putting on my most uncharitable hat here, I'd say this subthread starting with 'xvolter's comment was doomed from the start.

https://news.ycombinator.com/item?id=15230968

It can be read as nitpicky, needlessly negative, and incendiary (likely to evoke a strong, defensive emotional response). The lead-in "Are they aware" can be read as very condescending. I haven't read up on the iPhone release, but I suspect Apple used the phrase "surgical steel" to describe some component of the iPhone. To take them to task for that is pedantic. It's marketing speak. You have to expect some level of exaggeration. Even if it's technically correct, what is this correction going to contribute to the thread on iPhone X? Is it likely to create constructive discussion? From what I've observed, some HN members will down-vote such comments and those in the subthread even if they're correct because it's not constructive to the overall discussion. And flame wars not only are destructive in their own thread, they tend to poison the entire forum as it promotes needless argumentation. Don't get me wrong: it's easy to get caught up in such a thread, thinking "Look, once I point out this, it'll be resolved. It's just a clarification. I'm just trying to help." I know, because I've been there.

Also note that even if this is not exactly what was going on in any one down-voter's head, it's useful in that it gets me thinking about how it might be received and generally how I can improve my comment—which might mean not commenting at all.

To put this even more personally, thoughts that have been going through my mind while composing this post:

- Gosh, this is getting long. I'd really like to tighten it up. Is it worth the effort? How much time should I take reviewing and editing it before posting? (After writing but before posting I'll be sure to review the entire comment, but I know I'm not going to tighten it up much because I'm tired.)

- What I've written can easily be misconstrued, particularly because I've written things that are uncharitable, even though I've put in the disclaimer that's what I'm doing on purpose as an exercise. It's late, and I know I haven't thought through everything or the entire thing very thoroughly. I know that in and of itself opens it up to misunderstanding. Are people going to misread what I've written because I've left something out? Is the possibility of that miscommunication greater than the value the post is contributing?

- I'm particularly concerned about my explicit, uncharitable reading of 'xvolter's comment and the response to the entire subthread. Is it necessary to include this for my comment as a whole to be effective? Can I write the comment while excluding it? How much time would that take? I'm leaving it in because I think it is useful and on balance, really, what does it matter in this single instance? (But it does matter, on some level. It's a reflection on me.)

I'll end up clicking "reply" because I think you've put yourself out there and sound like you're sincerely looking to improve your writing, and that's worth the effort. I also think that it's clear that my intent is clear and good, and I'm know I myself am still learning: if there's some negative reaction to this, I'll take that and use it to improve my writing next time. I certainly know I've got more to learn :)

In sum: it's a volatile submission, it's an off-topic subthread, and getting involved is fraught with danger.

Wow. Did I really need all of those words if that short summary is all there is to it?

> Are you feeling picked-on because of what you're saying, or how you're saying it?

That's impossible to answer without telepathy.

(Aside from topics that generate lots of discussion that weighs one particular way, I find it impossible to determine a priori whether a particular viewpoint is controversial on HN. For instance I have recently and wrongly predicted that transhumanism would be uncontroversial; and while I've noted this as evidence for future predictions, I am unable to explain it logically.)

I often use HN to practice writing. Good writing resonates with people. A post that is well thought out, well researched, communicates clearly and doesn't assume anything of the reader will often get up votes in my experience.

For me, the vast majority of down votes come from me being wrong (that is, I post something that I think is correct; I get down votes; I do more research and discover that I am, indeed, incorrect). In fact, this is such a good flag for my writing that when I get a down vote I immediately assume I must have made a mistake somewhere and start looking for it.

The next most common source of down votes (for me) is being argumentative. If I get a down vote, but decide that I am correct, I often discover that the tone of my writing is derisive. In all honesty, I never intend to have this tone of writing, but I am human and sometimes (either through lack of writing skill, or by unconsciously being an ass) it happens. My guess is that the person I'm responding too gets pissed off and down votes me. This has led me to have a kind of rule to try very hard never to piss off the parent poster, even if I think they are wrong. If I can't think of a way to comment without pissing off the parent, I try not to post. As a huge bonus, this avoids me getting dragged into >90% of trolling efforts (a statistic that I made up).

The next most common cause of down votes for me is lack of coherency in the comment. Sometimes people simply don't understand what I'm saying. It is important to realise that as a writer, you can't assume the readers understand what you are thinking, so this is completely down to you. Trying to put yourself into the role of a random reader and figuring out what they might think when they read your post is hard. However, this is what being a good writer is about. Again, if I write a post and upon reviewing it, I don't think most people will understand, I don't submit it.

Related to the last point, there are lots of times where I have relatively unique ideas. Very frequently people will not know what to think about them because they have never really explored that way of thinking. If I write in a way that makes it clear that I assume that the reader will find what I'm saying is obvious, I will get down votes. In a way it's insulting to say something that is not mainstream and assume that others will instantly understand/agree. Sometimes, if I feel the idea is interesting, I'll still post, but I'll try to broach the subject gently/apologetically. People are doing me a favour by getting out of their comfort zone and considering a different way of thinking.

Finally, when I'm posting, I often pick someone to respond to and try my best to help them. If I am successful, I find that the post is usually highly regarded by many people, even though my focus is only on helping one person. YMMV!

> I often use HN to practice writing. ...

> The next most common source of down votes (for me) is being argumentative.

Interesting. The main thing that motivates me to comment here - other than when someone touches the surface of a topic that piques my curiosity - is when I see something that is either blatantly wrong, or seems to be missing an obvious piece of clarifying information.

(Examples of wrongness: C# is the best language one can learn, any random non-MBA-holder can be given a loan and expected to make a successful business of it, random 6-year-olds can understand CS, one person without political office can make a difference among our population of 300 million, etc.)

Well said. I've found this to be the case for me personally as well. It also reinforces for me that honest reflection can lead to better understanding (of others and how one comes across) and better communication. You've also underscored how productive communication is more than just laying out facts or correcting mistakes. How one does so strongly affects its effectiveness. And I generally feel happier as a result. In turn, writing when feeling happier results in better comments. A virtuous circle.

There are times when I feel I've done my best and the thread doesn't seem to be progressing well. When that happens I take even more time to see whether there's any way I could have approached it better, and restrain myself from having to put in the last word. Effective communication does take effort on the part of both parties. If I feel I've done my best and conclude it's not working, setting it aside is often better than persisting and possibly making the discussion worse.

> You've also underscored how productive communication is more than just laying out facts or correcting mistakes. How one does so strongly affects its effectiveness.

If someone can't understand a simple list of facts unless it's couched in ... literature-course fluff, I suppose it could be called? ... then that's their problem and they're accomplishing precious little by foisting it onto everyone else.

> And I generally feel happier as a result. In turn, writing when feeling happier results in better comments. A virtuous circle.

Interesting. I find that happiness tends to dull my wit, make me less observant, etc. While it's not unusual for me to recall a long-past conversation (from any medium) and suddenly formulate a much better response at some particular junction ... feeling happy or contented tends to increase the probability that a current conversation will result in this sort of after-the-fact second-guessing.

Effective communication is more than just transferring a simple list of facts. You're correct that communication takes two people. If my goal is have someone accept my point of view (and while it may seem counter-intuitive, that includes facts), I have to take into account how it will be received by my audience.

If they don't take it in the way I'm presenting it, it's my responsibility to evaluate if there's a better way I can present it. Upon reflection (and that can be short or long, depending on how important it is to me), I can reasonably decide it's not worth the effort or time to do so. I can also come to the conclusion that perhaps the audience isn't really open to listening to what I have to say. That said, laying all of that on the audience without reflection in my experience is a recipe for failure and frustration.

It's their failure, and one's own frustration is, at least, limited to downvotes-received.

I always feel insecure of my own opinions but I do support HN's no bs-approach or joking anyway. That's why I try to be anonymous on here but don't attack people, but seldomly blurt out what I initially think. I do get hurt by downvotes hahaha.

edit: I'm working on being able to handle being wrong... usually flip out, like WHAT!!! You disagree with me?! (Contrary to my initial point about no bs)

People can't downvote replies to their comments, regardless of their karma count. Also, downvoting doesn't spend karma.

You couldn't have been about to say something substantial and constructive if the mere worry of being downvoted once is enough to silence your voice.

> constructive

One cannot "construct" anything from a foundation that is so thoroughly wrong that it crumbles at the slightest touch.

Is it then so wrong to give that foundation a hardy poke, rather than making a vain attempt to "construct" something atop it?

Upvoted :) What about don't giving a fuck about scores!?

Ability-to-flag says otherwise. (I have recently been informed here that the downvoting feature is worthless even to those who can use it.)

I got mine when I surpassed 500 a few months ago.

"Edit 2: I don't generally care where a post is but this went from -2 to +6 pretty quickly. Weird?"

Probably I can answer that :) I noticed that when one of my posts get down voted even when having a neutral comment, it swings back to positive fast when touching -1 or -2. I guess that the gray comment takes a while for HN'ers to notice as down voted. And when they find that there is nothing wrong with it or they actually like it, many people simultaneously click the upvote swinging it back wildly to positive zone. It is HN's own version of 'universe making right what it deems as correct' :D

That is probably it. I sometimes underestimate just how many people are looking at any given thread simultaneously.

I think we need to clarify what a down vote is... My assumption was it was to flag something mean or off topic. Now People seem to use it to say "I disagree with your opinion but am too lazy to express my own".

Ask HN: Why has the downvoting timelimit been reduced? | https://news.ycombinator.com/item?id=12330029 (Aug 2016)

TL;DR: I think it would be a big mistake to [...] outlaw downvoting for disagreement - dang (HN mod)

Yeah pg agrees with that. In the early days downvoting for disagreement was discouraged among the heavier users, but things change.

"Defensive upvoting," you might call it. I've certainly done it.

I've also seen many of my own comments go up and down quite a lot as the upvoters & downvoters battle it out. (Eventually they tend to settle on a solid "meh.")

> It's the easiest solution (as a developer) I've come across where I just commit to Github and my blog is updated

I'm not sure how that's easier than GH Pages or Netlify and both of those have the bonus of being free, HA and don't require that you monitor anything for uptime.

I wrote a similar blog post: https://tberra.com/aws/amazon/meta/2016/11/12/the-birth-of-a...

The main differences on mine are:

- I use Jekyll, which is ranked #1 in the static site generator space.

- Hosted on AWS S3.

- CloudFront in front of S3.

- Routing and aliases handled by Route53.

- Deployed using a tool called s3_websites (change detection only uploading generated files AND cloud front cache invalidation for only the changed objects).

- Coded in a Docker container via a cloud IDE called c9.io using the Ruby template.

- Generator and site files committed to a GIT repository hosted on AWS CodeCommit.

I still remember that IRC conversation somehow haha.

I still use Jekyll too. It's awesome. It powers my main site (about 100 posts) and builds "fast enough" where it doesn't get in the way.

Although I use DigitalOcean and use Ansible to build / deploy the site. A couple of lines of yaml lets me deploy a new site with HTTPS (using Let's Encrypt).

I also deploy to S3 largely for operational reasons — it costs nothing unless it's getting pretty significant traffic, and it easily scales up to handle ~infinite volume in case I'm not (unlike say running on Digital Ocean or something).

Another very nice piece of the puzzle is TLS certificate management using Amazon's ACM. It's no cheaper than Let's Encrypt, but it's a lot more convenient. You put it in place once, and you never have to touch it again — Amazon's engineers will deal with hiccups and bugs instead of you. It's no more convenient than CloudFlare, but I like to minimize the number of services my dependency graph.

Letsencrypt is free And you can automate the renewal process.

I see both Jekyll and Hugo mentioned frequently in the "Using GitHub and X to host your website" space. Do you have any practical our technical reasons for preferring one over the other?

It honestly doesn't really matter. Both ingest Markdown, apply a theme, and spit out HTML which you then copy to your HTTP server. It's sort of like asking "which version control do you prefer? Mercurial or Git" or "which build tool do you prefer? clang or gcc." Your choice in the matter doesn't really impact the end result, just your own workflow. Jekyll is probably more popular simply because GitHub has it integrated with GitHub Pages.

If you're not already set up with a Ruby development environment, I'd use pick Hugo over Jekyll. Jekyll is nice but getting all the Ruby junk going was annoying, IMO. Maybe it's trivial for someone better than me.

Having used both quite a lot, I much prefer Jekyll's template language as it's easier to use and more readable. It's a lot easier to install plugins to extend Jekyll as well. However, Hugo coming in a single binary makes it easy to get working when you come back to a site you've not updated in a while (my Jekyll toolchain was a combination of Ruby + Node + Gulp that felt brittle but could be improved with some work), it's suppose to be significantly faster (I've seen people saying it takes Hugo seconds to generate thousands of posts compared to minutes with Jekyll) and I've had less issues with Hugo's watch feature (Jekyll doesn't refresh when you change files sometimes for me). I don't use a lot of plugins or complex templates so the speed and simplicity of Hugo is a big factor for me.

Does Hugo support partials? An equivalent of frontmatter? Slim Lang?

It has partials, Front Matter as well and you can use Ace or Jade templates as an alternative but not Slim Lang as far as I know.

I've dropped Jekyll just because of windows support. I've been using hexo and hugo in two projects and worked great!

Holy cow. Is this an improvement? Remember in 1999 when you could get a static website up in 3 minutes using ftp?

I made my first website using vi to make an index.html file in the ~/public_html directory in the home directory of my account on a university Solaris server back in 1997. FTP was a luxury.

Kids today.

On my university, you do the same thing to get a website up. (Except the web server is actually a different server than the main server, so you have to ssh there, and you replace vi with vim and Solaris with Linux.)

Can we avoid the ageism?

It's called humorous nostalgia. You must be young if you're so easily offended.

Can we avoid the ageism?

It's called sarcasm. You must be old if you don't get it.

Can we avoid the ageism?

That is not the quality content this site provides.

You must be a racist if you can't see that.

If you can't contribute, leave.

You could make a website with vi and host it on Solaris today if you felt like it. I'm not sure why would want to though. Things have improved.

Now I use vim.

Yes, we do have better tools than vi now: Emacs comes to mind.

Obligatory xkcd :)

https://xkcd.com/378/

FTP? You kids had it easy.

We routed console direct to disk in PR1MOS, and if you made a mistake, you had to start all over. But you never knew if you made a mistake until it was done because you couldn't see the output as you typed.

Of course, you didn't end up with a web site, but the result was globally networked. As long as you didn't mind that e-mail took several days to get across the country and a week to go from Illinois to Sweden.

/!killer!jolnet... /Bang paths FTW!

This is how I remember website development. Those were extremely fun and exciting times. 1997 was my freshman year of high school. Geocities and Anglefire FTW.

It's actually a good* guide, but the wording of the title seems to me to imply that this is a simple process. It's dizzying complex.

* by "good", I mean the following:

- prose is engaging

- very comprehensive, no hidden steps missed

- covers a lot of things that while not strictly necessary, will make an experienced git user's website updating workflow much easier in the long run

- covers some small details that are new to me that look nice

It's very much complexity up front in exchange for automated ease later though.

I agree.

From the outset it is version controlled, CDN'd, available over HTTPS, and would withstand being linked from the front page of HN just fine.

It's not just a static site, it's one that is easy to grow and modify, and that can withstand a lot of traffic immediately with no investment in infrastructure for the author.

(evidenced by the fact that it is withstanding a HN front page set of traffic)

Yes, comparing this to throwing up a barebones page at www.somewhere.edu/~username/index.html is apples and oranges.

Hmm, I found lots of proofreading material.

And you could do it with a WYSIWYG editor which would output reasonable markup. (dreamweaver)

Or more popular, you could do it with a horrible WYSWIG editor which output garbage (Frontpage express).

I would beg to upgrade to Frontpage express over the current domain-specific WYSIWYG I'm using day to day right now.

Beg

Dreamweaver still generated garbage, though not nearly as bad as Front-page.

I remember getting pissed at DW making 600kb files, but hand-rolling it brought it down to ~200kb.

Ah, life on dial-up, when those bytes mattered.

I solved this problem a long time ago. Once solved, it did not take three hours to get a web side on-line (well may be, if you bought your own domain and set up your own server to host it).

https://www.jgaa.com/content/1/old_sites/july_2000/htmgen32....

Just wait until they find out about caching then we'll have dynamic static site generators.

The trickery is in the use of the words "static site" which has become a buzzword (buzzphrase? buzzwords?)for sites generated using a "static site" generator or tool, in this case Hugo is used. The rest of the process is considered the "building" part of a "static site" even though to those of us making sites just a few years ago static site meant open up notepad and write some HTML to push somewhere, that or Freewebs to others (or webs as it is now).

Using Hugo adds a lot of complexity. I'm using Surge.sh and raw html/css, I can have a site up in under 2 minutes. I think I spent less than an hour on my blog (it has a very simple layout).

What does it look like/is it customizable? I've been looking to host a math/CS blog somewhere outside of Tumblr (which is great for getting an audience and interacting with people, but totally useless for actually being able to write math, unless you want to embed JPEGs everywhere) and make it as simple as possible.

This article seemed like a good start, but I'd love to know more about how you built your blog in a way that's easily maintainable.

I'll PM you a link to my blog if you send an email to rug3y@teknik.io. It's still a work in progress but I think it looks alright. If you decide you want to do something similar, I can help you do what I've done.

Awesome, thank you!

That's how we do it in 2017. Want to handle an on-click? You need dozens of NPM modules and webpack. Look at Docker's cowsay "hello world" example - it has to satisfy several (dozens?) of perl dependencies just to render ASCII art.

What does Docker have to do with cowsay? Docker does not develop or maintain the cowsay utility [0].

[0] https://en.wikipedia.org/wiki/Cowsay

You're right - I was actually thinking about their variation of cowsay that they include in a lot of their training, whalesay:

https://hub.docker.com/r/docker/whalesay/

This image installs the cowsay utility and then adds its own "cow" file. This is the default installation of the cowsay utility, not something created by Docker. This is clear from reading the Dockerfile on that page:

# install cowsay, and move the "default.cow" out of the way so we can overwrite it with "docker.cow"

You can still do that. Nobody bothers, though. Knowing how to write your own HTML, CSS and Javascript is starting to feel like knowing how to carve your own canoe.

Note that in this setup, the connection between Cloudflare and GitHub is plaintext / not secure, because by default Cloudflare uses "Flexible SSL".

It is possible to make it more secure by changing the setting to "Full SSL (non-strict)", which encrypts the connection between Cloudflare and GitHub against passive attacks but not active interception. Unfortunately, GitHub pages does not work with Cloudflare's "Full SSL (strict)" option.

Cloudflare SSL Options: https://support.cloudflare.com/hc/en-us/articles/200170416-W...

Example of attack between Cloudflare and origin: https://medium.com/@karthikb351/airtel-is-sniffing-and-censo...

GitHub issue page: https://github.com/isaacs/github/issues/156

After many different iterations, I'm now using netlify (with middleman). Really hard to beat.

GitHub pages are amazingly fast and a pretty good default choice. With cloudflare it's a pretty solid combo.

But netlify's awareness/integration between the content and the cdn is really compelling. Imagine they'll be able to do a lot more with it down the line too.

Me too. My personal site is in Middleman hosted on a digital ocean instance so I can have more control of that side (also wanted to learn more about nginx and SSL) but lately I've been using Middleman with Netlify - it's unbeatable for getting projects up and running fast.

Built-in continuous integration and automatic SSL, you can even get your domain through them. Their CMS makes creating a fully featured blog ridiculously easy. 10/10 would Netlify again.

Yup! Actually I forgot one feature that would be nice - being able to get the raw HTTP logs...

I've been developing front-end apps for so long I was out of the loop when a friend asked me, "How can I upload a website folder to a domain".

Turns out, the easiest path is Netlify. It provides you with a CDN and storage for free, and has a nice drag-and-drop deploy interface for basic static sites.

The author has done a great job of documenting all the low-level details about even how to use git to push stuff to the GitHub repo. Kudos for the excellent documentation.

I use Hugo + Gitlab + Netlify (free https). I use Emacs as my development environment, and Magit (https://magit.vc) has come as a boon to me. All the git shell scripting mentioned in this post reduce to few key strokes with the help of Magit. I'm not intending to divert the topic, but couldn't help mentioning that the Magit Kickstarter [1] needs some love.

Coming back to the Hugo topic, I believe that the 3 hours is a good practical estimate for someone who has never dabbled with git/github, domain control tweaks, CNAME, etc.

So don't take that 3 hour mention as a negative, and jump right into the post. Once you have the whole setup, updating your site is a simple git commit + git push (hardly a minute -- not counting the time it takes to gather content for a new post :)).

[1]: https://www.kickstarter.com/projects/1681258897/its-magit-th...

I had really hoped that this was about building a static site, but again you'll end up with a blog.

I've created an actual static site myself, but it takes a bit extra - especially from the theme.

Also, I don't understand why you'd use Hugo with Github when it already supports Jekyll?

hugo builds are faster than jekyll, or so it was atleast the one time I experimented with it...

That might be the case, but when using jekyll you don't even have to build anything - you simply change the source and gihub builds it automatically.

We built our site (https://www.solidstategroup.com/) with hexo (https://hexo.io/) which is great and offers total freedom of design with a good templating system.

I wonder why people (many devs included) use stuff like wordpress to host simple blogs. static site generators are a blessing :)

I built my own custom static site generator (python + jinja2) for running my side project[1]

I just git push and Netlify picks it up. Simple, to the point and no JS.

[1] I run https://discoverdev.io , a "product hunt" for top engineering blog posts!

Just wanted to say that I really love the style of your site. Clean, fast, readable and stylish. I wish more of the web were like this.

The answer to your question is in the second paragraph.

None of the static-site generators I looked at really competed with WordPress on a feature-by-feature basis.

WordPress is easy to set up, supports users and comments (if you want them) and has a lot of really nice features and plugins. WordPress is also slow and a pain in the neck to maintain, but I can understand why people might think the tradeoff is worth it.

I also run my site[1] using my own custom-built generator and I haven't looked back, but even I sometimes miss the ease-of-use that my old WordPress site provided.

[1] https://sheep.horse/

I rolled my own static site generator for very little effort. As it stands, the generator (which isn't public so you'll have to take my word on it) is ~100sloc plus templates, CSS, etc. The process has been interesting and educational, and I recommend it on those grounds. Adding and modifying features is very easy since it's so little code to work with. Currently:

- posts are rendered from markdown with syntax highlighting for code

- safe links to other domains (noopener and _blank)

- bundled CSS, which look good (or as bad) on mobile

- a PWA (the service worker is the only JS run client-side)

- pre-populated links out to twitter (with a card) and mastodon with tags drawn from markdown metadata

- HTTPS using a letsencrypt cert and a one-liner in cron.daily to update it when close to expiry

- a smallish nginx config focussed on security to serve files

Much of the generator is just glue code around some good modules. Some important things like safe links were hacked together by me.

(if you're interested, https://qubyte.codes, but I need to post more often)

Bit surprised to see this advertised as 3 hours (how long can it take to dump HTML into a gh_pages branch & push?). After reading, I see that there's a huge overhead in setup and configuration. The complexity seems way out of line with the result!

Looks like it's all mainly to do with the static site generation though. You can certainly still dump some handmade html into a gh-pages branch and have a (non-generated) static site in less than ten minutes.

Or you can just use Gitlabs pages which can handle Hugo generation for you. I do that and I definitely did not spend so much time by it. I can also add new posts directly from Gitlabs UI, which is nice.

I use Pelican and host on NearlyFreeSpeech.net behind Cloudflare. I really like using Pelican. I'm hardly a front-end dev and I found it easy to create a custom minimalistic theme that I'm quite happy with. No JS required! Fire up your network monitor and head to https://brashear.me/blog/2017/07/30/migration-from-octopress... It's pretty easy to see <500ms load times.

Octopress was getting to be a pain in my butt due to ruby dependencies being awful to deal with.

"Ruby is annoying"... then suggest Python :)

pip isn't great but I've had a much better time with it than rubygems.

Compare that to downloading one statically built Hugo binary :)

Is there a piece of software that creates nice looking static photo galleries? I have used a few and they all seem to suffer from design that is 10-15 years old.

Show HN: Exposé – a static site generator for photos and videos

https://news.ycombinator.com/item?id=10376468

> jack000: there was some interest in what I was using for the backend, so I cleaned up the code a bit

https://news.ycombinator.com/item?id=10794715

> hlawson: Expose looks very impressive

hat tip: https://hn.algolia.com/?query=static%20photo%20comments%3E5

Maybe you will find https://bitbucket.org/niol/lazygal useful.

As far as I know, Github pages doesn't support https for custom domains [1]. A better option for free hosting would be netlify, which supports Let's encrypt for custom domains.

[1] https://github.com/isaacs/github/issues/156

We use cloudflare on our Github pages custom domain, so you can easily get https support that way.

It is exactly what the article author suggests in fact:

> Github pages does not offer secured custom domain name. The best way to get this feature for free is to use Cloudflare.

[The article then proceeds on how exactly do that.]

Yes, but cloudflare issues only shared certificates (that are shared across multiple domains) on their free plan [1]. If I wanted to use a dedicated certificate I'd have to upgrade to a paid plan.

[1] https://support.cloudflare.com/hc/en-us/articles/203349264-A...

People need to stop calling Cloudflare's offering HTTPS support. It's snake oil.

This is the first time I've heard such claims. Do you have any more details about this?

OP will undoubtedly not have more info. It's not snake-oil. I used to work there. There's a real TLS connection.

    +------------------+               +------------------+             +-----------------------+
    |                  |               |                  |             |                       |
    |    CLIENT        | +---------->  |    CLOUDFLARE    | +---------> |       YOU             |
    |                  |     SSL       |                  |   NOT SSL   |                       |
    +------------------+               +------------------+             +-----------------------+

How so? Shared SSL cert is still an SSL cert. Not snake oil.

But doing that won't protect the route between Cloudflare and Github pages, only the route between the user and Cloudflare.

Wouldn't SSL via GitHub's cert protect that part?

Yes. It will.

Not really. They have two options for protecting the "back" connection: Full SSL and Full SSL (Strict).

Full SSL doesn't really protect you since Cloudflare won't check if the certificate is valid, an attacker could make their own self-signed cert and MITM you.

Full SSL (Strict) requires a valid cert for the domain being requested. If you had that, you wouldn't need Cloudflare in the first place.

But the domain is github.com, which has a valid ssl cert. You only need cloudflare to get it on your own domain.

Right, but Cloudflare doesn't actually check if the cert is valid, unless you enable Strict mode, which you can't because you'd need Github to serve a cert for your own domain.

Are you sure? Wouldn't it check to see that the cert is valid for github.com, not for your own domain, since that's the origin?

Edit: Looks like you're correct. Sorry!

It's also worth noting that you can just toss cloud-flare in front of it to get HTTPS.

+1 for Netlify. It's like GitHub pages but with all the features you've ever wished it had.

+1 for Netlify, and their amazing customer service via chat.

Are there any walkthroughs from zero to all done of best practices to setup a _product website_ using a static generator (Jekyll, Hugo, or whatever) rather than a _blog_?

I will see what is required to swap something like the kube theme into this guide:

https://themes.gohugo.io/kube/#GettingStarted

  "There are a few concepts this theme employs to make a personal documentation site.
  It’s important to read this as you may not see what you expect upon launching."

Its not self-hosted if you rely on Github for hosting.

Seems like the author is now using 301 to redirect to a URL that doesn't include the term "self-hosted" in its slug.

I really like the speed of Hugo but I find the template language unintuitive and hard to read e.g. "if or condition1 condition2" and "lt 1 2". I wish you could swap it out for something else like Liquid templates...is that possible?

I'd just go for Netlify as well for hosting. It'll build Hugo sites for you when you push commits, they have a CMS you can connect with most static site generators, they deal with SSL setup for you and tons more features. Self-hosting anything eats up time and it wouldn't be as robust.

I have learnt that you can throw in parentheses for readability..

    if (or cond1 cond2)

The next logical step is to mark with parentheses the two branches of the if expression:

  (if (or cond1 cond2) (then) (else))

although i suppose it's not really hugo anymore..

Is there a reason something more standard like "if cond1 or cond2 then x else y" isn't supported? Parsing speed?

Maybe. It looks like Reverse Polish Notation.

It's regular Polish notation.

Going along with the joke, that's almost how elisp (most of the other lisps too, I believe) works:

    (if (or cond1 .. condn)
        (progn
          (true1)
          (true2))
      (false1)
      (false2))

But in Go templates, it would be:

{{ if (or cond1 .. condn) }} true1 true2 {{ else }} false1 false2 {{ endif }}

Netlify + Hugo is an pretty amazing combo. If you want to try a different CMS, my team is building https://forestry.io/. It's a CMS for Hugo and Jekyll sites that commits all changes back to your repo.

Just to make mention in the comments in case people haven't seen the product, I've found Amazon's Lightsail (https://amazonlightsail.com) incredibly easy and cheap to launch a simple website upon, along with using their Route53 for DNS hosting.

Even though I know all the ins and outs of AWS, I really like this product for simple projects.

(I have no affiliation with Amazon)

What are the costs associated with something like that?

This is the path I choose for most of my websites nowadays. Usually a combination of static generated website (I created my own generator), Firebase hosting (which offers the same free autogenerated SSL + url rewriting), and Cloudflare. Like this, it's fast, SEO friendly and most of all completely free.

My preferred alternative is:

- mustache(command line) + html

- Firebase hosting (superstatic)

I just install a command line version of mustache for example [1] and run it over simple static templates:

`mustache data.json myTemplate.mustache > output.html`

I only need to install superstatic[2] locally if I want to debug a rewrite rule or redirect otherwise clean URLs work pretty well with a simple setting.

[1] https://github.com/janl/mustache.js/

[2] https://github.com/firebase/superstatic

Has Hugo made any progress with intergrating Jupyter Notebooks as a blog post? The latest version of Blogdown was just realeased and the R community has now an even better way of writing blog posts.

Another nice feature on top of this type of setup is to set up CI hooks on your repo to check for broken links on every push, e.g. with https://github.com/gjtorikian/html-proofer.

Example: https://github.com/mizzao/andrewmao.net/blob/master/Rakefile

Checking for broken links is probably something you want to run every X days or something like that, rather when you push your update, unless you only want to check if you accidentally wrote a link wrong, rather than if the link itself broke.

I'm using React Gatsby on my blog.

I have access to all the npm ecosystem. Is fast. No bloatware or weird code.

Styles with styled-components for easy maintenance. https://mateom.io

Deployed to an S3 bucket connected to CloudFlare.

I just type 'yarn deploy' and it builds my blog and pushed it. And I can commit everything to source control as they keys are in aws-cli

> I have access to all the npm ecosystem. Is fast. No bloatware or weird code.

I see npm as the best source of slow, bloated, weird modules.

Might be a little off-topic but hopefully relevant enough. I'm rather new to web dev but currently have a static website hosted on AWS S3. My current workflow is to code the HTML and CSS files using Sublime Text then upload these files into a bucket manually via the AWS console. Is there a more efficient way to do this? And is there a simple way to enable HTTPS?

If you have multiple HTML pages, using a templating engine saves a lot of copy/pasting when you change headers, menus etc. (in the article they're using Hugo).

You can automate the uploading of files by writing a script to upload the files to the bucket so you can deploy in a single command (it gets trickier if you want to do a sync and delete files).

Personally I use rake [0] to create build and deploy tasks so I can do `rake build` and `rake deploy:prod`.

[0] https://github.com/ruby/rake

You can try Scotty.js [1].

[1] https://github.com/stojanovic/scottyjs

Free certs in AWS. https://aws.amazon.com/certificate-manager/

For enabling HTTPS, you can put CloudFront in front of it. That'll make it faster, too, and cost almost nothing.

For my static sites, I'm usually doing some form of fancy JavaScript npm / gulp / bower, but then ultimately just uploading those files to S3.

You could probably do it a little faster using the AWS CLI. It can upload a directory to a bucket in one command (while skipping unchanged files).

A question:

I have nearly 0 experience with web-dev. I'd like to add some minimal user tracking to my static site on Github; just when & where the requests are coming from (geographically), which posts they're looking at and maybe a referrer.

I don't want to use Google Analytics (seems unfair given that I block it). Is there an easy way to do this?

Of course, now I find this: https://news.ycombinator.com/item?id=13674747

Honestly, I do use Google analytics on one of my sites. If figure, anyone who cares even a little bit about privacy will have it blocked. Using something more rare means that they might not be blocking it even if they would want to if they knew about it.

Can someone explain the use for cloudflare at the end? I thought you can do the same thing just through your domain registrar?

Cloudflare DNS is one of the best authoritative DNS hosters in the world, if not the best already.

https://www.dnsperf.com/

Cloudflare is also a great free CDN and has a crap ton of edge servers to make your static content serve quickly around the world. Has a lot of other great features too.

Anycast ftw.

Just need to remember to turn off caching when updating or set the time to update cached data at an interval that works for you. I keep forgetting that sometimes like why isn't the site changing?! Oh right...

>Github pages does not offer secured custom domain name. The best way to get this feature for free is to use Cloudflare.

Quoted from the post. It's used for flexible HTTPS.

This is a neat tutorial. I use github pages with their built in Jekyll stuff which I'm semi happy with but I found Jekyll a big learning curve compared to Blogger which I was using before.

Curious why people want to serve static sites to users over https though.

http://justinhj.github.io

https://doesmysiteneedhttps.com/

I really don't understand why we are seeing Yet Another Tutorial for Yet Another SSG on the front page of HN.

Coding to SSGs are fashionable at the moment, yet somehow writing your own HTML isn't...

Writing HTML is what my grandfather did. I am a ninja rockstar growth hacker and use 8 different tools to make it easier.

Writing the template and the content in HTML is easy enough for me, but I'm still struggling to make post lists, feeds and other things out of it without a lot of administrative effort.

But then it isn't really a static site...

... and I get it, one of our webdevs spits out static sites from some PHP code he wrote that builds them. As the guy that has to administer that crap I much prefer to hoist static HTML... but like so many things in the SV tech scene, these stupid "engineers" have to build a thousand different little frameworks with a thousand new buzzwords for a thousand unoriginal, rehashed ideas. Many of them forsaking old techniques that worked well, and in many cases better the cheesy little framework some fresh-off-the-boat bootcamp-grad "envisioned" because he didn't want to learn $UNFASHIONABLELANGUAGEORTECHNIQUE

Just use Publii, it's new static CMS with GUI and themes, supports Netlify, GitHub Pages, Google Cloud, S3 or SFTP. https://getpublii.com

I also used Hugo for my site - https://testloop.co.uk It's so simple.. and FAST. It's hosted on AWS S3 with CloudFront & Route53 so it's not free, but at a cost of around $1.20 per month, it's not far off.

$1.20 a month is really expensive. I have a whole virtual server for €5 a month (and there are smaller ones) that hosts 10+ sites/apps.

EDIT: I just realized that's a question I should ask: Does your price include the domain?

$1.20 a month may be expensive relative to your costs, but relative to the average programmer income and monthly bills in the United States – it's nothing. You'll spend three times that cost on a local cup of coffee every morning.

S3 static hosting is far easier to manage than a virtual server; it's a trade-off of convenience vs savings.

What service do you use? 5/mo is really cheap for 10+sites/apps

Not to discourage a response with a personal anecdote, but don't miss https://github.com/joedicastro/vps-comparison and its HN discussion https://news.ycombinator.com/item?id=14245538.

hetzner.de (the cheapest virtual server)

I'm really conscious about the resource usage of my server processes. Most sites are static websites, but I also have Gitea, Prosody and Matrix Synapse running on that box, plus some small Go webapps for my own consumption.

It didn't include the domain no.

I've used digital ocean droplets for some things for a similar $5 a month price, but it hardly seems necessary for a static site. It's much less faffery to just upload some files to S3 and click some buttons in the AWS console to configure everything.

Benefit above and beyond writing your own html and css? (Serious question). I see a lot of the example tutorials show a simple blog example. In this case why not just html and css and your favourite text editor? With css you can separate style from content, you can "change themes" etc.

This is exactly what I decided to do. Adding some posts manually to an html file is really not onerous, and the setup time and complexity of the project directory are near zero. Plus, I don't have to take the time to understand someone else's theme in order to make changes. Whipping up a simple css theme is really not difficult.

I feel old.

I would simply install nginx and write HTML by hand.

If I felt fancy, markdown + pandoc. But if you feel like you need to put some content online, you don't need much more than a text file with some links.

http://motherfuckingwebsite.com/

To anyone confused about how to manage Hugo themes, check out this article I wrote. http://stephendrake.me/post/deploying-hugo/

IMO this guide is great, but uses some unnecessarily complex terminal commands. You don't need to use `git worktree` and `git submodule` to set up your hugo site. There are more self-explanatory ways of doing the same things.

Damn, I must be doing something wrong...

It took me three months to rebuild https://www.forthepeople.com as a Jekyll site on a load-balanced cluster from WordPress.

I note that your mailto: links don't include an email address. e.g. at the bottom of the page https://www.forthepeople.com/class-action-lawyers/clergy-sex... the mailto link (black envelope image) has the email address "?".

It's an email share link. It's for you to share with whoever. All of those icons are social sharing icons.

? is actually for the query parameters and that's a properly-formed URI.

To be clear (since it wasn't to me; best tag-team approach to trick me into clicking some lawyer's website ever!): ...

The user is expected to click the email icon, then fill in the to: address, with the body pre-filled with the current url.

Most email urls passing query string parameters fill in the address (which winds up in the to:) and subject instead.

Absolutely follow you. Business decision, wasn't up to me ;)

That said though, best damn lawyer's site on the web, amirite?

I would pay couple bucks per month for any vps just only for not using Cloudflare. Why anyone concerned about security and not just about green lock would use Cloudflare over LetsEncrypt.

I love it! This is the part of the 90s I want back (not the dial-up)

Really good because it walks you through every step and explains what's going on. The result is a version-controlled, robust, easy to maintain site that scales beautifully.

Any particular reason why you don't install using homebrew?

The only reason is that this way I can stick to a Hugo version and make my environment completely reproductible. Cf. the jump-start script in the repository https://github.com/gsempe/gsempe.github.io/blob/source/jump_...

That's still pretty complicated IMHO. Write some markdown files in a directory structure, run mkdocs over it. Voilà... indexed, searchable static website.

In this thread: a million ways to drop HTML into a webroot that are anything but simply dropping HTML into a webroot

A fast static site? Have we traveled back to 1997.

Reply on news.ycombinator.com