Building a Blog from the Ground-Up
From Classical Singer to Coder in 365 days — Part III
A full year has officially passed since we entered the COVID19 pandemic and with it, the age of work-from-home. And I can’t be the only one who thinks it’s just been one really long March.
The same way passing tests in high school or college doesn’t automatically mean you’ve mastered the material, spending 8 months learning about how to code through Codecademy and Frontend Masters didn’t mean I was ready to ship gorgeous websites left and right. However, I had developed the tools to navigate how the heck to break down a website into manageable components that I could create individually.
This is the story of my experience using a Static-Site Generator, deploying a website, and migrating the content to a Headless Content Management System. All for the FIRST time.
To say I was apprehensive would be an understatement, but thanks to several invaluable tools I was able to work my way up from nothing to a functioning, accessible, website with Good Lighthouse scores to boot.
In September, when I was offered the opportunity to build a wellness blog for a client, I immediately said yes.
As my first stand-alone project, I knew this was going to be a big learning experience and my plan was to fully lean in.
I’ve heard engineers say that with experience, the code you write becomes more streamlined and efficient. Being a newbie, my code was not exactly concise nor would it be revolutionizing in its efficiency. I knew I could spend additional hours/weeks/months trying to perfect my first iteration of the blog layout, but the goal for me was not to make it perfect. (Huge mental challenge there.) The goal was to make the first version usable. And hopefully not hideous to look at.
I would have to relinquish my need for it to be perfect, to allow it to be good enough. Because that’s what the second, third, and tenth iterations of my project would aim for.
After discussing the client’s vision for the blog we agreed the main purpose was to develop their online presence, so we decided on a few goals. Knowing the target audience would be users in their 50’s and older, my focus was on making the site easy to use and read.
So, after doing some research I decided to use three softwares to develop the project:
- 11ty as my Static-Site Generator
- Vercel for Hosting and Deployment
- Contentful as my Headless Content Management System
I wanted to make sure I made the right impact for my client while using the opportunity to learn new software in the process, and I felt confident that these tools would help me do that.
First Up, 11ty:
The first decision I made was to build the blog using a Static-Site Generator over using Server-Side Rendering (SSR). The main consideration for me was that SSR web pages are generated at runtime on the server with each request causing them to be a bit slower. SSR is great if you have a ton of pages to serve, like for a large e-commerce platform, or if the content needs to always be up-to-date.
Since the site I was building was not going to require either of those, I decided the Static-Site Generator (SSG) would be a better fit. With an SSG, all pages are generated at build time rather than waiting till a page is requested by the user. Therefore, the content is ready to be viewed before it’s even requested. For a blog beginning with 10 posts and maybe growing up to 500, the most important thing was for the user’s experience to be fast and efficient.
While content could become stale with an SSG because of the need to rebuild web pages to update the content, the deployment software I used, Vercel, had a solution. Vercel provides hooks to trigger a rebuild from a remote application like a Content Management System, which I planned to make use of to streamline the client’s experience creating content.
Choosing 11ty over other SSG’s made sense because it seemed user-friendly, and supported my choice to further focus on the front-end parts of web development.
As I developed the initial layout for the home page I read through a handful of tutorials on setting up your first 11ty website. All of them were informative, but my favorite was the four-part* walk-thru by Tatiana Mac. She is the reason I understand Static-Site Generators at all, and despite being far more experienced than me, her explanations were simple and precise enough for this newbie to grasp.
*I’m anxiously awaiting the final two installments of the series.
Although it took me some time to get used to working with 11ty, the overall experience was deeply satisfying. 11ty works with multiple template languages so I had a wide array to choose from, and ultimately landed on Liquid.
With Liquid as my template language, I was able to easily establish a basic layout that could be called for the entirety of the website by specifying it in the page’s Front Matter (where the individual page’s data lives).
I could also layer layouts by calling my initial layout in a second template (i.e: BlogPost) and modifying it to suit the needs of my BlogPost pages, without having to rewrite all the HTML that was already established.
Though CSS is not currently recognized as a template extension for 11ty, the thorough documentation on setting up Passthrough File Copy explained how to add supported template formats to make sure my CSS could be read and executed by my 11ty site.
From start to finish, using 11ty challenged me to learn about a new software at the same exact time I wanted to use it. I didn’t have the luxury of taking an extended video course on its ins and outs before diving into the project. The tutorials I used along the way were invaluable, but my work on this project was self-guided and therefore mostly trial and error. So I made a lot of mistakes while muddling my way through, but with each mis-step I understood a new facet of working with the technology. I would wholeheartedly recommend 11ty to anyone looking to work with a Static-Site Generator because if I could learn to use it, you definitely can too.
Hosting and Deploying the site:
The first iteration of the blog was complete, and now it was time to send it out into the world.
I chose Vercel as the host provider because it allowed me to easily integrate with my GitHub account, where all the code from my 11ty project was living. Vercel also offered me the ability to have both a staging and a production account. This allowed me to preview changes I wanted to make to the blog, before deploying them to production.
This was especially helpful when I was first building the website because the client and I had not yet decided on a final domain name. I was able to create a temporary domain through Vercel and easily test the website with the client for the first month. Once we had settled on a domain, I simply redirected Vercel to the new domain.
Setting up 11ty with Vercel was simple because once the connection was made between my GitHub repo and Vercel, all I had to do was add 11ty’s build script to my package.json, and Vercel ran it.
With the connection established, every time I pushed to origin my latest commit Vercel detected the change and would automatically redeploy the site, giving the client real-time updates. How easy is that?
Lighthouse:
With the website deployed, the next step was to make sure it was fast and accessible.
Because Lighthouse is built into Google DevTools, it was a no-brainer to take advantage of this free tool. Running Lighthouse would audit my newly built site based on specified categories and return a report showing what aspects could use improvement.
My main concerns were Performance, Accessibility and SEO so I ran audits for both Mobile and Desktop, targeting those aspects and the report was generated in a matter of seconds.
Even though it was my first time using Lighthouse, the breakdown of each report was easy to read with metrics (and explanations!) broken-down for each category. In my initial audits, I had areas for improvement labeled as Opportunities in Performance and Accessibility. By resizing my images and ensuring appropriate sizes were served for each screen size, my Performance improved markedly. To improve the Accessibility, I went back to my HTML and made sure all my tags were properly labeled.
By using Lighthouse I was able to optimize the Performance, Accessibility, and SEO for the site I was building without having to reinvent the wheel. Lighthouse was quick, intuitive to use, and as always with Google- really well documented. 5-Star Yelp Review.
Headless Content Management System:
For the final step of this project, I had to make the content easy to create, edit, and manage for the client. I knew I needed some kind of Content Management System (CMS), but I didn’t want to use a traditional CMS knowing they still mostly combined content with developer code. I wanted more flexibility for my client so that the project could evolve and grow as needed without needing to transfer to a new CMS every few years.
I landed on using Contentful, a Headless CMS, because it stores content separately from the code used to build the presentation layer. My client needed to have the autonomy to edit or publish content without waiting on the developer (me!) to hard-code it. And Contentful did all these things, WITH a beautiful, clean editorial interface I could customize to the client’s needs.
Fast-forward to me getting comfortable using Contentful… And it was probably the most challenging part of building out this blog. Although it wasn’t complicated to set up an initial account with the software, it took me several tries to use the Contentful Software Development Kit (SDK) successfully.
In hindsight I know this is mainly because it was my first time doing this. I made a classic newbie mistake and when following the tutorial, copied the exact excerpts into my code editor rather than updating the variables to reflect the Content Model I had actually set up.
So when I launched my blog site, the content that existed in 11ty was displayed but the Contentful content was nowhere to be found.
Just kidding, it was being passed through to 11ty but it wasn’t being parsed correctly so it was only displaying as a JSON object. Not so cute.
After some trial and error, troubleshooting, and asking for help, I was able to find the solution. When the API was called, 11ty was not processing Contentful’s content into human-readable format. Though it took me hours to resolve, the fix was simple.
Add dependencies to parse rich text from Markdown, and to render rich text as HTML, to my package.json. Once those were installed, I updated the configuration of my 11ty site to accept the new dependencies. And voila! — the site was deployed, and the client now had free rein over updating and creating new content.
In Conclusion:
Towards the end of this whole process, my mom asked me how many hours I thought I’d spent on building the blog. The truth is I have no idea, and in the best way possible it doesn’t actually matter. The amount I learned throughout the course of developing this project could never be quantified in hours.
I stretched my skills far beyond what I imagined was possible a year ago when I first contemplated learning to code.
I learned to read and use MDN documentation.
I learned what a slew of acronyms actually mean and what they do, including HTML, CSS, CMS, SSG, SSR, SDK, JSON, TTFB, LCP… the list could go on.
I learned Flexbox and Grid and vertical alignment- the thing you never imagine would be so difficult but for some reason it is!
I learned about Google DevTools and how to ‘inspect’ anything on the web. (My internet browsing will never be the same again.)
I learned to slog through the mud, trying to find the bug that’s preventing my site from loading correctly.
I learned that it’s okay to start over from scratch sometimes if my solution isn’t working.
And most importantly (you knew this was coming), I learned how to ask for help before I fall completely into despair over a coding problem.
After working so consistently for 12 months, I feel proud of what I’ve accomplished. It might just be a drop in the bucket, but if nothing else I proved to myself that I could become proficient in a field that I never thought possible for me. And along the way I learned that my love of problem-solving had a calling all along.
Thank you for sticking with me through the final article in this three-part series! Have any questions or thoughts to share? Feel free to find me on LinkedIn or DM me on Twitter @jessica_nicolet.
As of the publication of this last article, I am now actively looking for Junior Software Eng positions! 👋
All the services I used during the development of this project (11ty, Vercel, Contentful) were free to use. Though Contentful has a few limitations in their free ‘Basic’ package, the functionality was plenty for me to manage the Content Model and set up user permissions for the main content creator to have access to write and edit content.
