<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Sam Tanoak Sycamore</title>
    <description>The latest articles on Forem by Sam Tanoak Sycamore (@tanoaksam).</description>
    <link>https://forem.com/tanoaksam</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F533945%2Feb801587-3d33-4577-bc5a-18ecc7bce0bc.jpg</url>
      <title>Forem: Sam Tanoak Sycamore</title>
      <link>https://forem.com/tanoaksam</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/tanoaksam"/>
    <language>en</language>
    <item>
      <title>How I Learned to Code and Started Freelancing Full-Time in 8 Months</title>
      <dc:creator>Sam Tanoak Sycamore</dc:creator>
      <pubDate>Fri, 21 May 2021 02:23:13 +0000</pubDate>
      <link>https://forem.com/tanoaksam/how-i-learned-to-code-and-started-freelancing-full-time-in-8-months-4kpl</link>
      <guid>https://forem.com/tanoaksam/how-i-learned-to-code-and-started-freelancing-full-time-in-8-months-4kpl</guid>
      <description>&lt;p&gt;In September 2020 I signed up for Free Code Camp and started learning HTML and CSS.&lt;/p&gt;

&lt;p&gt;In April 2021 I doubled my monthly income from my previous job in landscaping, doing freelance web development and technical writing work.&lt;/p&gt;

&lt;p&gt;In the span of 8 months - using mostly free resources - I went from being a complete beginner with code, to being offered more contract work than I'm able to take on.&lt;/p&gt;

&lt;p&gt;If that sounds crazy to you - well, yeah. It's been crazy for me, too.&lt;/p&gt;

&lt;h2&gt;
  
  
  Real talk
&lt;/h2&gt;

&lt;p&gt;This journey has led to a pretty large audience growing around me on &lt;a href="https://www.twitter.com/tanoaksam"&gt;Twitter&lt;/a&gt;. &lt;/p&gt;

&lt;p&gt;Hundreds of people have reached out to me to ask how I've done it.&lt;/p&gt;

&lt;p&gt;My honest answer:&lt;/p&gt;

&lt;p&gt;I wish I knew!&lt;/p&gt;

&lt;p&gt;Believe me, if I knew the secret formula to break into the tech industry, I'd bottle it and hand it out on street corners in the hopes that everyone could enjoy the high compensation and high quality of life that a career in tech affords.&lt;/p&gt;

&lt;p&gt;What I've attempted to do here is maybe the next best thing that I can offer:&lt;/p&gt;

&lt;p&gt;To revisit the choices I made and the resources I learned from along the way, to the best of my recollection.&lt;/p&gt;

&lt;p&gt;Will you be able to accomplish exactly what I have, if you try to recreate my timeline?&lt;/p&gt;

&lt;p&gt;Well, no, probably not.&lt;/p&gt;

&lt;p&gt;I won't mince words here: &lt;/p&gt;

&lt;p&gt;First of all, I'm a straight white male with a nice smile who lives in California, USA. I have a liberal arts education. &lt;/p&gt;

&lt;p&gt;Relatively speaking, it's pretty easy for me to get a haircut, put on a clean shirt, and be taken seriously as a "software engineer" mere hours after mowing lawns for minimum wage.&lt;/p&gt;

&lt;p&gt;Second, I'm coming up on 35 years old. &lt;/p&gt;

&lt;p&gt;I've been around the block. A few times.&lt;/p&gt;

&lt;p&gt;I showed up to the tech industry with a fairly mature set of "soft skills" - I have many years of experience in other industries, and I'm good at what I know how to do.&lt;/p&gt;

&lt;p&gt;I also showed up with a helluva lot of &lt;strong&gt;grit&lt;/strong&gt; - which I think of as perseverance plus passion. &lt;/p&gt;

&lt;p&gt;There comes a point about halfway through this story where my only choice is whether to sink or swim. &lt;/p&gt;

&lt;p&gt;I absolutely could have failed. But I would have kept going anyway, because life didn't give me any other option.&lt;/p&gt;

&lt;p&gt;My real hope in telling my story in conjunction with the resources I used, is so you will see that &lt;em&gt;it didn't take as much as you might think for me to get to where I am.&lt;/em&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;If you just want to check out the learning resources, you can find a complete list of everything mentioned at the end the article.&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Don't get me wrong: I'm a total n00b! I'm definitely not qualified to be your mentor, dear sweet stranger/friend I don't know yet DMing me on Twitter.&lt;/p&gt;

&lt;p&gt;And I fully expect to feel that way for years to come.&lt;/p&gt;

&lt;p&gt;But:&lt;/p&gt;

&lt;p&gt;I know &lt;strong&gt;enough&lt;/strong&gt; to be useful to the right teams.&lt;/p&gt;

&lt;p&gt;And more importantly:&lt;/p&gt;

&lt;p&gt;I know &lt;em&gt;how to learn&lt;/em&gt;, and I know &lt;em&gt;"how to win friends and influence people"&lt;/em&gt;, so to speak.&lt;/p&gt;

&lt;p&gt;This is how I got here:&lt;/p&gt;

&lt;h2&gt;
  
  
  My 8-Month Journey to Full-Time Freelancing in Tech
&lt;/h2&gt;




&lt;h3&gt;
  
  
  Month 1: September 2020
&lt;/h3&gt;

&lt;p&gt;Feeling burned out and directionless in my paycheck-to-paycheck career, I started toying around with a crazy idea:&lt;/p&gt;

&lt;p&gt;What if I taught myself to code?&lt;/p&gt;

&lt;p&gt;Could I land a job in tech without a CS degree?&lt;/p&gt;

&lt;p&gt;Where do I even start?&lt;/p&gt;

&lt;p&gt;After lots of googling “Python vs JavaScript” etc. I settled on JS &amp;amp; web development.&lt;/p&gt;

&lt;h4&gt;
  
  
  Why JavaScript?
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;most in-demand&lt;/li&gt;
&lt;li&gt;lowest barrier to entry&lt;/li&gt;
&lt;li&gt;CS students often learn Python but not JS so i figured it’d be a more level playing field&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;To be honest, I felt absolutely ridiculous to even be considering any of this. I was so embarrassed to tell my girlfriend about it, and she was understandably confused and skeptical. As was I!&lt;/p&gt;

&lt;p&gt;I'd spent the previous five years working as a carpenter and landscaper while writing a blog about homesteading. Why would anyone ever take me seriously in tech?&lt;/p&gt;

&lt;p&gt;Then I found a podcast called &lt;em&gt;JavaScript Jabber&lt;/em&gt; and listened to an episode called &lt;a href="https://devchat.tv/js-jabber/jsj-442-breaking-into-tech-with-danny-thompson/"&gt;&lt;em&gt;Breaking Into Tech with Danny Thompson&lt;/em&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Danny's story changed my life.&lt;/p&gt;

&lt;p&gt;I'm not exaggerating.&lt;/p&gt;

&lt;p&gt;His story lit a fire inside of me that I've been stoking ever since.&lt;/p&gt;

&lt;p&gt;If you don't know Danny, do yourself a favor and listen to that podcast episode. You can come back to this later. It will still be here.&lt;/p&gt;

&lt;p&gt;I was working full time in construction from 9-5 at this time, so I started waking up at 4 AM every day to work through &lt;a href="https://www.freecodecamp.org"&gt;Free Code Camp&lt;/a&gt;, as well as my first Udemy course:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;a href="https://www.udemy.com/course/design-and-develop-a-killer-website-with-html5-and-css3/"&gt;Build Responsive Real-World Websites with HTML5 and CSS3&lt;/a&gt; by Jonas Schmedtmann&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;I found that I really genuinely enjoyed the work, and I was eager to get up for my pre-dawn study sessions each day.&lt;/p&gt;

&lt;p&gt;As soon as I could build a full landing page, I started daydreaming about how I might be able to sell websites to local businesses. &lt;/p&gt;

&lt;p&gt;My first solo project was a re-creation of the site in Jonas's course, but redesigned with a local biz in mind.&lt;/p&gt;

&lt;p&gt;Once I felt sure I wanted to keep going with this stuff, I bought my second Udemy course, also by Jonas:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;a href="https://www.udemy.com/course/the-complete-javascript-course/"&gt;The Complete JavaScript Course 2021: From Zero to Expert&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;em&gt;Looking back through my Udemy account in May 2021, I am seeing that I only ever made it about 30% of the way through both of these courses. Don't beat yourself up over unfinished tutorials! Take what you need and keep going.&lt;/em&gt;&lt;/p&gt;




&lt;h3&gt;
  
  
  Month 2: October 2020
&lt;/h3&gt;

&lt;p&gt;On October 1 I started working through &lt;a href="https://www.theodinproject.com"&gt;The Odin Project&lt;/a&gt;. That program instructed me to set up git and GitHub right away - this is something I am really glad for, in retrospect.&lt;/p&gt;

&lt;p&gt;TOP also encouraged me to sign up for &lt;a href="https://www.twitter.com/tanoaksam"&gt;Twitter&lt;/a&gt; and take on a #100daysofcode challenge.&lt;/p&gt;

&lt;p&gt;That decision has turned out to be arguably the most impactful thing I've done throughout this entire journey. I cannot stress enough how huge the Tech Twitter community has been for my growth and my professional network.&lt;/p&gt;

&lt;p&gt;Beyond those steps, I didn't make it very far into TOP because I hit a wall with JavaScript fundamentals and decided maybe I should retreat back to HTML &amp;amp; CSS for a bit.&lt;/p&gt;

&lt;p&gt;One day while browsing Reddit to try to decide just how foolish and silly I was for trying to make this career change, I stumbled upon a thread posted by &lt;a href="https://www.leonnoel.com"&gt;Leon Noel&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;He said he was running a &lt;em&gt;free&lt;/em&gt; full-stack JavaScript bootcamp online over the next 7 months.&lt;/p&gt;

&lt;p&gt;I signed up immediately. &lt;/p&gt;

&lt;p&gt;This is another big decision I made early on that has had a huge impact on my overall trajectory.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;a href="https://www.leonnoel.com"&gt;Leon&lt;/a&gt; has amassed an incredible wealth of no-strings-attached free resources for learning how to code, and &lt;a href="https://www.leonnoel.com/100devs"&gt;the 100 Devs community&lt;/a&gt; is one of the best I'm aware of in this realm.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;You don't need to join 100 Devs specifically - though we'd be glad to have you!&lt;/p&gt;

&lt;p&gt;But you do need to plug into &lt;em&gt;some&lt;/em&gt; community, somewhere.&lt;/p&gt;

&lt;p&gt;Don't try to do this alone. Trust me.&lt;/p&gt;

&lt;p&gt;Towards the end of this month I did the first few projects in Wes Bos's &lt;a href="https://javascript30.com/"&gt;JavaScript 30&lt;/a&gt;, but once again felt like I just wasn't ready for JavaScript at this level yet.&lt;/p&gt;




&lt;h3&gt;
  
  
  Month 3: November 2020
&lt;/h3&gt;

&lt;p&gt;I was feeling good about my progress at this point with HTML &amp;amp; CSS, so I signed up for &lt;a href="https://www.teamtreehouse.com"&gt;Team Treehouse&lt;/a&gt; to try to go deeper with JS. &lt;/p&gt;

&lt;p&gt;I really liked the initial assessment they gave me, and was surprised to discover that I'd actually tested out of the first few sections of their JS fundamentals curriculum. I found their course style and frequent quizzes to be great for making sure I was really understanding what I was studying.&lt;/p&gt;

&lt;p&gt;Now in addition to my 4 AM studying I was also in front of the computer most nights after work, too.&lt;/p&gt;

&lt;p&gt;Around Thanksgiving (late November), Leon gave us a half-dozen website designs and said "have at it - do your worst translating these into HTML and CSS."&lt;/p&gt;

&lt;p&gt;This was the first moment in my journey when I started to feel like I had legitimately accomplished something.&lt;/p&gt;

&lt;p&gt;I don't remember when, but definitely by this point I had become aware of Brad Traversy - I'm not going to say he's the only tech YouTuber you &lt;em&gt;need&lt;/em&gt; to follow, but if you only have time for one:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;a href="https://www.youtube.com/channel/UC29ju8bIPH5as8OGnQzwJyA"&gt;Traversy Media on YouTube&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h3&gt;
  
  
  Month 4: December 2020
&lt;/h3&gt;

&lt;p&gt;Leon continuously stressed the importance of networking to land a job in tech. &lt;/p&gt;

&lt;p&gt;He assured us that knowing the right people would take us much further, much faster, than solely focusing on acquiring the skills.&lt;/p&gt;

&lt;p&gt;I took this to heart, and started blocking off time for networking just like I did for studying. I began taking Twitter and LinkedIn more seriously as tools for connecting with people in the tech industry.&lt;/p&gt;

&lt;p&gt;I wrote my first blog post about my experiences up to this point - a day in the life of a landscaper teaching himself how to code:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;a href="https://blog.sycamore.design/learning-to-code-off-grid"&gt;Learning to Code in an Off-Grid Cabin in the Woods&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;...Oh, did I mention I don't have running water or conventional electricity?&lt;/p&gt;

&lt;p&gt;That's another story for another day. If you want to know more about what I was up to before I started learning how to code, you can check out this piece I wrote a few months later:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;a href="https://blog.sycamore.design/full-stack-developer-journey"&gt;Wildfire Refugee to Full-Stack Web Developer: My Journey&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Leon also made it a requirement of the bootcamp that every student had to land at least one freelance website client. &lt;/p&gt;

&lt;p&gt;I began emailing local businesses in my town to see if they’d buy a website from me, but didn’t get much of a response.&lt;/p&gt;

&lt;p&gt;Around the holidays I read the first several chapters of &lt;a href="https://eloquentjavascript.net/"&gt;&lt;em&gt;Eloquent JavaScript&lt;/em&gt;&lt;/a&gt;, and overall I'd say I understood very little.&lt;/p&gt;




&lt;h3&gt;
  
  
  Month 5: January 2021
&lt;/h3&gt;

&lt;p&gt;In early January 2021, everything changed in an instant:&lt;/p&gt;

&lt;p&gt;I injured my foot, and had to resign from my day job in construction because it was too painful to be on my feet.&lt;/p&gt;

&lt;p&gt;Studying suddenly became my full-time focus. I began putting in 8-10-hour days pretty much every day of the week.&lt;/p&gt;

&lt;p&gt;The only feasible way for me to earn any money was to try to hustle for that first freelance client that Leon had encouraged us all to seek out.&lt;/p&gt;

&lt;p&gt;In addition to coding and networking, I started reading up on marketing, cold email strategies, and how to generate leads.&lt;/p&gt;

&lt;p&gt;After two weeks and hundreds of emails to local business owners in my region, I actually did it — I sold not just one but &lt;em&gt;two&lt;/em&gt; websites in one day!&lt;/p&gt;

&lt;p&gt;I couldn’t believe it.&lt;/p&gt;

&lt;p&gt;These two sites would earn me more money than I’d make in six weeks of intense physical labor at my previous job.&lt;/p&gt;

&lt;p&gt;But would the work keep coming?&lt;/p&gt;

