devraza/website
1
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity
website/public/blog/setting-up-zola-nixos/index.html

30 lines
15 KiB
HTML
Raw Normal View History

chore(aesthetic): no border radius on avatar
2024-05-06 09:42:48 +01:00
<!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.
chore: new license and therefore git history
2024-01-28 20:03:50 +00:00
</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>© 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>
Reference in a new issue Copy permalink