preloader

Letter To a Friend

images/website.webp
By J. Toman / on 02 Aug, 2022

Letter To a Friend

A friend who is putting up a starter website for his business recently wrote to me and asked:

It seems static sites are the way to go. 
What would be your advice to me (an absolute beginner) on my the next steps? 

That’s a good question. No, seriously, as someone who does this professionally it makes me stop and consider how someone without my experience could bootstrap a project like this. Let me think on how an absolute beginner can do the technical bits. Just to keep it simple and well defined I’m going to suggest using Hugo , the static site generator that I use. With that out of the way, and while I think the other stuff through, I would say you could start by:

  1. Decide what the site is trying to do. Usually in the case of a business site it’s trying to lead the visitor into making contact with the business.
  2. In broad strokes define your site layout.
    • Decide what sections and pages there will be. Almost all websites need About and Contact pages. As a business site you will probably want a privacy notice and a legal notice as well. It doesn’t hurt to look at sites in your field and make your’s similar to what they are doing.
    • From that you should design your site navigation. Again, look at sites you like and see how they organize their pages to facilitate engagement with the visitor.
  3. Get your content in order, written it in Markdown. If you look at that Hugo site, in the Content Management section you’ll notice that Markdown for Hugo has some front matter which specifies the title, date,author, categories,tags and maybe some other stuff as well. I mention that as an FYI so you aren’t surprised by it.
  4. Choose a theme to frame your content. I say it that way because other than a web designer’s website, the content is the star, not the theme. The theme just contains and frames the content. Some good places to look for themes are https://gethugothemes.com as well as the theme gallery on the Hugo site . When you are browsing themes assume that other than changing the logo or swapping out their pictures for yours, maybe a change in color here or there, you will be using the theme as is. You are after all a beginner with minimal HTML and CSS knowledge. How to do this:
    • Look at the home page. For your business can you fit your message in the layout of that home page?
    • Look at it both on a desktop/laptop and on a phone. Most people will see your website on a phone. Do this for each one of the points below as well.
    • Look at the blog section, if you need one. Do you like that layout for your articles?
    • There may be a “kitchen sink” page where they display the basic graphical and typographic elements of the theme like titles, subtitles, lists, etc. . Will those work for you?
    • Are there specialty sections such as product or service sections ? You almost always can get rid of them if you don’t need them, but if you do need something like that will they work for you?
    • Check out any other pages they provide such as About, Contact, etc. .
  5. You can keep your project just in a folder on your desktop/laptop but I would STRONGLY recommend signing up for a free github.com account and starting out with revision control in place. They have a desktop app to ease the burden of learning git but you should understand the basic workflow. This isn’t a bad tutorial as a place to start .
  6. Sign up for a free Cloudflare.com account. Cloudflare’s main services are Domain Name Service (DNS) which means mapping numerical addresses that no one can remember like 142.251.132.227 to names that everyone can remember like google.co.nz , and content delivery which means if I in the USA want to visit your site I retrieve copies of your pages from a server in Seattle instead of from a server in Auckland, so it’s a lot faster for me and a better user experience. That’s enough by itself but they also provide other services among which is static hosting of websites. That’s what you’ll probably use though there are alternatives.

That’s a pretty good foundation. You can look through the Hugo documentation though it a) can get technical quickly, b) the Quickstart is command line-centric which usually puts people off.

From there there are choices about hosting etc. . Most of my sites are on AWS but I like the ease of Cloudflare Pages, their static hosting service. They can pull and build your site directly from Github, which is convenient.