post

Matt Ondo

<p>Although headless WordPress websites don&#8217;t require a conventional front-end theme, they still need specialized themes to enhance the admin dashboard, manage custom fields efficiently, and enable features like REST APIs and custom GraphQL schemas. This is where the <a href="https://github.com/MattOndo/bald-theme">Bald Theme</a> comes into play. Purpose-built for headless WordPress websites, the Bald Theme is designed to streamline these backend functions. It has been deliberately stripped of front-end code, emphasizing their minimalistic design to complement a separate front-end solution.</p>



<h2 class="wp-block-heading">The Foundation of Headless WordPress Customization</h2>



<div class="wp-block-columns are-vertically-aligned-center is-layout-flex wp-container-core-columns-is-layout-1 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:33.33%">
<div id="image-block_a19f16aefa109ff97feece0dffaad561">
            <img loading="lazy" decoding="async" src="https://mattondo.io/wp-content/uploads/screenshot.png" alt="Bald Theme thumbnail, a simple curve resembling the shape of a bald head." width="1200" height="900">
    </div></div>



<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<p>The <a href="https://github.com/MattOndo/bald-theme">Bald Theme</a> serves as the cornerstone for headless WordPress customization. It is intentionally minimalistic, devoid of any public-facing code, and tailored for backend functionality.</p>
</div>
</div>



<h3 class="wp-block-heading">Disabling the Gutenberg Editor in the Bald Parent</h3>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-2 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<p>When WordPress websites employ plugins like <a href="https://www.advancedcustomfields.com/" target="_blank" rel="noreferrer noopener nofollow">ACF (Advanced Custom Fields)</a> to manage content, the default Gutenberg Block Editor can often complicate the editing process and interfere with a smooth workflow. Disabling the Gutenberg Block Editor simplifies the content editing experience, making custom fields the central focus.</p>
</div>



<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<div id="image-block_08b5fa0923f60187c460c9865c126ad0">
            <img loading="lazy" decoding="async" src="https://mattondo.io/wp-content/uploads/bald-parent-theme-options.png" alt="Screenshot of the Bald Parent theme options page, displaying the toggle switches and interface for disabling the Gutenberg Editor." width="1974" height="1298">
    </div></div>
</div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-3 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<div id="image-block_591af09efe4cf728afb7365487836297">
            <img loading="lazy" decoding="async" src="https://mattondo.io/wp-content/uploads/disabled-gutenberg-editor.png" alt="Screenshot of the page editor in the WordPress dashboard with the Gutenberg Block Editor disabled." width="2510" height="1740">
    </div></div>



<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<p>With the Bald Theme activated, you have the power to disable the Gutenberg Block Editor on the front page and the posts archive page. Additionally, you can deactivate the default editor for any custom WordPress template. To help you get started, the theme includes a custom page template named &#8220;Disable Gutenberg.&#8221; You can access this setting conveniently under Theme Options within the WP Dashboard.</p>
</div>
</div>



<h2 class="wp-block-heading">A Blank Canvas Ready for Customization</h2>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-4 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<p>The <a href="https://github.com/MattOndo/bald-theme">Bald Theme</a> is a minimalist starting point designed for tailoring to the specific needs of headless WordPress websites. It offers a blank canvas for customizing the Admin Dashboard styles and functionality.</p>
</div>
</div>



<h3 class="wp-block-heading">Enhance Your Admin Dashboard with Bald Child</h3>



<p>Unlock the potential of the Bald Theme by creating custom styles for your admin dashboard, which is especially valuable for fine-tuning custom field layouts. The possibilities are virtually endless: you can disable default Gutenberg Blocks, implement REST and AJAX endpoints, or customize the GraphQL schema to match your unique requirements.</p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-5 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<p>As an illustration, this website employs <a href="https://github.com/MattOndo/bald-theme">Bald Theme</a> to define a custom &#8220;Code&#8221; Gutenberg Block using ACF (Advanced Custom Fields) which the front-end displays using <a href="https://highlightjs.org/" target="_blank" rel="noreferrer noopener nofollow">highlight.js</a>. You can explore the source code for this websites Bald Theme <a href="https://github.com/MattOndo/bald-theme/tree/mattondo.io">here</a>.</p>
</div>