&lt;p&gt;You can read more about how I landed those first few clients here:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;a href="https://blog.sycamore.design/freelancing-workflow"&gt;My Freelancing Workflow, From Cold Leads to Paid Invoices&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;It seemed like a good idea to learn WordPress if I was going to venture down the freelance path. So I started in on this Udemy course while I was working on my first client site (which didn't need a CMS):&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;a href="https://www.udemy.com/course/become-a-wordpress-developer-php-javascript/"&gt;Become a WordPress Developer: Unlocking Power With Code&lt;/a&gt; by Brad Schiff&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;I didn't make it far, though. I enjoyed learning the basics of PHP, but ultimately decided I would be better off focusing solely on JavaScript before trying to take on another language.&lt;/p&gt;

&lt;p&gt;By now I was sailing through the JavaScript curriculum on Team Treehouse. JS became a ton of fun once I got the hang of DOM manipulation and built my first simple to-do app.&lt;/p&gt;

&lt;p&gt;About this same time, I also started reading free resources on React. The first pet project I attempted on my own was a random quote generator that I strung together from a couple different blog tutorials that I tracked down. It was a total mess, but I felt like a genius nonetheless.&lt;/p&gt;




&lt;h3&gt;
  
  
  Month 6: February 2021
&lt;/h3&gt;

&lt;p&gt;Searching for an alternative to WordPress, I eventually learned about Gatsby and Next.js.&lt;/p&gt;

&lt;p&gt;This led me down a rabbit hole of reading and learning about headless CMSs and Jamstack architecture so I could use Next.js with my next freelance client.&lt;/p&gt;

&lt;p&gt;I wrote about what I learned from these explorations here:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;a href="https://blog.sycamore.design/headless-cms-jamstack"&gt;A Clueless Newbie's Guide to Headless CMS &amp;amp; the Jamstack&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;My experiences with this tech helped me to "level up" as a developer: I finally became comfortable digging directly into documentation instead of searching for tutorials. I started to see how docs could really make or break a tool for me, especially as a newbie.&lt;/p&gt;

&lt;p&gt;At the same time, I continued cold emailing hundreds more biz owners, but couldn’t seem to seal the deal again like I had in January. &lt;/p&gt;

&lt;p&gt;After several weeks of no sales, I figured that January must have been a random stroke of luck that couldn’t be repeated.&lt;/p&gt;

&lt;p&gt;So I started applying for jobs at the end of the month.&lt;/p&gt;




&lt;h3&gt;
  
  
  Month 7: March 2021
&lt;/h3&gt;

&lt;p&gt;I landed a few interviews, purely thanks to referrals from the audience that had grown around my Twitter by now.&lt;/p&gt;

&lt;p&gt;Hold on, run that back, I think you need to read that sentence again:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;I landed a few interviews, purely thanks to referrals from the audience that had grown around my Twitter by now.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;That's the power of networking.&lt;/p&gt;

&lt;p&gt;Unfortunately, most companies I talked to were rightly skeptical of my intentions: “it kinda looks like you wanna be self-employed, no?” &lt;/p&gt;

&lt;p&gt;My &lt;a href="https://work.sycamore.design"&gt;work history&lt;/a&gt; involves a lot of off-and-on self-employment. I've worked in a few different industries, mostly to make ends meet while pursuing my true passion projects which have also spanned varied interests.&lt;/p&gt;

&lt;p&gt;Even my sharpest resume makes it clear that I would probably prefer to be doing my own thing.&lt;/p&gt;

&lt;p&gt;I also had effectively zero practical experience as a developer, and mostly couldn't get pass the initial sniff tests with hiring managers.&lt;/p&gt;

&lt;p&gt;Up until this point I had my heart set on front end web dev, but now it occurred to me that I could be valuable to the industry as a technical writer. &lt;/p&gt;

&lt;p&gt;I started reaching out to companies on &lt;a href="https://whopaystechnicalwriters.com"&gt;Who Pays Technical Writers?&lt;/a&gt; and got some interest right away.&lt;/p&gt;

&lt;p&gt;And just like that — back to freelancing!&lt;/p&gt;




&lt;h3&gt;
  
  
  Month 8: April 2021
&lt;/h3&gt;

&lt;p&gt;I started being more vocal on Twitter about the services I could provide to agencies and tech startups.&lt;/p&gt;

&lt;p&gt;Between my first freelance clients and a few articles published, I had a modest portfolio of &lt;em&gt;real&lt;/em&gt; work in the tech industry. &lt;/p&gt;

&lt;p&gt;Now folks were DMing me to inquire about hiring me for contract work. Or offering to introduce me to others looking to hire.&lt;/p&gt;

&lt;p&gt;For the first time ever in my life, I actually had to &lt;em&gt;turn down&lt;/em&gt; some work I was offered, because I already had too much on my plate!&lt;/p&gt;

&lt;p&gt;After a couple months of almost zero income — being too busy was a really, really great problem to have.&lt;/p&gt;

&lt;p&gt;In April, all told, I invoiced for almost twice what I earned in hourly wages in my last month as a landscaper.&lt;/p&gt;




&lt;h3&gt;
  
  
  Month 9: May 2021 (Present)
&lt;/h3&gt;

&lt;p&gt;I have a few ongoing clients for freelance work as a front end developer, technical writer, and developer advocate. &lt;/p&gt;

&lt;p&gt;I really value being able to make my own schedule and choose the projects I want to take on. I don't know if I will continue freelancing forever, but it's a good fit for now.&lt;/p&gt;

&lt;p&gt;I'm still doing a lot of studying, but now it's more along the lines of "JIT" (Just In Time) learning: instead of learning what I hope an employer will want, I learn what I need, when the need arises.&lt;/p&gt;

&lt;p&gt;In the last few weeks I've deepened my understanding of React hooks, picked up Sass and GraphQL, and tinkered with half a dozen vanilla JS libraries, all for the sake of applying them to my work.&lt;/p&gt;

&lt;p&gt;Am I getting rich off that sweet Silicon Valley tech boom?&lt;/p&gt;

&lt;p&gt;Well, no. &lt;/p&gt;

&lt;p&gt;But it's fun and stimulating work in an industry with seemingly endless growth potential, and I feel extremely fortunate to have gotten my foot in the door so quickly. &lt;/p&gt;




&lt;p&gt;Dear reader, I wish you all the success in the world. &lt;/p&gt;

&lt;p&gt;If you're hoping to start a career in web development, I can vouch that the resources I've shared here contain everything you could need to know. &lt;/p&gt;

&lt;p&gt;And if you've taken a "nontraditional" path to get here like me, then I hope you know you are closer than you might think to achieving your goals.&lt;/p&gt;




&lt;h2&gt;
  
  
  Resources for Learning Front-End Web Development
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://devchat.tv/js-jabber/jsj-442-breaking-into-tech-with-danny-thompson/"&gt;&lt;em&gt;JavaScript Jabber #442: Breaking Into Tech with Danny Thompson&lt;/em&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.freecodecamp.org"&gt;Free Code Camp&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://www.udemy.com/course/design-and-develop-a-killer-website-with-html5-and-css3/"&gt;Build Responsive Real-World Websites with HTML5 and CSS3&lt;/a&gt; by Jonas Schmedtmann&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://www.udemy.com/course/the-complete-javascript-course/"&gt;The Complete JavaScript Course 2021: From Zero to Expert&lt;/a&gt; by Jonas Schmedtmann&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.theodinproject.com"&gt;The Odin Project&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.leonnoel.com/100devs"&gt;Leon Noel's 100 Devs Learning Community&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;Wes Bos's &lt;a href="https://javascript30.com/"&gt;JavaScript 30&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.teamtreehouse.com"&gt;Team Treehouse&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.youtube.com/channel/UC29ju8bIPH5as8OGnQzwJyA"&gt;Traversy Media on YouTube&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://eloquentjavascript.net/"&gt;&lt;em&gt;Eloquent JavaScript&lt;/em&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://www.udemy.com/course/become-a-wordpress-developer-php-javascript/"&gt;Become a WordPress Developer: Unlocking Power With Code&lt;/a&gt; by Brad Schiff&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Career Resources From My Blog
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://blog.sycamore.design/freelancing-workflow"&gt;My Freelancing Workflow, From Cold Leads to Paid Invoices&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://blog.sycamore.design/freelancing-tech-industry"&gt;Everything You Need to Know to Succeed as a Freelancer&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://blog.sycamore.design/pricing-freelance-projects"&gt;How to Set Your Price For Freelancing Projects&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://blog.sycamore.design/tech-career-networking"&gt;My Networking Strategy For Making Meaningful Connections in Tech&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  &lt;strong&gt;If you enjoyed this piece and you want to keep up with my work, you can &lt;a href="https://sycamore.design/newsletter"&gt;sign up for my email newsletter through this link&lt;/a&gt;. I promise to make every email something you will be excited to open!&lt;/strong&gt;
&lt;/h2&gt;

</description>
      <category>career</category>
      <category>codenewbie</category>
      <category>freelancing</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Actionable Advice for Creating Killer Content &amp; Growing an Audience</title>
      <dc:creator>Sam Tanoak Sycamore</dc:creator>
      <pubDate>Wed, 19 May 2021 20:43:56 +0000</pubDate>
      <link>https://forem.com/tanoaksam/actionable-advice-for-creating-killer-content-growing-an-audience-3hb5</link>
      <guid>https://forem.com/tanoaksam/actionable-advice-for-creating-killer-content-growing-an-audience-3hb5</guid>
      <description>&lt;h3&gt;
  
  
  In an era of extra-short attention spans and a severely over-saturated media landscape, it can be a real struggle to get people excited about your creative output online - no matter how good it is.
&lt;/h3&gt;

&lt;p&gt;If you're a regular DEV reader, chances are you've also written a blog post on a technical topic before - or you've at least thought about it.&lt;/p&gt;

&lt;p&gt;What made you decide to do this?&lt;/p&gt;

&lt;p&gt;Most of y'all probably had a coding problem, and then you solved it in an interesting way, and you want to share your solution so that others might benefit from your experiences.&lt;/p&gt;

&lt;p&gt;And we love you for that!&lt;/p&gt;

&lt;p&gt;But the content creation alone is usually not enough.&lt;/p&gt;

&lt;p&gt;How do you convince anyone to give up a few minutes of their day to read your blog post or watch your latest video - especially when you consider that we are all basically one click away, at all times, from watching literally any TV show or movie ever released?&lt;/p&gt;

&lt;p&gt;You're gonna hate me for this, but the answer comes down to...&lt;/p&gt;

&lt;p&gt;...did you guess it yet?&lt;/p&gt;

&lt;h2&gt;
  
  
  It's Marketing!
&lt;/h2&gt;

&lt;p&gt;I know - I had &lt;em&gt;zero&lt;/em&gt; interest in marketing when I first starting writing online. &lt;/p&gt;

&lt;p&gt;For years I neglected Marketing 101 because I hated the idea that I would be "manipulating" people somehow.&lt;/p&gt;

&lt;p&gt;I don't want to persuade anyone to do anything they don't actually &lt;em&gt;want&lt;/em&gt; to do!&lt;/p&gt;

&lt;p&gt;But at the same time:&lt;/p&gt;

&lt;p&gt;I &lt;em&gt;do&lt;/em&gt; want them to engage with this stuff that I've poured so much time and energy into. &lt;/p&gt;

&lt;p&gt;Don't I?&lt;/p&gt;

&lt;p&gt;Well then, that's going to require some convincin', I reckon.&lt;/p&gt;




&lt;p&gt;Years ago - long before &lt;a href="https://tanoaksam.hashnode.dev/learning-to-code-off-grid"&gt;I learned how to code&lt;/a&gt; and changed careers - I self-published &lt;a href="https://thegoodliferevival.com/shop/foraging"&gt;an ebook about edible wild plants&lt;/a&gt; and started selling it through &lt;a href="https://thegoodliferevival.com/"&gt;my Squarespace blog&lt;/a&gt;. &lt;/p&gt;

&lt;p&gt;&lt;em&gt;Surely,&lt;/em&gt; I reasoned with myself, &lt;em&gt;once people come to the site and read the very dry but informative description of the book and see that it meets their needs, the sales will naturally start rolling in.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;(Crickets.)&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;So I got more serious about email marketing. I started running experiments with my list of about a thousand subscribers at the time.&lt;/p&gt;

&lt;p&gt;I tried doing it "on my terms" by avoiding the kind of standard marketing tactics that often turn me off as a consumer. The results were dismal.&lt;/p&gt;

&lt;p&gt;Eventually I set aside my better judgement and ran a "this weekend only!" sale - you know the kind:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;This weekend only: take 25% off of my ebook. It's the deal of a lifetime so don't miss out! Hurry - quick - this offer ends Sunday at midnight!!&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;I sold more copies in that weekend alone than I had in the months since I originally launched the book.&lt;/p&gt;

&lt;p&gt;I didn't force anyone to do anything. No lies or shady business.&lt;/p&gt;

&lt;p&gt;Nobody communicated that they were unsatisfied with their purchase. Some reached out to thank me.&lt;/p&gt;

&lt;p&gt;That's when I finally had to admit that maybe these kinds of marketing tactics are so common &lt;em&gt;because&lt;/em&gt; - hear me out on this one -&lt;/p&gt;

&lt;p&gt;they work.&lt;/p&gt;

&lt;p&gt;...I know, groundbreaking stuff, right? :P&lt;/p&gt;




&lt;p&gt;In the years since that first product launch, I've wizened up considerably to the ways of online marketing. &lt;/p&gt;

&lt;p&gt;I'm not afraid of being intentional about trying to sell what I create - because why else did I create it, if not to get it into the hands of as many people as I can?&lt;/p&gt;

&lt;p&gt;Content marketing isn't terribly complicated. If you keep some basic guidelines in mind when you're crafting content and thinking about how you're going to present it to the world, you can significantly improve your ability to reach a much wider audience.&lt;/p&gt;

&lt;p&gt;What follows is pretty much everything I've learned about creating engaging content in my ten years of publishing online, distilled down into as few words as possible. It's not a formula so much as a framework for optimizing your chances of success with any given piece of content.&lt;/p&gt;

&lt;h2&gt;
  
  
  1. Provide value
&lt;/h2&gt;

&lt;p&gt;'Value' is one of those buzzwords that's been shredded to pieces by shady marketers.&lt;/p&gt;

&lt;p&gt;So what do we actually mean by this?&lt;/p&gt;

&lt;p&gt;Give your readers what they need!&lt;/p&gt;

&lt;p&gt;Or better yet:&lt;/p&gt;

&lt;p&gt;Give them what they don't even know they need yet.&lt;/p&gt;

&lt;p&gt;Anticipate their needs and they'll think you're magical.&lt;/p&gt;

&lt;p&gt;The vast majority of what you see on social media amounts to the &lt;em&gt;opposite&lt;/em&gt; of providing value: people want to &lt;em&gt;take&lt;/em&gt; from you, whether it's your money or just your attention.&lt;/p&gt;

&lt;p&gt;This approach rarely leads to engagement, unless it happens to be controversial or provocative in all the worst ways (more on that momentarily).&lt;/p&gt;

&lt;p&gt;Your job as a content creator is to go out of your way to &lt;em&gt;give&lt;/em&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  2. Frame everything in terms of 'You'
&lt;/h2&gt;

&lt;p&gt;Nobody cares about me.&lt;/p&gt;

&lt;p&gt;They want to know what I can do for them.&lt;/p&gt;

&lt;p&gt;How does this thing I've created solve their problems?&lt;/p&gt;

&lt;p&gt;Even when I'm writing about myself, I am meticulous about framing every detail in terms of how it relates to 'you', my intended reader.&lt;/p&gt;

&lt;p&gt;No matter what I'm writing about, my goal is always to &lt;em&gt;give you info or advice that you can act on.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;If you re-read the introduction to this post, you will notice that I was very intentional about framing the whole thing in terms of "you."&lt;/p&gt;

&lt;p&gt;I could have said "I am blogger on Hashnode, and I sometimes struggle to get noticed. Here's my strategy for increasing engagement."&lt;/p&gt;

&lt;p&gt;Instead I went with "If you're reading this, you're probably a blogger who sometimes struggles to get noticed. So how can you increase your engagement?"&lt;/p&gt;

&lt;p&gt;They both convey essentially the same information. But I'd wager that you are about a thousand times more likely to be interested in the latter version.&lt;/p&gt;

&lt;h2&gt;
  
  
  3. Seek an emotional connection
&lt;/h2&gt;

&lt;p&gt;All of the most popular things I've ever published online had some element of emotional appeal. &lt;/p&gt;

&lt;p&gt;This ain't rocket surgery - people make decisions with their emotions. &lt;/p&gt;

&lt;p&gt;The tough part is figuring out what actually resonates most with your audience. This requires being an exceptionally good listener.&lt;/p&gt;

&lt;p&gt;This is also an area where it's important to tread lightly - people don't take well to having their emotions abused or manipulated, so when you go for the heart, it has to be genuine and not gratuitous.&lt;/p&gt;

&lt;p&gt;I've had a handful of tweets go "viral" (by my standards anyway) on &lt;a href="https://www.twitter.com/tanoaksam"&gt;Twitter&lt;/a&gt;. Almost all of them were about my career transition and contained a strong emotional hook that resonated with my readers. Crucially, they all came from my actual experiences - people can tell that I'm being authentic about what I'm describing.&lt;/p&gt;

&lt;p&gt;But of course you don't have to tell some life-changing story in order to create an emotional connection with your audience. In tech writing, it can be as simple as "hey, have you encountered this problem before? Sucks, doesn't it? Well, I have a solution..." That's enough to establish a rapport with your reader.&lt;/p&gt;

&lt;h2&gt;
  
  
  4. Be provocative, within reason
&lt;/h2&gt;

&lt;p&gt;On the internet, the name of the game - for better or worse - is &lt;em&gt;engagement&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;People are most likely to engage with the stuff that elicits a strong reaction - whether positive or negative.&lt;/p&gt;

&lt;p&gt;This is a dangerous game, but the payoff can be enormous!&lt;/p&gt;

&lt;p&gt;You can be provocative while remaining positive - one way to pull this off is by making a strong statement about a belief that you genuinely hold, without watering it down via weasel words.&lt;/p&gt;

&lt;p&gt;One of my coding mentors encourages his students to cultivate "strong opinions, loosely held."&lt;/p&gt;

&lt;p&gt;It's not "possibly maybe one of the best" - it &lt;em&gt;IS&lt;/em&gt; the best! Full stop.&lt;/p&gt;

&lt;p&gt;Sure, I could be convinced otherwise. But I want to instigate the conversation!&lt;/p&gt;

&lt;p&gt;Let people disagree if they want to! Maybe I hope to be proven wrong.&lt;/p&gt;

&lt;p&gt;There can be value in this kind of discourse, when it's done in good faith. That's easier said than done.&lt;/p&gt;

&lt;p&gt;And yes, you can also generate a whole lotta engagement through negativity. &lt;/p&gt;

&lt;p&gt;But - trust me on this one - you're basically setting yourself up to become Emperor Palpatine, sustained purely by the toxic bad vibes emanating through the universe.&lt;/p&gt;

&lt;p&gt;Marketing is a whole lot like The Force, honestly. It flows through all things in our galaxy, and it can be harnessed for incredible good or pure evil.&lt;/p&gt;

&lt;p&gt;Don't be like Emperor Palpatine. I don't think it ended well for him.&lt;/p&gt;

&lt;h2&gt;
  
  
  5. Be generous to a fault
&lt;/h2&gt;

&lt;p&gt;My policy for creating content has always been to give away the best stuff for free.&lt;/p&gt;

&lt;p&gt;That has a lot to do with my personal ethics, but it's also the best way I've found to generate goodwill with an audience.&lt;/p&gt;

&lt;p&gt;With everything you share for free, your goal should be to receive overwhelming feedback that "I can't believe they aren't charging money for this!"&lt;/p&gt;

&lt;p&gt;When you give away your best work for free, you'll be amazed by how many people will circle back around to purchase whatever you might create in the future purely because they want to support you.&lt;/p&gt;

&lt;p&gt;If engagement is the currency of the internet, then cultivating goodwill is how you persuade people to invest in your work.&lt;/p&gt;

&lt;p&gt;Growing an audience is a whole skill set unto itself, but the ground rules I've laid out here ought to be enough to set up any blogger for maximum success over the long term.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;strong&gt;If you enjoyed this piece and you want to keep up with my work, you can &lt;a href="https://sycamore.design/newsletter"&gt;sign up for my email newsletter through this link&lt;/a&gt;. I promise to make every email something you will be excited to open!&lt;/strong&gt;
&lt;/h2&gt;

</description>
    </item>
    <item>
      <title>How to Build a Jamstack Blog with Next.js &amp; Ghost CMS</title>
      <dc:creator>Sam Tanoak Sycamore</dc:creator>
      <pubDate>Mon, 17 May 2021 03:56:17 +0000</pubDate>
      <link>https://forem.com/tanoaksam/how-to-build-a-jamstack-blog-with-next-js-ghost-cms-h6c</link>
      <guid>https://forem.com/tanoaksam/how-to-build-a-jamstack-blog-with-next-js-ghost-cms-h6c</guid>
      <description>&lt;h3&gt;
  
  
  The purpose of this guide is to get you up and running as quickly as possible with a robust Jamstack blog that's ready to grow with you.
&lt;/h3&gt;

&lt;p&gt;Our final product will be skeletal and austere but fully functional.&lt;/p&gt;

&lt;p&gt;No time for a detailed walkthrough? Just wanna skim the source code? &lt;/p&gt;

&lt;p&gt;You can grab the final product we'll be building over on my &lt;a href="https://github.com/samuelsycamore/van-gogh" rel="noopener noreferrer"&gt;GitHub&lt;/a&gt;. Have fun!&lt;/p&gt;

&lt;h2&gt;
  
  
  Introducing the Van Gogh Stack
&lt;/h2&gt;

&lt;p&gt;OK I'll admit it's silly, but I needed a catchy name so hear me out:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;V&lt;/strong&gt;ercel + &lt;strong&gt;N&lt;/strong&gt;ext.js + &lt;strong&gt;G&lt;/strong&gt;host CMS + &lt;strong&gt;H&lt;/strong&gt;eroku = &lt;strong&gt;VNGH&lt;/strong&gt; &lt;em&gt;(read: "Van Gogh")&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;strong&gt;The Van Gogh Stack&lt;/strong&gt; is one of my favorite combos for quickly constructing Jamstack sites. &lt;/p&gt;

&lt;p&gt;It uses Ghost as a headless CMS deployed on Heroku, which is then plugged into a Next.js front end hosted on Vercel.&lt;/p&gt;

&lt;p&gt;It is 100% free to host and deploy, but note that Heroku will want credit card info, as you will see.&lt;/p&gt;

&lt;h2&gt;
  
  
  Prerequisites
&lt;/h2&gt;

&lt;p&gt;This guide assumes that you've already been convinced that the Jamstack is the coolest! &lt;/p&gt;

&lt;p&gt;If not, check out my article &lt;em&gt;&lt;a href="https://dev.to/tanoaksam/a-clueless-newbie-s-guide-to-headless-cms-and-the-jamstack-2h86"&gt;A Clueless Newbie's Guide to Headless CMS &amp;amp; the Jamstack&lt;/a&gt;&lt;/em&gt; and its companion piece, &lt;em&gt;&lt;a href="https://www.takeshape.io/articles/what-happens-when-your-jamstack-blog-grows-up/" rel="noopener noreferrer"&gt;What Happens When Your Jamstack Blog Grows Up?&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;You should be familiar with JavaScript, React, and how to work with REST APIs. &lt;/p&gt;

&lt;p&gt;Experience with Next.js or a similar framework would be helpful, but if this is your first Next.js project you will come out on the other side with a nice playground for learning and tinkering.&lt;/p&gt;

&lt;p&gt;You don't need prior experience with Ghost, but it will make more sense if you've worked with other content management systems (especially headless) before.&lt;/p&gt;

&lt;p&gt;You need to know enough about git to push code to GitHub.&lt;/p&gt;

&lt;h2&gt;
  
  
  Getting to Know Our Stack
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Ghost CMS
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1621036654451%2Fuq7MpLWm0.webp" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1621036654451%2Fuq7MpLWm0.webp" alt="ghost-4.webp"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/TryGhost/Ghost" rel="noopener noreferrer"&gt;Ghost&lt;/a&gt; is one of the most popular headless CMS options out there today. Version 4 was released in March 2021. The most recent version as I'm writing this is &lt;strong&gt;4.5.0.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;I like Ghost because:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;it's built with Node.js&lt;/li&gt;
&lt;li&gt;it's open-source and free to use as a developer&lt;/li&gt;
&lt;li&gt;it has a great UI that's easy to configure and hand off to clients&lt;/li&gt;
&lt;li&gt;as a self-hosted CMS, I don't have to worry about price increases or breaking changes to the API - which can happen with &lt;em&gt;CaaS&lt;/em&gt; ("Content as a Service") providers who host your content for you&lt;/li&gt;
&lt;li&gt;it could not be easier to deploy on Heroku - one click is all we need!&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;By default, Ghost ships with server-side rendered templates built using the &lt;a href="https://handlebarsjs.com/" rel="noopener noreferrer"&gt;Handlebars templating language&lt;/a&gt;. If you're in a rush to start publishing and that sounds cool to you, then you honestly don't even need to worry about most of this tutorial! Just deploy your Ghost blog to Heroku, pick a template and you're ready to roll.&lt;/p&gt;

&lt;p&gt;Handlebars is cool in its own right, but we want to be able to harness the full power of React via Next.js.&lt;/p&gt;

&lt;h3&gt;
  
  
  Next.js
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1621037049313%2FlBsNVwt0Z.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1621037049313%2FlBsNVwt0Z.png" alt="next-js.png"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://nextjs.org/" rel="noopener noreferrer"&gt;Next.js&lt;/a&gt; is quickly becoming the most popular React-based framework for production.&lt;/p&gt;

&lt;p&gt;Some of the things that make Next especially cool include:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;hybrid client-side and server-side rendering&lt;/li&gt;
&lt;li&gt;intuitive file-system-based routing&lt;/li&gt;
&lt;li&gt;the ability to spin up an API endpoint without a (traditional) back-end&lt;/li&gt;
&lt;li&gt;and so much more that I continue to learn with each new project!&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Next.js was created by &lt;a href="https://www.vercel.com" rel="noopener noreferrer"&gt;Vercel&lt;/a&gt;, which offers Jamstack-oriented hosting solutions. &lt;a href="https://nextjs.org/blog/next-10" rel="noopener noreferrer"&gt;Version 10&lt;/a&gt; was released in October 2020; the most recent version as I'm writing this is &lt;a href="https://nextjs.org/blog/next-10-2" rel="noopener noreferrer"&gt;&lt;strong&gt;10.2&lt;/strong&gt;&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Set Up Heroku
&lt;/h2&gt;

&lt;p&gt;To get started, set up an account with &lt;a href="https://www.heroku.com" rel="noopener noreferrer"&gt;Heroku&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;As soon as you're in, go ahead and click this beautiful button here:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://heroku.com/deploy?template=https://github.com/thelovekesh/ghost-v4-on-heroku" rel="noopener noreferrer"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1621039660578%2FgLDl7nfID.png" alt="deploy-to-heroku.png"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;(This deployment button was made possible by &lt;a href="https://github.com/thelovekesh/ghost-v4-on-heroku" rel="noopener noreferrer"&gt;Lovekesh Kumar&lt;/a&gt;. Thank you, Lovekesh Kumar!)&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;The deployment button will direct you to a page that looks like this:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1621035284939%2FlD-l7YADZ.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1621035284939%2FlD-l7YADZ.png" alt="deploy-ghost-v4.png"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Choose a name for your app - this won't be especially important, so don't worry if you can't get the exact name you'd like.&lt;/p&gt;

&lt;p&gt;As you scroll down the page, you will be presented with many configuration variables. The only one you need to fill out is the  &lt;strong&gt;APP_PUBLIC_URL&lt;/strong&gt; as seen here:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1621035687816%2FV3XMddihG.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1621035687816%2FV3XMddihG.png" alt="app-public-url.png"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This URL determines the future domain of your CMS. Change &lt;code&gt;YOURAPPNAME&lt;/code&gt; to whatever you like in &lt;code&gt;https://YOURAPPNAME.herokuapp.com&lt;/code&gt;. &lt;/p&gt;

&lt;p&gt;Don't be fooled by the word PUBLIC there - you will eventually make this URL private.&lt;/p&gt;

&lt;p&gt;Once you've filled out these two fields, scroll to the bottom of the page and click &lt;strong&gt;Deploy app&lt;/strong&gt;. It may take a few minutes while Heroku builds the CMS.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Note: if this is your first Heroku app, you will be asked to provide credit card information. I don't love it either, but their free tier is generous enough that you may not ever need to scale up to a paid plan even if you're seeing pretty significant traffic - that's part of the magic of the Jamstack.&lt;/p&gt;

&lt;p&gt;And if you ever &lt;em&gt;do&lt;/em&gt; need to scale up, &lt;a href="https://ghost.org/docs/faq/clustering-sharding-multi-server/" rel="noopener noreferrer"&gt;Ghost's documentation&lt;/a&gt; recommends adding a content delivery network (CDN) into your stack rather than upgrading your CMS hosting (which should not be necessary). CDN integration is beyond the scope of this guide; just know that it is an option.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Once the build is complete, you're pretty much done with the H in VNGH. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1621038520212%2F4zl0MTZYb.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1621038520212%2F4zl0MTZYb.png" alt="heroku-success.png"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;One down, three to go.&lt;/p&gt;

&lt;h2&gt;
  
  
  Configure Ghost
&lt;/h2&gt;

&lt;p&gt;Now you can navigate to &lt;code&gt;https://YOURAPPNAME.herokuapp.com/ghost&lt;/code&gt; to get your CMS up and running.&lt;/p&gt;

&lt;p&gt;The first time you visit this page, you will be prompted to complete the installation:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1621040101546%2FQi2WJ1pDD.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1621040101546%2FQi2WJ1pDD.png" alt="welcome-ghost.png"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;After you've registered, you'll land on your shiny new Ghost CMS admin panel when visiting this same URL. It will look something like this:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1621040187890%2Fn_Jotj-51.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1621040187890%2Fn_Jotj-51.png" alt="ghost-dashboard.png"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;As mentioned before, Ghost comes pre-packaged with &lt;a href="https://handlebarsjs.com/" rel="noopener noreferrer"&gt;Handlebars templates&lt;/a&gt; to render your posts on the server. But since you are planning to go headless, it really doesn't matter what the server-side template looks like, because you won't actually be serving that up to your visitors. Don't worry about the design here.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;The basic installation includes a set of dummy posts that will save us the trouble of making our own to test our connection to Next.js, once we get there. We will return to the Ghost admin panel at the very end to delete all of these in one click.&lt;/p&gt;

&lt;h3&gt;
  
  
  Set CMS to Private
&lt;/h3&gt;

&lt;p&gt;Click on the cog in the bottom left corner of the admin panel to open up Settings. Click on &lt;strong&gt;General.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1621040880093%2Fxnh8SUtRO.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1621040880093%2Fxnh8SUtRO.png" alt="ghost-settings.png"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Scroll to the bottom of this page, where you will find &lt;code&gt;Advanced Settings&lt;/code&gt;. Next to "Make this site private", set the toggle to the 'on' position.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1621041120417%2FRvzkGSSyo.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1621041120417%2FRvzkGSSyo.png" alt="make-private.png"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This will automatically generate a private RSS feed for you. Don't worry about this part.&lt;/p&gt;

&lt;p&gt;Click &lt;code&gt;Save settings&lt;/code&gt; in the top right corner.&lt;/p&gt;

&lt;p&gt;Note: Setting your CMS to private will not have any effect on the visibility of your future front end - since we are using Ghost as a headless CMS, these settings only apply to the Heroku app where the CMS lives. Making the CMS private ensures that Google won't get it mixed up with your &lt;em&gt;canonical&lt;/em&gt; front end and start sending people to the back end of your site instead.&lt;/p&gt;

&lt;h3&gt;
  
  
  Add Custom Integration for API Key
&lt;/h3&gt;

&lt;p&gt;In order for Ghost to communicate with your Next.js front end (coming soon!), you will need to be able to access its API.&lt;/p&gt;

&lt;p&gt;Back on the admin panel, click on &lt;strong&gt;Integrations&lt;/strong&gt; and scroll down to the bottom of the page. Click on the &lt;code&gt;+ Add custom integration&lt;/code&gt; button:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1621041622725%2F4nTteQtRF.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1621041622725%2F4nTteQtRF.png" alt="integrations.png"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Give the integration any name you want. After you submit a name, you'll be given three important bits of information - but you really only need to worry about two:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Content API Key&lt;/strong&gt; - you will pass this string to Next.js to grab content from your CMS&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;API URL&lt;/strong&gt; - you will need this to specify where the content is coming from&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Stash this information somewhere safe for now.&lt;/p&gt;

&lt;p&gt;And that's all it takes to configure Ghost. You're halfway there already! Pretty painless so far, right?&lt;/p&gt;

&lt;h2&gt;
  
  
  Build Next.js App
&lt;/h2&gt;

&lt;p&gt;&lt;em&gt;If you encounter any trouble during this stage in development, I would highly recommend referring to the &lt;a href="https://nextjs.org/docs/api-reference/create-next-app" rel="noopener noreferrer"&gt;official Next.js documentation&lt;/a&gt;, which is very thorough and well written. This will be a broad overview that assumes you're already familiar with the key features of Next.js.&lt;/em&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Create a New Project
&lt;/h3&gt;

&lt;p&gt;Fire up your terminal, &lt;code&gt;cd&lt;/code&gt; to the folder where you want to create a new app, and run one of the following commands:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npx create-next-app
&lt;span class="c"&gt;# or&lt;/span&gt;
yarn create next-app
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Note: Unless explicitly specified via the --use-npm flag, create-next-app defaults to Yarn.&lt;/p&gt;

&lt;p&gt;You will be asked to give the project a name before the necessary packages begin downloading.&lt;/p&gt;

&lt;p&gt;After installation is complete, you can &lt;code&gt;cd&lt;/code&gt; into the new app's folder and run &lt;code&gt;yarn dev&lt;/code&gt; or &lt;code&gt;npm run dev&lt;/code&gt; to start up the local development environment at &lt;code&gt;http://localhost:3000&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;create-next-app&lt;/code&gt; ships with a default landing page that looks like this:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1621044078196%2Fjugo5YAe4m.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1621044078196%2Fjugo5YAe4m.png" alt="next-welcome.png"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Yeehaw! We're making good progress now.&lt;/p&gt;

&lt;p&gt;Open the Next.js project folder in your IDE and let's do some coding already!&lt;/p&gt;

&lt;p&gt;To simplify the process of receiving data from Ghost, install the official &lt;a href="https://ghost.org/docs/content-api/javascript/" rel="noopener noreferrer"&gt;JavaScript Ghost Content API helper&lt;/a&gt; by running:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;yarn add @tryghost/content-api
&lt;span class="c"&gt;# or&lt;/span&gt;
npm &lt;span class="nb"&gt;install&lt;/span&gt; @tryghost/content-api
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;According to Ghost's documentation:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;The library can be used in any JavaScript project, client or server side and abstracts away all the pain points of working with API data.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;a href="https://ghost.org/docs/content-api/javascript/" rel="noopener noreferrer"&gt;Click here&lt;/a&gt; for more details.&lt;/p&gt;

&lt;h3&gt;
  
  
  Accessing Content Data
&lt;/h3&gt;

&lt;p&gt;Create a new folder in the root directory and call it &lt;code&gt;lib&lt;/code&gt;. &lt;/p&gt;

&lt;p&gt;Inside &lt;code&gt;lib&lt;/code&gt;, create a new file called &lt;code&gt;functions.js&lt;/code&gt;. This file will hold the functions needed to pull in content data from Ghost.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;These files and folders can be named whatever you like, but it's a good idea to keep this functions.js file separate from your pages directory to prevent it from getting mixed in with content as your project grows.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Paste the following code into &lt;code&gt;functions.js&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="c1"&gt;// lib/functions.js&lt;/span&gt;

&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;GhostContentAPI&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;@tryghost/content-api&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;

&lt;span class="c1"&gt;// Create API instance with site credentials&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;api&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;GhostContentAPI&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;url&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;process&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;env&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;GHOST_URL&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;key&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;process&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;env&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;GHOST_API_KEY&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;version&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;v4&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This snippet imports the &lt;code&gt;GhostContentAPI&lt;/code&gt; and creates a new instance of it that gets stored in the &lt;code&gt;const&lt;/code&gt; named &lt;code&gt;api&lt;/code&gt;. This is how your Next app knows to talk to your Ghost CMS to get its content.&lt;/p&gt;

&lt;h3&gt;
  
  
  Environment Variables
&lt;/h3&gt;

&lt;p&gt;&lt;code&gt;url&lt;/code&gt; and &lt;code&gt;key&lt;/code&gt; refer to your &lt;strong&gt;API URL&lt;/strong&gt; and &lt;strong&gt;API Content URL&lt;/strong&gt; from your Ghost custom integration. To bring these into the project securely, let's add a new file in the root directory called &lt;code&gt;.env.local&lt;/code&gt; - note the leading period in the name.&lt;/p&gt;

&lt;p&gt;This file stores the &lt;em&gt;environment variables&lt;/em&gt; that need to stay secret. If, on the other hand, you were to insert these variables directly into the code, they would be visible to anyone reading your site's source code. This could potentially open up your API to malicious bots that roam the internet looking for exactly this kind of thing to exploit.&lt;/p&gt;

&lt;p&gt;Environment variable support is built in to Next.js. It should be automatically covered by the default &lt;code&gt;.gitignore&lt;/code&gt; file, but it's worth double-checking to make sure you don't accidentally push any &lt;code&gt;.env&lt;/code&gt; files to GitHub.&lt;/p&gt;

&lt;p&gt;When it's time to deploy the front end, you will give these secret keys directly to Vercel so that they never need to be exposed in your code.&lt;/p&gt;

&lt;p&gt;Inside &lt;code&gt;.env.local&lt;/code&gt; add the following snippet - be sure to replace the placeholders with your unique keys:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="c1"&gt;// .env.local&lt;/span&gt;
&lt;span class="nx"&gt;GHOST_URL&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="nx"&gt;https&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="c1"&gt;//YOURAPPNAME.herokuapp.com // Replace with your API URL&lt;/span&gt;
&lt;span class="nx"&gt;GHOST_API_KEY&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="nx"&gt;r4nd0mstr1ng0fch4rz&lt;/span&gt; &lt;span class="c1"&gt;// Replace with your Content API Key&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;After you save this file, be sure to kill &amp;amp; restart your dev server running at &lt;code&gt;localhost:3000&lt;/code&gt; so these changes will take effect.&lt;/p&gt;

&lt;h3&gt;
  
  
  Fetch and Display All Blog Posts
&lt;/h3&gt;

&lt;p&gt;Now that the front end is connected to the CMS, let's create an async function to fetch all posts from Ghost. It will be exported from &lt;code&gt;lib/functions.js&lt;/code&gt; so it can be used anywhere in the app.&lt;/p&gt;

&lt;p&gt;Return to &lt;code&gt;lib/functions.js&lt;/code&gt; and insert this snippet after the &lt;code&gt;const api&lt;/code&gt; declaration:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="c1"&gt;// lib/functions.js&lt;/span&gt;

&lt;span class="c1"&gt;// Grab all posts from Ghost&lt;/span&gt;
&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;async&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;getPosts&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;api&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;posts&lt;/span&gt;
    &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;browse&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
      &lt;span class="na"&gt;limit&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;all&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="p"&gt;})&lt;/span&gt;
    &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="k"&gt;catch&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;err&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;error&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;err&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;});&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;To recap, &lt;code&gt;lib/functions.js&lt;/code&gt; should now look like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="c1"&gt;// lib/functions.js&lt;/span&gt;

