How to Build a Website from Scratch. Hint: It’s Not as Easy as Pie

Two cups of all-purpose flour, a pinch of salt, a teaspoon of sugar, two-thirds of a cup of shortening, 8 tablespoons of water plus a secret ingredient, and a pastry blender. If I follow Mom’s family recipe, I’ll have pie crust in a few hours even though her recipe is full of plot-holes. A 10-minute forgotten video of her making pie one Memorial Day seven years ago fills in the gaps. I can make pie.

I can tell you how to train for your first marathon or how to improve your time if it’s your second or tenth. I can tell you how to coax your 14-year-old cat to eat some chopped turkey while she’s obsessed with the ice cubes in her water bowl. I can find the house someone purchased in a remote location with just a few clicks. I admit I had some trouble replacing the 4-foot fluorescent light tubes in my kitchen ceiling. (A squirt of WD-40 did the trick.) But I can build sturdy wood furniture that comes un-assembled in a box. I hung all the framed art on my apartment walls myself. I can complete a crossword puzzle in ink as a distraction when I’m sobbing over my failure to add text to my website header photo. Do I need to install a page builder plug-in to drag and drop the text into a block? Or do I need an actual human to build my site for me so I can move on to fill it with content?

I recognize my limitations. I know what I don’t know and when I’ve reached the wall that tells me my marathon is done and the only way to the finish line is to walk there. When it comes to doing it yourself, I’m usually pretty confident. I know how to measure flour and sugar. I don’t know how to code.

I knew I needed my own website as I began a search for a job as a freelance writer – yet another step in the re-invention of my life once I arrived in California after uprooting from New Jersey. I needed a digital presence. The last time I showed my writing portfolio in a job interview, the internet was still young. The people developing software today were born when the people I know were growing up on data processing and pac-man. Now kindergarteners are attending school on Zoom and while they can’t always mute their audio, they’ll be building a website for me tomorrow.

I had already taken out my resume that had been sitting for a time like an old skein of yarn with the needles stuck in it; the front panel of a now-faded sweater paused when you got bored with it or life interrupted. I pulled at the loops on the needle, tugged at it a little and the yarn came apart. The words unraveled and ended in a spirally heap. I don’t knit. I had to start again and rewrite it, shaping a new page of my story.

Set Clear Goals – Why Do I Need a Website?

I’d been writing posts for my running community’s blog for the past year and a half. The web master set up an account for me and all I needed to do was cut and paste my copy into the blog page software, upload some photos, proofread (of course), and hit publish. It’s an online space where I could share my stories about running and fitness with a ready-made large audience who appreciate the content. But I needed my own platform where I could introduce myself to potential clients, showcase my previous professional work in a digital portfolio, and post new stories about other subject matter. I also wanted an interactive vehicle that would invite feedback from readers and encourage a returning subscriber audience. I’d thought about having my own website before, but never took the first step.

Seek Advice

Where to even begin? I reached out for advice from one of my tech-savvy running friends who I knew also had a personal blog. Patrick and I would chat about blogs and writing in between 50 or 100 meter sprints at our 5:30 a.m. track practice. He explained how he set up his site (with WordPress) and outlined the initial steps I’d need to take to get started: register and buy my domain name; select a hosting company and plan; decide which content management system to use; and choose a theme.

I was familiar with what a domain name was, but after that, I was in the dark. I hadn’t really considered how something gets on a computer screen. If you’d ask me about print production or publishing, I could tell you the steps involved in the process from the initial writing phase to the final print run; if you wondered about television or film, I could walk you through the progressive steps involved in a broadcast or film distribution. I guess I’d just taken digital media for granted. It’s ubiquitous in our lives and I can easily navigate my way through the digital landscape to find whatever I’m looking for in a click or two. But to actually create it?

To break it down simply: the domain name is the address of your website; the web host is the place where your website files are located; and a content management system (CMS) is the software for creating the mechanics and content of your site, including page layout, editing text, and uploading photos and other files.

Research Domain Name Registrars and Hosting Companies