<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<div id="image-block_69b6f9b65e894dd2a494eff60c69419b">
            <img loading="lazy" decoding="async" src="https://mattondo.io/wp-content/uploads/bald-child-example-code-screenshot.png" alt="Screenshot of a code editor displaying a customized Bald Child theme." width="2492" height="1760">
    </div></div>
</div>

Bald Theme thumbnail, a simple curve resembling the shape of a bald head.

Optimize Headless WordPress with the Bald Theme


<p>After dabbling with Headless CMS&#8217; and modern front-end frameworks for some time, I&#8217;ve finally decided to take a deep dive which has resulted in this very site. Follow along with this series to learn with me, and to see what I&#8217;m working on in real-time. Let&#8217;s dig in, shall we?</p>



<h2 class="wp-block-heading">What is a &#8220;Headless&#8221; website?</h2>



<p>A Headless CMS or Headless Website is a website which de-couples the Content Management System (CMS) and uses a different technology to display the content to site visitors. In the case of Headless WordPress, this means WordPress is used as the CMS on a relatively standard WordPress hosting server, and the front-end is built using (typically) a framework such as Nuxt, Next.js, and React.</p>



<h2 class="wp-block-heading">Why go headless?</h2>



<p>Headless websites come with many advantages, as well as several considerations. In my experience so far, and in my research and planning for large scale website projects I&#8217;ve come up with a few high-level pros and cons.</p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-6 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<h3 class="wp-block-heading">Pros</h3>



<ul class="wp-block-list">
<li>Modern developer experience, tools, and frameworks</li>



<li>Much more control over the final website output/markup</li>



<li>Can be finely tuned for performance</li>



<li>Allows more control over website styles &amp; branding</li>
</ul>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<h3 class="wp-block-heading">Cons</h3>



<ul class="wp-block-list">
<li>Requires a fair learning curve if coming from traditional WordPress theme/plugin development</li>



<li>Depending on needs, you may still find yourself building things out in your WordPress theme or plugins</li>



<li>There&#8217;s <em>a lot</em> more decisions to make, not as opinionated as standard/non-headless sites</li>
</ul>
</div>
</div>



<h2 class="wp-block-heading">Where to begin?</h2>



<p>As mentioned, there&#8217;s a lot of decisions to make up front. Many of them will impact the rest of your experience. Decisions such as which CMS to use, which front-end framework, not to mention build tools and dependencies. So where to even begin?</p>



<h3 class="wp-block-heading">Selecting a CMS</h3>



<p>I&#8217;ve played around with many purpose-built CMS&#8217; for headless sites–most notably Sanity.io, Strapi, and WordPress (there&#8217;s a great list over at <a href="https://jamstack.org/headless-cms/">JamStack.org</a>). Ultimately I felt most comfortable with WordPress not only from my many years&#8217; experience with it, but also for the users I build sites for. Most marketers, content managers, and business owners are already comfortable using WordPress to manage their content. It&#8217;s open source, very extendable, and it has a massive 40%+ market share <a href="https://w3techs.com/technologies/history_overview/content_management/all/y">according to W3Techs</a>. Although some other CMS&#8217; may be a better fit for a headless website, the ability for end-users&#8217; workflow to remain essentially unchanged while also enabling web developers and designers to take advantage of the many benefits of a modern JamStack, it really was no-brainer for me to land on WordPress.</p>



<h3 class="wp-block-heading">Selecting the front-end framework</h3>



<p>Next up, you likely find yourself digging frameworks and site generators. There are <em><a href="https://jamstack.org/generators/">so many</a></em> options out there. Some of the most used for Headless WordPress will revolve around React. There&#8217;s Nuxt, Next.js, Gatsby, even some Vue.js options. This really comes down to personal preference and projects requirements. Some of the first things I consider when selecting any framework includes support, community, documentation, scalability, security, and ease of use. It&#8217;s also vital to consider what type of site you&#8217;re building, and the requirements there of. For example an eCommerce site has entirely different needs from a portfolio site, a blog, or a documentation focused site.</p>