&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;GhostContentAPI&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;@tryghost/content-api&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;

&lt;span class="c1"&gt;// Create API instance with site credentials&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;api&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;GhostContentAPI&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;url&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;process&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;env&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;GHOST_URL&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;key&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;process&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;env&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;GHOST_API_KEY&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;version&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;v4&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;span class="p"&gt;})&lt;/span&gt;

&lt;span class="c1"&gt;// Grab all posts from Ghost&lt;/span&gt;
&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;async&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;getPosts&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;api&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;posts&lt;/span&gt;
    &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;browse&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
      &lt;span class="na"&gt;limit&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;all&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="p"&gt;})&lt;/span&gt;
    &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="k"&gt;catch&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;err&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;error&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;err&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;});&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The &lt;code&gt;posts.browse()&lt;/code&gt; endpoint accessed by &lt;code&gt;getPosts()&lt;/code&gt; has &lt;a href="https://ghost.org/docs/content-api/javascript/" rel="noopener noreferrer"&gt;many parameters to choose from&lt;/a&gt;, but this boilerplate setup will be sufficient to get started.&lt;/p&gt;

&lt;p&gt;Next, let's give &lt;code&gt;index.js&lt;/code&gt; a makeover so it will display a list of all blog posts.&lt;/p&gt;

&lt;p&gt;Clear out all of the existing starter markup and replace it with the following:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="c1"&gt;// pages/index.js&lt;/span&gt;

&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;getPosts&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;../lib/functions&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;Link&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;next/link&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;Index&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;props&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;
  &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;ul&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;props&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;posts&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;map&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;post&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;li&lt;/span&gt; &lt;span class="na"&gt;key&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;post&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;id&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
        &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nc"&gt;Link&lt;/span&gt; &lt;span class="na"&gt;href&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="s2"&gt;`/posts/&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;post&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;slug&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
          &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;a&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;post&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;title&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;a&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
        &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nc"&gt;Link&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;li&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="p"&gt;))&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;
  &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;ul&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="nx"&gt;Index&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;async&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;getStaticProps&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;context&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;posts&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nf"&gt;getPosts&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

  &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;!&lt;/span&gt;&lt;span class="nx"&gt;posts&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="na"&gt;notFound&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="p"&gt;};&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;props&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;posts&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
    &lt;span class="na"&gt;revalidate&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="p"&gt;};&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Let's break down what this code is doing, in brief:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;import&lt;/code&gt; the &lt;code&gt;getPosts&lt;/code&gt; function you just wrote as well as Next's &lt;code&gt;Link&lt;/code&gt; component&lt;/li&gt;
&lt;li&gt;render a component that receives post data and maps it to a list&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;getStaticProps()&lt;/code&gt; tells Next to &lt;a href="https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation" rel="noopener noreferrer"&gt;generate this page at &lt;em&gt;build time&lt;/em&gt;&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;revalidate&lt;/code&gt; allows for &lt;a href="https://nextjs.org/docs/basic-features/data-fetching#incremental-static-regeneration" rel="noopener noreferrer"&gt;incremental static regeneration&lt;/a&gt; by enabling Next to regenerate the page 1 second after a request comes in - this is one of the breakthroughs of the Next.js framework that enables it to efficiently add dynamic content to otherwise "static" sites&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Now when you visit &lt;code&gt;localhost:3000&lt;/code&gt; you should see something like this:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1621050602834%2FS2YKuBKx9.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1621050602834%2FS2YKuBKx9.png" alt="blog-posts.png"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Almost done! Next.js is now fetching and rendering a list of all blog posts from Ghost - BUT, the links in the list don't actually lead anywhere yet.&lt;/p&gt;

&lt;p&gt;That's because we still need to call in the individual post data from the API, and then tell Next.js how to handle it. Let's do that now.&lt;/p&gt;

&lt;h3&gt;
  
  
  Fetch and Display Each Individual Blog Post
&lt;/h3&gt;

&lt;p&gt;Returning to &lt;code&gt;lib/functions.js&lt;/code&gt;, add the following function below the &lt;code&gt;getPosts()&lt;/code&gt; function:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="c1"&gt;// lib/functions.js&lt;/span&gt;

&lt;span class="c1"&gt;// Grab each individual post from Ghost&lt;/span&gt;
&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;async&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;getSinglePost&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;postSlug&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;api&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;posts&lt;/span&gt;
    &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;read&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
      &lt;span class="na"&gt;slug&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;postSlug&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="p"&gt;})&lt;/span&gt;
    &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="k"&gt;catch&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;err&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;error&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;err&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;});&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Recapping once more, your &lt;code&gt;lib/functions.js&lt;/code&gt; should now look like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="c1"&gt;// lib/functions.js&lt;/span&gt;

&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;GhostContentAPI&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;@tryghost/content-api&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="c1"&gt;// Create API instance with site credentials&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;api&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;GhostContentAPI&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;url&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;process&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;env&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;GHOST_URL&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;key&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;process&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;env&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;GHOST_API_KEY&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;version&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;v4&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="c1"&gt;// Grab all posts from Ghost&lt;/span&gt;
&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;async&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;getPosts&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;api&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;posts&lt;/span&gt;
    &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;browse&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
      &lt;span class="na"&gt;limit&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;all&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="p"&gt;})&lt;/span&gt;
    &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="k"&gt;catch&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;err&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;error&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;err&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;});&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="c1"&gt;// Grab each individual post from Ghost&lt;/span&gt;
&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;async&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;getSinglePost&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;postSlug&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;api&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;posts&lt;/span&gt;
    &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;read&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
      &lt;span class="na"&gt;slug&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;postSlug&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="p"&gt;})&lt;/span&gt;
    &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="k"&gt;catch&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;err&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;error&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;err&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;});&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This &lt;code&gt;getSinglePost&lt;/code&gt; function operates similarly to &lt;code&gt;getPosts&lt;/code&gt; but accesses the &lt;code&gt;posts.read()&lt;/code&gt; API endpoint.&lt;/p&gt;

&lt;p&gt;Moving over to the &lt;code&gt;pages&lt;/code&gt; directory, create a new folder named &lt;code&gt;posts&lt;/code&gt;. &lt;/p&gt;

&lt;p&gt;Inside of the new &lt;code&gt;posts&lt;/code&gt; folder, create a new file and name it &lt;code&gt;[slug].js&lt;/code&gt;.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;The brackets in [slug].js are necessary to tell Next.js to treat this as a &lt;strong&gt;dynamic route&lt;/strong&gt;. &lt;a href="https://nextjs.org/docs/routing/dynamic-routes" rel="noopener noreferrer"&gt;Learn more about dynamic routes here&lt;/a&gt;.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Paste the following code into &lt;code&gt;[slug.js]&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="c1"&gt;// pages/posts/[slug].js&lt;/span&gt;

