Building a website. Ugh. Sounds like a headache, doesn’t it?
Well I’m here to help.
In this article we’re going to make a website step by step. We’ll cover everything you need to know.
No technical experience is required— this is a guide for TRUE beginners.
In this article, we’re going to build a website for a musician but don’t worry: everything in this article is applicable to all types of websites.
You can see the final website here.
What Tools You’ll Need
You’ll only need one tool for this: Squarespace.
Squarespace includes everything in one package: hosting, domains, templates, ecommerce and more. Everything just works.
Here’s what Squarespace looks like:
Now Squarespace isn’t free. Annual plans start at $12 / month. But you have to spend money if you want your own website on your own domain name. It’s inevitable.
Even Wordpress (which you can download for free) needs to be installed on a host (which costs money).
Note: My work is supported by affiliate commissions. Read more »
Step 1: Choose A Template
Sign up to Squarespace to get started.
The first step is to choose a template. Squarespace provides a bunch we can choose between:
Think of each template as a starting point— we’ll be customizing it so that it will have it’s own unique look and feel.
I am going to choose the Paloma template:
Next up we’ll sign up for Squarespace’s free trial— there’s no credit card required at this point.
After completing signup, we’re in Squarespace! Nice!
Step 2: Creating Pages
We’ll begin by adding some pages. So click Pages:
Delete Demo Pages
Squarespace gives you some demo pages to start off— but we’re just going to delete those.
Now let’s add our pages. Click the plus (+) icon to add pages:
We’re going to add 3 blank pages (Songs & EPs, About and Contact) and 1 blog page (Blog). These will make up our main navigation.
Step 3. Add A Logo & Customize The Header
Next we’re going to add a logo and customize the header.
So click Edit to open the editor:
Then hover the header with your mouse and click Edit Site Header:
Remove The Social Icons
Next we’ll remove the social icons and customize the button in our header.
So click Elements:
And we’ll do two things. First, let’s turn off the social links toggle. Second, let’s make the button link to my Spotify:
How To Add Your Logo
Go back to the header editor. Then click Site Title & Logo:
And from there you can upload a logo image:
I don’t have a logo for my music— that’s why I’m using the Nike logo as an example.
So I’m just going to stick with the default text logo Squarespace provides:
Customize The Navigation
Next I’d like to align the navigation to the center.
So go back to the header editor and click the Desktop icon:
From there we can select where we’d like navigation to show— let’s set ours to centered:
And there we go— our header is customized! Here’s how it looks:
Step 4: Styling The Website With Fonts & Colors
Next we are going to customize the fonts and colors. This is a useful way to establish the brand.
Choosing Custom Fonts
Click the paintbrush icon to open Site Styles:
Then choose Fonts:
The Global Text Styles let us select the fonts that we want to use across our entire website:
I am going to select Freight Text Pro for headings and Helvetica Neue for paragraphs, buttons and misc.:
Setting Custom Colors
Setting custom colors is a great way to establish your brand— so let’s do that.
Click the paintbrush icon to open Site Styles:
Then choose Colors:
And click Edit Palette:
Your website colors will come from this palette— changing the palette will automatically adjust the colors across your entire website.
The most important color in your palette is the Accent Color. You’ll want your most important brand color here. I choose a royal blue for mine:
Step 5: How To Edit Pages In Squarespace
Now let’s start designing the content of our website— we’ll start with our homepage. So navigate to the homepage and open the website editor (remember you just have to click the Edit button).
Changing The Background Image
Let’s start by changing the Section background. So click the pencil icon (below) to open the Section Editor:
Then click Background and upload a new background image:
You can use the Overlay Opacity to add some darkness to your background. This helps text standout:
To edit text in Squarespace, you can just click it and the text editor will pop up:
Click the blue + icon if you’d like to add a new text Content Block:
We are going to add a video Content Block:
Here’s how it looks— we have text and a video content blocks:
How To Change Section Height & Width
You can also change the sections height and width when in the Section Editor.
For example, here’s a Large section:
And here’s a Medium section:
Create Sections From Scratch
Let’s create the Contact page next. So navigate to the Contact page click Add Section:
Squarespace includes pre-built sections so that you don’t have to create each page from scratch.
We’re going to choose one of these pre-built contact page sections…
…. And now we have our Contact page!
Setting The Color Of A Section
We just need to change the color background to a darker color to match the rest of the website.
So click Edit Section:
Then click the Colors tab and choose a darker color:
Step 6: Creating A Blog
Note: Just skip this step if you don’t need a blog on your website!
By now you should have a pretty good sense of how Squarespace works. So I’m going to move a bit quicker.
So navigate to the Blog page.
And let’s add a Headline section:
There, that looks good:
Customizing The Blog Layout
Now I want to change the layout of the blog— which we can do by clicking Edit Section:
From there I’m go make a few customizations:
- Changed Layout to Masonry
- Changed Width to Inset
- Put posts in 3 columns
- Hide Excerpts and Read More Links
- Put Meta Content below the title
- And centred all text
So it looked like this:
How To Add Blog Posts In Squarespace
Open the Blog Editor to add new posts.
You can open the editor this by clicking Manage Posts on a blog page:
From there, simply click the post you want to edit:
Step 8: Add A Domain Name
So now our website is done!
(Note: To save you time, this article doesn’t show you building the Songs & EPs page and the About page— but you should know how to create those pages by now.)
Here’s how our website looks:
Now let’s publish this website to a domain name!
First: Upgrade Squarespace
In order to add a domain name we’ll need to upgrade to a paid plan.
Paid plans can be either Monthly or Annually. I’m going to choose an annual plan because it includes a free domain name for 1 year.
I’m going with Personal— the cheapest plan:
Claim Your Free Domain Name
Once you upgrade to a paid plan you’ll have an option to claim your free domain name. Click this box:
Then click Get Domain:
From here we can search for our free domain name! I’m going to go with this one:
Last Step: Publish The Website
Once you have your domain name chosen the only remaining step is to publish the website!
So go to Settings and click Site Availability:
Then set the site to Public:
And from there our website is live on our domain name!
Tips & Tricks: The Secrets To Great Websites
So I’ve shown you how to build a website. But in this section I want share tips and tricks that will help you build a great website.
Tip #1: Choose a Goal
Your website isn’t an end in of itself. It needs to accomplish something for you. Almost all decisions can be solved by asking: “will this help us accomplish our goal?”
On my website, the goal is to get more listeners— so I gave the most valuable real estate on the website to a ‘Listen On Spotify’ button:
Your goal might be different: for example, if you want to generate leads maybe the button should link to a contact page!
Tip #2: Be Human
Human works on the internet.
People will respond to your website if you make it clear there is a real, live human behind it— don’t try to hide behind corporate language or vague stock photography.
Tip #3: Less Is More
People don’t read websites, they scan websites. Distill everything down to the essentials.
No walls of text.
Tip #4: Keep Navigation Simple
Think of website navigation like elevator buttons: people use it to get somewhere. It needs to be simple and positioned in a consistent place.
Tip #5: Avoid Jargon & Corporate Language
Most people use corporate jargon or vapid catchphrases about customer support when they try to write content for their website.
Don’t be those people.
Tip #6: Write Conversationally
Imagine you’re having a coffee with a friend and they ask you to explain your business. How would you talk? What words would you use? That’s how you should write on your website.
Good writing is conversational.
Tip #7: Add Testimonials
Testimonials build trust with customers. A good testimonial addresses fears and concerns in order to build trust.
Tip #8: Show, Don’t Tell
Whenever possible, show visitors— don’t tell them. Remember: visitors don’t read websites, they scan websites.
The best way to do that is with photography.
Try to avoid corny stock photography. Stock photography is usually corny when it’s trying to be a metaphor— for example a handshake to signal customer service. Ugh. Studies have found that these types of photos are often ignored.
Tip #9: Make Your Contact Details Obvious
Don’t try to get clever here. Make your contact details super obvious.