<p>Through this particular project I tried a number of tools including Nuxt, Gatsby, VuePress, and a few more oddballs. Ultimately I landed on <a href="https://faustjs.org/">FaustJS</a>. Faust is open source and primarily <a href="https://wpengine.com/blog/faust-js-the-framework-for-headless-wordpress/">maintained by WP Engine</a>, it is built on Next.js with some specific additions and tools to make the developer experience a bit smoother when working with WordPress as your CMS. It&#8217;s still quite new, but some of the features included have really enabled me to get going quickly and to accomplish everything I wanted in this super simple site. Since it&#8217;s built on Next, it&#8217;s extremely flexible. It&#8217;s being built so quickly their documentation tends to be out of date here-and-there, but I find that to be that understandable. Luckily they have a great community and support, including a very active GitHub repo and a Discord community where people are willing to help each other out and improve the product. In fact, I ran into a small issue through this project and through a Discord thread learned they are updating the docs based on my experience &#8211; pretty awesome to see that level of care and collaboration.</p>



<h3 class="wp-block-heading">Selecting a hosting provider(s)</h3>



<p>After selecting your CMS, in this case WordPress, there&#8217;s still many decisions. Hosting the back-end, hosting the front-end, the framework, the dependencies and tooling. It&#8217;s quite the process! Some of these CMS&#8217; offer a cloud-based solution, making standing things up super easy–but can be more opinionated in what you can and can&#8217;t use. There is always the &#8220;self hosted&#8221; option like AWS, Heroku, or even Digital Ocean. </p>



<p>You can also stand your front-end up in those same hosts &#8211; or go with something like Netlify. I went down a few of those paths, and even though I&#8217;m quite experienced in working in all these aforementioned hosting providers, it all felt so disconnected and overwhelming to get things going quickly. </p>



<p>Having used managed WordPress hosting for years now, I&#8217;m a huge fan. Having experience with most of the big players such as <a href="https://pantheon.io/">Pantheon</a>, <a href="https://kinsta.com/wordpress-hosting/">Kinsta</a>, <a href="https://wpengine.com/">WP Engine</a>, and <a href="https://wordpress.com/">WordPress.com</a> it&#8217;s always my go-to for hosting WordPress sites. There are so many benefits of these platforms–not only do they handle server management, they also typically offer things such as automatic plugin updates, dev/staging/production environments, and workflows to tie it all together. Of course I&#8217;ve heard a lot about WP Engine&#8217;s Atlas solution through my profession. Being so familiar with WP Engine&#8217;s platform, it seemed like the obvious choice for my needs. Of course that&#8217;s not to say the other options are any better or worse, this is all personal preference. The real kicker is they are currently offering a <a href="https://wpengine.com/headless-wordpress/">free Atlas sandbox</a> for anyone.</p>



<p>Now that I&#8217;m feeling self-consious about my WP Engine fanboy-ness so far in this post, I feel obliged to mention this is in no way sponsored by WP Engine–I&#8217;m just a fan of their products and a long-time user. Honestly I put off going down the Atlas route for so long because I knew there were other options I should explore. I&#8217;m glad I did! But in the end I couldn&#8217;t pass on the efficiencies gained from their offering and my knowledge of the platform.</p>



<h2 class="wp-block-heading">That brings us to the now</h2>



<p>At this point, I&#8217;ve spent just one weekend plus a few hours building this very small, very simple website. Most of that time has been learning Next.js, the nuances to Headless WordPress, some other new tools like <a href="https://partytown.builder.io/">Partytown</a> (which I&#8217;ll get into in a future post), and troubleshooting many self-inflicted issues. As it goes in this crazy world of web development it&#8217;s been a great deal of fun rolling up my sleeves and learning all these new things. </p>