I started researching and comparing domain name registrars and hosting companies -- some are more suitable for personal websites, while others are geared towards business functions. I also learned that WordPress, which calls itself “a blogging tool, publishing platform and CMS,” powers more than one-third of all the websites on the Internet. I chose Namecheap for registering and buying my domain and Bluehost as my hosting company. I kept the domain name registration separate from the hosting company in case I ever decided to switch providers.

Then I started sorting through the more than 7,000 WordPress themes until they blurred and all looked alike. I had to read the description of each one, look up every technical word I didn’t understand, and then go to the developer’s page and watch a demo. It was taking days and I was no closer to selecting one. I narrowed down my choices to 30 or so, not certain if any theme was appropriate.

When you open a Bluehost account, it includes the WordPress software, and you log in to a “dashboard,” which is the operations center of what will become your website. On my first visit to my dashboard, I noticed there was temporary domain name instead of the one I’d just registered. I called Bluehost tech support and learned that my domain name was still “parked” at Namecheap and it had to be moved to Bluehost’s servers. The tech support person walked me through the changes I had to make in the dashboard settings for DNS (domain name system) that would migrate my domain name over to Bluehost. DNS is sort of like the phone book of the Internet. You can track the progress of your domain name migration with a site called https://www.whatsmydns.net/ where you can watch as your domain name jumps from server to server around the world. The whole world map starts out covered in green check marks which are supposed to turn into little red x’s when the process is completed. Each time I’d look at the page there would be an x in Russia or China or India, but nothing in the U.S. Or Texas would turn red, but now all the other areas were green. It could take four hours to complete, but by the end of the day, nothing had changed. I wondered if I’d done it correctly. Fortunately, the next morning, I looked at my Bluehost dashboard and my domain name was correct. So it had made the round the world trip back to California.

Find Support

My head was full of themes and jargon. I needed an interpreter. So I joined a Facebook support group WPBeginner Engage – WordPress help for non-techies and it was quite clear I was the most “beginner” beginner there, since everyone else’s questions sounded like they knew what they were doing. The group’s facilitators answered questions with links to helpful instructional articles and I learned something from each one. I watched YouTube tutorials. I clicked through the Bluehost dashboard to familiarize myself with what was there. It still felt like I was looking at the controls in a cockpit when I hadn’t had a single flying lesson. How would I ever create my website?

At track that week, Patrick asked about my progress and I confessed I was frustrated and stuck. We agreed to meet in person to talk through my questions and concerns. We brought our laptops to a coffee place that had set up tables at a makeshift outdoor patio, using a section of their parking lot covered in Astroturf. Patrick patiently gave me a tutorial on using the Bluehost dashboard and WordPress: my first driving lesson in a parking lot. That afternoon, I went back to my apartment and sat at my computer for hours, until it was the middle of the night and I was in tears of frustration. I realized the truth: I could not build this website myself.

Focus on Brand Identity and Content Gathering

What I could do was write all the content for each page, organize the visuals to accompany the posts, and decide how I wanted each page to look. Drawing on my marketing background, I had an overall sense of what message I wanted to convey with my website. I also could envision the creative design even if I could not figure out how to put that on a screen. I wanted to use a logo that would announce my brand identity at a glance and serve as a design inspiration.

My idea was to choose a graphic that represented both writing and creativity. I searched through hundreds images of vector art for an icon that would tell my story. I chose a vector of a multi-color quill feather. Once I found exactly the right one, I immediately thought of using the colors as the stylistic element that would run throughout my site – tying all the pages together.

In addition to the stories I’d already posted on the fitness blog, I had other material written and I created new copy for the additional pages for my site. I typed everything out in a nice, comforting Word document. I selected writing samples and other visuals from my print portfolio and digitized them so I could upload them as images. I studied other people’s blogs and personal websites as examples of what I might want my website to do. I learned that you could find out whether a site was using a WordPress theme by entering the URL into whatwpthemeisthat. The search would reveal the theme and plug-ins they were using. Then, I could look up the WordPress theme and preview it to learn what was included and whether it would it do the things I wanted my page to do. I took advice from the Facebook groups and looked up the helpful suggestions.

Finally, I settled on either the Blocksy or Customify theme and installed the free version of Elementor page builder. Another friend pointed me to a blog a friend of hers had started and I saw how some of my similar ideas were working well for that page. I felt like I was making progress.

