The website fearless.tools has been alive for as long as this newsletter has been. It’s not very interesting (just a splash page for the substack), but I hope to turn it into more over time.
For now, we’ll take a look how to set up something like this yourself. Splash pages are great for gauging interest in a product or idea without necessarily needing to actually build the thing in question ahead of time. The ability to do so quickly is hugely valuable for experimenting with new ideas!
Building the website
If you don’t already have an opinion on the tech stack you want to use, I highly recommend Next.js. It is a framework built on top of React that is highly popular. Documentation is great, and you won’t have to worry about figuring things out from scratch. There are even templates that can help you get going as quickly as possible.
At the same time, Next.js won’t hold you back in the future. Ultimately you have full control of the code and what it’s capable of, as opposed to a hosted website builder like Squarespace or others.
I also used TailwindCSS, a popular and powerful CSS framework to help style the website. It has a bit of a learning curve, but is very productive once you get the hang of it. Great documentation and AI can help a lot with this though:
With a Next.js project set up, and TailwindCSS installed, the following is really the only code I had to write to create my splash page:
import Head from 'next/head' | |
export default function Home() { | |
return ( | |
<> | |
<Head> | |
<title>Fearless Tools</title> | |
<meta name="description" content="Infrastructure without fear" /> | |
<link rel="icon" href="/favicon.ico" /> | |
</Head> | |
<main> | |
<div className="bg-emerald-200"> | |
<div className="mx-auto max-w-7xl py-16 px-4 sm:py-24 sm:px-6 lg:px-8"> | |
<div className="text-center"> | |
<h2 className="text-lg font-semibold text-emerald-800">Fearless</h2> | |
<p className="mt-1 text-4xl font-bold text-gray-900 sm:text-5xl lg:text-6xl"> | |
Use AWS to its fullest without fear. | |
</p> | |
<p className="mx-auto mt-5 max-w-xl text-xl text-gray-500"> | |
Tools and guides to help you use the cloud without surprise bills, tech-debt chaos, or security incidents. | |
</p> | |
</div> | |
</div> | |
</div> | |
<div className="mx-auto mt-10 text-center"> | |
<p className="mx-auto max-w-lg text-lg text-gray-900"> | |
Sign up for the newsletter for updates and detailed guides! | |
</p> | |
<iframe src="https://fearlessaws.substack.com/embed" className="mx-auto" width="480" height="250" frameBorder="0" scrolling="no"></iframe> | |
</div> | |
</main> | |
</> | |
) | |
} |
Hosting the website
Now that I had a website running locally that I was happy with, the next step was to deploy it! This is another great reason to use Next.js as the makers Vercel, have an amazing hosting service for apps built using it. The free tier is more than sufficient for getting started.
Of course you can also host on AWS (or elsewhere), and I will likely transition to doing this in the future, but it’s hard to beat the convenience of Vercel. By default, your website will be available on a URL like fearless-aws.vercel.app, but you can of course set up a custom domain as well.
It’s a fairly straightforward process, and the most complicated part will likely be configuring your domain’s name server. I chose to use Route53 in AWS, and here is the entire IaC required:
import * as aws from '@pulumi/aws'; | |
const defaultTags = { Creator: 'pulumi' }; | |
const fearlessTools = new aws.route53.Zone('fearless.tools', { | |
name: 'fearless.tools', | |
tags: { Name: 'fearless.tools', ...defaultTags }, | |
}); | |
new aws.route53.Record('fearless.tools', { | |
zoneId: fearlessTools.zoneId, | |
name: 'fearless.tools', | |
type: 'A', | |
ttl: 300, | |
records: ['76.76.21.21'] | |
}) | |
new aws.route53.Record('www.fearless.tools', { | |
zoneId: fearlessTools.zoneId, | |
name: 'www.fearless.tools', | |
type: 'CNAME', | |
ttl: 300, | |
records: ['cname.vercel-dns.com'] | |
}) | |
export const fearlessToolsNameServers = fearlessTools.nameServers; |
First we create an aws.route53.Zone
resource. This is the top level construct required to manage a domain. The name parameter is simply the domain itself that I own.
Next we create a couple aws.route53.Record
resources. The parameters for these are generally what Vercel tells us to configure to set up the custom domain.
Finally, we export the nameServers
output of the zone. These will need to be provided wherever you have purchased your domain, which in my case is name.com, so that when someone tries to visit, the DNS requests are actually handled by Route53.
That’s it! Just a little bit of work to have your own simple website for a splash page, ready for whatever your idea expands into!