1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
|
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="dark light">
<link rel="icon" href="data:,">
<title>Hosting a Jekyll Site on Sourcehut</title>
<link href="/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" />
<link href="/rss.xml" type="application/rss+xml" rel="alternate" title="RSS feed for blog posts" />
<style>*{box-sizing:border-box;}body{font-family:sans-serif;line-height:1.33;margin:0 auto;max-width:650px;padding:1rem;}blockquote{background:rgba(0,0,0,0.1);border-left:4px solid;padding-left:5px;}img{max-width:100%;}pre{border:1px solid;overflow:auto;padding:5px;}table{text-align:left;width:100%;}.footnotes{font-size:90%;}</style>
</head>
<nav>
<a href="#menu">Menu ↓</a>
</nav>
<main>
<h1 id="hosting-a-jekyll-site-on-sourcehut">Hosting a Jekyll Site on Sourcehut</h1>
<p>2021-12-06</p>
<p>I recently decided to switch my personal, static site’s hosting from Netlify to <a href="https://srht.site">sourcehut pages</a>. The process went <em>fairly</em> smoothly with only a couple minor hiccups; nothing rage-inducing. After everything was up and running smoothly, I figured writing out a step-by-step tutorial might help others who are thinking of doing a similar switch (or looking to host their first static site).</p>
<p>But first, let me briefly explain why I made the switch in the first place…</p>
<h2 id="why-sourcehut-pages">Why sourcehut pages?</h2>
<p>Using Netlify as your static host is simple, intuitive and comes packed with a great deal of extra functionality you can easily add-on. So, why would I decide to switch over to sourcehut? The best answer comes directly off the main homepage of <a href="https://sourcehut.org">sourcehut.org</a>:</p>
<ul>
<li>Absolutely no tracking or advertising</li>
<li>All features work without JavaScript</li>
<li>Many features work without an account</li>
<li>The fastest & lightest software forge</li>
<li>100% free and open source software</li>
</ul>
<p>After realizing all that, it’s pretty difficult to stick with Netlify’s <em>proprietary</em> stack…</p>
<h2 id="free-but-not-free">Free but not <em>“free”</em></h2>
<p>I should note that using sourcehut pages <em>does</em> require you to be a contributing (read: paying) member on the platform. I’m a cheapo and selected the $2/month option but you might be inclined to donate more. Paying this “fee” is perfectly fine for me, considering the hosting quality (speed and storage) it affords me. It also doesn’t hurt that I get the “feel good vibes” of supporting an important, open source product.</p>
<p>Keeping that in mind, let’s get into setting up our static site!</p>
<h2 id="setting-up-your-repo-locally">Setting up your repo locally</h2>
<ol>
<li>Create a new account on <a href="https://sourcehut.org">sourcehut</a> (or log in to an existing one)</li>
<li>Setup your billing to contribute monthly (tier amount is up to you)</li>
<li>Create a new repo under the <strong>git</strong> section<sup id="fnref1"><a href="#fn1" rel="footnote">1</a></sup></li>
<li>Connect this repo locally (as you would via any other git host)</li>
<li>In this new local directory, place all your Jekyll files as you would with any other static hosting provider</li>
</ol>
<h2 id="the-sourcehut-build-file">The sourcehut build file</h2>
<p>In order to have your Jekyll site build and push the correct files live, you will need to use sourcehut’s build system. This will run every time you push out a new change to your repo (new blog post, page content changes, styling updates).</p>
<p>To make things easier, you can copy the build file below (remember to use your <em>own</em> information for usernames, git repo naming etc):</p>
<pre><code>image: debian/stable
oauth: pages.sr.ht/PAGES:RW
packages:
- ruby-full
- ruby-dev
environment:
site: yourusername.srht.site
sources:
- https://git.sr.ht/~yourusername/your-repo-name
tasks:
- install-bundler: |
sudo gem install bundler
- build: |
cd your-repo-name
bundle install
bundle exec jekyll build
- package: |
cd your-repo-name/_site
tar -cvz . > ../../site.tar.gz
- upload: |
acurl -f https://pages.sr.ht/publish/$site -Fcontent=@site.tar.gz
</code></pre>
<p>Save this file as <code>.build.yml</code> and place it in the root directory of your Jekyll source code.</p>
<p>Then, you just need to push your changes to the repo. If everything was setup properly, you’ll be able to see your live site at <code>https://yourusername.srht.site</code> (just give it a little bit of time to run the full build process)</p>
<h2 id="custom-domains">Custom Domains</h2>
<p>If you’re like me and want to use your own custom domain - have no fear! This process is actually quite easy.</p>
<p>First, add a new A Record through your domain provider:</p>
<pre><code>@ IN A 173.195.146.139
</code></pre>
<p>Then change the following <code>environment</code> parameter inside your existing <code>.build.yml</code> file:</p>
<pre><code>environment:
site: yourcustomdomain.com
</code></pre>
<p>And that’s it - custom domain set! If you run into any issues check out the <a href="https://srht.site/custom-domains">official documentation on custom domains</a>.</p>
<h2 id="wrapping-up">Wrapping Up</h2>
<p>Hopefully this helps to streamline the process for others to host their static sites through sourcehut. Having open and healthy competition among host providers and <code>git</code> workflows is essential to avoiding vendor lock-in. </p>
<p>Even low-effort support for open-source products (like where you host your static site or FOSS projects) can go a long way. Just some food for thought.</p>
<div class="footnotes">
<hr/>
<ol>
<li id="fn1">
<p>Thanks to <a href="https://cnx.srht.site/">McSinyx</a> for pointing out that the repo used for creating your website can be named anything (instead of defaulting to your sourcehut username) <a href="#fnref1" rev="footnote">↩</a></p>
</li>
</ol>
</div>
<footer role="contentinfo">
<h2>Menu Navigation</h2>
<ul id="menu">
<li><a href="/">Home</a></li>
<li><a href="/projects">Projects</a></li>
<li><a href="/uses">Uses</a></li>
<li><a href="/wiki">Wiki</a></li>
<li><a href="/resume">Resume</a></li>
<li><a href="/colophon">Colophon</a></li>
<li><a href="/now">Now</a></li>
<li><a href="/donate">Donate</a></li>
<li><a href="/atom.xml">RSS</a></li>
<li><a href="#top">↑ Top of the page</a></li>
</ul>
<small>
Built with <a href="https://git.sr.ht/~bt/barf">barf</a>. <br>
Maintained with ♥ for the web. <br>
Proud supporter of <a href="https://usefathom.com/ref/DKHJVX">Fathom</a> & <a href="https://nextdns.io/?from=74d3p3h8">NextDNS</a>. <br>
The content for this site is <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>.<br> The <a href="https://git.sr.ht/~bt/bt.ht">code for this site</a> is <a href="https://git.sr.ht/~bt/bt.ht/tree/master/item/LICENSE">MIT</a>.
</small>
</footer>
|