&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;getSinglePost&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;getPosts&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;../../lib/functions&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;PostPage&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;props&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;img&lt;/span&gt; &lt;span class="na"&gt;src&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;props&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;post&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;feature_image&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt; &lt;span class="p"&gt;/&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;h1&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;props&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;post&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;title&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;h1&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt; &lt;span class="na"&gt;dangerouslySetInnerHTML&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;__html&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;props&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;post&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;html&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt; &lt;span class="p"&gt;/&amp;gt;&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="nx"&gt;PostPage&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;async&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;getStaticPaths&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;posts&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nf"&gt;getPosts&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

  &lt;span class="c1"&gt;// Get the paths we want to create based on posts&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;paths&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;posts&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;map&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;post&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;({&lt;/span&gt;
    &lt;span class="na"&gt;params&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;slug&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;post&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;slug&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
  &lt;span class="p"&gt;}));&lt;/span&gt;

  &lt;span class="c1"&gt;// "fallback: false" gives us a 404 if post not found&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;paths&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;fallback&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt; &lt;span class="p"&gt;};&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="c1"&gt;// Pass the page slug to "getSinglePost()" function&lt;/span&gt;
&lt;span class="c1"&gt;// Which then passes it to "posts.read()" to query the GhostContentAPI&lt;/span&gt;
&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;async&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;getStaticProps&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;context&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;post&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nf"&gt;getSinglePost&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;context&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;params&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;slug&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

  &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;!&lt;/span&gt;&lt;span class="nx"&gt;post&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="na"&gt;notFound&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="p"&gt;};&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;props&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;post&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
    &lt;span class="na"&gt;revalidate&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="p"&gt;};&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This is the final piece of the puzzle to bring full functionality to the blog:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Import &lt;code&gt;getSinglePost&lt;/code&gt; &amp;amp; &lt;code&gt;getPosts&lt;/code&gt; functions from &lt;code&gt;functions.js&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Render a component that displays a blog post's featured image, title, and HTML content&lt;/li&gt;
&lt;li&gt;Create the slugs based on post data&lt;/li&gt;
&lt;li&gt;Tell &lt;code&gt;getSinglePost&lt;/code&gt; to go get the post that corresponds to the given slug, which then queries the &lt;code&gt;GhostContentAPI&lt;/code&gt; for it&lt;/li&gt;
&lt;/ul&gt;

&lt;blockquote&gt;
&lt;p&gt;A note on dangerouslySetInnerHTML - the name is intended to be a reminder that this can be a dangerous way to operate. That said, this is the &lt;strong&gt;preferred&lt;/strong&gt; way to render Ghost's content, and there's little risk of cross-site scripting attacks here.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;At this point, all of the necessary code is in place locally for Next.js to retrieve blog posts and content from Ghost. If we click on any of the list items we should be taken to the corresponding dummy post.&lt;/p&gt;

&lt;p&gt;Hey! It's a blog!&lt;/p&gt;

&lt;p&gt;If you get hung up at any point while setting up Next.js, make sure that your directory names, slugs, props, and routing all line up correctly. I've tried to keep this demo project as skeletal as possible while still setting you up for an organized environment as you build it out from here.&lt;/p&gt;

&lt;p&gt;We're approaching the finish line now, and the final step is really more like a victory lap after the marathon of setting up Next.js!&lt;/p&gt;

&lt;p&gt;If you haven't yet, set up a new git repo for the project and push the code to GitHub now.&lt;/p&gt;

&lt;h2&gt;
  
  
  Deploy on Vercel
&lt;/h2&gt;

&lt;p&gt;Now is the time to sign up for an account with &lt;a href="https://www.vercel.com" rel="noopener noreferrer"&gt;Vercel&lt;/a&gt; if you don't have one.&lt;/p&gt;

&lt;p&gt;Once you're in, click on the &lt;strong&gt;New Project&lt;/strong&gt; button on the right side of the dashboard. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1621053861652%2FFIo5D94eX.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1621053861652%2FFIo5D94eX.png" alt="vercel-dash.png"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Select the repo from your GitHub account:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1621054053612%2FpC9gdserW.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1621054053612%2FpC9gdserW.png" alt="import-git.png"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;On the &lt;strong&gt;Select Vercel Scope&lt;/strong&gt; menu, select your account:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1621054223841%2FoBNPs6qqe.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1621054223841%2FoBNPs6qqe.png" alt="vercel-scope.png"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;On the &lt;strong&gt;Import Project&lt;/strong&gt; menu, expand the Environment Variables dropdown:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1621054413152%2Fg-Gi5zldE.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1621054413152%2Fg-Gi5zldE.png" alt="import-project.png"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This is where you give Vercel your two secret keys from your &lt;code&gt;.env.local&lt;/code&gt; file.&lt;/p&gt;

&lt;p&gt;If all goes according to plan, your site should build and deploy in no time:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1621054795508%2FTY-m3UGIu.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1621054795508%2FTY-m3UGIu.png" alt="success.png"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Congratulations indeed! &lt;/p&gt;

&lt;p&gt;You just launched a fully functional blog using the Van Gogh Stack!&lt;/p&gt;

&lt;p&gt;It's not much to look at just yet - we won't be playing with CSS here - but the sky's the limit!&lt;/p&gt;

&lt;h3&gt;
  
  
  Epilogue: Kill the Ghost
&lt;/h3&gt;

&lt;p&gt;When you're ready to create your own content and eliminate the dummy posts from Ghost, make your way back to the Ghost CMS admin panel on Heroku, at &lt;code&gt;https://YOURAPPNAME.herokuapp.com/ghost&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Navigate to the &lt;strong&gt;Staff&lt;/strong&gt; section in the bottom left corner of the admin panel:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1621040480452%2F7xE9TM-nx.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1621040480452%2F7xE9TM-nx.png" alt="ghost-author.png"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Click on 'Ghost' to visit the Author page. &lt;/p&gt;

&lt;p&gt;In the top right corner, click the cog to open up the menu and select 'Delete User':&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1621040628099%2FVdEtcoHNg.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1621040628099%2FVdEtcoHNg.png" alt="delete-ghost.png"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now Ghost's posts are all gone, and you have a blank canvas on which to paint your next masterpiece!&lt;/p&gt;

&lt;p&gt;Happy jamming, Jamstackers!! &lt;/p&gt;

&lt;p&gt;If and when you improve on what I've built here, be sure to &lt;a href="https://github.com/samuelsycamore/van-gogh" rel="noopener noreferrer"&gt;git at me on GitHub&lt;/a&gt;!&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;strong&gt;If you enjoyed this piece and you want to keep up with my work, you can &lt;a href="https://sycamore.design/newsletter" rel="noopener noreferrer"&gt;sign up for my email newsletter through this link&lt;/a&gt;. I promise to make every email something you will be excited to open!&lt;/strong&gt;
&lt;/h2&gt;

</description>
      <category>javascript</category>
      <category>jamstack</category>
      <category>nextjs</category>
      <category>ghost</category>
    </item>
    <item>
      <title>How to Set Your Rates as a Freelancer</title>
      <dc:creator>Sam Tanoak Sycamore</dc:creator>
      <pubDate>Sun, 09 May 2021 18:24:11 +0000</pubDate>
      <link>https://forem.com/tanoaksam/how-to-set-your-rates-as-a-freelancer-15ac</link>
      <guid>https://forem.com/tanoaksam/how-to-set-your-rates-as-a-freelancer-15ac</guid>
      <description>&lt;h2&gt;
  
  
  Why do freelancers have such a hard time explaining how they set their rates?
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Because there are so many "it depends" factors at play in every new project!
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;what's your relationship with the client?&lt;/li&gt;
&lt;li&gt;what is their budget?&lt;/li&gt;
&lt;li&gt;is there potential for more work in the future?&lt;/li&gt;
&lt;li&gt;would this deal open other doors elsewhere?&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;"Value" is subjective and complicated to quantify.&lt;/p&gt;

&lt;p&gt;What is valuable - and how valuable it is - varies greatly between clients and projects.&lt;/p&gt;

&lt;p&gt;For this reason:&lt;/p&gt;

&lt;h3&gt;
  
  
  Hourly rates are not ideal.
&lt;/h3&gt;

&lt;p&gt;I'm not saying don't ever accept hourly payment - get paid for your work - but the kind of work that freelancers do doesn't always equate well with this measurement of value.&lt;/p&gt;

&lt;p&gt;If I'm such a pro at what I do that it only takes me one hour to solve a problem that's costing your business $10k per month, does it make sense for me to be compensated $50 for one hour of my time?&lt;/p&gt;

&lt;p&gt;Because it sure sounds like the skill that I bring to the table is worth up to $10k here.&lt;/p&gt;

&lt;p&gt;You won't always have the power to negotiate in this way, of course.&lt;/p&gt;

&lt;p&gt;Depending on the circumstances, your client might just say "we have $1000 to spend on this, what can you do with that?"&lt;/p&gt;

&lt;h3&gt;
  
  
  You're going to have to learn - the hard way - how to estimate your projects.
&lt;/h3&gt;

&lt;p&gt;Nobody can do this step for you.&lt;/p&gt;

&lt;p&gt;And the only way you can learn how to do it, is to do it.&lt;/p&gt;

&lt;p&gt;You will make mistakes.&lt;/p&gt;

&lt;p&gt;That's ok! Chalk 'em up to learning experiences.&lt;/p&gt;

&lt;p&gt;Never cut corners or compromise on quality just because you miscalculated.&lt;/p&gt;

&lt;p&gt;Scope creep is something else altogether - if the client asks for more stuff, they have to sign a new contract outlining the new scope of the project, including the new fees they will incur.&lt;/p&gt;

&lt;p&gt;But if you accidentally end up paying yourself minimum wage because you bit off more than you could chew - it's still always in your best interest to deliver the best possible product.&lt;/p&gt;

&lt;p&gt;To come up with an estimate or a proposal for a project, you will need to consider:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;how much you would like to pay yourself&lt;/li&gt;
&lt;li&gt;how much you might need to spend on materials, research, outsourcing&lt;/li&gt;
&lt;li&gt;how much you will owe in taxes&lt;/li&gt;
&lt;li&gt;how much time it will take&lt;/li&gt;
&lt;li&gt;what is the going rate for this service&lt;/li&gt;
&lt;li&gt;what is the value to the client&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Those last 3 are worth considering in greater detail.&lt;/p&gt;

&lt;h3&gt;
  
  
  The Time it Takes
&lt;/h3&gt;

&lt;p&gt;Remember when I said don't bill hourly?&lt;/p&gt;

&lt;p&gt;Well, it's still good to have at least a fuzzy idea of how much you'd like to earn per hour for your services.&lt;/p&gt;

&lt;p&gt;Freelancing is all about optimizing that equation - getting paid more, in exchange for fewer hours.&lt;/p&gt;

&lt;p&gt;That's possible through experience, expertise and a solid reputation.&lt;/p&gt;

&lt;p&gt;When I built my first website for a client, I only had a rough idea of how much time it would take - I figured 10-20 hours, hopefully not more.&lt;/p&gt;

&lt;p&gt;At $1200, this time investment would earn me $60-120/hr.&lt;/p&gt;

&lt;p&gt;I would've been happy with any number in that range!&lt;/p&gt;

&lt;p&gt;In the end I walked away with about $75/hr before taxes. Not bad!&lt;/p&gt;

&lt;h3&gt;
  
  
  The Going Rate
&lt;/h3&gt;

&lt;p&gt;This will be your primary limiting factor, depending on your services and your clientele.&lt;/p&gt;

&lt;p&gt;When I was a music journalist, I was most commonly paid in free concert tickets and early access to new albums.&lt;/p&gt;

&lt;p&gt;As a musician - mainly just free beer.&lt;/p&gt;

&lt;p&gt;But if I knew enough about marketing to write something interesting in that field - there are publications that would happily pay me four or five figures for content that would be worth pennies in other industries.&lt;/p&gt;

&lt;p&gt;If nobody pays more than $200 for the thing you do, you're going to have a really hard time convincing anyone to pay you $500, let alone $2000.&lt;/p&gt;

&lt;h3&gt;
  
  
  The Value to the Client
&lt;/h3&gt;

&lt;p&gt;This is the true X-factor in the equation.&lt;/p&gt;

&lt;p&gt;But the only way you can tap into it is if you're diligent about doing your research into the client and the market.&lt;/p&gt;

&lt;p&gt;If the website you build for a local business owner could generate $100k in new sales this year -&lt;/p&gt;

&lt;p&gt;You should be compensated accordingly.&lt;/p&gt;

&lt;p&gt;It doesn't matter how long it takes. &lt;/p&gt;

&lt;p&gt;What matters is how valuable your service is to the company.&lt;/p&gt;

&lt;p&gt;That's tricky to quantify, as I mentioned before.&lt;/p&gt;

&lt;p&gt;Before the work ever begins, then -&lt;/p&gt;

&lt;p&gt;Your job is to &lt;em&gt;demonstrate&lt;/em&gt; the value that you can offer.&lt;/p&gt;

&lt;p&gt;It all comes down to knowing your worth, and knowing that what you do is valuable.&lt;/p&gt;

&lt;p&gt;Don't know it yet?&lt;/p&gt;

&lt;p&gt;That's fine, just get started - the confidence will follow.&lt;/p&gt;

&lt;p&gt;And that's about as concise as I can be when it comes to explaining how I price freelancing projects!&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;strong&gt;If you enjoyed this piece and you want to keep up with my work, you can &lt;a href="https://buttondown.email/samuelsycamore"&gt;sign up for my email newsletter through this link&lt;/a&gt;. I promise to make every email something you will be excited to open!&lt;/strong&gt;
&lt;/h2&gt;

</description>
    </item>
    <item>
      <title>Everything You Need to Know to Succeed as a Freelancer</title>
      <dc:creator>Sam Tanoak Sycamore</dc:creator>
      <pubDate>Thu, 06 May 2021 00:41:22 +0000</pubDate>
      <link>https://forem.com/tanoaksam/everything-you-need-to-know-to-succeed-as-a-freelancer-ffb</link>
      <guid>https://forem.com/tanoaksam/everything-you-need-to-know-to-succeed-as-a-freelancer-ffb</guid>
      <description>&lt;p&gt;First off: who am I to be offering this advice?&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;I've been freelancing off-and-on as a writer since 2012&lt;/li&gt;
&lt;li&gt;I have been self-employed or at least side-hustling for most of my adult life&lt;/li&gt;
&lt;li&gt;I currently freelance as a web developer and technical writer for agencies and tech startups&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;If you follow me on &lt;a href="https://www.twitter.com/tanoaksam"&gt;Twitter&lt;/a&gt;, you're probably most interested in how to get started as a freelance web developer. &lt;/p&gt;

&lt;p&gt;If you're interested in getting paid to write, a lot of my advice will apply to you, too.&lt;/p&gt;

&lt;h2&gt;
  
  
  1. You Need a Vertical
&lt;/h2&gt;

&lt;p&gt;When someone asks about your taste in music, the worst answer you can give is "I like a little bit of everything."&lt;/p&gt;

&lt;p&gt;OK, but- what are you &lt;em&gt;actually&lt;/em&gt; passionate about?&lt;/p&gt;

&lt;p&gt;The same goes for freelancing!&lt;/p&gt;

&lt;p&gt;Your "vertical" is the market or industry that you target.&lt;/p&gt;

&lt;p&gt;You need to be very specific about who you serve, and what you offer.&lt;/p&gt;

&lt;p&gt;I got my start in freelancing as a music journalist. I wrote about specific genres of music, and established a name for myself as a vocal supporter of my local music scene.&lt;/p&gt;

&lt;p&gt;I was "that local music guy."&lt;/p&gt;

&lt;p&gt;Now that I'm in tech, people know me as "that tree-hugging dude who's into the Jamstack."&lt;/p&gt;

&lt;p&gt;You need to be able to sum up your personal brand similarly.&lt;/p&gt;

&lt;p&gt;Speaking of which...&lt;/p&gt;

&lt;h2&gt;
  
  
  2. You Need a Personal Brand
&lt;/h2&gt;

&lt;p&gt;I know. It sounds gross. It grossed me out for way longer than it should have.&lt;/p&gt;

&lt;p&gt;But look- if you interact with other people in public, guess what? &lt;/p&gt;

&lt;p&gt;You have a personal brand.&lt;/p&gt;

&lt;p&gt;And if you're intentional about crafting that brand, you can establish yourself as an authority on the services you offer within your vertical.&lt;/p&gt;

&lt;p&gt;This is another instance where it really pays off to "niche down." &lt;/p&gt;

&lt;p&gt;The more specific your niche is, the easier it will be for you to make yourself known as the go-to person within that niche.&lt;/p&gt;

&lt;p&gt;How do you become the go-to person for &lt;em&gt;anything?&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  3. You Need to Network
&lt;/h2&gt;

&lt;p&gt;This was another one that I was allergic to in my younger years, and I just ended up shooting myself in the foot over the long run.&lt;/p&gt;

&lt;p&gt;Establishing professional connections doesn't have to feel weird or phony. &lt;/p&gt;

&lt;p&gt;It's only disingenuous if &lt;em&gt;you&lt;/em&gt; decide to be disingenuous about the relationships that you cultivate!&lt;/p&gt;

&lt;p&gt;The people you want to network with know how this game is played. &lt;/p&gt;

&lt;p&gt;They aren't going to think it's weird if you DM with a question or ask to have a chat. &lt;/p&gt;

&lt;p&gt;That's how we forge these relationships.&lt;/p&gt;

&lt;p&gt;Twitter is where the vast majority of my networking takes place. &lt;/p&gt;

&lt;p&gt;It's truly incredible the kinds of relationships you can build purely by sharing what you do.&lt;/p&gt;

&lt;p&gt;If you want to know more about how I tackled networking when I was brand new to the tech industry, check out my piece here:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://dev.to/tanoaksam/my-networking-strategy-for-making-meaningful-connections-in-tech-1702"&gt;My Networking Strategy for Making Meaningful Connections in Tech&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  4. You Need Clients
&lt;/h2&gt;

&lt;p&gt;Well, duh. Easier said than done, right?&lt;/p&gt;

&lt;p&gt;How the heck do you land that first client when you don't have any experience, nor much of a professional network?&lt;/p&gt;

&lt;p&gt;The short answer is: &lt;/p&gt;

&lt;p&gt;Be very vocal about the services you offer!&lt;/p&gt;

&lt;p&gt;Your first client could easily be a family member, a friend of a friend, that dude from college you're still friends with on Facebook...&lt;/p&gt;

&lt;p&gt;Start with your personal network. You don't have to treat it like multi-level marketing or anything.&lt;/p&gt;

&lt;p&gt;Just make it known what you're up to and what you can do.&lt;/p&gt;

&lt;p&gt;You never know who might know somebody who knows somebody who might want to hire you.&lt;/p&gt;

&lt;p&gt;If that doesn't work for you, another approach is cold-emailing.&lt;/p&gt;

&lt;p&gt;I had some success at this when I was just getting started. &lt;/p&gt;

&lt;p&gt;That said: it's a numbers game. It can be &lt;em&gt;very&lt;/em&gt; tedious work, and a full-time commitment just to find &lt;em&gt;prospective&lt;/em&gt; leads.&lt;/p&gt;

&lt;p&gt;The vast majority of emails you send will be ignored.&lt;/p&gt;

&lt;p&gt;For every 100 &lt;em&gt;carefully targeted, meticulously curated&lt;/em&gt; emails you send, you might expect to close 1 or 2 deals if you're lucky.&lt;/p&gt;

&lt;p&gt;Nobody said it was easy.&lt;/p&gt;

&lt;p&gt;If you want to know more about how I did it, you can read about my workflow here:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://tanoaksam.hashnode.dev/freelancing-workflow"&gt;My Freelancing Workflow, From Cold Leads to Paid Invoices&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  5. You Need Patience and Diligence
&lt;/h2&gt;

&lt;p&gt;I don't care how talented you are - this isn't going to happen overnight.&lt;/p&gt;

&lt;p&gt;The only way this is going to work over the long-term is if you are diligent about &lt;em&gt;establishing your reputation.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;People who casually follow me on Twitter know me as a freelancer in the tech industry - &lt;em&gt;that wasn't an accident!!&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;I put in the work over time, and it has paid off.&lt;/p&gt;

&lt;p&gt;Essentially all of my marketing happens on Twitter now.&lt;/p&gt;

&lt;p&gt;People approach me with work now - sometimes more than I can take on.&lt;/p&gt;