<p>From what I experienced trying to spin up a headless site using a combination of hosts and tools, I&#8217;ve been super impressed with Atlas and FaustJS. Atlas makes it unbelievably easy to spin up a new site from scratch (the path I went down) or a blueprint. It also integrates directly to GitHub for super simple deployments and version control. </p>



<h3 class="wp-block-heading">So, what&#8217;s my stack?</h3>



<p>Keep an eye out! This is going to be the first post in a series following my journey into the headless WordPress world, and it will revolve around the tools I choose to use through the adventure. We&#8217;ll dig deeper into specific topics, talk about and overcome hurdles together.</p>



<p>Feel free to check out this website&#8217;s code on <a href="https://github.com/MattOndo/mattondo.io">GitHub</a>! And please don&#8217;t shame me for my commit messages ????</p>


Small dog resting their head on a laptop keyboard

Diving into Headless WordPress

<div class="wp-block-columns are-vertically-aligned-center is-layout-flex wp-container-core-columns-is-layout-7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<h2 class="wp-block-heading">The plan</h2>



<p class="has-regular-font-size">The plan was to drive from Denver, CO to Moab, UT using as little pavement as possible. The objective was to escape the monotony of isolating from a global pandemic at home by isolating in nature and making great memories.</p>
</div>



<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<div id="image-block_48e0e1488359a767f9379d5f082fb8a7">
            <img loading="lazy" decoding="async" src="https://mattondo.io/wp-content/uploads/IMG_2818.jpeg" alt="" width="1280" height="960">
    </div></div>
</div>



<div class="wp-block-columns are-vertically-aligned-center is-layout-flex wp-container-core-columns-is-layout-8 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-vertically-aligned-center md:order-last is-layout-flow wp-block-column-is-layout-flow">
<h2 class="wp-block-heading">Colorado to Utah</h2>



<p class="has-regular-font-size">Day 1: Camped in western Colorado far off the beaten path.</p>



<p class="has-regular-font-size">Emma had a long day with many fetches, she was very ready for bed.</p>



<p class="has-regular-font-size">With all the pavement on our trail behind us, we prepped for the bumpy roads to come on the <a href="https://www.trailsoffroad.com/trails/1843-rimrocker" target="_blank" rel="noopener">Rim Rocker</a> trail.</p>
</div>



<div class="wp-block-column is-vertically-aligned-center md:order-first is-layout-flow wp-block-column-is-layout-flow">
<div id="image-block_ca5c770e06100118505e0489d31acdfb">
            <img loading="lazy" decoding="async" src="https://mattondo.io/wp-content/uploads/IMG_3076.jpeg" alt="" width="1280" height="960">
    </div></div>
</div>



<div id="gallery-block_4591be7a0438d3b857c455b5f8bd60e9" class="acfGalleryBlock">
            <img loading="lazy" decoding="async" src="https://mattondo.io/wp-content/uploads/IMG_2948-1.jpeg" alt="" width="1280" height="960">
            <img loading="lazy" decoding="async" src="https://mattondo.io/wp-content/uploads/IMG_2945-1.jpeg" alt="" width="1280" height="960">
            <img loading="lazy" decoding="async" src="https://mattondo.io/wp-content/uploads/IMG_3039.jpeg" alt="" width="1280" height="960">
            <img loading="lazy" decoding="async" src="https://mattondo.io/wp-content/uploads/IMG_3013.jpeg" alt="" width="1280" height="960">
            <img loading="lazy" decoding="async" src="https://mattondo.io/wp-content/uploads/IMG_3043.jpeg" alt="" width="1280" height="960">
            <img loading="lazy" decoding="async" src="https://mattondo.io/wp-content/uploads/IMG_3673.jpeg" alt="" width="1280" height="960">
            <img loading="lazy" decoding="async" src="https://mattondo.io/wp-content/uploads/IMG_3138.jpeg" alt="" width="1280" height="960">
    </div>


