Last week, I wanted to make a new website for my ghostwriting business, but I wasn’t thrilled with any of the options. While we love Ghost.org for newsletters and membership sites — that’s what we use for Remote Queer — it’s not a great fit if you just need a simple site to host your portfolio. Most of the existing Ghost themes focus on blog posts, and you have to do a lot of work to customize your site’s page types and layouts.

Another option is to use a WYSIWYG (What-You-See-Is-What-You-Get) website builder like Webflow or Squarespace. These are great for non-coders, because they allow you to drag-and-drop components around the page without writing any code yourself. But the problem with these platforms is vendor lock-in: once you use them, you’re stuck paying whatever they want to charge you! Sorry, but I’m not paying Squarespace $25 per month (16$ on the annual plan) to host a website that I can’t even export if I want to switch to another platform! 😡

That left me looking for something in the middle: a tool that I could use to create my own website from scratch, without the limitations of a WYSIWYG editor. Most of all, I wanted a site with $0 recurring costs beyond what I’d already spent on software and a custom domain name.

Here’s how I went about building my own portfolio site in less than 5 days with hardly any coding experience.

Enter: Bootstrap Studio

After trying out several cloud-based editors, a friend suggested I try Bootstrap Studio — an offline editor that runs on Windows, MacOS, and Linux. While cloud-based tools like Squarespace charge you a monthly fee, Bootstrap Studio is a one-time purchase. The Standard license costs $29 USD and includes one year of free upgrades; the Lifetime license costs $59 USD and includes free upgrades and free web hosting.

But that’s not the main thing that sold me on Bootstrap Studio. What I liked was that it had all of the benefits of a WYSIWYG editor — pre-built components that I could drag onto the page — with virtually unlimited opportunities for customization. Using it on my Mac felt a bit like using Photoshop or InDesign — a fully-functional tool rather than a clunky web interface.

I started out by inserting some of the pre-built components:

  • A “Hero” section for the homepage (a background image with several text cards overlaying it)
  • An accordion menu for the FAQ section
  • A series of “Project” cards for the portfolio page

My first big challenge was figuring out how to get the text effect I wanted on the home page. I wanted it to display “Let me write your [X] for you,” with “X” changing in real-time to highlight a variety of services I offer.

I found a text animation effect on CodePen that did exactly what I had in mind. All I had to do was copy the CSS and Javascript from CodePen into my design.

With some help from my partner — who showed me how to add it to my Bootstrap file and incorporate it into a “Span” — I got it up and running and knew that I was on the right track!

Inserting Testimonials from Upwork

My next goal was to incorporate some of my client testimonials from Upwork. I have a love/hate relationship with Upwork. It’s where I’ve landed some of my most reliable, well-paying clients — but a few of their recent changes are a textbook example of enshittification (read the book, if you haven’t yet!).

Freelancers have to bid tokens (bought with real money) when they apply for projects, and have very little control over how our skills and services are displayed. A few weeks ago, Upwork introduced an AI-powered “summary” of my services that was completely inaccurate and may have lost me clients!

That’s why I decided to launch the Nomad Ghostwriter in the first place: to have complete control over my how my services are portrayed to potential clients. That means putting my most relevant testimonials front and center.

So I used Bootstrap Studio’s “Testimonial” component to create a set of quote boxes where I could paste reviews from Upwork. Since I’m a ghostwriter, and have to keep my clients under wraps, I used Bootstrap's built-in “Icon” tool to find royalty-free images on Unsplash as stand-ins for my real-world clients.

Now, I have a prominent wall of testimonials that greets visitors to my home page — making them far more useful than they ever were buried on my Upwork profile:

Web page screenshot with heading "I Can't Tell You Who My Clients Are — But I Can Tell What They Say About Me...." followed by several de-identified testimonial cards

Integrating Contact & Subscribe Forms

Next, I needed to set up contact and subscribe forms so visitors to my website actually have a way to get in touch with me!

The trouble with building a static sites vs. using a dynamic site builder is that forms and other integrations aren’t included out of the box. Bootstrap Studio had handy components for both contact and subscribe forms, but they weren’t linked to anything! For this, I turned to a handful of free services:

Buttondown is a newsletter platform that’s free if you have fewer than 100 subscribers — perfect for just getting started. All I had to do was create an account, and point my existing contact form to the URL that Buttondown provided – super-easy!

For my contact form, I used Un-static, which is free for up to 50 submissions per month. It’s pretty bare-bones — messages just get forwarded to my inbox — but it’s good enough for now.

For scheduling virtual meetings, I used Cal.com: it’s similar to Calendly, but its free plan has more robust features. I inserted it as a widget on my contact page, so visitors can book a meeting right then and there, with as little friction as possible.

Here they are, all on the same page together:

A web page screenshot, showing a "Get a quote" form on the top-left with name/email/message fields, a "Subscribe to the newsletter" form with an email field, and a date/time selector across the bottom to book appointments

Ready to Go Live: Hosting on Fastmail

After 5 days of working on the site design, I realized it was more or less ready to go live – ahead of schedule! I still wasn’t sure wasn’t sure where to host it, though. My partner and I had discussed turning it into a Ghost theme, which would allow me to use the Ghost CMS for updates, but would require some additional setup.

Fortunately, while setting up my email services in Fastmail, I stumbled across a little-known feature: you can host static websites in Fastmail as part of your email subscription. Fastmail isn’t free, but since I was already paying $5/month for email services, I could host my site there without any additional fees.

All I had to do was drag my website files into the “Files” section and point my domain at them. Within seconds, my site was live! I also dragged some writing samples into the “Assets” folder that clients can download as PDFs.

Making updates to the website is a little clunky. Since there’s no web-based CMS, I have to make all changes in Bootstrap Studio, re-export the website files, and copy them into the Fastmail folder in my browser. Still, I can make these updates in a matter of minutes and I’m impressed at how quickly they go live!

A screenshot of Fastmail's Files section, showing several folders and files in the "Nomad Ghostwriter" website folder

Is Bootstrap Studio Right for You?

Designing your own website in Bootstrap Studio may or may not be the right fit for you. It requires a little more effort than using a WYSIWYG editor, but it gives you more flexibility and doesn’t lock you into a vendor like Wix or Squarespace.

What I like is that it lets you build a simple portfolio site to share your professional services, without the clutter of a full-featured blog or storefront. Plus, you can host it yourself using any hosting provider to keep your monthly costs low.

Do you have any experience using Boostrap Studio? Let us know what you think of the new site, or hire me to design a custom website or Ghost blog of your own!

💡
I’m offering a $1,000 referral fee to anyone who refers me a qualifying ghostwriting client! *Client must sign a contract for a full-length manuscript valued at $20,000 or more.