&lt;p&gt;All because I have been intentional about how I present my personal brand to the world.&lt;/p&gt;

&lt;h2&gt;
  
  
  6. You Need to Upsell
&lt;/h2&gt;

&lt;p&gt;Who are the people you should be targeting the most with your marketing?&lt;/p&gt;

&lt;p&gt;The people who are already paying you!&lt;/p&gt;

&lt;p&gt;The simplest way to land more work is to make it known to your existing clients that you can be hired for additional work.&lt;/p&gt;

&lt;p&gt;See something that needs doing? Write a proposal outlining how you would do it, and why it matters!&lt;/p&gt;

&lt;p&gt;Ask - directly - for referrals!&lt;/p&gt;

&lt;p&gt;There's a good chance your clients know other people who might want to hire you. &lt;/p&gt;

&lt;p&gt;But most people aren't going to go out of their way to make those connections on your behalf.&lt;/p&gt;

&lt;p&gt;Unless you ask.&lt;/p&gt;

&lt;h2&gt;
  
  
  7. You Need Multiple Revenue Streams
&lt;/h2&gt;

&lt;p&gt;My career as a music journalist imploded in 2014 when my one long-term client suddenly shut down and I couldn't sustain myself off of free concert tickets alone.&lt;/p&gt;

&lt;p&gt;I put all of my eggs in one basket, and didn't prioritize forging stronger relationships with other potential clients while I was so comfortable with the one.&lt;/p&gt;

&lt;p&gt;When you're self-employed, nobody owes you a paycheck just for showing up.&lt;/p&gt;

&lt;p&gt;When the contract is fulfilled - or otherwise can't be renewed - you're on your own.&lt;/p&gt;

&lt;p&gt;Your networking and marketing efforts can't stop simply because the work is flowing steadily today.&lt;/p&gt;

&lt;p&gt;Even if you have one or two big clients paying your bills at the moment, you should always be diligent about forging new relationships and strengthening older ones. &lt;/p&gt;

&lt;p&gt;You never know where your next big deal might come from.&lt;/p&gt;

&lt;p&gt;Also- consider ways you might be able to "productize" your services.&lt;/p&gt;

&lt;p&gt;If you're a subject matter expert, you might write a book or launch a course.&lt;/p&gt;

&lt;p&gt;If you have a particular service with a process that looks pretty much the same for all clients - like an SEO audit or a content strategy consultation - you could turn this into a flat-rate product rather than charging an hourly fee.&lt;/p&gt;

&lt;p&gt;I'm not a fan of the term "passive income" - the work it takes upfront is anything but passive.&lt;/p&gt;

&lt;p&gt;That said - it never hurts to have some extra cash show up on a regular basis for work you completed months or years ago.&lt;/p&gt;

&lt;h2&gt;
  
  
  8. You Need Tools to Make Your Life Easier
&lt;/h2&gt;

&lt;p&gt;I don't know what I would do without Freshbooks for accounting and invoicing.&lt;/p&gt;

&lt;p&gt;For digital contracts you can use HelloSign or DocuSign - I've found them to be pretty much the same on the free tier.&lt;/p&gt;

&lt;p&gt;All of my research, note-taking, and writing happens in &lt;a href="https://www.obsidian.md"&gt;Obsidian&lt;/a&gt;. There are many other options out there for this kind of thing, but I'm happy with my decision.&lt;/p&gt;

&lt;p&gt;You will probably want to set yourself up with Google Workspace for a custom domain email, and Search Console to keep track of analytics on your portfolio site. &lt;/p&gt;

&lt;p&gt;(You &lt;em&gt;do&lt;/em&gt; have a portfolio site, right?)&lt;/p&gt;

&lt;p&gt;Finally, consider ways to manage and track your time. &lt;/p&gt;

&lt;p&gt;Calendly is a fantastic tool for streamlining the process of scheduling meetings.&lt;/p&gt;

&lt;p&gt;I'm a big fan of the Pomodoro method for time management, which involves setting a timer for 25 minutes of focused work, followed by a 5 minute break. &lt;/p&gt;

&lt;p&gt;This is how I structure my daily schedule and keep track of how much time I invest in any given project.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;strong&gt;If you enjoyed this piece and you want to keep up with my work, you can &lt;a href="https://buttondown.email/samuelsycamore"&gt;sign up for my email newsletter through this link&lt;/a&gt;. I promise to make every email something you will be excited to open!&lt;/strong&gt;
&lt;/h2&gt;

</description>
      <category>freelancing</category>
      <category>career</category>
      <category>webdev</category>
    </item>
    <item>
      <title>A Clueless Newbie's Guide to Headless CMS &amp; the Jamstack</title>
      <dc:creator>Sam Tanoak Sycamore</dc:creator>
      <pubDate>Tue, 02 Mar 2021 18:52:07 +0000</pubDate>
      <link>https://forem.com/tanoaksam/a-clueless-newbie-s-guide-to-headless-cms-and-the-jamstack-2h86</link>
      <guid>https://forem.com/tanoaksam/a-clueless-newbie-s-guide-to-headless-cms-and-the-jamstack-2h86</guid>
      <description>&lt;p&gt;As a web developer, I'm always on the hunt for the latest and greatest ways to improve my workflow and deliver a superior product.&lt;/p&gt;

&lt;p&gt;When I first got started freelancing, I leaned on WordPress as the safe, tried-and-true option for my clients who needed a content management system (CMS) to handle a blog or portfolio.&lt;/p&gt;

&lt;p&gt;I had been working with HTML, CSS, and vanilla JavaScript up to this point, and making the jump to basic PHP development with WP wasn't too difficult. &lt;/p&gt;

&lt;p&gt;But as I was getting into WordPress, I also started learning React at the same time.&lt;/p&gt;

&lt;p&gt;And the difference was like night and day.&lt;/p&gt;

&lt;p&gt;PHP and JSX/JavaScript solve the problem of inserting logic into markup in similar ways.&lt;/p&gt;

&lt;p&gt;But from the perspective of "developer experience," once I got the hang of the modern JS dev environment and component-based building with React, I couldn't stand the thought of returning to monolithic index.html/php/css files ever again.&lt;/p&gt;

&lt;p&gt;And don't even talk to me about XAMPP/Apache/MySQL!!!&lt;/p&gt;

&lt;p&gt;I knew there must be a way to give my clients what they need while enabling me to work with the latest tools.&lt;/p&gt;

&lt;h2&gt;
  
  
  Headless What-Now?
&lt;/h2&gt;

&lt;p&gt;I'd been a fly on the wall for conversations on Twitter about headless CMS and the Jamstack, but struggled to make sense out of most of it.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Me, not too long ago, if you'd asked me about headless CMS:&lt;/em&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"It's like, a different way of doing a CMS than how WordPress does it. I think? Like it's just the admin-panel part of WordPress I guess, and you use APIs somehow to connect that to your front end, which can be built however you want. But then this guy's over here talking to me about headless WordPress so like, ...?"&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Actually, that's not a terrible understanding of it, in retrospect.&lt;/p&gt;