<div class="wp-block-columns are-vertically-aligned-center is-layout-flex wp-container-core-columns-is-layout-9 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<div id="image-block_72649007db0a5461b579a893cc5015fe">
            <img loading="lazy" decoding="async" src="https://mattondo.io/wp-content/uploads/IMG_3149.jpeg" alt="" width="1280" height="960">
    </div></div>



<div class="wp-block-column is-vertically-aligned-center order-first md:order-last is-layout-flow wp-block-column-is-layout-flow">
<p class="has-regular-font-size">Night 2: We made it to just outside Moab. The Rim Rocker trail was amazing, beautiful, and very fun.</p>
</div>
</div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-10 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<h2 class="wp-block-heading">While in Moab</h2>



<p>Spent the next couple days adventuring the Moab area including Arches National Park and Corona Arch (pictured above).</p>
</div>
</div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-11 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<div id="image-block_e9237f69c49c1a63eb328492bb96a529">
            <img loading="lazy" decoding="async" src="https://mattondo.io/wp-content/uploads/IMG_3231.jpeg" alt="" width="1280" height="402">
    </div></div>
</div>



<div id="gallery-block_4ca91f7167e2f2706b2ba0b85367c9a9" class="acfGalleryBlock">
            <img loading="lazy" decoding="async" src="https://mattondo.io/wp-content/uploads/IMG_3536.jpeg" alt="Photo of a tent pitched in the middle of the Utah desert at sunset." width="1280" height="960">
            <img loading="lazy" decoding="async" src="https://mattondo.io/wp-content/uploads/IMG_3498.jpeg" alt="" width="1280" height="960">
            <img loading="lazy" decoding="async" src="https://mattondo.io/wp-content/uploads/IMG_3550_opt-scaled-1.jpeg" alt="" width="2560" height="1106">
            <img loading="lazy" decoding="async" src="https://mattondo.io/wp-content/uploads/IMG_3351.jpeg" alt="" width="1280" height="960">
            <img loading="lazy" decoding="async" src="https://mattondo.io/wp-content/uploads/IMG_3362.jpeg" alt="" width="1280" height="960">
    </div>


<div id="image-block_7bbecd2525661486ed6044b9920d269f">
            <img loading="lazy" decoding="async" src="https://mattondo.io/wp-content/uploads/IMG_3470-1-scaled-1.jpeg" alt="" width="2560" height="609">
    </div>


<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-12 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<div id="image-block_0a4b8dae6eb440cedb8aade928c3c85f">
            <img loading="lazy" decoding="async" src="https://mattondo.io/wp-content/uploads/IMG_3529_hr.jpeg" alt="" width="1280" height="960">
    </div></div>



<div class="wp-block-column is-vertically-aligned-center order-first md:order-last is-layout-flow wp-block-column-is-layout-flow">
<p class="has-regular-font-size">Night 4: After another day of off-roading we found ourselves on the outskirts of Canyonlands National Park. We camped here for the night halfway down the canyon walls. It was incredible!</p>
</div>
</div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-13 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:40%">
<h2 class="wp-block-heading">Back to Colorado</h2>



<p class="has-regular-font-size">Day 5: With so many miles to go we started the truck home. Couldn&#8217;t help jumping in some puddles along the way!</p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="A Puddle Outside Moab" width="500" height="281" src="https://www.youtube.com/embed/4RPhSt95XpM?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div><figcaption class="wp-element-caption">Driving through a puddle outside Moab, UT</figcaption></figure>
</div>
</div>



<div id="gallery-block_0d0f688fe6a6419c4d0aa6a3a5a5dd5c" class="acfGalleryBlock">
            <img loading="lazy" decoding="async" src="https://mattondo.io/wp-content/uploads/IMG_3550_opt-scaled-1.jpeg" alt="" width="2560" height="1106">
            <img loading="lazy" decoding="async" src="https://mattondo.io/wp-content/uploads/IMG_3691.jpeg" alt="" width="1280" height="960">
            <img loading="lazy" decoding="async" src="https://mattondo.io/wp-content/uploads/IMG_3734-1.jpeg" alt="" width="1280" height="960">
            <img loading="lazy" decoding="async" src="https://mattondo.io/wp-content/uploads/IMG_3731.jpeg" alt="" width="1280" height="960">
            <img loading="lazy" decoding="async" src="https://mattondo.io/wp-content/uploads/IMG_3663-1.jpeg" alt="" width="1280" height="960">
    </div>


