ENTREPRENEUR HACKS
Build and host the low-code website you’ve always wanted, for free, in a day
Be your own web developer: build something, spend nothing, change everything
· Create and run your own website
· Caveats
· Results
· Your website’s name
· Choosing how to build your website
· Really building your website
· Try it now!
· Hosting your website
· Setup your development environment
· Deploy your website to the world
· You’re not done!
· SEO, SEO, SEO
Create and run your own website
My wife and I have been building a baby sound machine called SleepaSloth and we needed a landing page for our product that could later evolve into a ‘proper’ website.
As an engineer, I wanted something I had full control over, so website builders like Wix, Squarespace, Weebly, Webflow etc were not options for me (although excellent no-code options).
As a startup co-founder, I needed a solution that was as cost effective as possible (read: free!).
As a father of three, I had to have something that was easy and quick to build, extend and maintain — not something I needed to spend all my time on.
This is the guide I wish I had when I started out! It is not intended to show the best or only way, just to describe a way that worked for us and could work for you too, chop and change it as you need.
Caveats
- To follow this guide you need to understand HTML, CSS and JavaScript. If you don’t already, it is worth understanding these basic building blocks of web development
- If you are looking to build an e-commerce website, just go with Shopify
- I decided not to use Netlify, although it is an awesome platform. As a one man team I didn’t need any of the remote builds or collaboration features and their free tier limits felt a bit restrictive. You can still follow this guide and use Netlify if you want
- I ended up using a lot of Google products although I’m not affiliated with Google and have no particular bias (for example, I had a bad experience with Google Ads and stopped using it)
Results
Here is the website we built following the approach described in this guide:
TDLR — sleepasloth.com is built using the Eleventy static site generator, it uses Tailwind CSS for styles, Alpine.js for programming and PhotoSwipe for image galleries. Its source code is hosted on GitHub, developed locally using VS Code, deployed to Firebase and fronted by Google Domains. Its content is written in Nunjucks and Markdown with a splattering of HTML.
Minus the domain name, it is entirely free and I can change it whenever and however I want!
Your website’s name
So this bit isn't free… Technically you don’t need a domain but realistically you’d be mad not to!
I used Google Domains, it’s quick and easy to use. My domain costs me £10/year, it auto-renews and includes free privacy protection. You can use whatever domain name registrar you want, I’ve used a couple over the years and found Google Domains to work the best for me.
In reality, once you have your domain and setup DNS and email forwarding you will forget all about it.
Choosing how to build your website
This is where you need to make your biggest, hardest-to-change decision.
I’ve made all sorts of ‘websites’ over the years, from writing HTML/CSS/JavaScript from scratch to Grails, Spring Boot and Angular web applications.
I approached this choice with clear requirements in mind: I wanted something simple, portable, blazingly fast and good for SEO.
I didn’t want to re-invent the wheel so a solution that was extensible and that had a strong Open Source community behind it was important.
My requirements and research led me to the Jamstack, an architecture defining a new(ish) way to build websites.
The JAM in Jamstack stands for JavaScript, APIs and Markup and the term was first coined by Matt Biilmann (Netlify’s co-founder and CEO) in 2015.
The Jamstack has significantly evolved since the term was originally coined, a Jamstack-style approach brings many benefits and is something you can easily research further yourself.
The main concept to understand is that you are creating a static site — your UI is compiled and pre-rendered before your website is deployed and made available to users. Sometimes, as is the case for my website, you do not even need a backend at all.
Once you commit to a Jamstack approach your next decision is to select the Static Site Generator (SSG) you want to use. There are an overwhelming amount of SSGs available today. At the time of writing, some of the most popular SSGs are Next.js, Hugo, Gatsby, Jekyll and Nuxt.
There is no single best SSG, you should choose the one that works best for you. I decided on an SSG based on the language and templates it supported as well as the existing websites made using it.
I wanted a JavaScript-based solution so Jekyll (Ruby-based) and Hugo (Go-based) were out. I wanted a wide choice of templating languages so Next.js and Gatsby (React templates) and Nuxt (Vue templates) were out.
I decided to go with Eleventy (11ty) and have not regretted the decision so far.
Eleventy is JavaScript-based, it supports a bunch of templating languages (HTML, Markdown, JavaScript, Liquid, Nunjucks, Handlebars and more) and is used to build the websites of Netlify, Google’s web.dev and Chrome Developers, ESLint and more. It has a strong user community and good docs.
Really building your website
Congratulations! You’ve decided to build an extremely fast, secure and cheap website using a simple and flexible Open Source static site generator based on Node.js. But that only covers how you’re going to build your website, not what you will actually build.
When you start using something new, I find the best way to get to grips with it is to take an example/template/starter project, get that working and then start making changes. This means you start with something that works and incrementally change it.
Eleventy has a dazzling amount of starter projects to choose from: https://www.11ty.dev/docs/starter
The starter project to choose will depend on the type of site you’re building and your choice of technologies. I started with a simple landing page and a strong desire to KISS. I wanted to avoid complication/magic and was looking for something without (totally awesome) tools like SASS, Webpack and Bootstrap.
I ended up going with an uber-simple TEA stack — Tailwind CSS, Eleventy, Alpine.js.
Tailwind CSS is a simple CSS framework that allows you to create your design directly within your HTML markup, using class names. It is lightweight and responsive — essential given that most web browsing is now done on mobile devices.
Alpine.js is a lightweight JavaScript framework. I have a lot of previous experience with JQuery and much prefer Alpine!
Try it now!
At this point I found it useful to start playing with actual examples, just to prove out these fundamental decisions before going any further. I recommend you do this too and I’ve tried to make it super easy for you. You’ll need a GitHub account and a Netlify account. They are free and well worth having, go and create yours now!
Find below the simplest TEA stack project I could create. You can deploy it with a single click to Netlify. Try it out, look at the source code, deploy it, look at the result, change it, redeploy it:
Hosting your website
You now have a website hosted on Netlify, you could continue to run your website on Netlify but I chose not to. Another option to consider is GitHub Pages, which I looked into but didn’t end up testing. That’s because I had already been using Google’s Firebase for the SleepaSloth mobile apps we’ve been building and prioritised trying that.
Hosting your static site on Firebase is free (within quite reasonable limits), easy and scalable. But you can host your site wherever you want. I haven't hit any limitations with Firebase and so remain hosted there, the configuration is trivial, deployment and rollback is simple and performance is top notch.
Setup your development environment
I keep my source code on GitHub, some people prefer GitLab or other solutions.
I develop code locally using Visual Studio Code, there are endless IDEs available, go with your preference. If you have none, VS Code is a great, free default.
Here are a couple of VS Code plugins I found useful:
- Alpine.js IntelliSense — Code completion for Alpine.js
- Color Highlight — Highlights CSS web colours
- GitHub Copilot — AI pair programmer, way more useful than I had imagined
- GitLens — Git insights and visualisations
- HTML CSS Support — Code completion for HTML id and class attributes
- markdownlint- Linting and style checking for Markdown
- Nunjucks — Nunjucks syntax definitions
- Nunjucks Template — Nunjucks syntax and formatter
- Prettier — Code formatter
- SVG Viewer — View SVG images in VS Code
- Tailwind CSS IntelliSense — Code completion, highlighting and linting for Tailwind CSS
Share your website with the world
Once you have a site that builds with Eleventy and a configured Firebase project (ie valid firebase.json and .firebaserc files), you can add the following to your Node.js package.json file:
Now deploying a new version of your website is as simple as running npm run deploy and your updated site is live in under a minute!
You’re not done!
Once you have a basic site up and running there are so many other topics you could get into, here are a couple of aspects I spent time on, if you’re interested in any of them let me know and I could write a more detailed post.
- Custom Eleventy Shortcodes — I created a few shortcodes for reusable content
- Automatically generated ToC with Eleventy
- Basic CSS Transitions/Animations with Tailwind CSS and the Alpine.js Intersect plugin
- Lightboxes with Alpine.js
- Photo galleries with Eleventy and PhotoSwipe
SEO, SEO, SEO
If you take the time to create your own website, chances are you want it to be found and read by people. Unless you have an ad budget or an existing audience, SEO will be key. There are so many aspects to SEO and I am by no means an expert but I did spend quite a bit of time looking into it. My favourite guide on SEO is from Backlinko — it is quite comprehensive. Do not be scared by SEO and start immediately, SEO investments take time (months) to deliver returns.
Here are some of the areas I looked into, specifically around my website:
- Setting up basic SEO on your Eleventy website
- Web Performance with Google’s PageSpeed Insights and Lighthouse
- Site Performance with Google Analytics and Google Search Console
- Automatically generated sitemaps with Eleventy
- Responsive websites with Tailwind CSS
- Optimised images with the Eleventy Image Plugin
- Optimising your website with PostCSS and cssnano and html-minifier