&lt;p&gt;But why choose a headless CMS, aside from the fact that JavaScript is just cooler than PHP? (Laravel devs, don't @ me)&lt;/p&gt;

&lt;p&gt;Why not stick to the tried-and-true, all-in-one WordPress CMS? Going headless seems like maybe just a whole lot more work to achieve the same end goal, no?&lt;/p&gt;

&lt;p&gt;To better understand what's so cool about headless CMS, first we need to have a clear understanding of how a "traditional" CMS works.&lt;/p&gt;

&lt;h2&gt;
  
  
  Traditional CMS: WordPress
&lt;/h2&gt;

&lt;p&gt;&lt;em&gt;(There are others, but really, WP is thee undisputed champ in this realm)&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;First, I want to say that for all the hate it gets, WordPress. Just. Works.&lt;/p&gt;

&lt;p&gt;It ain't broke, and it don't need fixin'!&lt;/p&gt;

&lt;p&gt;If WordPress meets your needs, by all means - stick with it.&lt;/p&gt;

&lt;p&gt;With a traditional CMS like WordPress, your front end, back end, and database full of content all live together as one tangled-up unit on your server. &lt;/p&gt;

&lt;p&gt;They are inextricably bound up together, so if you want to make substantial changes to any of these layers, you often have to rebuild the whole thing from the ground up.&lt;/p&gt;

&lt;p&gt;Because WordPress is a "one-size-fits-all" option, as a developer you will sometimes find yourself at the mercy of the platform in terms of what you can build, whether you're restricted by proprietary tools, or else frustrated by unnecessary, unused bloat.&lt;/p&gt;

&lt;p&gt;And since WP is built with PHP, it requires a fair amount of work from the server each time a client comes by to visit. This &lt;em&gt;can&lt;/em&gt; slow things down (but may be ultimately inconsequential), and it may not really be necessary for the purposes of the site - a page that never gets changed (like an 'About Us' page) just doesn't &lt;em&gt;need&lt;/em&gt; to be rendered by the server every time it gets called up.&lt;/p&gt;

&lt;h2&gt;
  
  
  Headless CMS
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Prismic, Ghost, Strapi, Forestry, et al.
&lt;/h3&gt;

&lt;p&gt;When you go headless, the biggest change is that your front end, back end, and database all exist as independent entities.&lt;/p&gt;

&lt;p&gt;Jamstackers describe this as &lt;a href="https://jamstack.org/glossary/decoupling/"&gt;&lt;em&gt;decoupling&lt;/em&gt;&lt;/a&gt; the "presentation layer" (front end) from the "logic/data layer" (back end and database).&lt;/p&gt;

&lt;p&gt;Most headless CMS look and feel a lot like the WordPress admin panel, if you're familiar with that. And with good reason: like said, it ain't broke! No need to reinvent the wheel on that one.&lt;/p&gt;

&lt;p&gt;But your front-end and your CMS are no longer permanently bound up together, and they need a way to talk to each other. They do this by way of APIs.&lt;/p&gt;

&lt;p&gt;For both the developer and the content creator, decoupling means:&lt;/p&gt;

&lt;h4&gt;
  
  
  FREEDOM!!
&lt;/h4&gt;

&lt;p&gt;Now you have myriad options for how to construct and configure each element of the puzzle. And they all function independently of one another, meaning the dev team and the content team can both focus on what they do best without stepping on their coworkers' toes.&lt;/p&gt;

&lt;p&gt;If you need to make substantial changes -- let's say you rebuild the front end, or you need to scale up your CMS to meet increasing traffic -- you can do so without interrupting any of the other moving parts.&lt;/p&gt;

&lt;p&gt;Best of all, depending on your needs:&lt;/p&gt;

&lt;p&gt;&lt;em&gt;You can often deploy a fully functional Jamstack site for free, indefinitely -- no hosting fees necessary.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;From the perspective of a freelance developer, how cool is it to be able to pitch to your clients that once they make the jump, they won't have to pay for hosting anymore?!&lt;/p&gt;

&lt;p&gt;(And if there comes a time where they exceed their allotted free bandwidth, many providers offer gentle pricing tiers to scale up.)&lt;/p&gt;

&lt;p&gt;"OK, that sounds pretty cool. But how the heck does any of this actually work?"&lt;/p&gt;

&lt;h2&gt;
  
  
  Enter the Jamstack
&lt;/h2&gt;

&lt;p&gt;This will start to make more sense if you know that JAM is an acronym that stands for &lt;strong&gt;JavaScript + APIs + Markup.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;In this model, you get to reap all the benefits of the modern component-based &lt;strong&gt;JavaScript&lt;/strong&gt; paradigm through the libraries/frameworks of your choice. &lt;em&gt;(Note: the J may stand for JS, but any language/library/framework that can render a front end will do.)&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Data (your site's content) is fed in through an &lt;strong&gt;API&lt;/strong&gt; -- in this case, that would be our headless CMS. For externally-hosted options, this is sometimes described as &lt;em&gt;CaaS:&lt;/em&gt; "Content as a Service."&lt;/p&gt;

&lt;p&gt;And unlike a PHP-based setup which requires many calls from the client to the server to render a page, Jamstackers like to build with &lt;em&gt;static site generators&lt;/em&gt; like Gatsby, Next.js, and Eleventy (my personal favorite). These frameworks allow you to create sites where all of the rendering happens at &lt;em&gt;build time&lt;/em&gt;, so the client is delivered a lightning-fast &lt;em&gt;static page&lt;/em&gt; that doesn't need to interact with the server. This is the &lt;strong&gt;Markup&lt;/strong&gt; in our JAM.&lt;/p&gt;

&lt;p&gt;That last part - the minimal static build - is one big reason why it's cheap and often free to host Jamstack sites. &lt;/p&gt;

&lt;p&gt;The "presentation layer" - what gets called up when a client visits the site - takes up such a minuscule amount of space on the server that it's essentially irrelevant in terms of its bandwidth needs.&lt;/p&gt;

&lt;p&gt;One of the primary selling points of the Jamstack model is that it's &lt;strong&gt;~highly distributed~&lt;/strong&gt; so instead of the whole shebang being served up by a single host, it relies on multiple decentralized sources coming together -- each of which can be configured, customized, scaled up/down, or swapped out as needed.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;(&lt;a href="https://www.netlify.com"&gt;Netlify&lt;/a&gt;, &lt;a href="https://www.vercel.com"&gt;Vercel&lt;/a&gt;, and &lt;a href="https://www.heroku.com"&gt;Heroku&lt;/a&gt; are some of the bigger names in the realm of mostly-free hosting and deployment.)&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Should You Go Headless?
&lt;/h2&gt;

&lt;p&gt;Obviously I can't answer that question for you - it's up to you, your team, and the needs of the project/client to determine that.&lt;/p&gt;

&lt;p&gt;Like said: if you need something that &lt;em&gt;just works,&lt;/em&gt; WordPress is a fantastic solution. Don't let the haters get you down.&lt;/p&gt;

&lt;p&gt;But if you're thinking about taking the plunge, here are some of the primary points to consider:&lt;/p&gt;

&lt;h2&gt;
  
  
  Pros
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Decoupling means greater autonomy for development &amp;amp; content creation teams&lt;/li&gt;
&lt;li&gt;Most devs would agree that the modern JS ecosystem lends itself to the best developer experience&lt;/li&gt;
&lt;li&gt;You have &lt;a href="https://jamstack.org/headless-cms/"&gt;&lt;em&gt;tons&lt;/em&gt; of options for services to choose from&lt;/a&gt;, and they vary widely in their offerings&lt;/li&gt;
&lt;li&gt;It's &lt;em&gt;future-proof,&lt;/em&gt; meaning it will be easier to jump to a new service or build a new presentation layer in the future if needed&lt;/li&gt;
&lt;li&gt;CaaS makes your content &lt;em&gt;reusable,&lt;/em&gt; meaning it can be easily delivered to multiple touch-points and presented in different ways from a single CMS source&lt;/li&gt;
&lt;li&gt;Hosting is often free/very cheap, and CaaS providers usually make it relatively painless to scale up as needed&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Cons
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;You are now at the mercy of multiple third-party services instead of a single host to deliver your site/app, meaning there are more ways that things could go wrong&lt;/li&gt;
&lt;li&gt;Maybe it's not &lt;em&gt;more&lt;/em&gt; work than setting up a WordPress site, but there are more moving parts to address and configure, which can be overwhelming&lt;/li&gt;
&lt;li&gt;You have &lt;em&gt;tons&lt;/em&gt; of options for services to choose from, and they vary widely in their offerings (this is both a Pro and a Con, but I'm adding it to the "con" pile because this means it will likely require a significant amount of research plus trial and error to find the best option for your project)&lt;/li&gt;
&lt;li&gt;Since you're beholden to your new CaaS overlords to store and deliver your content, you will have to endure policy/feature/pricing changes that could potentially throw a wrench in your whole system at a moment's notice&lt;/li&gt;
&lt;li&gt;It might not be as easy as you'd think/hope it'd be to migrate away from your chosen headless CMS in the future&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  The Takeaway
&lt;/h2&gt;

&lt;p&gt;WordPress is a battle-tested traditional CMS that can handle pretty much anything you might toss at it. &lt;em&gt;Legacy&lt;/em&gt; is clearly not the only reason why it powers the lion's share of the Internet.&lt;/p&gt;

&lt;p&gt;That said, if you're seeking a superior developer experience and greater flexibility, I think decoupling with a headless CMS is the way to go.&lt;/p&gt;

&lt;p&gt;It's also worth noting that I've mostly been describing cloud-hosted services here. Some headless CMS options like Ghost and &lt;a href="https://strapi.io/"&gt;Strapi&lt;/a&gt; are self-hosted, giving you more control over how (and &lt;em&gt;where&lt;/em&gt;) your content is managed and delivered. This may be preferable for some applications.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Also&lt;/em&gt; also: yes, headless WordPress is a thing. In essence, you get all the benefits of decoupling but you get to keep the wp-admin panel. I'm told WP has one of the best APIs out there! Worth considering.&lt;/p&gt;

&lt;p&gt;I hope this introductory guide has helped to shed some light on this rather esoteric topic. If you have any questions - or you just want to take me to task for something I've misunderstood here - please don't hesitate to reach out!&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;strong&gt;If you enjoyed this piece and you want to keep up with my work, you can &lt;a href="https://buttondown.email/samuelsycamore"&gt;sign up for my email newsletter through this link&lt;/a&gt;. I promise not to bug you more than a few times a month!&lt;/strong&gt;
&lt;/h2&gt;

</description>
      <category>wordpress</category>
      <category>javascript</category>
      <category>jamstack</category>
      <category>cms</category>
    </item>
    <item>
      <title>Wildfire Refugee to Full-Stack Web Developer: My Journey</title>
      <dc:creator>Sam Tanoak Sycamore</dc:creator>
      <pubDate>Sat, 27 Feb 2021 19:31:10 +0000</pubDate>
      <link>https://forem.com/tanoaksam/wildfire-refugee-to-full-stack-developer-my-journey-4lbe</link>
      <guid>https://forem.com/tanoaksam/wildfire-refugee-to-full-stack-developer-my-journey-4lbe</guid>
      <description>&lt;p&gt;Picture this: &lt;/p&gt;

&lt;p&gt;Charred leaves and ash rain down from the sky, covering your front porch in a kind of post-apocalyptic snow.&lt;/p&gt;

&lt;p&gt;It's the middle of the day, but it's so dark out that crickets are chirping. &lt;/p&gt;

&lt;p&gt;&lt;em&gt;They think it's nighttime.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;The sun is a muted red dot casting a sickly yellow shade on your surroundings wherever it can peek through the gray-black smoke.&lt;/p&gt;

&lt;p&gt;Wildfires are quickly approaching your town, and it's time to get out.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Now.&lt;/em&gt;&lt;/p&gt;




&lt;p&gt;This was what I - along with hundreds of thousands of others - experienced when the CZU Lightning Complex wildfires tore through the Santa Cruz Mountains of coastal California in August 2020.&lt;/p&gt;

&lt;p&gt;All told, the fires would burn for almost 40 days and consume over 86,000 acres of land. Miraculously, only one person lost their life, but over 1000 homes were destroyed and thousands more threatened.&lt;/p&gt;

&lt;p&gt;I chose to evacuate before the official order came through, and was very fortunate to have places to crash for the three weeks that I was displaced. The fires came within a half-mile of the small mountain town where I live, but my &lt;a href="https://dev.to/tanoaksam/learning-to-code-in-an-off-grid-cabin-in-the-woods-592l"&gt;idyllic off-grid sanctuary&lt;/a&gt; was mercifully spared.&lt;/p&gt;




&lt;p&gt;Anyone who's suddenly had their life turned upside down by an event like this can tell you that it forces you to reevaluate lots of big-picture questions in your life.&lt;/p&gt;

&lt;p&gt;I had already been feeling somewhat directionless since calling it quits on my podcast, &lt;a href="https://www.thegoodliferevival.com"&gt;The Good Life Revival&lt;/a&gt;, earlier that year. &lt;/p&gt;

&lt;p&gt;That project brought more joy and opportunity into my life than anything I'd ever experienced before, but after dedicating myself to it for the better part of three years, I had to accept the tough reality that it would always be a "passion project" and never a "viable business that could support a family."&lt;/p&gt;

&lt;p&gt;The podcast was the best outlet I'd ever found for channeling my passion about educating others on the wonders of the natural world, and the need for radical action in response to a rapidly changing global climate. &lt;/p&gt;

&lt;p&gt;I was able to cultivate a very nurturing community that encouraged me to practice what I preach: I'm not just going to talk about minimizing my carbon footprint -- I'll go live off-grid, grow my own food, and report back with my experiences.&lt;/p&gt;

&lt;p&gt;And that's exactly what I did.&lt;/p&gt;

&lt;p&gt;But how much of an impact can you really have as one person, alone in the woods with no electricity or running water?&lt;/p&gt;




&lt;p&gt;While I was in limbo over those three weeks during the fires, I became utterly obsessed with all of the data I could find regarding their movement. &lt;/p&gt;

&lt;p&gt;I spent countless long hours anxiously hitting the refresh button on every app I could find, zooming in as close as possible to see if any of the little 🔥 icons had gotten any closer to my neighborhood in the last 10 seconds.&lt;/p&gt;

&lt;p&gt;It was fascinating to me how these services could pull data from satellites in real-time and visualize it on a map, and I observed that there were many different ways to do this. &lt;/p&gt;

&lt;p&gt;I was especially interested in the work of &lt;a href="https://www.zonehaven.com/"&gt;Zonehaven&lt;/a&gt; during this time, and frustrated when their service quickly went down due to being thoroughly overloaded.&lt;/p&gt;

&lt;p&gt;It occurred to me that potentially hundreds of thousands of people just like me were relying on Zonehaven and a handful of other services to try to gather the latest information about this unfolding disaster.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;This&lt;/em&gt;, I realized, was one way that I could make a more meaningful impact, and potentially help others when they need it the most. &lt;/p&gt;

&lt;p&gt;And on top of that, it might actually be a viable career path that would enable me to start a family one day.&lt;/p&gt;




&lt;p&gt;As soon as I was able to return home, I started teaching myself how to code.&lt;/p&gt;

&lt;p&gt;I found a job in landscaping to make ends meet, and I'd wake up at 4:00 AM every day and study for two hours before heading into town for work from 9 to 5.&lt;/p&gt;

&lt;p&gt;I looked into the tech stacks being used by the companies whose work I admired, and became acquainted with some of the people involved. I discovered that the visualization and UI was mostly being done with JavaScript and React.&lt;/p&gt;

&lt;p&gt;So that's what I decided to learn.&lt;/p&gt;

&lt;p&gt;After a month or two of studying HTML and CSS, I stumbled upon a video tutorial from Traversy Media, one of the best resources out there for learning to code.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.youtube.com/watch?v=ontX4zfVqK8"&gt;&lt;em&gt;Build a Wildfire Tracker With React &amp;amp; NASA API.&lt;/em&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;One day,&lt;/em&gt; I told myself, &lt;em&gt;I will have the skills to be able to follow this tutorial and understand what's going on.&lt;/em&gt;&lt;/p&gt;




&lt;p&gt;That day came in February 2021. &lt;/p&gt;

&lt;p&gt;Over the previous month, I had learned the basics of React and component-based development, as well as how to fetch data from APIs.&lt;/p&gt;

&lt;p&gt;I returned to the tutorial video, and to my pleasant surprise I found it not only &lt;em&gt;comprehensible&lt;/em&gt; but actually kind of, well, &lt;em&gt;simple.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;I followed the instructor note-for-note the first time around, then deleted the code and started over. I couldn't match it perfectly on my own, but got close enough painting in broad strokes that I was satisfied with what I'd learned. &lt;/p&gt;

&lt;p&gt;I even expanded the functionality to include other natural events like severe storms, floods, and earthquakes.&lt;/p&gt;

&lt;p&gt;Granted: the Traversy app is &lt;em&gt;very&lt;/em&gt; bare-bones, and orders of magnitude less complex than what companies like Zonehaven are building, without a doubt.&lt;/p&gt;

&lt;p&gt;But it was a huge eye-opener for me to see that I really did possess the skills necessary to tap into real satellite data and represent it visually on a map.&lt;/p&gt;

&lt;p&gt;What an incredible power to be able to wield!&lt;/p&gt;

&lt;p&gt;That's when I knew that I'd be in this for the long haul.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;strong&gt;If you enjoyed this piece and you want to keep up with my work, you can &lt;a href="https://buttondown.email/samuelsycamore"&gt;sign up for my email newsletter through this link&lt;/a&gt;. I promise to make every email something you will be excited to open!&lt;/strong&gt;
&lt;/h2&gt;

</description>
      <category>100devs</category>
      <category>career</category>
    </item>
    <item>
      <title>My Freelancing Workflow, From Cold Leads to Paid Invoices</title>
      <dc:creator>Sam Tanoak Sycamore</dc:creator>
      <pubDate>Sun, 31 Jan 2021 19:32:39 +0000</pubDate>
      <link>https://forem.com/tanoaksam/my-freelancing-workflow-from-cold-leads-to-paid-invoices-38hd</link>
      <guid>https://forem.com/tanoaksam/my-freelancing-workflow-from-cold-leads-to-paid-invoices-38hd</guid>
      <description>&lt;p&gt;In January 2021, I made a sudden transition to freelance web development. I wasn't sure if I was ready to seek work as a developer, but the universe said:&lt;/p&gt;

&lt;p&gt;"It's now or never."&lt;/p&gt;

&lt;p&gt;After reviewing over 500 websites in my vertical, I selected 100 businesses to cold-email with a pitch offering my services. &lt;/p&gt;

&lt;p&gt;Eight got back to me: five were retired, three were interested. I walked away from one of those interested after receiving a low-ball offer, and the other two requested proposals outlining the scope of work and my rates.&lt;/p&gt;

&lt;p&gt;This was the point where I realized,&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"Oh snap! I have a real business here. Now I actually have to figure out the logistics of seeing these projects through!"&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Google wasn't much help on this topic - content in this genre tends to be heavy on fluff and light on actionable advice.&lt;/p&gt;

&lt;p&gt;So I forged my own path based on what I could find and what I know from previous business endeavors and work experience. It ain't perfect but it's good enough to get started.&lt;/p&gt;

&lt;p&gt;Please keep in mind that I am anything but an expert! And nothing here constitutes legal or business advice. &lt;/p&gt;

&lt;p&gt;My results here are definitely not statistically significant, and I look forward to gaining more experience so that I might be able to share more accurate numbers in the future in terms of what others might expect. I just want to help mellow out the learning curve so other people can get up and running quickly.&lt;/p&gt;

&lt;p&gt;Some of the services I will recommend are &lt;em&gt;not&lt;/em&gt; free. I wish I had free alternatives, but often the "alternative" is just to invest countless hours of tedious labor into something that would otherwise cost $10-20 to automate in an instant.&lt;/p&gt;

&lt;p&gt;That said, as someone who's been self-employed in other industries, I can say that web development requires exceptionally low startup costs relative to the return on your investment. If you are willing to part with $50-100 in your first month, you'll be fully equipped to efficiently land deals worth thousands of bucks.&lt;/p&gt;




&lt;p&gt;My freelancing pal &lt;a href="https://www.cliowebsites.com"&gt;Nat Miletic&lt;/a&gt; pointed this out, and I really believe it has been crucial to my early wins: &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;I have been very intentional about who I am targeting and what's unique about what I offer.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  Pick a Vertical
&lt;/h2&gt;

&lt;p&gt;Your vertical market is the clientele that you will target who all serve similar clients themselves; think gyms, restaurants, plumbers, barber shops. &lt;/p&gt;

&lt;p&gt;You need to "niche down," to borrow from online marketing terminology, and specialize in serving a specific market.&lt;/p&gt;

&lt;p&gt;I worked in skilled trades for the last five years, so I speak the language of that industry. I know how to describe things like exterior hardscapes, kitchen renovations, and hardwood flooring. When I decided to start freelancing in web dev, I knew right away that my target clients would be residential contractors in my region.&lt;/p&gt;

&lt;p&gt;Picking a vertical might not be as simple for you as it was for me. Things to consider:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;What can &lt;em&gt;you&lt;/em&gt; offer to business owners in this field that is unique? (Being able to speak competently about their industry is a huge plus - one of my landscaper clients really appreciates that I am also an avid gardener.)&lt;/li&gt;
&lt;li&gt;What are the profit margins in this industry? Does anyone have a budget for your services?&lt;/li&gt;
&lt;li&gt;What are businesses in this field using their websites for? If they just need an "online business card," your job as a developer will be much simpler than if they need some kind of database or e-commerce functionality. &lt;/li&gt;
&lt;li&gt;What are the demographics of the clientele your prospects are serving? High-end businesses will have bigger budgets for branding and marketing expenses, but smaller and newer businesses might have a greater need to generate new leads for themselves through their online presence.&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;What services can you upsell your clients on? After all, if you're planning to build a business's website from start to finish, you're not &lt;em&gt;just&lt;/em&gt; a developer. You're also taking on the roles of:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;designer&lt;/li&gt;
&lt;li&gt;copywriter &amp;amp; editor&lt;/li&gt;
&lt;li&gt;SEO strategist&lt;/li&gt;
&lt;li&gt;content &amp;amp; multimedia manager&lt;/li&gt;
&lt;li&gt;publisher &amp;amp; technical support&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;...and you should be charging for each of these services in your proposals, commensurate with your experience! More on proposals as we dig deeper.&lt;/p&gt;

&lt;h2&gt;
  
  
  Generate Leads
&lt;/h2&gt;

&lt;p&gt;I use &lt;a href="https://d7leadfinder.com"&gt;d7leadfinder&lt;/a&gt; to generate lists of businesses in my vertical from the cities in my region.&lt;/p&gt;

&lt;p&gt;It costs $25/month and can potentially give you more prospects in a single day than you would be able to handle in a year.&lt;/p&gt;

&lt;p&gt;You select a keyword (choosing from a predefined list) like "Plumbing", "Hair Salons", etc. and a city. It will work its magic scraping the internet for a few minutes, then spit out a spreadsheet with contact info for all of the relevant businesses that match your query.&lt;/p&gt;

&lt;p&gt;Your mileage may vary, but when I search "Landscaping" in "Santa Cruz, CA" for example, I get about 100 relevant listings.&lt;/p&gt;

&lt;p&gt;Here's where you're gonna invest a lot of time, and I don't know a good way around it:&lt;/p&gt;

&lt;p&gt;You have to go through this list and look at every. single. website. &lt;/p&gt;

&lt;p&gt;one &lt;/p&gt;

&lt;p&gt;at &lt;/p&gt;

&lt;p&gt;a &lt;/p&gt;

&lt;p&gt;time.&lt;/p&gt;

&lt;p&gt;It's going to take a long time. &lt;/p&gt;

&lt;p&gt;Put something on in the background that will keep you in a good mood. I like old &lt;em&gt;Simpsons&lt;/em&gt; reruns.&lt;/p&gt;

&lt;p&gt;After I reviewed about 500 websites of businesses from 3 or 4 cities in my region, I was able to narrow my spreadsheets down to roughly 100 prospects.&lt;/p&gt;

&lt;p&gt;What was my criteria?&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;First and foremost: is the existing site mobile-responsive? With half of all web traffic now happening online, a smartphone-friendly website is a must for all businesses.&lt;/li&gt;
&lt;li&gt;Is it broken or difficult to use in some way? Is it inaccessible or crazy-slow due to technical issues, poor design choices, or outdated practices?&lt;/li&gt;
&lt;li&gt;Is it on a WYSIWYG platform ("what you see is what you get" i.e. Wix, Weebly, Squarespace, GoDaddy)? Small biz owners sometimes think they can save money by going DIY with their site, only to discover that it's actually a much bigger undertaking than they anticipated.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Once I had 100 prospects that I identified as genuinely in need of a new website, I moved them all to a new spreadsheet and started getting my marketing materials ready.&lt;/p&gt;

&lt;h2&gt;
  
  
  Craft a Pitch
&lt;/h2&gt;

&lt;p&gt;The best clients will be the ones who already know that they need your services. You don't need to convince them of the value of your work, and you will be solving a big problem for them by reaching out with your services. &lt;/p&gt;

&lt;p&gt;That's how you need to approach the cold sales process: as though every single person you're contacting genuinely &lt;em&gt;needs&lt;/em&gt; what you're offering, and perceives it as valuable. This is a big part of the mindset you need in order to communicate with confidence through the sales process.&lt;/p&gt;

&lt;p&gt;I'll share my first email template with you, but first I want to say that, after doing some research on the topic, I realize that &lt;strong&gt;this email is pretty bad.&lt;/strong&gt; Go ahead and read it, and then I'll explain:&lt;/p&gt;




&lt;blockquote&gt;
&lt;p&gt;Hi (person),&lt;/p&gt;

&lt;p&gt;I recently came across your website and was curious if you would be interested in help with your web presence.&lt;/p&gt;

&lt;p&gt;As a landscaper in Santa Cruz myself — I’ve been in the industry for several years now — I know how to reach the kinds of clientele you serve, and how to build websites that bring in more leads.&lt;/p&gt;

&lt;p&gt;If you’ve been thinking about upgrading your site, I can offer a sleek, stylish, lightning-fast design that’s mobile-responsive and indexed properly for Google and other search engines to improve your rankings.&lt;/p&gt;

&lt;p&gt;Over 50% of all web traffic happens on smartphones these days, and if your website is not optimized for small screens then you’re losing out on the majority of visitors.&lt;/p&gt;

&lt;p&gt;You can see a sample of the kinds of sites I build here:&lt;br&gt;
(link to demo site)&lt;/p&gt;

&lt;p&gt;And if you want to learn more you can check out my portfolio:&lt;br&gt;
(link to my portfolio)&lt;/p&gt;

&lt;p&gt;If you’re interested, let’s schedule a time to chat about this. I look forward to hearing from you!&lt;/p&gt;

&lt;p&gt;Sam Sycamore&lt;/p&gt;

&lt;p&gt;// web developer &amp;amp; designer&lt;/p&gt;

&lt;p&gt;&lt;a href="http://www.samuelsycamore.com"&gt;www.samuelsycamore.com&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;




&lt;p&gt;Woof.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;First of all, it's way too long!&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Who would want to read this? Good golly, man. What were you thinking?&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Second, as Nat once again so astutely points out, I'm not "a landscaper who moonlights in web development as a side hustle." I'm "a web expert who specializes in online marketing for contractors and small business owners."&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;See the difference?&lt;/p&gt;

&lt;p&gt;One says "I'm just some guy who's doing this for fun in his free time."&lt;/p&gt;

&lt;p&gt;The other says "I'm the best choice for you because I'm a professional who knows how to solve your business's specific problems."&lt;/p&gt;

&lt;p&gt;Who would you rather hire?&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Third - and this was something else Nat pointed out - this email has no clear call to action. &lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;If anyone actually bothered to read it, would they be compelled to do anything? If so, what would that be?&lt;/p&gt;

&lt;p&gt;There are three links here, one repeated twice. Go there? Then what?&lt;/p&gt;

&lt;p&gt;The final line of the email very passively asks for a quick chat, but it's hella vague and noncommittal. Nobody is going to go out of their way to make time for you.&lt;/p&gt;

&lt;p&gt;You &lt;strong&gt;must&lt;/strong&gt; have &lt;strong&gt;one&lt;/strong&gt; clear call to action in the form of a request for a phone conversation at &lt;strong&gt;a discrete time&lt;/strong&gt; that you suggest.&lt;/p&gt;

&lt;p&gt;Not sure what times to suggest? Here's the secret:&lt;/p&gt;

&lt;p&gt;&lt;em&gt;It doesn't really matter!&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;If the prospect is interested but the time you offer doesn't work, they will work with you to find a time. But part of playing the game is directly asking for what you want: a phone call. By suggesting a time, you convey your professionalism with regards to time management: you respect the value of their time, and you present as though your schedule is neatly partitioned and organized like a professional's should be.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Fourth, the sample website is a poorly disguised fake organization that I made up and didn't bother to finish fleshing out (as you can see with the Lorem ipsum text near the bottom). If anybody bothered to look at it, it's not going to win them over.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Fifth, my portfolio website kind of sucks! It's all over the place in terms of tone because when I made it I wasn't totally sure if I was trying to be a freelancer or an employee. And it was made with a template, so it's not even an original design of mine.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I took Nat's advice and rewrote the email after I'd sent out like 25 of these. And I replaced the obvious mockup sample with one that was specifically targeted to my vertical: a real-looking website for a landscaping company that could theoretically be operating in my region.&lt;/p&gt;

&lt;p&gt;But otherwise, the content didn't change much, and it was still just way too long.&lt;/p&gt;

&lt;p&gt;This &lt;a href="https://mailshake.com/masterclass/"&gt;Cold Email Masterclass from Mailshake&lt;/a&gt; has some fantastic advice about crafting the perfect cold pitch. For my next marketing campaign, I plan to keep it to 3-4 pithy lines, and A/B test the "AIDA" and "BAB" structures here.&lt;/p&gt;

&lt;p&gt;Something like this:&lt;/p&gt;




&lt;blockquote&gt;
&lt;p&gt;Hi (person),&lt;/p&gt;

&lt;p&gt;Did you know that (name of business)'s website is really tough to use on a phone?&lt;/p&gt;

&lt;p&gt;I ask because solving this problem is what I do best - crafting smart-phone friendly websites that will impress your visitors for many years to come, no matter the screen size.&lt;/p&gt;

&lt;p&gt;My clients get overwhelmingly positive feedback from their customers when my sites deploy.&lt;/p&gt;

&lt;p&gt;I'd love to set up a time to talk more about this. Are you free next Monday or Tuesday at 11?&lt;/p&gt;

&lt;p&gt;Best,&lt;/p&gt;

&lt;p&gt;Sam Sycamore&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Founder, Sycamore Design&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="http://www.sycamore.design"&gt;www.sycamore.design&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;




&lt;p&gt;Better, right? I think so anyway. Please don't steal this wholesale! But feel free to tweak it to suit your needs.&lt;/p&gt;

&lt;p&gt;Another upgrade coming in my next round: &lt;a href="https://www.gmass.co/"&gt;GMass for Gmail&lt;/a&gt;. For my first 100 emails I sent each one out individually and it took many hours. For $20/month, GMass will enable me to send potentially thousands of &lt;em&gt;individualized&lt;/em&gt; emails with a single click, then track open and click-thru rates, and auto-send follow-ups a few days later to those who don't open the first message - all directly through Gmail! I am really excited to use it after doing it the long way first!&lt;/p&gt;

&lt;h2&gt;
  
  
  Sell Your Services
&lt;/h2&gt;

&lt;p&gt;Once you have a few leads who are interested in your services, you need to set up a phone call with them to determine if the project is a good fit, explain how the process works, and answer any questions they have.&lt;/p&gt;

&lt;p&gt;Remember: &lt;em&gt;you&lt;/em&gt; are interviewing &lt;em&gt;them&lt;/em&gt; to decide if &lt;em&gt;you&lt;/em&gt; want to take on their project. They are not doing you a favor by hiring you - exactly the opposite. &lt;/p&gt;

&lt;p&gt;They have a problem, and you are here to solve it. But first you have to figure out if it's a problem that you truly want to take on.&lt;/p&gt;

&lt;p&gt;Again, this is a mindset thing. Your perspective will inform how you communicate about your services when your carefully memorized script flies out the window.&lt;/p&gt;

&lt;p&gt;Sales is a whole thing unto itself that is beyond the scope of this post, but this I know for sure:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Don't name prices during your intro phone call!&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Your goal here is to not to get the client to say: &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"Yes I want to give you $XXXX for this service," &lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;but instead to say: &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"Yes I agree that this is a good fit, please send me your quote for all of the things we've discussed today."&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Over the course of the call, even if you never talk numbers, you will get a sense of what your prospect's budget might be, and whether they're looking for "good enough" or if they might be willing to pay a premium for something better.&lt;/p&gt;

&lt;p&gt;If the client forces the price question, you need to redirect the conversation:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Ask what their budget is, as you are happy to accommodate a wide range of budgets&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Explain that you offer many related services and want to be able to craft a proposal that is perfectly suited to their specific needs&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Offer ballpark numbers as a last resort ("My rates begin at $XXXX for the basic package") to avoid wasting time on prospects who you suspect may try to lowball you&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Be prepared to justify your price! Your clients are paying for your expertise, not the number of hours it takes to complete the project. They are paying for the countless hours you've invested in the skills that enable you to deliver on these kinds of projects. Those skills are valuable, and the industry as a whole is better off if we all push back against the race to the bottom that takes place on sites like Fiverr, Upwork et al. (No disrespect if you earn a living on these platforms- that is a serious accomplishment!)&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;By the end of this call, you should have a clear understanding of what the client is looking for. If you're a solid salesperson, they should be excited to receive an email proposal from you after the call, outlining the scope of the work and the fees for each service you provide.&lt;/p&gt;

&lt;h2&gt;
  
  
  Write a Proposal
&lt;/h2&gt;

&lt;p&gt;This part is possibly even more terrifying than the sales call, because at this point you feel like you're on the right track but now you actually have something to lose - a warm lead who's going to be turned off by your price!&lt;/p&gt;

&lt;p&gt;Unless.&lt;/p&gt;

&lt;p&gt;If you've done your work as a competent salesperson, you should already have a general idea of the price point this client will be comfortable with, and you've conveyed a level of professionalism that reflects the rates you feel you deserve.&lt;/p&gt;

&lt;p&gt;You've already won them over personally and professionally during the phone call by being kind and friendly and assuring them that you are the best person for the job because you have the expertise to meet their specific needs.&lt;/p&gt;

&lt;p&gt;Your prospect won't be scared off by the price if you demonstrate the kind of authority that they expect to see at your price point.&lt;/p&gt;

&lt;p&gt;Here's an example of a proposal that led to a sale for me:&lt;/p&gt;




&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;Design &amp;amp; Development: $1500&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Bold, sharp, mobile-responsive design&lt;/li&gt;
&lt;li&gt;Content management system (CMS) configuration&lt;/li&gt;
&lt;li&gt;Technical search engine optimization (SEO)&lt;/li&gt;
&lt;li&gt;Pages

&lt;ul&gt;
&lt;li&gt;Landing page&lt;/li&gt;
&lt;li&gt;Services&lt;/li&gt;
&lt;li&gt;Photo gallery&lt;/li&gt;
&lt;li&gt;Testimonials&lt;/li&gt;
&lt;li&gt;About&lt;/li&gt;
&lt;li&gt;Contact&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;

&lt;p&gt;Copywriting: $500&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;I will provide you with a brief questionnaire to help me fill in the details and take on the tone and branding of your business&lt;/li&gt;
&lt;li&gt;Adheres to Google’s best practices for SEO&lt;/li&gt;
&lt;li&gt;Includes one round of revisions&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;li&gt;

&lt;p&gt;Setup &amp;amp; Deployment: $200&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Site deployment to web host, I recommend dreamhost.com&lt;/li&gt;
&lt;li&gt;Setup of CMS&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Total: $2200&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;

&lt;p&gt;Optional Technical Support: $100/month or $75/hour&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;If you would like help managing your CMS or addressing minor technical issues, I am available for tech support on a monthly basis, or by the hour as needed&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;/ul&gt;




&lt;p&gt;This format seemed to work fine for me, but next time around I plan to bill for SEO separately as I feel more competent about my skills now, and I think it's something distinct from design &amp;amp; dev. Speaking of which, I may also separate out those two categories in the future as well.&lt;/p&gt;

&lt;p&gt;How the heck did I arrive at these rates?&lt;/p&gt;

&lt;h3&gt;
  
  
  Set Your Price
&lt;/h3&gt;

&lt;p&gt;The reason it's so hard to find concrete advice about how to set your rates is that &lt;em&gt;it's mostly up to you to decide how to do it.&lt;/em&gt; There is no secret formula, and what the market can bear will vary wildly between industries, demographics, regions, and continents.&lt;/p&gt;

&lt;p&gt;I won't go too deep here into pricing strategies, but I will share my thought process.&lt;/p&gt;

&lt;p&gt;When I did my review of 500 sites in my vertical, I paid close attention whenever I found a link to a developer's site at the bottom of an existing site. I would always scope out their sites to see how they pitch their services and find out if they share any pricing info.&lt;/p&gt;

&lt;p&gt;The pricing that I found in my region started at around $1000 for simple template solutions, and upwards of $3-5000 for custom designs, Wordpress blogs, and SEO. I decided I should try to set my rates a little lower than the competition, at least to start.&lt;/p&gt;

&lt;p&gt;I didn't want to charge an hourly rate, but when all was said and done I wanted to earn $100/hr for my time investment, so I set my flat fees based on my estimated number of hours multiplied by the target of $100/hr. &lt;/p&gt;

&lt;p&gt;But I would be perfectly happy with $50/hr, and this target range gave me a lot of wiggle room: even if the project took twice as long as I estimated, I'd still earn a solid wage.&lt;/p&gt;

&lt;p&gt;My first project clocked in at about $75/hr, so I feel really good about this pricing strategy going into my next round of sales.&lt;/p&gt;

&lt;h2&gt;
  
  
  Sign a Contract
&lt;/h2&gt;

&lt;p&gt;Before you fire up Figma or write a single line of code, &lt;em&gt;you need both parties to sign a contract that clearly lays out the scope of work and what happens if either party fails to meet their obligations.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.leonnoel.com"&gt;Leon Noel&lt;/a&gt; recommends the &lt;a href="https://stuffandnonsense.co.uk/projects/contract-killer"&gt;Stuff &amp;amp; Nonsense Contract Killer&lt;/a&gt; open-source contract, and while I appreciate the framework, the cheeky British humor doesn't really jive with my style.&lt;/p&gt;

&lt;p&gt;So I revised that contract for American English and &lt;a href="https://github.com/samuelsycamore/contract-killer"&gt;posted it to my Github here&lt;/a&gt; - please feel free to use it if it's helpful to you!&lt;/p&gt;

&lt;p&gt;(None of this has been reviewed by anyone I know in any legal capacity. If I'm able to land a few more clients then I intend to seek legal advice from a CPA - I would recommend that you do the same if you are serious about being self-employed.)&lt;/p&gt;

&lt;p&gt;I insert the relevant details into this template and upload it to HelloSign.com, which enables you and your client to register legally binding e-signatures online - no need for paper documents or faxing. This service is free for the first few, but you have to pay after you reach a certain number of contracts per month.&lt;/p&gt;

&lt;h3&gt;
  
  
  Determine a Payment Schedule
&lt;/h3&gt;

&lt;p&gt;One key element of the contract is the payment schedule, which should clearly define how much your client owes you and when. I've tried a few different schedules, and these two seem to work the best for me:&lt;/p&gt;

&lt;p&gt;50% upfront, 50% when all work is completed but &lt;em&gt;before&lt;/em&gt; the site is deployed to its host&lt;/p&gt;

&lt;p&gt;OR&lt;/p&gt;

&lt;p&gt;25% upfront, 75% when all work is completed but &lt;em&gt;before&lt;/em&gt; the site is deployed to its host&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;DO NOT WORK FOR FREE&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;I repeat:&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;DO NOT WORK FOR FREE&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;You must have a down payment in hand before you start the work. And you need to be paid in full before your completed site is deployed to the host. This is to prevent a bad-faith client from taking your work and using it without paying you.&lt;/p&gt;

&lt;p&gt;And you need to make this payment schedule crystal clear to your client. If not, there's a good chance that this could lead to headaches when you send an invoice that your client isn't expecting.&lt;/p&gt;

&lt;h2&gt;
  
  
  Receive Payments
&lt;/h2&gt;

&lt;p&gt;When I was first getting started, I used Stripe for invoicing and payment processing. It worked fine, but I didn't love the 3% cut they took off the top.&lt;/p&gt;

&lt;p&gt;Recently I've started doing all of my accounting and invoicing with FreshBooks. The basic plan is $15/month, and they take 1% from the payments I receive. So far I really dig this platform and I'm happy to pay the monthly fee.&lt;/p&gt;

&lt;p&gt;I request payment within 7 days of sending out an invoice. My clients almost always pay within the day every time, perhaps because I alert them to the fact that the invoice will be on its way, and that it needs to be paid in order for me to continue with the work.&lt;/p&gt;

&lt;h2&gt;
  
  
  Now Get to Work!
&lt;/h2&gt;

&lt;p&gt;And there you go, that's essentially everything that I know about the process of finding cold prospects, pitching my services, landing deals, and securing payments.&lt;/p&gt;

&lt;p&gt;I sincerely hope you find this helpful. If you have a question that isn't answered in here somewhere, then I probably don't have a good answer to offer, honestly!&lt;/p&gt;

&lt;p&gt;Best of luck to you! Let me know how you fare out there - we can trade notes.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;strong&gt;If you enjoyed this piece and you want to keep up with my work, you can &lt;a href="https://buttondown.email/samuelsycamore"&gt;sign up for my email newsletter through this link&lt;/a&gt;. I promise not to bug you more than a few times a month!&lt;/strong&gt;
&lt;/h2&gt;

</description>
      <category>career</category>
      <category>freelancing</category>
      <category>100devs</category>
      <category>webdev</category>
    </item>
    <item>
      <title>The toolbox of meta-skills I acquired as a jack-of-all-trades</title>
      <dc:creator>Sam Tanoak Sycamore</dc:creator>
      <pubDate>Sun, 24 Jan 2021 02:18:46 +0000</pubDate>
      <link>https://forem.com/tanoaksam/the-toolbox-of-meta-skills-i-acquired-as-a-jack-of-all-trades-bfp</link>
      <guid>https://forem.com/tanoaksam/the-toolbox-of-meta-skills-i-acquired-as-a-jack-of-all-trades-bfp</guid>
      <description>&lt;p&gt;In late 2014, I decided once and for all that it was time to put my money where my mouth was and begin acquiring the skills I'd need to build my own house and grow my own food.&lt;/p&gt;

&lt;p&gt;I had become fascinated with the idea of self-reliance a few years earlier in college. I'd stumbled upon a book called &lt;a href="https://www.amazon.com/Good-Life-Nearings-Self-Sufficient-Living/dp/0805209700"&gt;&lt;em&gt;The Good Life&lt;/em&gt; by Scott and Helen Nearing&lt;/a&gt;, intrepid pioneers of the back-to-the-land movement from the Depression Era who convinced me that their way of life &lt;em&gt;must&lt;/em&gt; be preferable to the suburban malaise of middle-America that I'd inherited.&lt;/p&gt;

&lt;p&gt;I gave myself a few months to do research and weigh my options while pulling doubles at the BBQ joint where I'd been working for awhile. The disciplines that immediately called to me the most were carpentry and farming, but I knew that I'd want to become a jack-of-all-trades over time.&lt;/p&gt;

&lt;p&gt;I briefly considered enrolling in trade school for carpentry, but as I began to explore the job market I realized that I really didn't need any qualifications or training to get in with mom 'n' pop contractors as a helper or apprentice.&lt;/p&gt;

&lt;p&gt;I discovered that I could learn the skills on the job -- get paid to learn, essentially -- so I dove headfirst into the industry, despite the fact that I barely knew how to operate a hammer at the time.&lt;/p&gt;

&lt;p&gt;In the spring of 2015 I became a cabinetmaker's apprentice, building laminated cabinets and shelves for gas stations. Over the next five years I would be variously employed and self-employed as a window installer, exterior carpenter, landscaper, tile setter, handyman, organic farmer, fine gardener, and auto mechanic.&lt;/p&gt;

&lt;p&gt;It was a wild ride, and I wouldn't trade my experiences for the world. Though I did eventually conclude that I did not want to pursue a lifelong career in trades, the time that I invested in the industry was incredibly valuable to me. And not just for the hard skills that I acquired.&lt;/p&gt;

&lt;p&gt;Now that I am &lt;a href="https://dev.to/tanoaksam/learning-to-code-in-an-off-grid-cabin-in-the-woods-592l"&gt;transitioning to a new career in tech&lt;/a&gt;, it feels a bit like immigrating to a new country: I can't bring most of my old furniture and stuff with me, but I do have some carry-on luggage crammed full of things I couldn't bear to part with.&lt;/p&gt;

&lt;p&gt;These are the meta-skills I've honed in my career in trades; skills that enable me to better acquire and apply new skills. They are tools that I will continue to sharpen for the rest of my life, no matter what kind of work I might pursue.&lt;/p&gt;

&lt;p&gt;I understand why a conventional team of computer science-oriented engineers would be reluctant to hire a self-taught career-changer like me. But I believe that the toolbox of meta-skills I've acquired in my previous career is a strong and unique asset that make me stand out from the crowd of code newbies.&lt;/p&gt;

&lt;p&gt;If you'll indulge me, I'd love to show off and describe a few of these to you.&lt;/p&gt;

&lt;h2&gt;
  
  
  How to Learn
&lt;/h2&gt;

&lt;p&gt;&lt;em&gt;Everyone&lt;/em&gt; learns best by &lt;em&gt;doing&lt;/em&gt;. Full stop.&lt;/p&gt;

&lt;p&gt;OK, there are plenty of ways to &lt;em&gt;acquire knowledge&lt;/em&gt; about a skill. But the only way -- I'm telling you, &lt;em&gt;the only way&lt;/em&gt; -- to improve your skills is to practice them.&lt;/p&gt;

&lt;p&gt;I don't think I've ever watched a tutorial video on a power tool I've never used before. Plug it in, fire it up, hand me that piece of scrap wood and let's see what this thing does!&lt;/p&gt;

&lt;p&gt;I could watch my foreman operate that reciprocating saw all day, but the only way I'm going to master it is if I pick it up and do it myself.&lt;/p&gt;

&lt;h3&gt;
  
  
  Get Paid to Learn
&lt;/h3&gt;

&lt;p&gt;There's a time and a place to pay for resources to learn. Ideally, that time is when you are already employed or self-employed and can write off your continuing education as an expense on your taxes.&lt;/p&gt;

&lt;p&gt;Catch my drift?&lt;/p&gt;

&lt;p&gt;If you're clever, &lt;em&gt;you can find ways to get paid to learn&lt;/em&gt;, or at least to offset the cost of educational resources.&lt;/p&gt;

&lt;p&gt;My first few gigs in construction paid $10/hr. That's almost nothing -- but it's not &lt;em&gt;literally&lt;/em&gt; nothing, and I was learning a ton on the job every day, so I was OK with "getting paid in experience," so to speak, at least in the beginning.&lt;/p&gt;

&lt;p&gt;When I jumped to freelance web development years later, I started searching for website clients pretty early on, even though I know I still have a long way to go before I will be employable as a front-end developer at an established company.&lt;/p&gt;

&lt;p&gt;That's because I knew that I would learn faster and more efficiently if I had &lt;em&gt;real&lt;/em&gt; projects to work on. And I could continue to learn what I would need to know as I progressed.&lt;/p&gt;

&lt;p&gt;Now that I have a little bit of money coming in from development work, I can afford to invest some of those funds back into my self-education. And now that I have real projects, I also have concrete learning goals that I can focus on so I'll be able to take on more and bigger projects in the future.&lt;/p&gt;

&lt;h2&gt;
  
  
  How to Solve Problems
&lt;/h2&gt;

&lt;p&gt;Problem-solving requires systems thinking. &lt;/p&gt;

&lt;p&gt;Thinking about things systematically requires perspective.&lt;/p&gt;

&lt;p&gt;You need to be able to zoom in or zoom out on a whim; to see how  the minor details you've been agonizing over contribute to the &lt;em&gt;je ne sais quoi&lt;/em&gt; of the big picture. To take on the viewpoint of the end user who possesses none of your expertise and try to imagine what &lt;em&gt;they&lt;/em&gt; would think about it. Sure, it looks fine today, but what about ten years from now?&lt;/p&gt;

&lt;p&gt;When I'm working on a team, I tend to be the most detail-oriented, but I love observing the big picture. I often try to play the part of the disruptor, imagining the worst-case scenarios that would require unconventional solutions. What happens to this fence when the storm of the century rolls through?&lt;/p&gt;

&lt;p&gt;A strong problem-solver is someone who's skilled in the art of the analogy: observing a novel situation and recognizing familiar elements from prior experiences that are ostensibly unrelated. This is pattern recognition, but abstracted.&lt;/p&gt;

&lt;h2&gt;
  
  
  How to Communicate Effectively
&lt;/h2&gt;

&lt;p&gt;I worked several retail jobs as a young adult, and these experiences made me allergic to "customer service" and "sales" for many years. &lt;/p&gt;

&lt;p&gt;For me, "customer service" meant "endure this disgruntled customer's insults with a smile," and "sales" meant "try to talk these rubes into buying a bunch of junk that we all know they don't need."&lt;/p&gt;

&lt;p&gt;As I spent more time working in skilled trades, I began to see that neither customer service nor sales were &lt;em&gt;necessarily&lt;/em&gt; awful. In fact, I came to really enjoy the customer service aspects of home remodeling and farming -- both of which I would eventually pursue as self-employed ventures.&lt;/p&gt;

&lt;p&gt;I learned that there is, indeed, a way to honestly and ethically sell people goods and services that they will benefit from.&lt;/p&gt;

&lt;p&gt;It turns out that it actually feels really good to deliver an excellent product that you're proud of to a grateful client who appreciates your work!&lt;/p&gt;

&lt;p&gt;Shocker, I know! &lt;/p&gt;

&lt;p&gt;I was surprised, too. ;)&lt;/p&gt;

&lt;h3&gt;
  
  
  Communicating with Clients
&lt;/h3&gt;

&lt;p&gt;It's a cliché that the best communicators are the strongest listeners, and this bears out quite directly when communicating with clients.&lt;/p&gt;

&lt;p&gt;What is the client telling you they need? How might their &lt;em&gt;actual&lt;/em&gt; needs differ from what they &lt;em&gt;think&lt;/em&gt; they need? &lt;/p&gt;

&lt;p&gt;How can you communicate what you offer in a way that &lt;em&gt;this individual&lt;/em&gt; will understand and resonate with? &lt;/p&gt;

&lt;p&gt;How do you center your client in the story that you tell about the value of your product?&lt;/p&gt;

&lt;p&gt;How do you convey your expertise in layman's terms? If your service is difficult to describe or quantify, how do you ease your client's fears that they could be buying something they don't need?&lt;/p&gt;

&lt;p&gt;How do you keep your client happy and comfortable throughout the process of selling and delivering your product? &lt;/p&gt;

&lt;p&gt;And what can you do to really "wow" them so that they will want to hire you again and tell all of their friends about you?&lt;/p&gt;

&lt;p&gt;Communicating effectively with clients means listening so well that you can anticipate their needs and assuage their fears before they ever arise. That's how you build trust.&lt;/p&gt;

&lt;h3&gt;
  
  
  Communicating with Coworkers
&lt;/h3&gt;

&lt;p&gt;When I'm working on a team, I prefer to be like water. I follow the path of least resistance and always aim to find common ground and keep the mood pleasant and easygoing. Relax, and float downstream.&lt;/p&gt;

&lt;p&gt;Good communication with coworkers also requires anticipating their needs. If you can make your teammate's task go more smoothly by stepping in at just the right moment to lend a hand, they'll remember that, and they'll be inclined to do the same for you at the next opportunity. A mutual understanding of reciprocity is crucial to a healthy crew culture.&lt;/p&gt;

&lt;p&gt;Maintaining a strong company culture means cultivating an ethos that "we're all in this together." I would never ask you to take on a task that I wouldn't be willing to perform myself. If there is some especially unsavory chore that must get done, we all agree that we will share in the burden so nobody feels like they're getting an unfair deal.&lt;/p&gt;

&lt;p&gt;We learn how strong our teams really are when conflicts arise. This is how our company culture gets stress-tested. If turnover is high, that's a good indication that crew morale is low. And if morale is low, it's probably because a) the workload is too heavy or unevenly distributed, b) the pay is too low, and/or c) the management is unreasonable.&lt;/p&gt;