<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-14 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<div id="image-block_0ff37def7c098fc99a33d1e3743c82f2">
            <img loading="lazy" decoding="async" src="https://mattondo.io/wp-content/uploads/IMG_2880-scaled.jpeg" alt="Photo of Matt in front of trees with the sun peaking through the trees" width="1920" height="2560">
    </div></div>



<div class="wp-block-column is-vertically-aligned-center order-first md:order-last is-layout-flow wp-block-column-is-layout-flow">
<h2 class="wp-block-heading">The takeaway</h2>



<p class="has-regular-font-size">Confidence in knowing I can do a trip like this on my own, and the realization that I need to do this more often.&nbsp;</p>
</div>
</div>

Overlanding Moab 2020

<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-15 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<h2 class="wp-block-heading">The plan</h2>



<p>We decided on a short loop trail as it was the first time most of us would be backpacking. The 20-ish mile loop would require us to summit a 12,000 ft peak, hike past two alpine lakes, and at one point gave us the feeling we were standing in the hills where they filmed The Sound of Music. The three of us set out on a Friday intending on staying 2 nights in the backcountry. We made it home safe and sound with many amazing memories.</p>



<p>Come along for the ride in this photo-book journey of our adventure.</p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<div id="image-block_58d6af641a1adc322ee6615c8a9e6d01">
            <img loading="lazy" decoding="async" src="https://mattondo.io/wp-content/uploads/three-amigos-1.jpeg" alt="A selfie including three smiling friends, all wearing sunglasses and wearing large backpacks." width="2050" height="1532">
    </div></div>
</div>



<h2 class="wp-block-heading">Day 1</h2>



<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="Backpacking North Loop Trail" width="500" height="281" src="https://www.youtube.com/embed/PL_mZPABFXw?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



<h2 class="wp-block-heading">Camp 1</h2>



<div id="gallery-block_b1eee80f891a089c5d0f52cdce74f16a" class="acfGalleryBlock">
            <img loading="lazy" decoding="async" src="https://mattondo.io/wp-content/uploads/913E6C37-7D9A-4A93-8393-0CC112A743EE.jpeg" alt="Photo of the Never Summer Wilderness sign, in Arapaho National Forest." width="2048" height="1536">
            <img loading="lazy" decoding="async" src="https://mattondo.io/wp-content/uploads/4B011DAA-754F-41FE-A922-721260007909.jpeg" alt="Two friends hiking along a trail with tall pine trees all around." width="1536" height="2048">
            <img loading="lazy" decoding="async" src="https://mattondo.io/wp-content/uploads/D13F4318-9746-406A-92C2-59073788287C.jpeg" alt="Matt taking in the views of a mountain top lake" width="1536" height="2048">
            <img loading="lazy" decoding="async" src="https://mattondo.io/wp-content/uploads/97398461-39C4-4FCA-838E-C8C2BC52F0AB.jpeg" alt="Photo of Marie taking in the views of a mountain top lake" width="960" height="1280">
            <img loading="lazy" decoding="async" src="https://mattondo.io/wp-content/uploads/507DB2F3-8369-4320-8D0E-CB553EEE5894.jpeg" alt="Photo of the North Supply trailhead sign" width="720" height="1280">
    </div>


<h2 class="wp-block-heading">Day 2</h2>



<p>On our first morning we had an early breakfast and broke camp down quickly knowing our biggest day was ahead of us. By the end of the day we hiked over 20 miles, over the 12,000 foot peak covered in permafrost and snow. It was windy, cold, and difficult, but we did it! We capped the day off with a big dinner and a few swigs from the trusty whiskey flask.</p>



