going-full-static.md (7039B)
1 +++ 2 title = "Going Full Static with Zola" 3 date = 2020-08-22 4 updated = 2022-06-14 5 +++ 6 7 Those of you who read [my last "I Wrote This" post] will know that I was 8 having some trouble with my website. My site was coded using [Sapper], a 9 [Svelte]-based web-app framework I had been using for some time. I had 10 chosen to use Sapper because it allowed me to stay as close to the 11 web-metal as possible, while still letting me do some fancy things like 12 use components, scoped CSS, and [server routes]. However, after diving 13 deeper into website tests and statistics, I started noticing that my 14 "static" site had a lot more moving parts than I thought. The HTML was 15 crammed full of inline scripts and `blob://`s, tanking performance, 16 wreaking havoc on my [CSP], and breaking the site for people with 17 scripts disabled. I decided to move the site to [Zola], a ludicrously 18 simple static site generator made in Rust. Feel free to check out the 19 [source code here]. 20 21 <!-- more --> 22 23 ## NPM Hell 24 25 I decided I was going to rewrite my site ~~because I have a bad habit of 26 rewriting everything all the time~~ largely because of Sapper's 27 underwhelming response to [this Github issue], which proposes a "strict 28 export" for Sapper sites to remove inline scripts and use of `eval()`. I 29 think this is a great idea, but it unfortunately has not received much 30 attention (though it appears that as I'm writing this, it has been added 31 to a "Roadmap Triage" project board). I started a new branch and began 32 working to translate my site to Sapper's main competitor, [Routify]. 33 Sapper and Routify are not the same thing, but for me they both would 34 serve well enough. After around two days, I had a working MVP of my site 35 in Routify. 36 37 **EDIT:** Sapper is being retired in favor of [SvelteKit], which has 38 [the same issue]. smh. 39 40 Then disaster struck: I got a bunch of emails from Github. A series of 41 high priority security vulnerabilities had been found in dependencies 42 used by basically all of my web projects. I spent a day force-updating 43 all the dependencies of my web projects – a bit of a pain because npm 44 refuses to natively upgrade breaking changes – and decided to stay 45 as far away from the Javascript ecosystem as possible. I hate that 46 when I install a JS framework, a fundamental tool of modern web 47 development, I install a million other dependencies that could, and 48 often do, have critical security vulnerabilities. I'm thankful that 49 Dependabot caught these ones, but it really killed my enthusiasm for 50 using any JS framework on my site – which means Routify was out of the 51 picture. 52 53 ## The Last Dependency Standing 54 55 I decided to use a [static site generator]. I'd heard of many of the big 56 boys in the past, like [Hugo], [Jekyll], and [Eleventy], but they all 57 had their own problems when I looked at them in the past. Hugo has 58 god-awful templating syntax, Jekyll is Ruby-based and I don't know Ruby, 59 and Eleventy isn't even an escape from Javascript! So I decided to use 60 [Zola], a "one-stop static site engine." Zola is made in Rust, so it's 61 super fast, and it's designed to be dead simple. Seriously: the CLI has 62 only five commands, everything is configured from one `.toml` file, and 63 your content is all written in "[Augmented] [Markdown]." 64 65 The interesting thing is that there's honestly not much more to the 66 story because of how easy and simple Zola is to use. All of my posts and 67 projects go into the `content` directory, my CSS, favicon, and 68 miscellaneous files (non-content related stuff like emojis and public 69 keys) go in the `static` directory, and templates and shortcodes go into 70 the `templates` directory. If I was using a theme, it's files would go 71 into a `theme` directory. 72 73 ### Benefits 74 75 - My slow Python script to convert Markdown posts to Svelte (which was 76 perfect at first but I then packed full excess tests and sandboxing) 77 is gone. Zola handles that automatically. 78 - I got rid of TailwindCSS, and replaced it with custom styles. It's 79 actually pretty fun to write simple custom CSS, especially with modern 80 tools like variables. 81 - Writing new posts is ludicrously easy now. I write a post in Markdown, 82 throw any images or videos used [in the same directory], and publish. 83 - Zola comes with a whole bunch of features built-in that I didn't have 84 before, like syntax highlighting and anchor links (the latter of which I 85 have yet to set up). Other things are just handled automatically, like 86 feed generation or i18n. 87 - Build times are much faster. Exporting with Sapper wasn't slow, but it 88 didn't feel instant. Zola does. 89 90 ### Drawbacks 91 92 - You sacrifice a certain amount of control by using a static site 93 generator, like [link] [properties]. You could solve this with 94 [shortcodes][Augmented], or by contributing to the project (which I plan 95 to do). 96 - I mean that's really it to be honest. 97 98 **EDIT:** You can now add attributes like noreferrer to links 99 automatically with Zola... So I guess there's no more drawbacks? Yeah 100 that feels right. 101 102 ## To Infinity and Beyond 103 104 I'm really happy with using Zola, and I look forward to continuing to 105 work with it in the future. I want to publish my blog's styles and 106 templates as a [Zola theme], but I have to iron out a few kinks (like 107 anchor links, which are still a bit finicky on my end) before that. 108 109 **EDIT:** I have since moved on from this theme on my own site, but you 110 can still use the theme as [d3c3nt], a simple, clean, and flexible theme 111 for personal sites. 112 113 I also have yet to re-implement a bunch of the indie-web features and 114 [GoatCounter] analytics of my old site into this version. Overall 115 though, I think it's been a really fun and productive experiment using 116 Zola, and I'd highly recommend using it for anybody looking for a great, 117 no-nonsense static site generator. 118 119 **EDIT:** I fixed anchor links, and I decided to forgo analytics 120 altogether. My site's better off without JS. 121 122 Until next time, FIGBERT. 123 124 [my last "I Wrote This" post]: @/posts/i-wrote-this-three/index.md#next-steps 125 [Sapper]: https://sapper.svelte.dev/ 126 [Svelte]: https://svelte.dev/ 127 [server routes]: https://sapper.svelte.dev/docs#Server_routes 128 [CSP]: https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP 129 [Zola]: https://www.getzola.org/ 130 [source code here]: https://git.figbert.com/figbert.com-website/ 131 132 [this Github issue]: https://github.com/sveltejs/sapper/issues/1175 133 [Routify]: https://routify.dev/ 134 [SvelteKit]: https://kit.svelte.dev 135 [the same issue]: https://github.com/sveltejs/kit/issues/93 136 137 [static site generator]: https://www.staticgen.com/ 138 [Hugo]: https://gohugo.io/ 139 [Jekyll]: https://jekyllrb.com/ 140 [Eleventy]: https://www.11ty.dev/ 141 [Augmented]: https://www.getzola.org/documentation/content/shortcodes/ 142 [Markdown]: https://www.getzola.org/documentation/content/linking/ 143 144 [in the same directory]: https://www.getzola.org/documentation/content/overview/#asset-colocation 145 [link]: https://github.com/getzola/zola/issues/681 146 [properties]: https://github.com/getzola/zola/issues/695 147 148 [Zola theme]: https://www.getzola.org/themes/ 149 [d3c3nt]: https://d3c3nt.figbert.com 150 [GoatCounter]: https://www.goatcounter.com/