&lt;h3&gt;
  
  
  Communicating with Management
&lt;/h3&gt;

&lt;p&gt;If you asked my girlfriend to describe me in a nutshell, she'd probably say something like "loves being outdoors, hates being told what to do."&lt;/p&gt;

&lt;p&gt;I have encountered many different management styles, but my anecdotal experience seems clear enough to me: the jobs where my coworkers and I felt most satisfied were those where the management trusted us enough to delegate tasks to us without feeling the need to micromanage &lt;em&gt;how&lt;/em&gt; those tasks got done.&lt;/p&gt;

&lt;p&gt;This requires a certain level of proficiency and maturity on the part of the workers, but it also requires a great deal of trust on the part of management. And it demands training as well as clear communication of expectations, goals, and metrics for measuring success.&lt;/p&gt;

&lt;p&gt;Micromanagers do what they do because &lt;em&gt;they don't trust their crews enough&lt;/em&gt; to get the job done on their own. They may be right to be distrustful -- but if that's the case, then it means they've either hired bad help, or else they haven't done the requisite work to equip their team with the skills they need to solve their own problems.&lt;/p&gt;

&lt;p&gt;I've learned the hard way that I work best with managers who respect my skills enough to give me some leeway to solve problems however I see fit, but who are clear about their expectations and who make themselves available for guidance should I need it.&lt;/p&gt;

&lt;p&gt;When I'm going through the application process with a new company, one of the most important questions I like to ask at the end of an interview is, "What are the metrics that you use to determine how successful your team has been on a project?"&lt;/p&gt;