With my content finalized and all my documents, photos, and other visuals organized and ready to access, I reached out again to my tech running friend who had kindly offered to help me with the basic framework of putting the site together.

Experiment

This time, Patrick and I sat outside at a table on my balcony, with my laptop in range of my WiFi and in view of the hummingbirds that visit. We experimented with the WordPress theme I’d chosen. But it worked differently from the custom theme and software Patrick was using for his site. It was a frustrating exercise. He was unable to maneuver the page layouts and we got nowhere. We both agreed it was time to either bring in a professional to build the site for me or take another approach.

I had tried the do-it-yourself route with WordPress. Maybe that works for building an IKEA bookcase, or wiring your Ring doorbell. One of my cousins actually remodeled his bathroom watching YouTube videos for installing a sink and laying tile. I even found a video that showed me how to disassemble my oven door to clean it after I spilled hot liquid on it from broiling a chicken.

Changing Course Mid-Stream

If I continued on my WordPress website endeavor, my project would require a professional website designer. Surely in the heart of Silicon Valley, I could find an actual, local human website builder who could take on my small, simple website design. But could I even afford to pay someone to do it all for me? Then, I considered, if someone built it for me, how could I ever add content to it or create blog posts myself? Maybe I needed a different approach.

I quizzed the millennials at the non-profit animal rescue organization where I volunteer in San Jose. The organization has a popular and very active website so I asked who designed it. Finally, I asked my running coach if he’d connect me to the web master of our fitness community’s website where I’ve been posting my fitness content all along. My new tech friend, Jim, and I met on a Zoom chat and talked about simplifying the process of creating my website. Jim listened to all my concerns and frustrations and immediately urged me to consider switching to Squarespace instead of WordPress.

While there are numerous benefits to using WordPress, including its flexibility and customization, Squarespace is an all-in-one website builder and hosting platform and requires no coding knowledge. This made sense to me since I was already familiar with posting in the blog. In hindsight, maybe I should have thought to start there, but I’d been steered towards using WordPress. Now I started to feel a tiny glimmer of hope that I could do this thing. With Squarespace, you can start creating your own website right away using their free trial with no danger of the site going live before you’re ready to launch it. That meant I could make all the beginner mistakes without worrying about errors in code or deleting important data. After our initial discussion and a most-helpful tutorial, where we set up a rough structure for the site, I felt I could make an attempt at uploading some of my content.

Get the First Draft on the Screen – Edit Later

That evening, I wanted to apply everything I’d learned while it was still fresh in my mind. My motto became: just get something on the screen and worry about correcting mistakes and fine-tuning it later. Whenever I couldn’t figure out how to do something, such as resizing a photo or adding a button or changing a font, I simply moved on to the next thing I could do. It was easy to cut and paste text from my Word documents. I was able to upload photos and other visuals directly from my photo files in my PC. I spent the next week uploading my content and experimenting with page designs. I made lots of mistakes.

I thought I could build the portfolio section with simple photos and captions, but later realized I needed to use the ready-made template for “projects” because it would allow me to link each one to the menu. I scrapped my first attempt and started over. The second try was better. I had questions about every item on every page.

Portfolio Project Gallery

My next meeting with Jim would be the following week, so I concentrated on finding some answers myself. Squarespace has an in depth knowledge base with help sections, guides, tutorials that walk you through each function of the software, and forums to help answer questions. I also joined several Facebook groups for Squarespace users Squarespace Community, Squarespace Help, and Squarespace Newbies Support Group.

That week, I got an email from Squarespace offering a 20% discount on the annual hosting fee and it made sense to purchase the plan. I would still need to migrate my domain name from Bluehost to Squarespace, but that could wait until the site was finished.

Hands-on Learning

There certainly was a learning curve in becoming familiar with the Squarespace software so I could create attractive layouts for pages and posts, change font sizes, add graphics, and move and re-size photos with some dexterity. A few page design functions are clunky; they should be easier to manipulate. You can’t always place a photo exactly where you’d like the text to wrap around it. And as I was writing a blog post and inserting photos, all of my text mysteriously duplicated — 20 times! But despite the challenges of building my own website, working on it myself means I can easily make corrections and update the site content whenever I need to. It’s a work-in-progress. I can add details like hyperlinks to provide more information in a blog post, insert a bit of code (with some help) to refine the look of the pages, add search engine optimization (SEO) to improve the search results and bring people to the site. I’ll be able to communicate with readers as I accumulate an audience, and update them with new content. It’s an evolving process and I’m still learning.

