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