<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/"
    xmlns:atom="http://www.w3.org/2005/Atom" xmlns:media="http://search.yahoo.com/mrss/" version="2.0">
    <channel>
        
        <title>
            <![CDATA[ self hosting - freeCodeCamp.org ]]>
        </title>
        <description>
            <![CDATA[ Browse thousands of programming tutorials written by experts. Learn Web Development, Data Science, DevOps, Security, and get developer career advice. ]]>
        </description>
        <link>https://www.freecodecamp.org/news/</link>
        <image>
            <url>https://cdn.freecodecamp.org/universal/favicons/favicon.png</url>
            <title>
                <![CDATA[ self hosting - freeCodeCamp.org ]]>
            </title>
            <link>https://www.freecodecamp.org/news/</link>
        </image>
        <generator>Eleventy</generator>
        <lastBuildDate>Mon, 25 May 2026 05:06:48 +0000</lastBuildDate>
        <atom:link href="https://www.freecodecamp.org/news/tag/self-hosting/rss.xml" rel="self" type="application/rss+xml" />
        <ttl>60</ttl>
        
            <item>
                <title>
                    <![CDATA[ How to Set Up a VPN Server at Home for Free ]]>
                </title>
                <description>
                    <![CDATA[ By Yehuda Clinton In this article, I'm going to guide you, step-by-step, through the process of setting up a WireGuard VPN on a Linux server. It will let you access secure internet resources from insecure places like coffee shops. But why a VPN? And ... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/how-to-set-up-a-vpn-server-at-home/</link>
                <guid isPermaLink="false">66d4617373634435aafceff3</guid>
                
                    <category>
                        <![CDATA[ Security ]]>
                    </category>
                
                    <category>
                        <![CDATA[ self hosting ]]>
                    </category>
                
                    <category>
                        <![CDATA[ vpn ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ freeCodeCamp ]]>
                </dc:creator>
                <pubDate>Wed, 15 Jul 2020 20:19:46 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/news/content/images/2020/07/grey-and-black-macbook-pro-showing-vpn-2064586--1-.jpg" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>By Yehuda Clinton</p>
<p>In this article, I'm going to guide you, step-by-step, through the process of setting up a WireGuard VPN on a Linux server. It will let you access secure internet resources from insecure places like coffee shops.</p>
<h2 id="heading-but-why-a-vpn-and-why-wireguard">But why a VPN? And why WireGuard?</h2>
<p>Whenever you connect to, say, your bank's website from a remote location, you risk exposing password and other sensitive information to anyone listening on the network. </p>
<p>Hopefully, of course, the bank website itself will be encrypted, which means that the key data flowing between the bank and your PC or smartphone will be unreadable to anyone listening along the way. </p>
<p>And what about if you're connecting from your home or office? With a VPN, you can be reasonably sure that those data elements not obscured by regular encryption won't be seen by the wrong people.</p>
<p>But what if you're connecting through a public WiFi router at an airport or coffee shop? Are you sure the network hasn't been compromised or that there aren't hackers watching unnoticed?</p>
<p>To counter this very real threat, you can open a connection on your laptop or phone to a VPN server. This way all your data transfers take place through a virtual tunnel. Every part of your sensitive connections will be invisible to anyone on the local network you're connecting from.</p>
<p>WireGuard is the newest of the three big players in the open source VPN world, with the other two being IPsec and OpenVPN. </p>
<p>WireGuard is built to be simpler, faster, and more flexible than the others. It's the new kid on the block, but it's quickly picked up some important friends. At the urging of Linux creator Linus Torvalds himself, WireGuard was recently incorporated into the Linux kernel.</p>
<h1 id="heading-where-to-build-your-vpn-server">Where to build your VPN server?</h1>
<p>Sure, you can always put together a VPN server at home and configure port forwarding through your ISP's router. But it'll often make more practical sense to run it in the cloud. </p>
<p>Don't worry. I assure you that this way will be a lot closer to a quick and painless "set it and forget it" configuration. And it's highly unlikely that whatever you build at home would be as reliable – or secure – as the infrastructure provided by the big cloud providers like AWS. </p>
<p>However, if you do happen to have a professionally secured internet server lying around the house (or you're willing to take a chance with a spare Raspberry Pi you've got lying around) then it'll work just about the same way.</p>
<p>Thanks to WireGuard, whether in the cloud or on a physical server, making your own home VPN has never been easier. The whole setup can be done in half an hour.</p>
<h1 id="heading-getting-ready">Getting ready</h1>
<p>Get your cloud instance up and running, perhaps using a <a target="_blank" href="https://www.freecodecamp.org/news/administrating-aws-resources-productively-using-the-aws-cli/">tutorial from here</a>.</p>
<p>Make sure port <strong>51820</strong> is open to your server. This is done with <em>Security groups</em> on AWS and a <em>VPC network firewall</em> on Google Cloud.</p>
<p>With modern Debian/Ubuntu releases, Wireguard is available to be installed from the package managers like this:</p>
<pre><code>sudo apt install wireguard
</code></pre><p>Or with yum, from the EPEL repository:</p>
<pre><code>sudo yum install kmod-wireguard wireguard-tools
</code></pre><h1 id="heading-step-one-create-the-encryption-keys">Step one: create the encryption keys</h1>
<p>In any directory on the server where you want to create files containing the public and private keys, use this command:</p>
<pre><code>umask <span class="hljs-number">077</span>; wg genkey | tee privatekey | wg pubkey &gt; publickey
</code></pre><p>Do the same for the client in a different directory or on your local machine. Just make sure you will be able to distinguish between the different key sets later. </p>
<p>For quick setup you can use an <a target="_blank" href="https://www.wireguardconfig.com">online key generator</a>. However I suggest doing it manually the first time. Make sure that files were created with key hashes in them as you will be using them in the next step.</p>
<h1 id="heading-step-two-create-the-server-config">Step two: create the server config</h1>
<p>You need to make a <em>.conf</em> file in the /etc/wireguard directory. You can even have multiple VPNs running at the same time using different ports. </p>
<p>Paste the following code in to the new file:</p>
<pre><code>sudo nano /etc/wireguard/wg0.conf
</code></pre><pre><code>[Interface]
Address = <span class="hljs-number">10.0</span><span class="hljs-number">.0</span><span class="hljs-number">.1</span>/<span class="hljs-number">24</span>
ListenPort = <span class="hljs-number">51820</span>
# use the server PrivateKey
PrivateKey = GPAtRSECRETLONGPRIVATEKEYB0J/GDbNQg6V0s=

# you can have <span class="hljs-keyword">as</span> many peers <span class="hljs-keyword">as</span> you wish
# remember to replace the values below <span class="hljs-keyword">with</span> the PublicKey <span class="hljs-keyword">of</span> the peer

[Peer]
PublicKey = NwsVexamples4sBURwFl6HVchellou6o63r2B0s=
AllowedIPs = <span class="hljs-number">10.0</span><span class="hljs-number">.0</span><span class="hljs-number">.2</span>/<span class="hljs-number">32</span>

[Peer]
PublicKey = NwsexampleNbw+s4sBnotFl6HrealxExu6o63r2B0s=
AllowedIPs = <span class="hljs-number">10.0</span><span class="hljs-number">.0</span><span class="hljs-number">.3</span>/<span class="hljs-number">32</span>
</code></pre><h3 id="heading-start-up-the-vpn">Start up the VPN</h3>
<pre><code>sudo systemctl start wg-quick@wg0
</code></pre><p>If you don't have systemd (which might be true if your instance is running Amazon Linux) you could use <code>sudo wg-quick up wg0</code>.</p>
<h1 id="heading-step-three-create-the-client-config">Step three: create the client config</h1>
<p>First install Wireguard on your client machine, either the same way on Linux or through an app store if you're using Windows, macOS, Android, or iPhone. </p>
<p>If you used an online-key-generator or QR script in Step One, then you can connect your phone by taking a picture of the QR code.</p>
<p>Once WireGuard is installed on the client, configure it using these values:</p>
<pre><code># Replace the PrivateKey value <span class="hljs-keyword">with</span> the one <span class="hljs-keyword">from</span> your client interface
[Interface]
Address = <span class="hljs-number">10.0</span><span class="hljs-number">.0</span><span class="hljs-number">.2</span>/<span class="hljs-number">24</span>
ListenPort = <span class="hljs-number">51820</span>
PrivateKey = CNNjIexAmple4A6NMkrDt4iyKeYD1BxSstzer49b8EI=

#use the VPN server<span class="hljs-string">'s PublicKey and the Endpoint IP of the cloud instance
[Peer]
PublicKey = WbdIAnOTher1208Uwu9P17ckEYxI1OFAPZ8Ftu9kRQw=
AllowedIPs = 0.0.0.0/0
Endpoint = 34.69.57.99:51820</span>
</code></pre><p>There are many optional add-ons that you might want depending on your use-case, such as specifying DNS or pre-shared keys for an extra layer of security.</p>
<p>Start up the client in same way as the server if you are on Linux or through the application itself on other systems.</p>
<h1 id="heading-test-your-vpn">Test your VPN</h1>
<p>Type "my ip" in your browser to discover your public IP address. If the IP you get is different from the address your computer had before starting the VPN, then you were successful!</p>
<p>(And if you forgot what it was before, try <code>sudo systemctl stop wg-quick@wg0</code>, checking and starting it again.)</p>
<h1 id="heading-troubleshooting-guide">Troubleshooting Guide</h1>
<p>Make sure your server is configured for IP forwarding. Check the /etc/sysctl.conf file, or run:</p>
<pre><code>echo <span class="hljs-number">1</span> &gt; <span class="hljs-regexp">/proc/</span>sys/net/ipv4/ip_forward
</code></pre><p>Your connection dies often? Add this to the peer section of the client configuration:</p>
<pre><code>PersistentKeepalive = <span class="hljs-number">25</span>
</code></pre><p>Not sure why it's not working? Try <code>sudo tcpdump -i eth</code> on the server while trying to use the client.</p>
<h2 id="heading-thanks-for-reading-this-guide">Thanks for reading this guide.</h2>
<p>If you want to dive deeper, consider taking <a target="_blank" href="https://www.manning.com/liveproject/secure-business-infrastructure-with-a-custom-vpn?a_aid=bootstrap-it&amp;a_bid=b9d7d398&amp;chan=VPN">my paid Manning course on WireGuard VPN</a>.</p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ How to self-host a Hugo web app ]]>
                </title>
                <description>
                    <![CDATA[ By Jared Wolff After hosting with Netlify for a few years, I decided to head back to self hosting. There are a few reasons for that, but the main reasoning was that I had more control over how things worked. In this post, I'll show you my workflow fo... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/my-latest-self-hosted-hugo-workflow/</link>
                <guid isPermaLink="false">66d850624c5150361c4fdb2e</guid>
                
                    <category>
                        <![CDATA[ containerization ]]>
                    </category>
                
                    <category>
                        <![CDATA[ FreeBSD ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Hugo ]]>
                    </category>
                
                    <category>
                        <![CDATA[ self hosting ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ freeCodeCamp ]]>
                </dc:creator>
                <pubDate>Sun, 29 Mar 2020 18:10:07 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/news/content/images/2020/03/Self-hosted-Hugo.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>By Jared Wolff</p>
<p>After hosting with Netlify for a few years, I decided to head back to self hosting. There are a few reasons for that, but the main reasoning was that I had more control over how things worked.</p>
<p>In this post, I'll show you my workflow for deploying my <a target="_blank" href="https://gohugo.io">Hugo</a> generated site (<a target="_blank" href="https://www.jaredwolff.com">www.jaredwolff.com</a>). </p>
<p>Instead of using what most people would go for, I'll be doing all of this using a FreeBSD Jails-based server. Plus I'll show you some tricks I've learned over the years on bulk image resizing and more.</p>
<p>Let's get to it.</p>
<h2 id="heading-where-to-host">Where to host?</h2>
<p>If you want to host your own service, you'll need a server. That's where a VPS provider like Digital Ocean or Vultr comes in. I've been a fan and have used Digital Ocean for a while now.</p>
<p>To set up a new server here are some steps:</p>
<ol>
<li>Login to Digital Ocean. If you don’t have Digital Ocean and would like to support this blog click <a target="_blank" href="https://m.do.co/c/9574d3846a29">here</a> to create an account.</li>
<li>Go to <code>Account Settings</code> -&gt; <code>Security</code> and make sure you have an SSH key setup.</li>
<li>Create a new FreeBSD droplet. Make sure you use the UFS version <img src="https://www.jaredwolff.com/my-latest-self-hosted-hugo-workflow/images/Screen_Shot_2020-04-15_at_9.41.21_AM.png" alt="Create Droplet" width="730" height="471" loading="lazy"> <img src="https://www.jaredwolff.com/my-latest-self-hosted-hugo-workflow/images/Screen_Shot_2020-04-15_at_9.43.21_AM.png" alt="Choose FreeBSD 12.1 UFS" width="730" height="471" loading="lazy"></li>
<li>Make sure you select the $5 a month plan. For simple installs, this is more than enough! <img src="https://www.jaredwolff.com/my-latest-self-hosted-hugo-workflow/images/Screen_Shot_2020-04-15_at_9.44.13_AM.png" alt="$5 Plan" width="730" height="471" loading="lazy"></li>
<li>Make sure your SSH key is selected <img src="https://www.jaredwolff.com/my-latest-self-hosted-hugo-workflow/images/Screen_Shot_2020-04-15_at_9.45.26_AM.png" alt="Select SSH key" width="730" height="465" loading="lazy"></li>
<li>Finally click that green <strong>Create Droplet</strong> button! <img src="https://www.jaredwolff.com/my-latest-self-hosted-hugo-workflow/images/Screen_Shot_2020-04-15_at_9.45.24_AM.png" alt="Create droplet" width="730" height="465" loading="lazy"></li>
<li>SSH in once you’re done: <code>ssh root@&lt;yourserverip&gt;</code></li>
</ol>
<h2 id="heading-setting-up-your-freebsd-server-with-bastille">Setting up your FreeBSD server with Bastille</h2>
<p><img src="https://www.jaredwolff.com/my-latest-self-hosted-hugo-workflow/images/bastille.png" alt="images/bastille.png" width="730" height="486" loading="lazy"></p>
<p>Up until recently, everything was running on a Docker based platform using <a target="_blank" href="https://github.com/exoframejs/exoframe">Exoframe</a>. It was easy and almost brainless. </p>
<p>The downside was that Docker takes up wayyyy too many resources. Plus managing files within a Docker container is as much or more work than hosting it natively. Oh, and have you checked how much space Docker has been using on your machine lately? On my development machine its was about 19GB of space. ?</p>
<p>So what's the alternative?</p>
<p>FreeBSD Jails using Bastille.</p>
<p>I've been playing with Bastille for a few months now. The more I use it, the more it makes 100% sense.</p>
<p>Bastille allows you to create (now) portable lightweight FreeBSD based jails. These jails are "containers" that have virtually no overhead. There's no daemon (the operating system is the "daemon"!). Plus, jails are secure compared to the can of worms that Docker is. Yes, you may have to compile and port some utilities. Most though are already supported in FreeBSD's package manager <code>pkg</code>.</p>
<p>In this section you'll learn how to get a jail running with <code>caddy</code> so you can securely host your site.</p>
<p>Let's keep the momentum going!</p>
<p>Once you get the IP address for your server, you should login:</p>
<p>    ssh root@123.456.789.10</p>
<p>You should get a MOTD message and an <code>sh</code> prompt. Woo!</p>
<p>    FreeBSD 12.1-RELEASE-p2 GENERIC</p>
<p>    Welcome to FreeBSD!
    ...</p>
<p>    #</p>
<p>Let's install a few important bits using <code>pkg</code> (FreeBSD's package manager):</p>
<p>    pkg install restic rsync bastille</p>
<p>We'll be using <code>restic</code> for backups, <code>rsync</code> for transferring files and <code>bastille</code> for jail setup.</p>
<p>You also have to set up some static routes in your <code>pf.conf</code>. Here's an example of mine:</p>
<pre><code class="lang-shell">ext_if="vtnet0"

# Caddy related
caddy_addr=10.10.2.20

set block-policy return
scrub in on $ext_if all fragment reassemble
set skip on lo

table &lt;jails&gt; persist
nat on $ext_if from &lt;jails&gt; to any -&gt; $ext_if

# container routes
rdr pass inet proto tcp from any to port 80 -&gt; $caddy_addr port 8880
rdr pass inet proto tcp from any to port 443 -&gt; $caddy_addr port 4443

# Enable dynamic rdr (see below)
rdr-anchor "rdr/*"

block in all
pass out quick modulate state
antispoof for $ext_if inet
pass in inet proto tcp from any to any port ssh flags S/SA keep state
</code></pre>
<p>This is a standard <code>pf.conf</code> file for <code>bastille</code>.  Make sure you edit <code>caddy_addr</code> to the IP you chose.</p>
<p>Now let's start the firewall. You will get kicked out of your <code>ssh</code> session:</p>
<pre><code>sysrc pf_enable=<span class="hljs-string">"YES"</span>
service pf start
</code></pre><p>Then let's get some <code>bastille</code> configuration out of the way:</p>
<pre><code># set up bastille networking
sysrc cloned_interfaces+=lo1
sysrc ifconfig_lo1_name=<span class="hljs-string">"bastille0"</span>
service netif cloneup

# bootstrap the base jail and start bastille
bastille bootstrap <span class="hljs-number">12.1</span>-RELEASE update
sysrc bastille_enable=<span class="hljs-string">"YES"</span>
service bastille start
</code></pre><p>This will set up your networking, and fetch the latest default base jail you'll use later.</p>
<p>Next, let's set up the jail:</p>
<pre><code>bastille create caddy <span class="hljs-number">12.1</span>-STABLE <span class="hljs-number">10.10</span><span class="hljs-number">.2</span><span class="hljs-number">.20</span>
bastille start caddy
</code></pre><p>Then install <code>caddy</code></p>
<pre><code>#install the binary
fetch https:<span class="hljs-comment">//github.com/caddyserver/caddy/releases/download/v1.0.4/caddy_v1.0.4_freebsd_amd64.tar.gz</span>
tar xvf caddy_v1<span class="hljs-number">.0</span><span class="hljs-number">.4</span>_freebsd_amd64.tar.gz caddy
bastille cp caddy caddy /usr/local/bin/
rm caddy

#create the caddy user
bastille cmd caddy pw useradd caddy -m -s /usr/sbin/nologin

#install ca root file
bastille pkg caddy install ca_root_nss
</code></pre><p>When installing <code>ca_root_nss</code> , <code>pkg</code> will have to initialize. Accept the prompts. Once you're done here we'll move on to the next step!</p>
<p>Once installation is complete, we should also configure <code>caddy</code> to start on boot. The easiest way to do that is use this <code>rc.d</code> script:</p>
<pre><code class="lang-sh"><span class="hljs-meta">#!/bin/sh</span>

<span class="hljs-comment"># $FreeBSD: head/net/caddy/files/caddy.in 452063 2017-10-14 12:58:24Z riggs $</span>
<span class="hljs-comment">#</span>
<span class="hljs-comment"># PROVIDE: caddy</span>
<span class="hljs-comment"># REQUIRE: LOGIN</span>
<span class="hljs-comment"># KEYWORD: shutdown</span>
<span class="hljs-comment">#</span>
<span class="hljs-comment"># Add the following lines to /etc/rc.conf.local or /etc/rc.conf</span>
<span class="hljs-comment"># to enable this service:</span>
<span class="hljs-comment">#</span>
<span class="hljs-comment"># caddy_enable (bool):    Set to NO by default.</span>
<span class="hljs-comment">#                Set it to YES to enable caddy.</span>
<span class="hljs-comment"># caddy_user (user):        Set user to run caddy.</span>
<span class="hljs-comment">#                Default is "caddy".</span>
<span class="hljs-comment"># caddy_group (group):    Set group to run caddy.</span>
<span class="hljs-comment">#                Default is "caddy".</span>
<span class="hljs-comment"># caddy_conf (path):        Path to caddy configuration file.</span>
<span class="hljs-comment">#                Default is /usr/local/etc/caddyfile.conf</span>

. /etc/rc.subr

name=caddy
rcvar=caddy_enable

load_rc_config <span class="hljs-variable">$name</span>

: <span class="hljs-variable">${caddy_enable:="NO"}</span>
: <span class="hljs-variable">${caddy_user:="caddy"}</span>
: <span class="hljs-variable">${caddy_group:="caddy"}</span>
: <span class="hljs-variable">${caddy_conf:="/usr/local/etc/caddyfile.conf"}</span>
: <span class="hljs-variable">${caddy_log:="/home/caddy/caddy.log"}</span>
: <span class="hljs-variable">${caddy_env:="CADDYPATH=/home/caddy/"}</span>
: <span class="hljs-variable">${caddy_https_port:="4443"}</span>
: <span class="hljs-variable">${caddy_http_port:="8880"}</span>

pidfile=<span class="hljs-string">"/var/run/caddy.pid"</span>
procname=<span class="hljs-string">"/usr/local/bin/caddy"</span>
<span class="hljs-built_in">command</span>=<span class="hljs-string">"/usr/sbin/daemon"</span>
command_args=<span class="hljs-string">"-f -p <span class="hljs-variable">${pidfile}</span> /usr/bin/env <span class="hljs-variable">${caddy_env}</span> <span class="hljs-variable">${procname}</span> -agree -http-port <span class="hljs-variable">${caddy_http_port}</span>  -https-port <span class="hljs-variable">${caddy_https_port}</span> -conf=<span class="hljs-variable">${caddy_conf}</span> -log=<span class="hljs-variable">${caddy_log}</span> <span class="hljs-variable">${caddy_args}</span>"</span>
extra_commands=<span class="hljs-string">"reload"</span>

start_precmd=caddy_startprecmd
reload_cmd=caddy_reloadcmd

<span class="hljs-function"><span class="hljs-title">caddy_startprecmd</span></span>()
{
      <span class="hljs-keyword">if</span> [ ! -e <span class="hljs-variable">${pidfile}</span> ]; <span class="hljs-keyword">then</span>
              install -o <span class="hljs-variable">${caddy_user}</span> -g <span class="hljs-variable">${caddy_group}</span> /dev/null <span class="hljs-variable">${pidfile}</span>;
      <span class="hljs-keyword">fi</span>
}

<span class="hljs-function"><span class="hljs-title">caddy_reloadcmd</span></span>()
{
      <span class="hljs-built_in">kill</span> -s USR1 $(cat <span class="hljs-variable">${pidfile}</span>)
}

run_rc_command <span class="hljs-string">"<span class="hljs-variable">$1</span>"</span>
</code></pre>
<p>Remove the <code>caddy</code> executable if you haven't already. Then create a new file with <code>vi</code>. This will be your <code>rc.d</code> script!</p>
<pre><code>vi caddy
</code></pre><p>Then paste the contents of the above script in there, save and exit.</p>
<p>Make sure the file is executable by using <code>chmod</code> and copy to the Caddy container.</p>
<pre><code>chmod +x caddy
bastille cp caddy caddy /usr/local/etc/rc.d/
</code></pre><p>Finally, we'll need a Caddyfile. Here's an example of one:</p>
<pre><code>stage.jaredwolff.com {
  tls hello@jaredwolff.com
  log /home/caddy/stage.jaredwolff.com.log
  root /<span class="hljs-keyword">var</span>/www/stage.jaredwolff.com/
  gzip
  log stderr
}
</code></pre><p><code>log</code> refers to this site specific access log.</p>
<p><code>root</code> refers to where the root <code>public</code> folder is on your machine. In my case it's the common <code>/var/www/&lt;name of site&gt;</code>. Set your paths and remember them. We'll need them later!</p>
<p>To have Caddy generate certs for this subdomain, you'll have to set the <em>tls</em> option. An email is all that's needed.</p>
<p>For more on the Caddyfile structure <a target="_blank" href="https://caddyserver.com/docs/caddyfile">check out the documentation.</a></p>
<p>Make a file called <code>caddyfile.conf</code> and copy it to <code>/usr/local/etc/</code> in your Caddy container:</p>
<pre><code>vi caddyfile.conf
# Paste your caddyfile contents and save
bastille cp caddy caddyfile.conf /usr/local/etc/
</code></pre><p>You should now redirect your DNS to the server IP. That way Caddy can generate/fetch the correct certificates. Then you can start Caddy with:</p>
<pre><code>bastille service caddy caddy start
</code></pre><p>You can check the log at <code>/usr/home/caddy/caddy.log</code> to make sure that your domain provisioned correctly.</p>
<p><strong><em>Side note:</em></strong> Getting setup with SSL certs is tough at first, especially if you're migrating from another server. Your site will have to go down for a little bit while you switch your DNS settings and start <code>caddy</code>. </p>
<p>(That's if you're using standard <code>caddy</code> 1.0. You can also use the DNS provider <a target="_blank" href="https://github.com/caddyserver/dnsproviders">plugins here</a> which make things a little easier.)</p>
<p>Now that we have <code>caddy</code> up and running it's time to copy our <code>hugo</code> generated assets over using <code>rsync</code>. We're off to the next step!</p>
<h2 id="heading-make-building-and-deploying-easy"><em>Make</em> building and deploying easy</h2>
<p><img src="https://www.jaredwolff.com/my-latest-self-hosted-hugo-workflow/images/make.png" alt="images/make.png" width="730" height="486" loading="lazy"></p>
<p>I spend a ton of time writing C code, and that means I spend tons of time using Makefiles. For many, <code>make</code> (or <code>gmake</code> for GNU make) is the bane of their existence. </p>
<p>For building and deploying, <code>make</code> makes it easy to create reusable recipes. That way you know you can deploy with confidence every time.</p>
<p>My Makefile borrows from the one that <a target="_blank" href="https://victoria.dev/blog/a-portable-makefile-for-continuous-delivery-with-hugo-and-github-pages/">Victoria Drake had posted</a> not too long ago. I changed it up a bit to match my needs. </p>
<p>Let's take a tour and see what's inside:</p>
<pre><code class="lang-Makefile"><span class="hljs-section">.POSIX:</span>

HUGO_VERSION := 0.66.0

OPTIMIZED_DIR := optimized
CONTENT_DIR := content
DEST_DIR := public

SERVER := 123.456.789.10
USER := user
</code></pre>
<p>The first section contains all the variables that I use to tell the functions later on what to do. It also has a reference to the <code>.POSIX</code> target. This means that the Makefile will be as portable between different versions of <code>make</code>.</p>
<p>Then, I popped in some logic to determine whether I'm deploying to <em>stage</em> or <em>production:</em></p>
<pre><code class="lang-Makefile"><span class="hljs-comment"># Set the place where it's deployed to.</span>
<span class="hljs-keyword">ifdef</span> PRODUCTION
<span class="hljs-variable">$(info Building for production. ?)</span>
TARGET := www
<span class="hljs-keyword">else</span>
<span class="hljs-variable">$(info Building for development. ?)</span>
BASEURL := --baseURL <span class="hljs-string">"https://stage.jaredwolff.com"</span>
TARGET := stage
<span class="hljs-keyword">endif</span>
</code></pre>
<p>By default, recipes below will use the development workflow. To use the production workflow, you can invoke <code>make</code> like this:</p>
<pre><code class="lang-Makefile">PRODUCTION=1 make build
</code></pre>
<p>This does add some extra friction to the deploy process. It's a good step though. That way you're sure the deploy is going to the right place!</p>
<pre><code class="lang-Makefile"><span class="hljs-comment"># Full path</span>
DEPLOY_DIR := /usr/local/bastille/jails/caddy/root/path/to/<span class="hljs-variable">$(TARGET)</span>.jaredwolff.com
</code></pre>
<p>Using the <code>TARGET</code> variable above, I then define the path to my server assets. I'm using Bastille to organize my jails, so the path is extra long. (yea, lengthly long) This allows us to use <code>rsync</code> to deploy the files with ease.</p>
<p>Now here come the fun bits. To do a full bulk resize, I'm using the <code>wildcard</code> functionality of the Makefile.</p>
<pre><code class="lang-Makefile">IMAGES := \
<span class="hljs-variable">$(<span class="hljs-built_in">wildcard</span> <span class="hljs-variable">$(CONTENT_DIR)</span>/*/images/*.jpg)</span> \
<span class="hljs-variable">$(<span class="hljs-built_in">wildcard</span> <span class="hljs-variable">$(CONTENT_DIR)</span>/*/images/*.JPG)</span> \
<span class="hljs-variable">$(<span class="hljs-built_in">wildcard</span> <span class="hljs-variable">$(CONTENT_DIR)</span>/*/images/*.jpeg)</span> \
<span class="hljs-variable">$(<span class="hljs-built_in">wildcard</span> <span class="hljs-variable">$(CONTENT_DIR)</span>/*/images/*.png)</span> \
<span class="hljs-variable">$(<span class="hljs-built_in">wildcard</span> <span class="hljs-variable">$(CONTENT_DIR)</span>/*/*/images/*.jpg)</span> \
<span class="hljs-variable">$(<span class="hljs-built_in">wildcard</span> <span class="hljs-variable">$(CONTENT_DIR)</span>/*/*/images/*.jpeg)</span> \
<span class="hljs-variable">$(<span class="hljs-built_in">wildcard</span> <span class="hljs-variable">$(CONTENT_DIR)</span>/*/*/images/*.png)</span> \
<span class="hljs-variable">$(<span class="hljs-built_in">wildcard</span> <span class="hljs-variable">$(CONTENT_DIR)</span>/*/*/images/*.JPG)</span> \
</code></pre>
<p>In this case it will create a huge space delimited list of every image that is within my content directory. The biggest drawback of this method is that it's not space tolerant. An easy fix to this is to make sure that all my photos do not have spaces.</p>
<p>Here's a quick and dirty bash command. You can use to rename files that have spaces and replace them with '_' characters:</p>
<pre><code class="lang-Makefile">for f in *\ *; do mv <span class="hljs-string">"$f"</span> <span class="hljs-string">"${f// /_}"</span>; done
</code></pre>
<p>Next, we rename these entries so the prefix is now the target directory. This will be useful when we want to resize:</p>
<pre><code class="lang-Makefile">OPTIMIZED_IMAGES := \
<span class="hljs-variable">$(<span class="hljs-built_in">subst</span> <span class="hljs-variable">$(CONTENT_DIR)</span>/,<span class="hljs-variable">$(OPTIMIZED_DIR)</span>/,<span class="hljs-variable">$(IMAGES)</span>)</span>
</code></pre>
<p>Now check out the <code>optimize</code> recipe:</p>
<pre><code class="lang-Makefile"><span class="hljs-meta"><span class="hljs-meta-keyword">.PHONY</span>: optimize</span>
<span class="hljs-section">optimize: build <span class="hljs-variable">$(OPTIMIZED_IMAGES)</span></span>
@echo <span class="hljs-string">"? Optimizing images"</span>
rsync -r <span class="hljs-variable">$(OPTIMIZED_DIR)</span>/ <span class="hljs-variable">$(DEST_DIR)</span>/
du -sh <span class="hljs-variable">$(CONTENT_DIR)</span>/
du -sh <span class="hljs-variable">$(DEST_DIR)</span>/

<span class="hljs-variable">$(OPTIMIZED_IMAGES)</span>:
convert -strip -compress JPEG -resize '730&gt;' <span class="hljs-variable">$(<span class="hljs-built_in">subst</span> <span class="hljs-variable">$(OPTIMIZED_DIR)</span>/,<span class="hljs-variable">$(CONTENT_DIR)</span>/,<span class="hljs-variable">$@</span>)</span> <span class="hljs-variable">$@</span>
</code></pre>
<p>It first calls the <code>build</code> recipe and then also the <code>$(OPTIMIZED_IMAGES)</code> recipe. The later will optimize the image using the <code>convert</code> command from <a target="_blank" href="https://imagemagick.org/script/convert.php">Imagemagick</a>. In this case I'm only resizing files that are larger than 730px wide. Change yours accordingly so you can reap the benefits of an <a target="_blank" href="https://www.jaredwolff.com/seven-ways-to-optimize-your-site-for-speed/">optimized site.</a></p>
<p>After resizing, the recipe uses <code>rsync</code> to copy the files from the <code>OPTIMIZED_DIR</code> to <code>DEST_DIR.</code></p>
<p>If we take a look at the <code>build</code> recipe, I first building the assets. Then, I copy the photos from the <code>content</code> dir to <code>optimized</code> dir. The nice thing is that <code>rsync</code> will only move files that have changed. Thus it doesn't have to copy the files over and over and over again every time you build.</p>
<p>Finally, the <code>deploy</code> recipe.</p>
<pre><code class="lang-Makefile"><span class="hljs-meta"><span class="hljs-meta-keyword">.PHONY</span>: deploy</span>
<span class="hljs-section">deploy:</span>
@echo rsync to <span class="hljs-variable">$(DEPLOY_DIR)</span>
@rsync -r --del public/ <span class="hljs-variable">$(USER)</span>@<span class="hljs-variable">$(SERVER)</span>:<span class="hljs-variable">$(DEPLOY_DIR)</span>/
@echo making restic snapshot
@scp scripts/backup.sh <span class="hljs-variable">$(USER)</span>@<span class="hljs-variable">$(SERVER)</span>:/root/backup.sh
@ssh <span class="hljs-variable">$(USER)</span>@<span class="hljs-variable">$(SERVER)</span> sh /root/backup.sh <span class="hljs-variable">$(DEPLOY_DIR)</span>
@echo <span class="hljs-string">"? Site is deployed!"</span>
</code></pre>
<p>You can see again that I'm using rsync to sync the contents of <code>public/</code> to the server. Make sure you set the <code>USER</code> , <code>SERVER</code> and <code>DEPLOY_DIR</code>. In my case <code>DEPLOY_DIR</code> comes out to <code>/usr/local/bastille/jails/caddy/root/var/www/www.jaredwolff.com</code></p>
<p>When you do finally get a successful deploy you can double check everything is in the correct place. Then once everything looks good you can start up your caddy server using:</p>
<pre><code>bastille service caddy caddy start
</code></pre><p><code>deploy</code> will also do something extra handy here. It will deploy my <code>restic</code> backup script and run it. I'll talk about this more in the backup section.</p>
<p>All in all, here's the full Makefile:</p>
<pre><code class="lang-Makefile"><span class="hljs-section">.POSIX:</span>

HUGO_VERSION := 0.66.0

OPTIMIZED_DIR := optimized
CONTENT_DIR := content
DEST_DIR := public

SERVER := 155.138.230.8
USER := root

<span class="hljs-comment"># Set the place where it's deployed to.</span>
<span class="hljs-keyword">ifdef</span> PRODUCTION
<span class="hljs-variable">$(info Building for production. ?)</span>
TARGET := www
<span class="hljs-keyword">else</span>
<span class="hljs-variable">$(info Building for development. ?)</span>
BASEURL := --baseURL <span class="hljs-string">"https://stage.jaredwolff.com"</span>
TARGET := stage
<span class="hljs-keyword">endif</span>

<span class="hljs-comment"># Full path</span>
DEPLOY_DIR := /usr/local/bastille/jails/caddy/root/var/www/<span class="hljs-variable">$(TARGET)</span>.jaredwolff.com

IMAGES := \
<span class="hljs-variable">$(<span class="hljs-built_in">wildcard</span> <span class="hljs-variable">$(CONTENT_DIR)</span>/*/images/*.jpg)</span> \
<span class="hljs-variable">$(<span class="hljs-built_in">wildcard</span> <span class="hljs-variable">$(CONTENT_DIR)</span>/*/images/*.JPG)</span> \
<span class="hljs-variable">$(<span class="hljs-built_in">wildcard</span> <span class="hljs-variable">$(CONTENT_DIR)</span>/*/images/*.jpeg)</span> \
<span class="hljs-variable">$(<span class="hljs-built_in">wildcard</span> <span class="hljs-variable">$(CONTENT_DIR)</span>/*/images/*.png)</span> \
<span class="hljs-variable">$(<span class="hljs-built_in">wildcard</span> <span class="hljs-variable">$(CONTENT_DIR)</span>/*/*/images/*.jpg)</span> \
<span class="hljs-variable">$(<span class="hljs-built_in">wildcard</span> <span class="hljs-variable">$(CONTENT_DIR)</span>/*/*/images/*.jpeg)</span> \
<span class="hljs-variable">$(<span class="hljs-built_in">wildcard</span> <span class="hljs-variable">$(CONTENT_DIR)</span>/*/*/images/*.png)</span> \
<span class="hljs-variable">$(<span class="hljs-built_in">wildcard</span> <span class="hljs-variable">$(CONTENT_DIR)</span>/*/*/images/*.JPG)</span> \

OPTIMIZED_IMAGES := \
<span class="hljs-variable">$(<span class="hljs-built_in">subst</span> <span class="hljs-variable">$(CONTENT_DIR)</span>/,<span class="hljs-variable">$(OPTIMIZED_DIR)</span>/,<span class="hljs-variable">$(IMAGES)</span>)</span>

<span class="hljs-meta"><span class="hljs-meta-keyword">.PHONY</span>: all</span>
<span class="hljs-section">all: build optimize</span>

<span class="hljs-meta"><span class="hljs-meta-keyword">.PHONY</span>: clean</span>
<span class="hljs-section">clean:</span>
rm -rf public/
rm -rf optimized/

<span class="hljs-meta"><span class="hljs-meta-keyword">.PHONY</span>: serve</span>
<span class="hljs-section">serve:</span>
@hugo serve -D

<span class="hljs-meta"><span class="hljs-meta-keyword">.PHONY</span>: ssh</span>
<span class="hljs-section">ssh:</span>
@ssh <span class="hljs-variable">$(USER)</span>@<span class="hljs-variable">$(SERVER)</span>

<span class="hljs-meta"><span class="hljs-meta-keyword">.PHONY</span>: build</span>
<span class="hljs-section">build:</span>
@echo <span class="hljs-string">"? Generating site"</span>
hugo --gc --minify -d <span class="hljs-variable">$(DEST_DIR)</span> <span class="hljs-variable">$(BASEURL)</span>
rsync -av --del -f<span class="hljs-string">"+ */"</span> -f<span class="hljs-string">"- *"</span> <span class="hljs-variable">$(CONTENT_DIR)</span>/ <span class="hljs-variable">$(OPTIMIZED_DIR)</span>/

<span class="hljs-meta"><span class="hljs-meta-keyword">.PHONY</span>: optimize</span>
<span class="hljs-section">optimize: build <span class="hljs-variable">$(OPTIMIZED_IMAGES)</span></span>
@echo <span class="hljs-string">"? Optimizing images"</span>
rsync -r <span class="hljs-variable">$(OPTIMIZED_DIR)</span>/ <span class="hljs-variable">$(DEST_DIR)</span>/
du -sh <span class="hljs-variable">$(CONTENT_DIR)</span>/
du -sh <span class="hljs-variable">$(DEST_DIR)</span>/

<span class="hljs-variable">$(OPTIMIZED_IMAGES)</span>:
convert -strip -compress JPEG -resize '730&gt;' <span class="hljs-variable">$(<span class="hljs-built_in">subst</span> <span class="hljs-variable">$(OPTIMIZED_DIR)</span>/,<span class="hljs-variable">$(CONTENT_DIR)</span>/,<span class="hljs-variable">$@</span>)</span> <span class="hljs-variable">$@</span>

<span class="hljs-meta"><span class="hljs-meta-keyword">.PHONY</span>: deploy</span>
<span class="hljs-section">deploy:</span>
@echo rsync to <span class="hljs-variable">$(DEPLOY_DIR)</span>
@rsync -r --del public/ <span class="hljs-variable">$(USER)</span>@<span class="hljs-variable">$(SERVER)</span>:<span class="hljs-variable">$(DEPLOY_DIR)</span>/
@echo making restic snapshot
@scp scripts/backup.sh <span class="hljs-variable">$(USER)</span>@<span class="hljs-variable">$(SERVER)</span>:/root/backup.sh
@ssh <span class="hljs-variable">$(USER)</span>@<span class="hljs-variable">$(SERVER)</span> sh /root/backup.sh <span class="hljs-variable">$(DEPLOY_DIR)</span>
@echo <span class="hljs-string">"? Site is deployed!"</span>
</code></pre>
<p>There are a few other handy nuggets in there you may want to use.  <code>clean</code>, <code>serve</code> and <code>ssh</code> have been very helpful when testing and connecting.</p>
<p>In the end you'll have a two step deploy process. The first generates your site with optimized images. The second is deploying to a server for static hosting.</p>
<h2 id="heading-incremental-backup">Incremental Backup</h2>
<p><img src="https://www.jaredwolff.com/my-latest-self-hosted-hugo-workflow/images/Backup.png" alt="images/Backup.png" width="730" height="486" loading="lazy"></p>
<p>After discovering <a target="_blank" href="https://restic.net">Restic</a> I've been sold on how handy it has been for all my incremental backup needs. In the case of my server, I'm using to back up the root folder of my site. That way, if I need to roll back, I can do so with a few short steps.</p>
<p>Here's how you can set up a local <code>restic</code> repo.</p>
<h3 id="heading-setting-it-up">Setting it up</h3>
<p>Initializing the repo is simple. The most important part is making sure you <strong>don't lose/forget your password!</strong></p>
<pre><code>    # restic init -r /root/backups
    enter password <span class="hljs-keyword">for</span> <span class="hljs-keyword">new</span> repository:
    enter password again:
    created restic repository <span class="hljs-number">32e14</span>c7052 at /root/backups

    Please note that knowledge <span class="hljs-keyword">of</span> your password is required to access
    the repository. Losing your password means that your data is
    irrecoverably lost.
</code></pre><p>Set the <code>RESTIC_PASSWORD</code> environment variable to avoid entering your password. To make it permanent you'll have to place <code>export RESTIC_PASSWORD="Your password here!"</code> within the <code>.profile</code> file in <code>/root/</code>.</p>
<h3 id="heading-backing-up">Backing Up</h3>
<p>Invoking <code>restic</code> over SSH is tough. So our next best bet?</p>
<p>Transfer a (very brief) shell script to the server and run it after a deploy. Here's the contents of what I'm using today:</p>
<pre><code class="lang-sh"><span class="hljs-meta">#!/bin/sh</span>
<span class="hljs-built_in">export</span> RESTIC_PASSWORD=<span class="hljs-string">"Your password here!"</span>
restic backup <span class="hljs-variable">$1</span> -r /root/backups/
</code></pre>
<p><strong><em>Side note:</em></strong> As I sit here and look at this script, for security reasons you can replace "Your password here!" with $2 which is the second argument to the script. That way you don't need to commit/push the password stored in a static file!</p>
<p>This first sets your backup password. Then it runs <code>restic</code> using the first command line argument as the path. So, to run a backup with this script, it would look something like this:</p>
<pre><code>./backup.sh /path/to/your/public/folder/
</code></pre><p><strong>Note:</strong> you do need to initialize your <code>restic</code> backup <em>before</em> you start backing up. It will barf at you otherwise!</p>
<p>In my case I'm placing the incremental backups on a different folder of my machine. That way they're easily accessible and <em>fast</em>.</p>
<h3 id="heading-viewing-your-backups">Viewing your backups</h3>
<p>To view your backups you can run the following command:</p>
<h1 id="heading-restic-snapshots-r-rootbackups-g-paths-c">restic snapshots -r /root/backups -g paths -c</h1>
<p>    enter password for repository:
    repository e140b5e4 opened successfully, password is correct
    snapshots for (paths [/usr/local/bastille/jails/caddy/root/var/www/www.jaredwolff.com]):</p>
<h2 id="heading-id-time-host-tags">    ID        Time                 Host         Tags</h2>
<p>    d3328066  2020-03-10 00:30:58  vultr.guest
    f3360819  2020-03-10 04:03:03  vultr.guest
    231dd134  2020-03-10 04:44:00  vultr.guest
    3c1be26a  2020-03-10 04:56:19  vultr.guest
    e96c947c  2020-03-10 05:03:00  vultr.guest
    34c3682a  2020-03-10 14:01:37  vultr.guest
    fbccdb8c  2020-03-10 14:04:26  vultr.guest
    9ce11146  2020-03-10 15:38:49  vultr.guest
    046b3da3  2020-03-10 15:47:06  vultr.guest
    9c28d4bc  2020-03-10 15:48:25  vultr.guest
    469dc228  2020-03-10 15:48:54  vultr.guest
    6f78af72  2020-03-10 17:00:21  vultr.guest
    29ad17b2  2020-03-10 20:18:23  vultr.guest
    ed22ce1f  2020-03-10 20:20:24  vultr.guest
    9c8c1b03  2020-03-11 13:56:40  vultr.guest
    b6cfcfec  2020-03-11 14:08:14  vultr.guest
    e8546005  2020-03-11 14:27:22  vultr.guest
    49a134fe  2020-03-17 00:47:58  vultr.guest</p>
<h2 id="heading-c0beb283-2020-03-18-204452-vultrguest">    c0beb283  2020-03-18 20:44:52  vultr.guest</h2>
<p>You can use this list to determine if you need to roll back a deploy.</p>
<h3 id="heading-restoring">Restoring</h3>
<p>Restoring from a backup, especially in a live environment, needs to be quick. After viewing your backups you can restore a specific backup by using its <em>ID</em>.</p>
<pre><code>restic restore d3328066
</code></pre><p>This will restore the files back to the backup made on <em>2020-03-10 00:30:58.</em> Awesome. Plus it won't overwrite every single file. It will only apply the differences from the current state and the stored state.</p>
<h2 id="heading-conclusion">Conclusion</h2>
<p>We've covered a ton of ground in this post. You've learned how to:</p>
<ul>
<li>Deploy your own server using Vultr</li>
<li>Use Bastille to create Container-like Jails</li>
<li>Set up Caddy to serve static file assets with TLS</li>
<li>Deploy the files using a fairly simple Makefile and <code>rsync</code></li>
<li>Back up after every deploy using <code>restic</code></li>
</ul>
<p>In the end we have a robust, secure and simple platform for hosting static files and services. </p>
<p>Stay tuned as there are more posts like this coming your way soon! In the meantime check out my <a target="_blank" href="https://www.jaredwolff.com/blog/">other posts.</a> </p>
<p>Thanks for reading and see you next time! ?</p>
<p><strong>You can find other articles like this at <a target="_blank" href="https://www.jaredwolff.com/my-latest-self-hosted-hugo-workflow/">www.jaredwolff.com.</a></strong></p>
 ]]>
                </content:encoded>
            </item>
        
    </channel>
</rss>