Interlude

In the midst of working on my own Squarespace website, I wrote a blog post for the animal rescue’s site. I’ve been volunteering there for the past year and a half, and as a community, we are always looking for ways to encourage people to adopt the adorable kittens that need homes. The co-founders of the rescue liked what I wrote and I offered to upload the story onto their website. Big shot, right? Me and my minuscule amount of experience trying to get something on a screen. And – you guessed it – their site is in WordPress! I would just be entering text and uploading photos into an existing, already-built site, so surely I could figure out how to make a blog post. I gave it a try. I was pleasantly surprised to find that the blog page layout and editing functions worked similarly to those in Squarespace and the icons and terminology were familiar. Here, I could cut and paste text from a Word document and upload photos. Everything seemed to go smoothly, until I hit “publish,” and none of the photos appeared on the screen. I tried to troubleshoot with some research, but couldn’t solve the problem on my own. Fortunately, another volunteer with tech experience stepped in to help. She was able to root out the problem with the way the photos were loaded and named and solved the issue. The post appeared on the blog. Success.

Fine-Tuning the Details

I continued to fine-tune all the pages of my site. Jim and I met by video, and each time, we tackled more details. We incorporated my logo concept and I liked the way it turned out. I wanted to add the creative styling effects as I’d envisioned, playing off the colors in the logo. Jim added some custom code using CSS (cascading style sheets, which is the markup language for customizing colors, fonts, and website layouts) to produce color drop caps I could use on content of some pages and blog posts. He showed me how upload the code myself to create the effect in future posts.

We tweaked page layouts so they’d be responsive – readable on both a desk top and a mobile phone. We checked the page URLs to make sure when you clicked on a link it would take you to the correct place in the site. We checked the form for a reader to submit their email to receive updates.  Finally, the site was ready to launch and go live.

The last step was migrating my domain name from the Bluehost servers to the Squarespace server. It didn’t take long at all and soon my domain name was linked to my newly designed website. Still, I was nervous. Would everything work correctly? We tested my site navigation and all my hyperlinks.

We finished our video meeting and logged off. I sat for a moment and reflected on my accomplishment. I have a website. I made it. It feels like taking a pie out of the oven: the steam rises out of the vents in the crust and you can smell the berries. Look at that! My Mom would be proud.

I had a few things left I needed to refine, but I was tired and it could wait until morning. The website is going to be in the “soft opening” phase for a while yet.

After a couple hours of sleep, I sat back at my computer and manually adjusted paragraph line spacing that came from originally formatting my copy in Word. I suddenly remembered I’d forgotten to ask Jim about a small piece of code I needed to italicize a movie title in one of my posts. We had used a code block to create the color drop cap so the rest of the text in the paragraph was included in the block and I couldn’t simply use the edit tool bar to italicize the word. I was about to email Jim in Florida to ask for his help.

But I thought, I bet I could find this on my own. A few Google clicks and I had the answer: <em>ITALIC TEXT</em>. I tried it in the Squarespace code block and it worked. Boom! I know some code. Well, not really. I could walk into a taverna on a Greek island, raise a glass of Retsina and toast someone with a “Ya mas!” That doesn’t mean I speak Greek, but I can say “cheers.” It’s a new language and I’m only beginning to learn a few polite words.

So, does it work? Do the links connect to the menu items? Can you read the rest of a post that starts on the homepage? Are you able to print out my resume? Are you able to comment on a blog post? Can you click on a category and find posts that correspond to the category or tag? Does the email subscriber form capture names of interested readers?

The proof is on the page in front of you! You are reading this blog post today. So the answer to all those worrisome questions is: yes. You have found my new website and read my first post. So if you like it, tell me here. If something has resonated with you, please comment below and let me know. Do you need a freelance writer or editor to help you with your project? Contact me here.

If you’d like some pie, that’s another post.