I decided to get back into writing and experimenting, and writing about experimenting. I've been away for about 10 years, doing a lot but not really talking about it, and today I decided to get back into it. A lot has obviously changed in tech over a decade, so I'm looking forward to the new, but also revisiting some of the old projects and experiments. With that being said, let's jump into it.
1. Choose a Name and Buy the Domain
I know you can just create an account on Medium or Substack and start writing without any of these steps, but if you plan on doing more than writing, such as sharing code, running some server process, connecting to APIs, etc., then you probably want more control. You probably want your own host, and you need a domain to point to it.
Running it all on GitHub Pages is worthy of consideration, especially if most of the projects are front-end, and you can avoid buying a domain. But for $10 or less, it's probably worth it to have experimentlog.com instead of experimentlog.github.io.
Also, there are many promos for the first year. IONOS probably still has $1 domains, but you will pay a little more than with others for a renewal. I decided to go with Namecheap for $6.99 (they had some promo) because I tend to keep the domains.
That took a few minutes, but finding a good name is unlikely to be so quick. I recommend chatting up Claude or ChatGPT to get this going and giving it some constraints: only .com, fewer than 14 characters (preferably fewer than 10), no repeating letters, etc. Have it give you a lot of possible domains that you can copy with a click and paste into a bulk domain registration checker like Instant Domain Search or GoDaddy's bulk domain search.
I ended up with ExperimentLog.com.
2. Decide Where to Host and Point the Domain There
So you have a name. Now where do you host it? You could just generate HTML pages, host them on GitHub, use GitHub Pages, and point the domain there. That would probably work. I certainly don't need to run my own dedicated server as I did in the past, but it's worth considering some of the free tiers on Vercel or Netlify.
Since I already host things on GitHub Pages, I decided to try Vercel's Hobby tier in the spirit of experimentation and learning.
Setup was quick with a simple landing page template and some edits. I deployed to Vercel through Terminal on the Mac:
npm i -g vercel
vercel login
vercel
vercel --prodIt automatically created a project, asked me to give it a name, and deployed the blog to a Vercel domain.
I logged into Vercel, clicked Domains in the sidebar, and added the domain. That put me on a page with two records to be added and an Invalid Configuration warning, which you can click to see exactly what to enter in Namecheap.
Next, I went to Namecheap, logged in, opened Domain List → Manage → Advanced DNS, deleted the existing records, and added the two records from Vercel. It only took a few minutes for Vercel to pick up the change and validate the configuration.
3. Start With a Good Blog Template
I started with Vercel's Next.js Portfolio Starter Kit rather than building the whole blog from scratch. A good template gives you a responsive foundation and takes care of a lot of the basic structure you might otherwise forget.
It is still worth checking that the template produces good URLs, unique page titles, readable markup, and sensible heading elements such as h1 and h2. These details might matter differently than they did 10 years ago, but they still make the site easier for browsers, search engines, and other tools to understand.
4. Set Up SSL and Redirects
Vercel generated an SSL certificate automatically, so the site could be served over HTTPS. I also made sure traffic went to one canonical version of the domain, rather than splitting between variations such as www and the root domain.
That part used to feel like much more work.
5. Add Analytics
I used to always add Google Analytics tags, but Vercel comes with Web Analytics for free, which is honestly good enough to start with.
Find Analytics in the sidebar and click Enable. It will give you instructions on how to install it, but because we started with a template, it was already installed.
6. Add Comments
I have mixed feelings about adding comments, mostly due to all the spam, but I like the idea of engagement and collaboration. So I installed Utterances by creating a new public repository on GitHub called blog-comments.
I clicked Install on the Utterances GitHub App, pointed it to the blog-comments repository, entered that repository name on the Utterances website, and scrolled down to copy the code needed for the blog.
You can't just drop it into Next.js as you would into HTML. The advice is to create a component and pull it in. I created comments.tsx under components and then added <Comments /> to page.tsx.
Here is my comments.tsx:
"use client";
import { useEffect, useRef } from "react";
export default function Comments() {
const commentBox = useRef<HTMLDivElement>(null);
useEffect(() => {
// Prevent duplicate scripts if the effect re-runs
if (commentBox.current && commentBox.current.children.length === 0) {
const scriptElement = document.createElement("script");
scriptElement.setAttribute("src", "https://utteranc.es/client.js");
scriptElement.setAttribute("repo", "piwodlaiwo/blog-comments"); // Replace with your repo
scriptElement.setAttribute("issue-term", "pathname"); // Maps posts to issues by URL path
scriptElement.setAttribute("theme", "github-light"); // Choose your preferred theme
scriptElement.setAttribute("crossorigin", "anonymous");
scriptElement.async = true;
commentBox.current.appendChild(scriptElement);
}
}, []);
return <div ref={commentBox} className="w-full mt-10 -ml-16" />;
}
Here is how I added it to page.tsx:
//define up top
import Comments from "app/components/comments";
//below, where i want them to show up
<Comments />This was also my first time working with Tailwind, and I didn't realize I couldn't just put classes into Chrome DevTools and expect them to be available. But when I added the -ml-16 class to the comments div to account for a 64px negative margin, it generated the needed class attributes and worked. Now the comments and avatars align with the page.
7. Add Social Sharing
Next, I wanted to add some social links for sharing the content. The setup was very similar: I created a share.tsx file under components and then loaded that component into page.tsx. I passed the post title to the component so it could generate the appropriate sharing links for each post.
Here is my share.tsx:
"use client";
import { useEffect, useState } from "react";
interface ShareButtonsProps {
title: string;
}
export default function ShareButtons({ title }: ShareButtonsProps) {
const [shareUrl, setShareUrl] = useState("");
useEffect(() => {
// Safely capture URL on the client side
setShareUrl(window.location.href);
}, []);
if (!shareUrl) return null;
const encodedUrl = encodeURIComponent(shareUrl);
const encodedTitle = encodeURIComponent(title);
return (
<div className="flex gap-3 items-center">
<span className="text-xs text-stone-400 uppercase tracking-widest">
Share
</span>
{/* X / Twitter */}
<a
href={`https://twitter.com/intent/tweet?tex=${encodedTitle}&ur=${encodedUrl}`}
target="_blank"
rel="noopener noreferrer"
className="text-stone-400 hover:text-stone-700 transition-colors"
>
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.737-8.835L1.254 2.25H8.08l4.253 5.622 5.911-5.622zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
</svg>
</a>
{/* Reddit */}
<a
href={`https://www.reddit.com/submit?ur=${encodedUrl}&titl=${encodedTitle}`}
target="_blank"
rel="noopener noreferrer"
className="text-stone-400 hover:text-stone-700 transition-colors"
>
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm5.01 4.744c.688 0 1.25.561 1.25 1.249a1.25 1.25 0 0 1-2.498.056l-2.597-.547-.8 3.747c1.824.07 3.48.632 4.674 1.488.308-.309.73-.491 1.207-.491.968 0 1.754.786 1.754 1.754 0 .716-.435 1.333-1.01 1.614a3.111 3.111 0 0 1 .042.52c0 2.694-3.13 4.87-7.004 4.87-3.874 0-7.004-2.176-7.004-4.87 0-.183.015-.366.043-.534A1.748 1.748 0 0 1 4.028 12c0-.968.786-1.754 1.754-1.754.463 0 .898.196 1.207.49 1.207-.883 2.878-1.43 4.744-1.487l.885-4.182a.342.342 0 0 1 .14-.197.35.35 0 0 1 .238-.042l2.906.617a1.214 1.214 0 0 1 1.108-.701zM9.25 12C8.561 12 8 12.562 8 13.25c0 .687.561 1.248 1.25 1.248.687 0 1.248-.561 1.248-1.249 0-.688-.561-1.249-1.249-1.249zm5.5 0c-.687 0-1.248.561-1.248 1.25 0 .687.561 1.248 1.249 1.248.688 0 1.249-.561 1.249-1.249 0-.687-.562-1.249-1.25-1.249zm-5.466 3.99a.327.327 0 0 0-.231.094.33.33 0 0 0 0 .463c.842.842 2.484.913 2.961.913.477 0 2.105-.056 2.961-.913a.361.361 0 0 0 .029-.463.33.33 0 0 0-.464 0c-.547.533-1.684.73-2.512.73-.828 0-1.979-.196-2.512-.73a.326.326 0 0 0-.232-.095z" />
</svg>
</a>
{/* LinkedIn */}
<a
href={`https://www.linkedin.com/sharing/share-offsite/?ur=${encodedUrl}`}
target="_blank"
rel="noopener noreferrer"
className="text-stone-400 hover:text-stone-700 transition-colors"
>
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
</svg>
</a>
</div>
);
}Here is how I added it to page.tsx:
//define up top
import ShareButtons from "app/components/share";
//below, where i want them to show up
<ShareButtons title={post.metadata.title} />8. Make Some Quick SEO Updates
One thing I noticed was that the title in the browser still said Next.js Portfolio Starter, so I went into layout.tsx and edited the metadata there for some search engine optimization. A few other .tsx files needed similar updates.
There isn't much content here yet, so I can think about tags and things like that later. For now, the important part is making sure each post has a useful title, description, URL, and headings. It is also worth considering what text will be discovered by search engines and what title, description, and image will appear when someone shares a link.
9. Write a Blog Post
At some point, you have to stop setting up the blog and actually write something.
I also decided not to use AI to write these posts. Who cares if I make mistakes or don't write perfectly? I don't mean that I should be sloppy, but the point is to be human and be myself. I want this to be a place where I can experiment, think in public, and get better by doing it.
This first post is part of that experiment.
10. Give Yourself a Backlink
To help Google find the website sooner, a backlink from somewhere like Medium could speed things up and make the blog easier to discover. Ideally, you can write something valuable there, or a shorter version of your post, so you are adding value. I wrote about a small error I encountered with Vercel blog template due to a breaking change with Next.js upgrade. And with that, this blog is live.