<div id="image-block_b763a8c1cdef3f95377e33d96f75beee">
            <img loading="lazy" decoding="async" src="https://mattondo.io/wp-content/uploads/3BD2C4BD-B7A4-43CA-B0DB-C91BB971C611.jpeg" alt="Panorama photo of a valley covered in grass, flowers, and a few sparse trees. Surrounded by a mountain range." width="1280" height="340">
    </div>


<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-16 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<div id="image-block_09a9227ffd8c80a4397ae6d723172d71">
            <img loading="lazy" decoding="async" src="https://mattondo.io/wp-content/uploads/98E65F69-1F90-4346-AEBF-1416E83399FB.jpeg" alt="Photo of a cool mountain stream with sunlight beams peaking through the tall pine trees." width="960" height="1280">
    </div></div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<div id="image-block_f7e700036e3be13a823de577705f7315">
            <img loading="lazy" decoding="async" src="https://mattondo.io/wp-content/uploads/2DD7F83B-A5A3-44EF-8E95-62409809A022.jpeg" alt="Selfie of Matt wearing a jacket and hat at the top of a partially snow-covered mountain with two friends in the background." width="957" height="1280">
    </div></div>
</div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-17 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<div id="image-block_02ae45f13e4d8ccbe0b433f24c9caf33">
            <img loading="lazy" decoding="async" src="https://mattondo.io/wp-content/uploads/A00F89E6-51F6-4E5E-AE54-4371231FF78F.jpeg" alt="Marie taking in the views from atop a mountain, standing just next to a pile perma-frost snow." width="1280" height="960">
    </div></div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<div id="image-block_4efab22d661941d5c92fa6ed376c0b60">
            <img loading="lazy" decoding="async" src="https://mattondo.io/wp-content/uploads/8E332381-F908-4EBE-AED0-AD7556A1C96A.jpeg" alt="Two friends hiking along a mountaintop trail with beautiful views of trees, mountains, and blue skies for as far as the eye can see - which is quite far!" width="1280" height="960">
    </div></div>
</div>



<h2 class="wp-block-heading">Camp 2</h2>



<div id="gallery-block_ef840eb6d0477064c4d2f83cd140b0a9" class="acfGalleryBlock">
            <img loading="lazy" decoding="async" src="https://mattondo.io/wp-content/uploads/B306E1C8-490C-4313-A7CE-198B1B1E73CD.jpeg" alt="Photo of a mountain top which has a trail winding along the ridge-line with a man in the distance making his way along the trail." width="1280" height="960">
            <img loading="lazy" decoding="async" src="https://mattondo.io/wp-content/uploads/camp2-scaled-1.jpeg" alt="Photo of a small clearing with two small tents set up in the distance, surrounded by pine trees and tall grass." width="2560" height="1252">
            <img loading="lazy" decoding="async" src="https://mattondo.io/wp-content/uploads/C321D1E5-F6FE-4EB1-BEB2-320CED5EA2E9-1.jpeg" alt="A photo of two tents in a small clearing in the woods, one yellow and one maroon." width="1280" height="960">
            <img loading="lazy" decoding="async" src="https://mattondo.io/wp-content/uploads/26CABD95-82DF-4ECE-8960-6E0A0AD7C199-1.jpeg" alt="Photo taken before sunset of a grass-covered clearing surrounded by tall pine trees with mountains in the background and blue skies." width="1280" height="960">
    </div>


<h2 class="wp-block-heading">Takeaway</h2>



<p>Backpacking is an absolute blast, and a serious commitment. I will shed some of my gear next time, but was pretty well prepared considering it was my first time backpacking. This trail is great for beginners, and one I wouldn&#8217;t mind doing again.</p>



<p>The mountains is my happy place, far from the world at large and the digital monotony of modern life. Disconnecting from all that out in the wild is most therapeutic, I highly encourage you to find peace in nature.</p>

A selfie including three smiling friends, all wearing sunglasses and wearing large backpacks.

Archive

Optimize Headless WordPress with the Bald Theme

Diving into Headless WordPress

Overlanding Moab 2020

Backpacking the North Supply Loop