inherentlee/leecat.art-site
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

drone build Sun Sep 20 15:08:31 PDT 2026

Browse Source
This commit is contained in:
inherentlee
2026-09-20 22:08:31 +00:00
parent 1d51eaebec
commit 207d8c1cd5
731 changed files with 8308 additions and 5281 deletions
Download Patch File Download Diff File Expand all files Collapse all files
domain-and-site-setup/index.html
+151 -19
View File
@@ -40,7 +40,80 @@
<style>.post-metadata {
<style>#toc {
float: right;
margin: 1rem 0 1.5rem 1.5rem;
width: min(calc(100% - 1.5rem), 23rem);
/* 23rem is the width of the words 'table of contents' in my header font */
/* yes, it's a bit hacky */
}
@media (max-width: 850px) {
#toc {
float: unset;
margin-top: 2rem;
margin-left: .5rem;
width: calc(100% - .5rem);
}
}
#toc details {
border: thick solid var(--color-pink);
border-radius: 1rem;
margin-top: 1rem;
}
#toc summary {
position: relative;
top: -1.5rem;
left: -.75rem;
width: fit-content;
background: var(--color-bg);
border-radius: .5rem;
}
#toc summary:focus-visible {
outline: .15rem solid var(--color-teal);
}
#toc summary::marker {
font-size: 2.35rem;
}
#toc h2 {
margin-top: 0;
display: inline;
line-height: normal;
}
#toc nav {
position: relative;
top: -1.25rem;
}
#toc li {
margin-block: .45rem 0;
}
@media (max-width: 650px) {
#toc nav > ol {
margin-left: .5rem;
}
}
/* basically we want to style this `ol` as a `ul` */
#toc ol > li {
list-style: disc;
}
#toc ol > li > ol > li {
list-style: circle;
}
#toc ol > li > ol > li > ol > li {
list-style: square;
}
.post-metadata {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
@@ -438,6 +511,8 @@ body:has(dialog[open]) {
color-scheme: light dark;
--font-family: 'Atkinson Hyperlegible Next', sans-serif;
/* if you change the header font, go to post-toc.css and fuck about with the width
of the table of contents */
--font-family-headers: 'Peritel', 'Atkinson Hyperlegible Next', sans-serif;
--font-family-code: 'Atkinson Hyperlegible Mono', monospace;
@@ -496,7 +571,6 @@ body:has(dialog[open]) {
}
/* Base */
* {
box-sizing: border-box;
margin: 0;
@@ -1814,7 +1888,7 @@ switch (currentThemeValue) {
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article data-pagefind-body="">
<h1 id="domain-and-site-setup">domain and site setup</h1>
<h1>domain and site setup</h1>
<div class="post-metadata">
<p>
@@ -1843,7 +1917,64 @@ switch (currentThemeValue) {
<img class="hero" src="/img/crinkly-mushrooms.jpg" alt="Picture unrelated to post. Some crinkly brown-orange mushrooms in vibrant green grass." loading="lazy" decoding="async" width="1000" height="750">
<p>This was written as a skill share for the Artisans Cooperative blog.</p>
<aside id="toc">
<details>
<summary><h2>table of contents</h2></summary>
<nav class="toc">
<ol>
<li><a href="#audience">Audience</a>
</li>
<li><a href="#outcome">Outcome</a>
</li>
<li><a href="#domain-name">Domain name</a>
<ol>
<li><a href="#top-level-domains-(tlds)">Top-level domains (TLDs)</a>
</li>
<li><a href="#decide-on-a-full-domain-name">Decide on a full domain name</a>
</li>
<li><a href="#buy-your-domain">Buy your domain</a>
</li>
</ol>
</li>
<li><a href="#using-your-domain-name">Using your domain name</a>
<ol>
<li><a href="#option-1%3A-simple-redirect">Option 1: simple redirect</a>
</li>
<li><a href="#option-1%2C-but-better%3A-redirect-to-a-link-tree">Option 1, but better: redirect to a link tree</a>
</li>
<li><a href="#option-2%3A-static-site-with-github-pages">Option 2: static site with GitHub Pages</a>
<ol>
<li><a href="#wait%2C-what's-github%3F">Wait, what's GitHub?</a>
</li>
</ol>
</li>
<li><a href="#now-that-we-know-what-github-is...">Now that we know what GitHub is...</a>
</li>
</ol>
</li>
</ol>
</nav>
</details>
</aside>
<p>This was written as a skill share for the Artisans Cooperative blog.</p>
<p>In this writeup, I will walk through one (of many!) ways to set up and utilize a custom domain and website.</p>
<h2 id="audience">Audience</h2>
<p>This is aimed at a non-technical audience, but my own perspective is technical and some of the articles I link to will get technical. Because of this, it's possible that I will miss things that you have questions on - please reach out to me and ask questions!</p>
@@ -1855,7 +1986,7 @@ switch (currentThemeValue) {
</ul>
<p>This writeup will <em>not</em> cover every possible route to getting your own home on the web - there's far too many options out there. It's just meant to give you a starting point and a few ideas.</p>
<h2 id="domain-name">Domain name</h2>
<h3 id="top-level-domains-tlds">Top-level domains (TLDs)</h3>
<h3 id="top-level-domains-(tlds)">Top-level domains (TLDs)</h3>
<p>I started planning my domain name by reviewing the list of TLDs - things like &quot;.org&quot; or &quot;.com&quot;. ICANN (the Internet Corporation for Assigned Names and Numbers) maintains a <a href="https://www.icann.org/resources/pages/tlds-2012-02-25-en" target="_blank" rel="external">list of all TLDs</a> - it's long! Reviewing this list can help you think of potential domain names. You can also look at a list like <a href="https://en.wikipedia.org/wiki/List_of_Internet_top-level_domains" target="_blank" rel="external">this one Wikipedia maintains</a> - it has more detail and can tell you if a specific TLD is for a given country, reserved for specific uses, or (what you probably want) for general use.</p>
<p>Personally, I narrowed it down to two - &quot;.art&quot; or &quot;.gay&quot;. From there, it's off to the domain registrars! These are companies that offer domain names for sale. Here's <a href="https://www.forbes.com/advisor/business/software/best-domain-registrar/" target="_blank" rel="external">an article from Forbes Advisor reviewing some of the major names in the space</a>. I use Namecheap, but don't let that bias you. Look around at pricing (pay attention to the rate for year 2 onward - domain registrars often offer super low year 1 rates to hook customers) and consider other features, like support availability.</p>
<h3 id="decide-on-a-full-domain-name">Decide on a full domain name</h3>
@@ -1869,17 +2000,17 @@ switch (currentThemeValue) {
<h3 id="buy-your-domain">Buy your domain</h3>
<p>Pick a domain registrar that offers the domain name you want, and pay (usually for a year). Next, we'll talk about some uses for this domain name.</p>
<h2 id="using-your-domain-name">Using your domain name</h2>
<h3 id="option-1-simple-redirect">Option 1: simple redirect</h3>
<h3 id="option-1%3A-simple-redirect">Option 1: simple redirect</h3>
<p>The easiest way to utilize a domain name is to have it redirect to another URL. I'm not going to go through how to set up a domain redirect with every possible provider, but if you search up &quot;[your domain registrar] redirect&quot; you should find useful documentation.</p>
<h3 id="option-1-but-better-redirect-to-a-link-tree">Option 1, but better: redirect to a link tree</h3>
<h3 id="option-1%2C-but-better%3A-redirect-to-a-link-tree">Option 1, but better: redirect to a link tree</h3>
<p>Link trees (popularized by <a href="https://linktr.ee/" target="_blank" rel="external">linktree</a>) are a single page with a collection of links maintained by an owner. You can use linktree or check out this <a href="https://www.wired.com/story/link-in-bio-linktree-alternatives/" target="_blank" rel="external">WIRED article with alternatives</a>. Some are paid, usually small monthly fees, and some are free.</p>
<h3 id="option-2-static-site-with-github-pages">Option 2: static site with GitHub Pages</h3>
<h4 id="wait-whats-github">Wait, what's GitHub?</h4>
<h3 id="option-2%3A-static-site-with-github-pages">Option 2: static site with GitHub Pages</h3>
<h4 id="wait%2C-what's-github%3F">Wait, what's GitHub?</h4>
<p><a href="https://github.com/" target="_blank" rel="external">GitHub</a> - wait, no.</p>
<p>First, let's talk about <a href="https://git-scm.com/" target="_blank" rel="external">git</a>. Git is a <em>version control system</em>, a type of software that manages changes to a set of files. This allows the owner(s) of those files to do things like revert changes or compare current and historical versions of files. It also allows for multiple people to work on the same shared file repository without creating conflicts.</p>
<p>GitHub is a centralized source for many, many git repositories. It essentially allows you to back up both your code and the log of all changes to the cloud (someone else's computer). It also supports <a href="https://pages.github.com/" target="_blank" rel="external">GitHub Pages</a>, a free way to host a static site of your own.</p>
<p>To get started with GitHub, you'll first need to <a href="https://github.com/signup" target="_blank" rel="external">create an account</a> if you don't have one. If you want to learn some GitHub basics, the GitHub team has created this handy <a href="https://github.com/skills/introduction-to-github" target="_blank" rel="external">introduction to GitHub</a> that walks you through some basic git and GitHub concepts.</p>
<h3 id="now-that-we-know-what-github-is">Now that we know what GitHub is...</h3>
<h3 id="now-that-we-know-what-github-is...">Now that we know what GitHub is...</h3>
<p>The GitHub documentation is pretty thorough, so let's point to some articles over there.</p>
<ul>
<li><a href="https://docs.github.com/en/pages/getting-started-with-github-pages/creating-a-github-pages-site" target="_blank" rel="external">Creating a GitHub Pages site</a> walks you through getting a repository set up and automatically publishing to a URL like &quot;your-github-username.github.io&quot; (don't worry, we'll get that custom domain name attached soon!)
@@ -1896,6 +2027,7 @@ switch (currentThemeValue) {
<li>GitHub Pages is powered by <a href="https://jekyllrb.com/" target="_blank" rel="external">Jekyll</a>, a tool for generating static sites from Markdown (.md) files. <a href="https://jekyllrb.com/docs/structure/" target="_blank" rel="external">Learn more about a Jekyll project's file directory structure</a></li>
</ul>
</article>
@@ -1933,26 +2065,26 @@ switch (currentThemeValue) {
<section class="related-posts">
<h2 data-ha-exclude="" id="related-posts">related posts</h2>
<h2 data-ha-exclude="">related posts</h2>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/accessible-image-modals/">
<h2 data-ha-exclude="" id="accessible-image-modals">accessible image modals </h2>
<a class="postlink" href="/handedness-toggle/">
<h2 data-ha-exclude="">handedness toggle </h2>
<ul class="postlist-tags">
<li>software</li>
</ul>
<img src="/img/snacking-seagull.jpg" alt="Image unrelated to post. A seagull floating in the water with a starfish hanging out of eir mouth." loading="lazy" decoding="async" width="1000" height="666">
<img src="/img/handedness-toggle-0.png" alt="A screenshot of the rescue trans rescue navbar centered on a button that shows a hand pointing left." loading="lazy" decoding="async" width="1000" height="257">
</a>
</li>
<li class="post">
<a class="postlink" href="/visual-site-builders-and-accessibility/">
<h2 data-ha-exclude="" id="visual-site-builders-and-accessibility">visual site builders and accessibility </h2>
<h2 data-ha-exclude="">visual site builders and accessibility </h2>
<ul class="postlist-tags">
@@ -1965,15 +2097,15 @@ switch (currentThemeValue) {
</li>
<li class="post">
<a class="postlink" href="/moving-images/">
<h2 data-ha-exclude="" id="moving-images">moving images </h2>
<a class="postlink" href="/comparing-text-editors/">
<h2 data-ha-exclude="">comparing text editors </h2>
<ul class="postlist-tags">
<li>software</li>
</ul>
<img src="/img/cormorant.jpg" alt="Image unrelated to post. A cormorant, a type of black waterfowl, poses with wings spread on a buoy in Puget Sound. Off to the left, another bird floats." loading="lazy" decoding="async" width="1000" height="666">
<img src="/img/horsetail.jpg" alt="Image unrelated to post. Close up on a horsetail plant&#39;s stem, with many small needle-like leaves emerging from all sides of the circular stem at each segmented joint." loading="lazy" decoding="async" width="1000" height="666">
</a>
</li>
@@ -2030,6 +2162,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/domain-and-site-setup/` was built on 2026-09-20T00:40:39.726Z -->
<!-- This page `/domain-and-site-setup/` was built on 2026-09-20T22:08:14.587Z -->
</body>
</html>