30 lines
15 KiB
HTML
30 lines
15 KiB
HTML
<!doctype html><html lang=en><head><meta charset=utf-8><meta content="width=device-width,initial-scale=1.0" name=viewport><meta content="light dark" name=color-scheme><title>Setting up Zola on NixOS</title><link href=/img/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/img/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/img/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=https://fonts.googleapis.com rel=preconnect><link crossorigin href=https://fonts.gstatic.com rel=preconnect><link href="https://fonts.googleapis.com/css2?family=Signika&display=swap" rel=stylesheet><style>*{font-family:monospace!important}body{--primary-color:#8070c6;--primary-pale-color:#8070c61c;--text-color:#151517;--text-pale-color:#454449;--bg-color:#f4f0f3;--highlight-mark-color:#5f75b045;--callout-note-color:#e887bb;--callout-important-color:#a292e8;--callout-warning-color:#d9d564;--callout-alert-color:#f06969;--callout-question-color:#78b9c4;--callout-tip-color:#91d65c}body.dark{--primary-color:#a292e8;--primary-pale-color:#a292e81c;--text-color:#ece5ea;--text-pale-color:#5c5c61;--bg-color:#151517;--highlight-mark-color:#5f75b045;--callout-note-color:#e887bb;--callout-important-color:#a292e8;--callout-warning-color:#d9d564;--callout-alert-color:#f06969;--callout-question-color:#78b9c4;--callout-tip-color:#91d65c}body{--main-font:'Signika',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--code-font:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--homepage-max-width:750px;--main-max-width:750px;--avatar-size:70px;--avatar-radius:0;--paragraph-font-size:18px;--paragraph-line-height:1.75;--aside-font-size:16px;--img-border-radius:0;--inline-code-border-radius:2px}</style><link href=/main.css rel=stylesheet><body class=post><script>if(localStorage.getItem('theme')=='dark'){document.body.classList.add('dark');const a=document.querySelector('link#hl');if(a)a.href='/hl-dark.css'}</script><header class=blur><div id=header-wrapper><nav><a href=/>devraza</a><button aria-label="toggle expand" class=separator id=toggler>::</button><span class="wrap left fold">{</span><a href=/blog>blog</a><span class="wrap-separator fold">,</span><a class=fold href=/projects>projects</a><span class="wrap right fold">} ;</span></nav><div id=btns><a aria-label="rss feed" href=/blog/feed.xml><svg viewbox="0 0 24 24" height=24 width=24 xmlns=http://www.w3.org/2000/svg><path d="M3 17C5.20914 17 7 18.7909 7 21H3V17ZM3 10C9.07513 10 14 14.9249 14 21H12C12 16.0294 7.97056 12 3 12V10ZM3 3C12.9411 3 21 11.0589 21 21H19C19 12.1634 11.8366 5 3 5V3Z" fill=currentColor></path></svg></a><button aria-label="theme switch" data-moon-icon='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M10 7C10 10.866 13.134 14 17 14C18.9584 14 20.729 13.1957 21.9995 11.8995C22 11.933 22 11.9665 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C12.0335 2 12.067 2 12.1005 2.00049C10.8043 3.27098 10 5.04157 10 7ZM4 12C4 16.4183 7.58172 20 12 20C15.0583 20 17.7158 18.2839 19.062 15.7621C18.3945 15.9187 17.7035 16 17 16C12.0294 16 8 11.9706 8 7C8 6.29648 8.08133 5.60547 8.2379 4.938C5.71611 6.28423 4 8.9417 4 12Z" fill="currentColor"></path></svg>' data-sun-icon='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M12 18C8.68629 18 6 15.3137 6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12C18 15.3137 15.3137 18 12 18ZM12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16ZM11 1H13V4H11V1ZM11 20H13V23H11V20ZM3.51472 4.92893L4.92893 3.51472L7.05025 5.63604L5.63604 7.05025L3.51472 4.92893ZM16.9497 18.364L18.364 16.9497L20.4853 19.0711L19.0711 20.4853L16.9497 18.364ZM19.0711 3.51472L20.4853 4.92893L18.364 7.05025L16.9497 5.63604L19.0711 3.51472ZM5.63604 16.9497L7.05025 18.364L4.92893 20.4853L3.51472 19.0711L5.63604 16.9497ZM23 11V13H20V11H23ZM4 11V13H1V11H4Z" fill="currentColor"></path></svg>' id=theme-toggle><svg viewbox="0 0 24 24" height=24 width=24 xmlns=http://www.w3.org/2000/svg><path d="M10 7C10 10.866 13.134 14 17 14C18.9584 14 20.729 13.1957 21.9995 11.8995C22 11.933 22 11.9665 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C12.0335 2 12.067 2 12.1005 2.00049C10.8043 3.27098 10 5.04157 10 7ZM4 12C4 16.4183 7.58172 20 12 20C15.0583 20 17.7158 18.2839 19.062 15.7621C18.3945 15.9187 17.7035 16 17 16C12.0294 16 8 11.9706 8 7C8 6.29648 8.08133 5.60547 8.2379 4.938C5.71611 6.28423 4 8.9417 4 12Z" fill=currentColor></path></svg></button><button aria-label="table of content" id=toc-toggle><svg viewbox="0 0 24 24" height=24 width=24 xmlns=http://www.w3.org/2000/svg><path d="M3 4H21V6H3V4ZM3 11H15V13H3V11ZM3 18H21V20H3V18Z" fill=currentColor></path></svg></button></div></div></header><div id=wrapper><div id=blank></div><aside class=blur><nav><ul><li><a class=h2 href=#introduction>Introduction</a><li><a class=h2 href=#installation>Installation</a> <ul><li><a class=h3 href=#installing-the-package>Installing the package</a><li><a class=h3 href=#setting-up-a-theme>Setting up a theme</a><li><a class=h3 href=#setting-up-nginx>Setting up NGINX</a></ul><li><a class=h2 href=#finishing-up>Finishing up</a></ul></nav><button aria-label="back to top" id=back-to-top><svg viewbox="0 0 24 24" height=24 width=24 xmlns=http://www.w3.org/2000/svg><path d="M11.9997 10.8284L7.04996 15.7782L5.63574 14.364L11.9997 8L18.3637 14.364L16.9495 15.7782L11.9997 10.8284Z" fill=currentColor></path></svg></button></aside><main><div><div data-check-icon='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M10.0007 15.1709L19.1931 5.97852L20.6073 7.39273L10.0007 17.9993L3.63672 11.6354L5.05093 10.2212L10.0007 15.1709Z" fill="currentColor"></path></svg>' data-copy-icon='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M6.9998 6V3C6.9998 2.44772 7.44752 2 7.9998 2H19.9998C20.5521 2 20.9998 2.44772 20.9998 3V17C20.9998 17.5523 20.5521 18 19.9998 18H16.9998V20.9991C16.9998 21.5519 16.5499 22 15.993 22H4.00666C3.45059 22 3 21.5554 3 20.9991L3.0026 7.00087C3.0027 6.44811 3.45264 6 4.00942 6H6.9998ZM5.00242 8L5.00019 20H14.9998V8H5.00242ZM8.9998 6H16.9998V16H18.9998V4H8.9998V6Z" fill="currentColor"></path></svg>' id=copy-cfg style=display:none></div><article data-backlink-icon='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20"><path d="M9.41421 8L18.0208 16.6066L16.6066 18.0208L8 9.41421V17H6V6H17V8H9.41421Z" fill="currentColor"></path></svg>' class=prose><h1>Setting up Zola on NixOS</h1><div id=post-info><div id=date><span id=publish>2023-12-29</span></div><div id=tags><a href=https://devraza.giize.com/tags/zola><span>#</span>zola</a><a href=https://devraza.giize.com/tags/nixos><span>#</span>nixos</a></div></div><h1 id=introduction>Introduction<a aria-label="Anchor link for: introduction" class=zola-anchor href=#introduction>#</a></h1><p><a rel="nofollow noreferrer" href=https://getzola.org>Zola</a> is a static site generator (similarly to the infamous <a rel="nofollow noreferrer" href=https://gohugo.io>Hugo</a>, which you may have already heard of) and is written in Rust. It also happens to be the framework that this site is built on!<p>This blog post is a guide on setting up the site engine on NixOS specifically.<h1 id=installation>Installation<a aria-label="Anchor link for: installation" class=zola-anchor href=#installation>#</a></h1><h2 id=installing-the-package>Installing the package<a aria-label="Anchor link for: installing-the-package" class=zola-anchor href=#installing-the-package>#</a></h2><p><code>zola</code> is packaged in the nix package repository, so you just declaratively add the package to your configuration as usual: For the purposes of this guide, zola can be installed either as a system or user package.<ul><li>As a system package:</ul><pre class=language-nix data-lang=nix style=background:#151515;color:#e8e8d3><code class=language-nix data-lang=nix><span>{ </span><span style=color:#ffb964>pkgs</span><span>, ... }: {
|
|
</span><span> </span><span style=color:#888># ...
|
|
</span><span> </span><span style=color:#ffb964>environment</span><span>.</span><span style=color:#ffb964>systemPackages </span><span>= with </span><span style=color:#ffb964>pkgs</span><span>; [
|
|
</span><span> </span><span style=color:#ffb964>zola </span><span style=color:#888># Append the package name to the list
|
|
</span><span> ];
|
|
</span><span> </span><span style=color:#888># ...
|
|
</span><span>}
|
|
</span></code></pre><ul><li>As a user package (with home-manager):</ul><pre class=language-nix data-lang=nix style=background:#151515;color:#e8e8d3><code class=language-nix data-lang=nix><span>{ </span><span style=color:#ffb964>pkgs</span><span>, ... }: {
|
|
</span><span> </span><span style=color:#888># ...
|
|
</span><span> </span><span style=color:#ffb964>home</span><span>.</span><span style=color:#ffb964>packages </span><span>= with </span><span style=color:#ffb964>pkgs</span><span>; [
|
|
</span><span> </span><span style=color:#ffb964>zola </span><span style=color:#888># Append the package name to the list
|
|
</span><span> ];
|
|
</span><span> </span><span style=color:#888># ...
|
|
</span><span>}
|
|
</span></code></pre><p>Now that <code>zola</code> itself is installed, we can move on setting up the pages it serves - continue reading...<h2 id=setting-up-a-theme>Setting up a theme<a aria-label="Anchor link for: setting-up-a-theme" class=zola-anchor href=#setting-up-a-theme>#</a></h2><p>Zola actually has a section of its website showcasing several community-made themes which you can choose from to be the theme for your static site <a rel="nofollow noreferrer" href=https://getzola.org/themes/>here</a>.<p>Simply choose a theme that you like (demos are usually available for each theme listed) and follow its appropriate documentation to set it up - this site uses a version of the <a rel="nofollow noreferrer" href=https://www.getzola.org/themes/serene/>serene theme</a> with my custom colours.<blockquote class="callout note"><div class=icon><svg viewbox="0 0 24 24" height=20 width=20 xmlns=http://www.w3.org/2000/svg><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z" fill=currentColor></path></svg></div><div class=content><p><strong>Custom themes</strong><p>You can also make your own theme if that better suits you (I recommend giving the <a rel="nofollow noreferrer" href=https://getzola.org/documentation>documentation</a> a read if so).</div></blockquote><h2 id=setting-up-nginx>Setting up NGINX<a aria-label="Anchor link for: setting-up-nginx" class=zola-anchor href=#setting-up-nginx>#</a></h2><p>After selecting a theme (or making your own) you should now have a directory somewhere on your server containing your static site. For the following snippet, we'll assume this is at <code>/var/lib/blog</code>.<p><a rel="nofollow noreferrer" href=https://nginx.com>NGINX</a> is a popular webserver which we're going to use for the purposes of hosting and serving our site. To do so, append the following somewhere in your configuration:<pre class=language-nix data-lang=nix style=background:#151515;color:#e8e8d3><code class=language-nix data-lang=nix><span style=color:#888># ...
|
|
</span><span>{
|
|
</span><span> </span><span style=color:#888># ...
|
|
</span><span> </span><span style=color:#ffb964>services</span><span>.</span><span style=color:#ffb964>nginx </span><span>= {
|
|
</span><span> </span><span style=color:#ffb964>enable </span><span>= true;
|
|
</span><span> </span><span style=color:#ffb964>virtualHosts </span><span>= {
|
|
</span><span> </span><span style=color:#99ad6a>"blog" </span><span>= {
|
|
</span><span> </span><span style=color:#ffb964>forceSSL </span><span>= true;
|
|
</span><span> </span><span style=color:#ffb964>serverName </span><span>= </span><span style=color:#99ad6a>"blog.devraza.duckdns.org"</span><span>; </span><span style=color:#888># replace this with wherever your site will be
|
|
</span><span> </span><span style=color:#ffb964>root </span><span>= </span><span style=color:#99ad6a>"/var/lib/blog/public"</span><span>; </span><span style=color:#888># the path to the `public` folder in our site directory
|
|
</span><span> };
|
|
</span><span> };
|
|
</span><span> };
|
|
</span><span> </span><span style=color:#888># ...
|
|
</span><span>}
|
|
</span></code></pre><h1 id=finishing-up>Finishing up<a aria-label="Anchor link for: finishing-up" class=zola-anchor href=#finishing-up>#</a></h1><p>You should now have your own static site built with Zola! You can use this for a bunch of things, like:<ul><li>Your personal blog (as I've done)<li>A way to showcase your projects (<a rel="nofollow noreferrer" href=https://blog.devraza.duckdns.org/projects>as I've also done</a>)<li>Hosting documentation (check out <a rel="nofollow noreferrer" href=https://www.getzola.org/themes/adidoks/>this Zola theme</a>, for example)</ul><blockquote class="callout question"><div class=icon><svg viewbox="0 0 24 24" height=20 width=20 xmlns=http://www.w3.org/2000/svg><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 15H13V17H11V15ZM13 13.3551V14H11V12.5C11 11.9477 11.4477 11.5 12 11.5C12.8284 11.5 13.5 10.8284 13.5 10C13.5 9.17157 12.8284 8.5 12 8.5C11.2723 8.5 10.6656 9.01823 10.5288 9.70577L8.56731 9.31346C8.88637 7.70919 10.302 6.5 12 6.5C13.933 6.5 15.5 8.067 15.5 10C15.5 11.5855 14.4457 12.9248 13 13.3551Z" fill=currentColor></path></svg></div><div class=content><p><strong>Help, my changes aren't sticking!</strong><p>When you make new markdown files (or any other changes to the structure of your site), remember to run <code>zola build</code> in your site directory (<code>/var/lib/blog</code>) for the changes to <em>build</em> into the actual site.</div></blockquote></article><div class=giscus></div></div><footer><div class=copyright><p>© 2023-2024 Muhammad Nauman Raza</div><div class=credits>powered by <a rel="noreferrer noopener" href=https://www.getzola.org target=_blank>zola</a> and <a rel="noreferrer noopener" href=https://github.com/isunjn/serene target=_blank>serene</a></div></footer></main></div><script src=/js/lightense.min.js></script><script src=/js/main.js></script> |