Static web – back to the roots?
blog.callr.tech
blog.callr.tech
Once I audited their site, I found a ton of issues, particularly - their stale Wordpress version, themes and plugins. I updated them all one by one and migrated them to Wordpress.com which doesn't suffer this upgrading pain.
Then, I found out the theme provider had actually stopped supporting the theme and there were a bunch of security flaws in it. But, the client wanted something like push and forget.
So, I painstakingly migrated them off of Wordpress and made a custom Jekyll site with Jekyll admin running on Netlify. They're immensely happy now knowing that their site is virtually unhackable (it's just a static site).
Static site builders are more powerful than we think. I have a travel platform running on it right now actually and none of the end users know its a static site they're on top of. There's no plugins to manage, no software versions or security loopholes to keep track of. The only way someone can hack into your site if they hacked your identity provider (Eg. Netlify). Otherwise, it's simply just a boon.
You usually can't just replace Wordpress with Jekyll and call it a day since non-technical people need to maintain the site. Though it's super nice when you can.
The site itself was fine, until one day it broke and was completely inaccessible.
So, they were stuck in a limbo and the CEO happens to be my good friend, so while working on another project for him, he asked me if I could help. So, that's how I got incharge of maintaining it for them.
Ultimately, putting a Varnish cache seemed like the only logical answer to speed things a bit more, but that didn't avoid Wordpress security attacks.
For fun though, I built an experimental wordpress-clone dashboard that saved Hugo-compatible files instead, so I wouldn't miss Wordpress' editing features. The result was superb (<5 seconds to regenerate the ~1000 articles blog), but I missed the Wordpress plugins too much to switch to Hugo entirely.
But I still agree with you: "keep wordpress' editing experience, but generate static sites" is a pretty promising direction IMO.
Do you mind if I ask which plugins?
Also, if you're missing plugins, it sounds like keeping the wordpress editing experience alone isn't going to be enough. The question then becomes, are you missing plugins themselves or what those specific plugins do for you that doesn't appear to be available in hugo.
Some hosted form solutions offer features like basic e-commerce which is useful, but then doing something after a submission is almost impossible or everything is in an iframe so customization is limited.
If someone could port gravity forms to Craft, I would likely switch all new projects before the end of this year.
There is a demo using Notion as the “backend” which is kind of like Google Docs. I could see this being a great solution for less technical authors who only want to deal with content.
In the end, it’s like a static site but you don’t wait for a build step.
There might other options like caching at the DNS level with something like CloudFlare[2]
I don't work with Wordpress but generate static pages sounds like generating a cache, so these two option might be useful if you need to keep Wordpress but want the benefit of static pages.
[1] https://www.varnish-software.com/wiki/content/tutorials/word...
If the cache were fully populated (e.g. by spidering the site) and never became stale, then it would be roughly equivalent. Still, I'd rather disconnect Wordpress after spidering, so there's no chance of requests leaking through.
This isn't the case with a static website.
But. They're developer reasons.
What almost everyone who piles into this support of static stuff seems to completely ignore is the audience here.
Who do you think is editing your website? Amy the developer who has no problem committing stuff to Git or learning Markdown or Dave, who is a marketing manager and spends most of his life in Word writing press releases and social media posts?
The entire point of a WYSIWYG editor is that it doesn't require any developer experience.
If you genuinely think a corporate website can be run out of a Git workflow or a requirement to learn Markdown, you're basically in the wrong room. This is the whole "IT bottleneck" that content teams have been battling for years: it's back to the early 90's days of "yeh, we want to update our homepage but we need IT to do it for us".
Somewhere in the middle is the holy grail: performant sites that are also editor friendly.
Even as an engineer people keep on underestimating me (although sometimes they overestimate me : ). Here are some examples:
- telling accounting a number of times that they've forgotten a rather large PO.
- telling a network vendor they have a huge hole in their firewall only to be ignored until I contacted one of their huge customers which I also knew. They could have saved themselves a good deal of embarassing attention I guess.
- etc etc
Last year at JavaZone theee was an interesting talk by someone who was an early employee at a crowd funding company. He was a non-dev but talked about how he enjoyed being able to update copy in the web app (not just front page IIRC) directly after the devs had set up git, an editor and explained the basics.
If you are making the next google you'll want things to be extremely easy-to-use.
Making a google.com level UX for business apps might be smart. Or it might be insulting.
I do see the compromises wp puts us into but for me, the benefits of static seem awfully abstract at the end of the day. If you want me to buy it, please show me an authoring experience I actually want to live in. I haven't seen one yet.
It's not about over- our underestimating people. It's about whether the technocentricity you are selling is worth it. For some of us, it is, sure.
For one, I just hate writing with markdown. Compared to WYSIWYG (i.e. just writing), markdown's syntax is a distraction. Writing is both visual and storytelling to me, why should I exclude the visual to a separate stage of the process? Just doesn't make sense to me.
Authoring is about input to the system, static is about how the contents is given to the visitor. There is no technical reason a rich author experience cannot be coupled with a static approach to content delivery.
In fact, the article focuses mostly on page bloat, not so much server-side processing. The amount of bytes a Web page weighs in at should mostly depends on its contents, not on the author tools used to create its content.
How would you allow a user, while creating a blog post, to add commenting to the post in a way that enables progressive enhancement i.e. doesn't require javascript, with static site generators?
If you can't, what is your justification for the sacrifice in accessibility?
If you can fulfill this basic requirement, please show me the experience of using the system and show me how it is better than wp as a whole.
Of course this should be possible to turn off for certain content and moderated, but it still seems artificial to not have the discussion on the same page, compared to the original post. HN is beautiful, for instance. :)
Have my upvote.
You can pay a teenager to set up WP or netlify or more. What people pay me and possibly most HNers for is knowing what and when etc.
In a small team or just for an individual this might boil all the way down to personal preference.
Isn't the ascetic authoring experience provided my markdown just as much a result of deciding on which set of personal values are and are not important for your users?
guess it depends who you work with. Had a recent experience where I spent half an hour for an user who has trouble with basic filesystem navigation - even though he's been using computers since close to three decades.
The more generic point here is that developers build better tools when they properly understand their audiences. In this case, the audience is almost always “a non technically skilled editor”.
IMO most young technical startups would do well to remember this too.
Checkout Jekyll admin, it provides a simpler interface than Wordpress, but with WYSIWYG editing capabilities for a static site. It is very powerful and can be designed to scale large-sized projects.
Basically it's a file manager for .docx files, but more importantly, it can generate static site* out of your Word documents, and style them nicely with bootstrap.
Yes, that's something I'm working on and I'm close to the end of a beta release! https://docxmanager.com/
Remember Dreamweaver? Made great static sites. Good WYSIWYG editor. Nothing but static pages on the server. "Round trip HTML" - it took in HTML, edited it, and put it back out. If you created the HTML with Dreamweaver, it could put in some comments which told Dreamweaver not to change certain parts. This let you have page templates.
We can't have that any more. CSS is too much of a mess. The era of CSS flush/clear/div layout broke WYSIWYG editors, and the web took a big step backwards. We went through the "tables are bad" era, and eventually got them back as "layout tables". It might be worth defining a modern subset of HTML/CSS and having a Dreamweaver-like editor for it.
Markdown? Markdown is comparable to HTML 1.0. Or BBcode. It's gaining features and complexity as people demand more HTML features in Markdown.
That's the party line. Now do a View Source on some web pages.
Unless there is a compelling reason, don't do at runtime what you can do at build time.
[1] or dozens of other sources.
Most of the bulk in modern websites comes from JavaScript (frameworks, tracking, ads), images, videos. All these can and are used both with static and dynamic websites.
Static websites may be mostly hassle-free for developers/devops, but they're typically more of a hassle for content producers. I don't see a convincing case for them overall, because one of their bigger advantages - that they are easier to cache (or rather: to keep cacheable when developers add stuff) upstream than dynamic websites - is mostly gone from the web infrastructure.
Regarding cache, I don't agree - having your site cached by the edge nodes of a CDN is quite important nowadays.
How many of the Alexa top 10K or so have cacheable HTML content (not JS, CSS, images, video) in CDN? Can you provide a few examples?
The text was around 5.5ko on a page weighting around 3mo...
Edit : link to the post (in French) https://www.numerama.com/tech/518848-un-depute-souhaite-que-...
Edit 2 : replaced encline with encourage
(For the record, the word I wanted to use was incite. I don’t know why it pops out that way)
[1] https://github.com/john-bokma/tumblelog [2] http://plurrrr.com/
* Nginx [1] - Serve the content with some settings, such as compression and HTTPS.
* Pandoc [2] - Builds the HTML pages and throws a header and footer in there, as well as a comments section [3].
* Bash script [4] - Runs in a screen session, polls git for changes, pulls and rebuilds the content, then builds RSS feeds.
Whilst this works for me, I could see how WordPress could be desirable. Some online editor, ability to add "plug-ins" (i.e. some bits somebody else coded), tracking, comments, etc. I think there is space for some static page generation system/script that adds a light weight editor and the ability to add other people's scripts.
[3] https://github.com/danielbarry/free-comment
[4] http://coffeespace.org.uk/projects/site-creation-v2.html & http://coffeespace.org.uk/projects/rss-feed.html
I wrote a slapdash server in Go, stuck it behind Nginx, and can just add posts ad-hoc. Only requirement is I have to restart the server to rebuild the list of available posts in memory. After that posts can be edited at will. Post metadata comes from a four line header.
Deployment is pretty manual. Just store everything in a repo, pull changes in on the serving machine and run the Go server in TMUX.
No comments or anything, though. And I rarely write anything.
It was mainly an exercise for learning some Go. That may even change yet.
No repos to share yet as it’s not presentable but will gladly do the work to share in a gist if anyone’s curious.
> if needed.
You mean each client socket? If so that would be awfully slow for high volume traffic.
> Only requirement is I have to restart the server to
> rebuild the list of available posts in memory.
This seems quite undesirable too, where does this requirement come from?
> pull changes in on the serving machine
Is this manually pulling or do you fetch in a loop?
> will gladly do the work to share in a gist if anyone’s
> curious.
I'm certainly curious now to see exactly how this Go program works.
They don't make a ton of difference, but deployments were slightly smoother than I mentioned.
I didn't include directory structure or any views, but I'm sure they can be derived—I wanted it simple. I also used Spectre CSS + overrides for the front so any inline HTML can be assumed to be using classes related to that for any styled elements. There is a couple elements hard-coded into the server itself for the home page.
Definitely not an effort in best practices! But have at it, and happy to hear if you have any input if you're more versed in Go (probable):
https://gist.github.com/robertfairley/f061df3a6a2fe15d429f82...
edit: Also—SSL is handled by Nginx. And god help us all if anybody uses this file as a model for any business web server
If I understand it correctly, you build locally and then upload to the server? I have this setup for a few webservers that I have limited control over, so just FTP/POST documents to upload content.
When I have proper control over the server, I much prefer to have the server build the documents. The benefit is that I can simply write a new blog or something from my mobile whilst in a meeting, commit and the server auto-generates the new content. I just need a web browser, GitLab, GitHub and BitBucket all support some form of basic editor for markdown.
Interesting take anyway. My feeling is that I want to do more experimentation on my server and build more "rough and ready" web projects, with the knowledge they will probably fall over more easily and have security flaws. The service goign down is one thing, the entire server being compromised is quite another. I think this points towards introducing some container system. I'll have to learn me some docker.
I'll probably try and rewrite in another language again soon. The former version that looked the same was done in Django—but I wanted less overhead.
But yeah, I build locally via that script, but upload all relevant files via `deploy.sh`.
For "rough and ready" projects, I've enjoyed playing with ipkn/crow—I wish it was still maintained. https://github.com/ipkn/crow
And yeah, your take has been similar to mine. I'm okay with it goes down. But the Django system I ran before I was more susceptible to someone breaking in. This one is pretty well untouchable—which is reassuring.
I can safely as rarely look at or update it as necessary without worry—and I appreciate the opportunity to be humbled if I'm wrong!
Also yeah—my current setup would also be made smoother by docker, I was way too lazy to dig into it as I don't use it often.
(Also to note in case of confusion, when I said generated I meant rendered from MD to HTML)
Each time I start the server, it gathers the posts by searching the post tree which is a directory ordered something like
Posts > YYYY > MM
For the changes I just manually pull them and restart the server.
This wasn’t done as a proper engineering project. Just to learn some basic mechanics of the language.
If you’re expecting a proper scalable, professional project you’ll be dismayed.
That said I’ll happily see if I can get it cleaned up and add a link.
https://github.com/pinceladasdaweb/Static-Site-Generators
https://staticsitegenerators.net/
I keep all my resources for working with GitHub Pages, here:
https://infominer.id/web-work/github-pages-starter-pack/
and am most familiar with GitHub facilitated Jekyll:
https://github.com/planetjekyll/awesome-jekyll
MkDocs makes really nice pages that don't require fussing around with frontmatter, with auto generated navigation based on directory structure.
It also opens your publishing toolkit to python's universe of markdown related extensions, which you may already be familiar with.
In case it's useful to someone else, as inspiration if nothing else, it's at https://gitlab.com/kragen/dercuano, in the public domain. The latest version of the output is at http://canonical.org/~kragen/dercuano-20190525.tar.gz.
I wrote my static site generator in Python 3.7 by manually translating the Perl version I had written earlier. Both are available at github https://github.com/john-bokma/tumblelog
Example of this set up: http://plurrrr.com/
Amusingly, your tumblelog.py is about the same size as dercuano.py, while the intersection of features is almost exactly empty. We managed to do even the most basic things differently — for example, yours reads a single long file with % lines separating the entries (like a fortune file!) and produces a passel of output files, while mine reads a passel of input files and produces a single multi-megabyte output file. This diversity of choices perhaps demonstrates the need for experimentation to see what works best for different people and in different circumstances. (Or it could just mean I'm insane.)
I added inline editing to Surreal CMS back in 2013, but obviously it’s not a well-known brand (the keyword is “visible” I guess).
People love inline editing, especially non-devs. When you abstract content into forms or markdown you often end up with results that look different from what you intended. I get feedback from new users weekly about how easy inline editing is for them.
Fortunately, TinyMCE, CKEditor, ProseMirror, et al all support it and the trend is finally shifting. But as a developer, I can attest that inline editing isn’t easy to get right — even when the underlying lib supports it.
I suspect that’s why we still see forms for content in CMSs.
Wouldn't you obtain the same benefits while still keeping Wordpress if you would use something like Varnish[1] or CloudFlare Edge cache[2] ?
[1] https://www.varnish-software.com/wiki/content/tutorials/word...
Benefits on top of regular cache:
+ maintenance cost: you need to upgrade wordpress, why my static website doesn't require any work over years
+ security: small vulnerability surface
+ cost: hosting even popular static website is cheap
This greatly lowers the bar for entry, and I was doing this back in the 90s with Microsoft Access 95 and VBA for my school's website.
If you write plain, valid HTML your site will just work across all mainstream browsers and it will probably work reasonably wrt accessibility as well, -out of the box.
It will also be reasonbly fast. You might be able to eke out more performance from a site that has a lot of interaction but I'd not take that for granted.
I just want to type text and drop images in and see it in real time, and then I would like to be able to define one or more areas on a page that contain dynamic content.
That dynamic content can be served up when visitors reach the site, or can be compiled by the static site generator periodically, I really don’t care about that step.
I don’t want to abstract “templates” from content. I don’t want to abstract anything. I just want to type and drop in other media without extra steps.
Why does this not exist? Am I supposed to be using Dreamweaver? I just don’t get why all these other solutions are so disjointed.
Edit: Maybe I want to be using blocs
There are similar other offerings (one that comes to mind is reactstudio, but has a bit more going on there with code and flow.
Basically, to get your JamStack to work - you need to use Github + Github hooks -> Contentful/Cosmicjs -> Netlify.
I believe this is a missing and a killer product. People think "oh why reinvent Github". But a business guy who wants a fast website does not know what github is - he/she just need a single place to do everything.
the workflow that would work is - upload my code to dashboard (using git/FTP upload). Write content in CMS and see the website change within a few seconds. Reupload new code, and the website changes within a few seconds.
For an admin dashboard, static web is stupid.
Static doesn't mean there isn't any dynamic content is just means the assets are static files that can be cached both server and client side. Dynamic content can be fetched by the client, it doesn't need to be fetched and delivered by the server.
If dynamic content is client side driven, it wouldn't be "static" as each client could see a different page.
For example, even if you your webpage just displayed the client side time, it would be dynamic since people in different time zones will see a different time regardless of the time being generated on the client side.
Whether it is a static class or a static webpage, static has a well established meaning in the CS world. But I haven't done web development since college and it is possible the meaning of static webpage has changed as technology changes.
Sending every user `document.write(new Date());` is static because its identical for everyone. The fact each user sees something different is completely irrelevant.
Anyone here know/have done a shopping website built with Hugo and a simple third party service for payment processing?
Another option is Snipcart, which explicitely works as a drop-in shop for any website[2].
> https://snipcart.com/blog/hugo-tutorial-static-site-ecommerc...
It shows exactly the use case you're mentioning with Hugo.
This is, by the way, something I see a lot out in the wild, especially in Medium articles but also in READMEs on GitHub. Please stop using blockquote tags for emphasis purposes.
I'd probably go with just a styled text, maybe with an aria-label.