&lt;p&gt;You will learn just about everything you need to know about their company culture based on how they answer this question.&lt;/p&gt;

&lt;h2&gt;
  
  
  How to Manage Time and Resources
&lt;/h2&gt;

&lt;p&gt;Construction gigs can be pretty open-ended. Especially when it comes to remodeling, you don't always know what you're getting into before you demolish the wall or tear up the carpet and see what's waiting on the other side. &lt;/p&gt;

&lt;p&gt;The scope of the project can change dramatically when unexpected conditions arise. You have to learn how to plan for what can't be anticipated.&lt;/p&gt;

&lt;p&gt;Once the more routine tasks are solidified in your skill set, however, it becomes easier to estimate the amount of time and materials you'll need to get the job done.&lt;/p&gt;

&lt;p&gt;This is an incredibly valuable meta-skill that I don't think enough laborers in the skilled trades really hone in on. &lt;/p&gt;

&lt;p&gt;It is the essence of running a successful business.&lt;/p&gt;

&lt;p&gt;One of the biggest stumbling blocks that people face when they're considering starting their own business in any industry is: &lt;/p&gt;

&lt;p&gt;"How do I determine my price?"&lt;/p&gt;

&lt;p&gt;The simplest formula is this:&lt;/p&gt;

&lt;p&gt;Start with the income you'd like to earn, let's say $100,000.&lt;/p&gt;

&lt;p&gt;Divide that by the number of hours you intend to work -- if you're a sole proprietor working full-time and you give yourself a two-week vacation every year, that's about 2,000 hours.&lt;/p&gt;

&lt;p&gt;$100,000 / 2,000 hours = $50/hour.&lt;/p&gt;

&lt;p&gt;When determining your fee for a project, estimate the amount of time it will take, multiply that by your hourly rate, add expenses for materials, and you're good to go. Right?&lt;/p&gt;

&lt;p&gt;At least it seems more attainable when framed in those terms, no? Easier said than done, of course, and it's never that straightforward.&lt;/p&gt;

&lt;p&gt;What about taxes? That's a solid 30% off the top, at least, so you'll want to bring in more like $130k to be able to pay yourself that same $50/hr. And what about overhead? You're going to have business expenses that should absolutely factor into your rate. What does your profit margin look like after you've paid yourself and the feds, and covered all of your operation costs?&lt;/p&gt;

&lt;p&gt;How do you know that you will be fully booked at all times? Maybe your rates need to be higher to buffer the unforeseeable dry spells.&lt;/p&gt;

&lt;p&gt;Should you charge hourly for your services? Not necessarily. A day rate or a flat project fee may be preferable. &lt;/p&gt;

&lt;p&gt;Ideally, you want your client to be paying for your &lt;em&gt;expertise&lt;/em&gt;, not necessarily just your &lt;em&gt;time&lt;/em&gt;. &lt;/p&gt;

&lt;p&gt;If you are in high demand, then your time is especially valuable. (Not in high demand? This is a perfect avenue to practice faking it til ya make it.) If you can deliver immense value in a short amount of time, that is a reflection of your high expertise, which deserves high compensation.&lt;/p&gt;

&lt;p&gt;Furthermore, what &lt;em&gt;is&lt;/em&gt; the value of your product to your client? If you're building a beautiful backyard patio where they can enjoy downtime with their family, the price discussion looks a lot different than if you're called in at 2:00 AM for a plumbing emergency.&lt;/p&gt;

&lt;p&gt;What your product or service is &lt;em&gt;worth&lt;/em&gt; is more about its &lt;em&gt;perceived value&lt;/em&gt; than the actual cost of delivering it. But I digress, that is a whole huge topic unto itself...&lt;/p&gt;

&lt;h2&gt;
  
  
  How to Be Confident in My Skills
&lt;/h2&gt;

&lt;p&gt;As I ventured further down the path of becoming a jack-of-all-trades, I became quite good at selling myself to prospective employers. I discovered that this sales pitch really wasn't so different from a customer-facing pitch. The same basic rules applied.&lt;/p&gt;

&lt;p&gt;When it came to selling myself as an awesome employee, I quickly found that the most effective way to win over a hiring manager was to communicate my (genuine) eager desire to learn and be able to offer more value to the team. If you can build a cabinet, you can figure out how to build a fence. If you've ever grown tomatoes, you'll do just fine when it's time to trellis your first cucumber crop.&lt;/p&gt;

&lt;p&gt;To acquire anti-fragile self-confidence, you have to be willing to step outside your comfort zone, repeatedly, take on tasks you've never encountered before, and learn to thrive in the liminal state of arriving at a solution.&lt;/p&gt;

&lt;p&gt;This is by far the most valuable asset that I picked up as a tradesman: &lt;/p&gt;

&lt;p&gt;the confidence to be able to sign on to a new project, knowing that I will encounter novel obstacles, and to trust that even if I've never seen anything like it before -- &lt;/p&gt;

&lt;p&gt;I &lt;em&gt;will&lt;/em&gt; figure it out.&lt;/p&gt;

</description>
    </item>
    <item>
      <title>My Networking Strategy for Making Meaningful Connections in Tech</title>
      <dc:creator>Sam Tanoak Sycamore</dc:creator>
      <pubDate>Sun, 17 Jan 2021 23:46:41 +0000</pubDate>
      <link>https://forem.com/tanoaksam/my-networking-strategy-for-making-meaningful-connections-in-tech-1702</link>
      <guid>https://forem.com/tanoaksam/my-networking-strategy-for-making-meaningful-connections-in-tech-1702</guid>
      <description>&lt;h3&gt;
  
  
  I owe &lt;em&gt;all&lt;/em&gt; of my success in the tech industry to my professional network.
&lt;/h3&gt;

&lt;p&gt;Sounds obvious, right?&lt;/p&gt;

&lt;p&gt;But how do you actually &lt;em&gt;build&lt;/em&gt; that network in the first place?&lt;/p&gt;

&lt;p&gt;When you're new to the field and/or transitioning from an unrelated industry, it can feel like you don't belong. &lt;/p&gt;

&lt;p&gt;Maybe you feel like you don't have anything to contribute.&lt;/p&gt;

&lt;p&gt;Trust me:&lt;/p&gt;

&lt;p&gt;You do!&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Especially&lt;/em&gt; if you've taken an unconventional path to get here - people will be that much more excited to get to know you.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;(Who am I? Just a thirty-something dude who got burned out with his career in trades and decided to change course to web development. I started learning in September 2020, and in January 2021 I began freelancing as developer and technical writer.)&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;It's worth noting that I live in the Bay Area, CA, about an hour south of Silicon Valley. It’s kind of impossible to avoid the tech industry here, so basically everyone who I know personally also knows &lt;em&gt;somebody&lt;/em&gt; in tech. &lt;/p&gt;

&lt;p&gt;That said, I haven't lived here long, and I honestly don’t know very many people outside of the non-tech industry I’ve been working in (landscaping) up to this point.&lt;/p&gt;

&lt;p&gt;My connections have mainly come from two places: personal connections and &lt;a href="https://twitter.com/tanoaksam"&gt;Twitter&lt;/a&gt;. &lt;/p&gt;

&lt;p&gt;In both cases, the most effective way to start conversations is to &lt;em&gt;be vocal about who you are and what you do!&lt;/em&gt; The squeaky wheel gets the grease.&lt;/p&gt;

&lt;p&gt;LinkedIn is a distant third in my overall strategy, and mostly only serves (for me) to reinforce the connections made IRL and on Twitter. But I have had some luck cold-messaging folks on LinkedIn and asking for a coffee chat. Your mileage may vary.&lt;/p&gt;

&lt;p&gt;When it comes to personal connections, I just try to be upfront with everyone I know about what I’m up to when it comes to my new career in tech. Friends and acquaintances will often offer to connect me with someone they know in the industry without me asking for it, but if they don’t then I will directly ask. &lt;/p&gt;

&lt;p&gt;These kinds of networking connections seem to go most smoothly when there’s a middle-person (your mutual acquaintance) to make the introduction, typically via email or group text. This is the &lt;em&gt;only&lt;/em&gt; avenue that has so far led to a 100% success rate for me in terms of making meaningful connections with individuals in the industry, so these are by far the most valuable intros to seek.&lt;/p&gt;

&lt;p&gt;We schedule a time to talk via phone or Zoom, and the conversations usually last about 30 minutes. Most people are curious about what I’m up to, what I’m aiming for, where I’m at in terms of skills, and how they might be able to help me out with info, resources, or career advice.&lt;/p&gt;

&lt;p&gt;Some of my favorite questions to ask are: &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;“How did you land your first job?”&lt;/li&gt;
&lt;li&gt;“What’s your current company like, and what’s your role there?”&lt;/li&gt;
&lt;li&gt;“How will I know when I’m ready to start looking for a job?”&lt;/li&gt;
&lt;li&gt;“After hearing about what I'm up to, do you know anybody who you think I should meet?”&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I’ve talked to senior full-stack devs, CTOs, data scientists, geotech engineers, roboticists, and freelancers of all stripes. &lt;/p&gt;

&lt;p&gt;(FYI: Nearly &lt;em&gt;all&lt;/em&gt; of them were self-taught to begin, and broke into the industry because they were &lt;em&gt;passionate&lt;/em&gt; and &lt;em&gt;dedicated.&lt;/em&gt; Tangential but worth mentioning.)&lt;/p&gt;

&lt;p&gt;Having these conversations with strangers feels super awkward — believe me, I get it! I’m pretty introverted and mostly keep to myself, pandemic or not. (It's not for nothing that I live alone in &lt;a href="https://dev.to/tanoaksam/learning-to-code-in-an-off-grid-cabin-in-the-woods-592l"&gt;an off-grid cabin in the woods&lt;/a&gt;!)&lt;/p&gt;

&lt;p&gt;But people in the tech industry know how the game is played, and they expect to make these kinds of connections regularly. Many use scheduling apps to streamline the process and will simply direct you to a signup page where you can pick a time on their calendar. &lt;/p&gt;

&lt;p&gt;People will appreciate that you are taking the initiative to network with them.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Every time, without fail,&lt;/em&gt; these individuals have stressed that they would be willing to go out of their way to help me out in any way possible. &lt;/p&gt;

&lt;p&gt;Several people have told me: &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;“I was able to get my foot in the door thanks to a handful of kind individuals who went out of their way for me. So it’s important to me to pay that forward to others.”&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;I bring this up not to toot my own horn, but to stress that &lt;em&gt;people in this industry want to help you succeed.&lt;/em&gt; &lt;/p&gt;

&lt;p&gt;I’ve worked in several other industries in the past and have never witnessed this kind of ethos before. &lt;/p&gt;

&lt;p&gt;It’s really remarkable.&lt;/p&gt;

&lt;p&gt;This culture is also apparent on Twitter, where I’ve tapped into the incredibly supportive tech community there. &lt;/p&gt;

&lt;p&gt;Almost as soon as I joined and started sharing what I was doing, people started reaching out to me via DMs to offer resources, support, encouragement, and career advice. &lt;/p&gt;

&lt;p&gt;And that’s to say nothing of the hundreds of others who’ve helpfully chimed in to reply to my tweets. It's as though I've curated an audience of mentors looking over my shoulder and offering guidance.&lt;/p&gt;

&lt;p&gt;This is going to sound a little obvious, but the best way I've found to develop meaningful connections on Twitter is to engage with other peoples' posts. Be excited and enthusiastic about what others are up to! Make a thoughtful contribution to a conversation. Offer some resources that you think would be helpful. People will want to support you if you go out of your way to support them.&lt;/p&gt;

&lt;p&gt;One of the most effective ways to build a strong professional network is to act as a go-between: be the person who introduces people to one another. Easier said than done, of course, but this is a surefire way to multiply your impact and grow your influence.&lt;/p&gt;

&lt;p&gt;Now that I have a decent follower count, one of my favorite things to do is respond to a tweet — especially a newbie question — from someone with fewer followers than me, even if I don’t know the answer. &lt;/p&gt;

&lt;p&gt;This way my reply will show up in the feed of my more knowledgeable followers, who will proceed to hop over to the original post and help out. Everybody wins!&lt;/p&gt;

&lt;p&gt;Painting in broad strokes, the only advice I feel confident giving is, &lt;strong&gt;BE YOURSELF!!&lt;/strong&gt; &lt;/p&gt;

&lt;p&gt;Listen: I’m a weird dude. &lt;/p&gt;

&lt;p&gt;Don’t even get me started. &lt;/p&gt;

&lt;p&gt;But the people I make the most meaningful connections with are the people who think my particular flavor of weirdness is extra-cool. &lt;/p&gt;

&lt;p&gt;If I wasn’t open and authentic about the kind of person I am, I would never be able to forge more than superficial connections.&lt;/p&gt;

&lt;p&gt;I hope this helps! No magic formulas, just some things I’ve learned on this journey so far. Best of luck to y’all.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;strong&gt;If you enjoyed this piece and you want to keep up with my work, you can &lt;a href="https://buttondown.email/samuelsycamore"&gt;sign up for my email newsletter through this link&lt;/a&gt;. I promise to make every email something you will be excited to open!&lt;/strong&gt;
&lt;/h2&gt;

</description>
      <category>networking</category>
      <category>100devs</category>
      <category>career</category>
    </item>
    <item>
      <title>Learning to Code in an Off-Grid Cabin in the Woods</title>
      <dc:creator>Sam Tanoak Sycamore</dc:creator>
      <pubDate>Sat, 05 Dec 2020 20:44:16 +0000</pubDate>
      <link>https://forem.com/tanoaksam/learning-to-code-in-an-off-grid-cabin-in-the-woods-592l</link>
      <guid>https://forem.com/tanoaksam/learning-to-code-in-an-off-grid-cabin-in-the-woods-592l</guid>
      <description>&lt;p&gt;My alarm sounds. It’s 4:00 AM.&lt;/p&gt;

&lt;p&gt;The dappled moonlight casts shadows on my wool blankets, shining through my windows between the redwoods and tanoaks that surround my off-grid cabin, precariously perched on the side of a steep slope in the Santa Cruz Mountains of California’s central coast.&lt;/p&gt;

&lt;p&gt;I’ve been residing on these seven acres for almost two years now, after seeking refuge from the cultural purgatory of my old Kentucky home.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1620520240197%2F-fOyLnZWd.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1620520240197%2F-fOyLnZWd.jpeg" alt="cabin.jpg"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The place is owned by a friend of mine who has agreed to let me live in this austere little cabin in exchange for my services as caretaker of the land. &lt;/p&gt;

&lt;p&gt;As my schedule allows on the weekends, I thin the overgrown understory, remove invasive plants, propagate native species, and keep the half-mile drive up the hill free of debris.&lt;/p&gt;

&lt;p&gt;Last night I promised myself I would spring out of bed as soon as the alarm went off, but for perhaps the 100th consecutive day I give in to the urge to snooze for nine more glorious minutes.&lt;/p&gt;

&lt;p&gt;Finally I rise, and climb back into the many layers of clothing that had kept me warm the night before: sweater, hoodie, flannel, insulated vest.&lt;/p&gt;

&lt;p&gt;I turn on the 3000-watt solar battery bank that supplies all of my daily electricity, and plug in my desk lamp. &lt;/p&gt;

&lt;p&gt;I start up my propane space heater, a recent gift from a kindred spirit that I already could not imagine living without. &lt;/p&gt;

&lt;p&gt;I light a match and fire up my two-burner propane camp stove, and begin boiling water for coffee. While I wait, I pack a quick lunch for later in the day.&lt;/p&gt;

&lt;p&gt;When the coffee is ready – complete with butter, honey, and a dash of maple syrup – I sit down in front of my laptop and begin studying. &lt;/p&gt;

&lt;p&gt;My cell phone serves as a mobile hotspot so I can access the internet.&lt;/p&gt;

&lt;p&gt;As I write this in December 2020, I’ve been studying web development for almost three months. &lt;/p&gt;

&lt;p&gt;I learned the basics of HTML and CSS by building video game fan sites in middle school some 20 years ago, but otherwise this is all new to me. Right now, my primary focus is learning JavaScript.&lt;/p&gt;

&lt;p&gt;My study sessions are divided into 30-minute increments using the Pomodoro technique: 25 minutes of focused work, followed by a five-minute break to step away from the computer, stretch, and do light exercises to warm up for the coming work day.&lt;/p&gt;

&lt;p&gt;If I’m lucky and especially focused, I can cram two hours of studying into the morning before it’s time to get ready to leave the house for the day.&lt;/p&gt;

&lt;p&gt;As the sun begins to rise I take my dog out and we walk down the side of the mountain together, down to the creek where he likes to drink the ice-cold water, and often can’t resist laying down and fully submerging himself for a quick dip, no matter how cold it is outside. &lt;/p&gt;

&lt;p&gt;Hey, if it makes you happy...&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1620520319865%2FyQNj10Jfn.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1620520319865%2FyQNj10Jfn.jpeg" alt="redwoods.jpg"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I haul my solar battery bank up to the clearing at the top of the hill, where my two portable solar panels are staged and ready for business when the sun finally manages to peek above the hillside later in the morning.&lt;/p&gt;

&lt;p&gt;When 8:00 arrives it’s time for me to drive down to town and clock into my day-job as a landscaper. &lt;/p&gt;

&lt;p&gt;I build fences, retaining walls, patios, pathways, raised bed gardens, and irrigation systems for backyard gardens and orchards. &lt;/p&gt;

&lt;p&gt;I dig a lot of holes and trenches, and I rearrange many literal tons of gravel and soil most days.&lt;/p&gt;

&lt;p&gt;It’s very hard on my body, and although I have many specialized skills and several years of experience in this industry, I still barely earn enough money to keep my head above water from paycheck to paycheck.&lt;/p&gt;

&lt;p&gt;On my breaks I scroll through Tech Twitter on my phone and check in to the &lt;a href="https://www.leonnoel.com/100devs" rel="noopener noreferrer"&gt;#100Devs Discord channel&lt;/a&gt; to see if I can help answer questions or post some of my own.&lt;/p&gt;

&lt;p&gt;I’m usually home by 6:00 PM, which is basically pitch-black darkness in the wintertime here in the woods in Northern California. &lt;/p&gt;

&lt;p&gt;I haul the solar battery bank back down to the cabin so I can power the pump that feeds my propane water heater for a shower. &lt;/p&gt;

&lt;p&gt;My dog and I take our second hike of the day down the side of the mountain, this time with the help of my headlamp.&lt;/p&gt;

&lt;p&gt;After dinner I sit back down at my desk for another round of studying. &lt;/p&gt;

&lt;p&gt;If it’s a Tuesday or Thursday I’m tuning into the recorded broadcast of &lt;a href="https://www.leonnoel.com/twitch" rel="noopener noreferrer"&gt;Leon Noel's full-stack JavaScript bootcamp on Twitch&lt;/a&gt;. &lt;/p&gt;

&lt;p&gt;Otherwise I might log onto Free Code Camp, Udemy, or most recently, Team Treehouse. &lt;/p&gt;

&lt;p&gt;Or I might be working on a small project of my own to put my newly acquired skills into practice.&lt;/p&gt;

&lt;p&gt;At some point my girlfriend will call and I will probably vent about the mundane frustrations of the work day, or any of the more anxiety-inducing existential riddles I’m wrestling with: &lt;/p&gt;

&lt;p&gt;Who am I, why am I doing this, is this idea of transitioning to a career in tech as a self-taught developer just one big naïve fantasy that I’m foolishly buying into as a form of escapism?&lt;/p&gt;

&lt;p&gt;And she will reassure me that I have what it takes, that I possess the self-discipline to accomplish what a lot of people can’t or won’t, and that I have every reason to be optimistic that my station in life will improve in the not-so-distant future.&lt;/p&gt;

&lt;p&gt;I am often too mentally and physically drained to invest more than an hour into studying at night, and it’s rare for me to stay awake past 9:00 PM on weekdays.&lt;/p&gt;

&lt;p&gt;The moon begins to rise above the tree line as I crawl back under my wool blankets for the night. &lt;/p&gt;

&lt;p&gt;I set my alarm for 4:00 AM, and I swear to myself that tomorrow morning, I’m not going to snooze.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;strong&gt;If you enjoyed this piece and you want to keep up with my work, you can &lt;a href="https://buttondown.email/samuelsycamore" rel="noopener noreferrer"&gt;sign up for my email newsletter through this link&lt;/a&gt;. I promise to make every email something you will be excited to open!&lt;/strong&gt;
&lt;/h2&gt;

</description>
    </item>
  </channel>
</rss>
