leilukin-site/blog/posts/2024-05-31-domain-name-host.../index.html

592 lines
25 KiB
HTML

<!DOCTYPE html>
<html lang="en" dir="ltr" id="top">
<head>
<meta property="og:title" content="Custom Domain Name and Hosting Change for Leilukin&#39;s Hub | Blog">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Leilukin">
<meta name="description" content="Leilukin's Hub now has a custom domain name and a new host.">
<meta name="generator" content="Eleventy v3.0.0">
<meta property="og:type" content="website">
<meta property="og:url" content="https://leilukin.com/blog/posts/2024-05-31-domain-name-hosting-change-leilukins-hub/">
<meta property="og:site_name" content="Leilukin's Hub">
<meta property="og:locale" content="en_MY">
<meta property="og:description" content="Leilukin's Hub now has a custom domain name and a new host.">
<meta name="twitter:card" content="summary">
<meta name="twitter:url" content="https://leilukin.com/blog/posts/2024-05-31-domain-name-hosting-change-leilukins-hub/">
<meta name="twitter:description" content="Leilukin's Hub now has a custom domain name and a new host.">
<link rel="canonical" href="https://leilukin.com/blog/posts/2024-05-31-domain-name-hosting-change-leilukins-hub/">
<link rel="preload" href="/assets/fonts/lexend/lexend-v19-latin-regular.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/assets/fonts/lexend/lexend-v19-latin-700.woff2" as="font" type="font/woff2" crossorigin>
<style>
@font-face {
font-display: swap;
font-family: 'Lexend';
font-style: normal;
font-weight: 400;
src: url('/assets/fonts/lexend/lexend-v19-latin-regular.woff2') format('woff2');
}
@font-face {
font-display: swap;
font-family: 'Lexend';
font-style: normal;
font-weight: 600;
src: url('/assets/fonts/lexend/lexend-v19-latin-600.woff2') format('woff2');
}
@font-face {
font-display: swap;
font-family: 'Lexend';
font-style: normal;
font-weight: 700;
src: url('/assets/fonts/lexend/lexend-v19-latin-700.woff2') format('woff2');
}
</style>
<link rel="stylesheet" href="/assets/fonts/intel-one-mono/intel-one-mono.css">
<link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/plugins.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/pridesymbols.css"><link rel="stylesheet" href="/assets/css/utility.css">
<style>.toc__wrapper {
max-height: 89vh;
overflow-x: auto;
background-color: var(--clr-content-bg);
padding: 1rem 1.3rem;
}
.toc__heading {
font-size: 1.3rem;
font-weight: 700;
color: var(--clr-sub-heading);
cursor: pointer;
}
.toc ol,
.toc ol ol {
display: grid;
gap: 0.3em;
}
.toc ol {
border-top: 0.1em solid var(--clr-title-border);
padding-left: 1.3em;
padding-top: 1em;
}
.toc ol ol {
border-top: none;
list-style-type: disc;
padding-left: 1em;
padding-top: 0.3em;
}
.toc ol a {
font-size: 1.1rem;
padding-left: 0.3em;
}
.toc ol ol a {
padding: 0;
font-size: 1rem;
}
.content__nav {
padding: 1.2em clamp(1em, 5%, 1.5em);
background-color: var(--clr-content-bg);
}
.content__nav--title {
font-size: 1.7rem;
}
.breadcrumbs {
list-style-type: "";
padding: 0;
margin: 0 0 0.7em 0;
display: flex;
gap: 0.5em;
flex-wrap: wrap;
justify-content: center;
}
.breadcrumbs li::after {
content: '➔';
padding-left: 0.3em;
}
.blog__post--pagination {
padding-top: 1em;
margin-top: 2.5em;
border-top: 0.1em solid var(--clr-title-border);
}
.blog__post--nextprev {
list-style-type: "";
padding: 0;
margin: 0;
display: grid;
gap: 0.7em;
grid-template-columns: repeat(2, 1fr);
grid-template-areas: 'prev next';
}
.blog__post--prev { grid-area: prev; }
.blog__post--next { grid-area: next; }
.hero img { filter:
drop-shadow(0.1rem 0.1rem 0.2rem black)
drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
; }
.hero {
width: 100%;
background-color: var(--clr-hero-bg);
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
.hero__top-bar {
background-color: var(--clr-navbar-bg);
width: 100%;
padding: 0.5em 0.7em;
}
.hero__img {
display: grid;
place-content: center;
}
.hero img {
object-fit: contain;
overflow: hidden;
max-height: 16rem;
}
.navbar {
background: var(--clr-navbar-bg);
width: 100%;
z-index: 998;
position: sticky;
top: 0;
padding: 0.6em;
}
.navbar__menu {
list-style-type: "";
margin: 0;
padding: 0;
display: flex;
gap: 1em;
flex-wrap: wrap;
text-align: center;
}
.navbar__menu a {
color: var(--clr-navbar-link);
text-decoration: none;
cursor: pointer;
display: inline-block;
}
.navbar__menu a:hover { color: var(--clr-link-hover); }
.navbar__menu a:focus { outline-offset: 0.2em; }
.navbar__links {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
gap: 0.5em;
}
.navbar__toggle {
background-color: inherit;
color: var(--clr-navbar-link);
border: none;
padding: 0;
font-size: 1.25rem;
font-weight: 700;
display: none;
align-items: center;
gap: 0.3em;
}
.navbar__toggle svg { fill: currentColor; }
.navbar__toggle:focus,
.navbar__menu a:focus { outline-offset: 0.1em; }
.navbar__toggle:focus,
.navbar__menu a:focus { outline: 0.15em solid var(--clr-navbar-link); }
.navbar__popover {
background-color: var(--clr-navbar-bg);
border: 0.15em solid var(--clr-navbar-link);
padding: 1.5em;
max-width: 85%;
}
.navbar__popover::backdrop {
background-color: black;
opacity: 0.5;
}
@supports selector([popover]) {
.navbar__toggle { display: flex; }
.navbar__links { display: none; }
}
/* Tablet screen size */
@media only screen and (min-width: 43.75rem) {
.navbar { padding: 1em 0.6em; }
.navbar__toggle, .navbar__popover { display: none; }
.navbar__links { display: flex; }
}
.top-btn,
.top-btn:hover {
color: var(--clr-top-btn-txt);
text-decoration: none;
}
.top-btn {
position: fixed;
bottom: 0.5rem;
right: 0.5rem;
z-index: 999;
background-color: var(--clr-top-btn-bg);
display: flex;
align-items: center;
border-radius: 50em;
padding: 0.3em 0.5em;
gap: 0.2em;
}
.top-btn:focus {
outline: 0.25em solid var(--clr-top-btn-bg);
outline-offset: 0.15em;
}
.top-btn__arrow {
display: inline-block;
width: 1em;
aspect-ratio: 1 / 1;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
}
:root { --footer-gap: 0.5em; }
.footer {
margin-top: auto;
width: 100%;
background: var(--clr-main-footer-bg);
padding: 1.5rem 1rem clamp(1.5rem, calc(100% - 1.5rem), 3.5rem);
text-align: center;
display: grid;
gap: var(--footer-gap);
}
.footer__links,
.footer__shrines {
display: flex;
flex-wrap: wrap;
justify-content: center;
column-gap: var(--footer-gap);
}
.footer__links { justify-self: center; }
.footer__shrines { align-self: center; }</style>
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png">
<link rel="manifest" href="/assets/favicon/site.webmanifest">
<link rel="me" href="mailto:contact@leilukin.com">
<link rel="me" href="https://mstdn.social/@leilukin">
<link rel="me" href="https://twitter.com/Leilukin">
<link rel="me" href="https://github.com/Leilukin">
<link rel="authorization_endpoint" href="https://indieauth.com/auth">
<link rel="webmention" href="https://webmention.io/leilukin.com/webmention">
<script src="/assets/js/MnPoD-suxd.js" defer></script>
<script src="/assets/js/details-utils.js" defer></script>
<title>
Custom Domain Name and Hosting Change for Leilukin&#39;s Hub | Blog | Leilukin's Hub
</title>
</head>
<body>
<div class="skip-btn"><a href="#content">Skip to content</a></div>
<header class="hero">
<div class="hero__top-bar hidden"></div>
<div class="hero__img">
<img fetchpriority="high" src="/assets/leilukin/Leilukins-Hub-website-banner.avif" alt="Banner of Leilukin's Hub" width="900" height="300">
</div>
</header>
<nav class="navbar" aria-labelledby="top-level-nav-title">
<h2 class="visually-hidden" id="top-level-nav-title">Top Level</h2>
<ul class="navbar__menu navbar__links">
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/about/">About</a>
</li>
<li>
<a href="/now/">Now</a>
</li>
<li>
<a href="/blog/">Blog</a>
</li>
<li>
<a href="/articles/">Articles</a>
</li>
<li>
<a href="/projects/">Projects</a>
</li>
<li>
<a href="/shrines/">Shrines</a>
</li>
<li>
<a href="/adoptables/">Adoptables</a>
</li>
<li>
<a href="/links/">Links</a>
</li>
<li>
<a href="/guestbook/">Guestbook</a>
</li>
</ul>
<button class="navbar__toggle" popovertarget="nav-menu" aria-label="Toggle navigation menu">
<svg aria-hidden="true" focusable="false" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z"/></svg>
Navigation
</button>
</nav>
<div popover id="nav-menu" class="navbar__popover">
<ul class="navbar__menu">
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/about/">About</a>
</li>
<li>
<a href="/now/">Now</a>
</li>
<li>
<a href="/blog/">Blog</a>
</li>
<li>
<a href="/articles/">Articles</a>
</li>
<li>
<a href="/projects/">Projects</a>
</li>
<li>
<a href="/shrines/">Shrines</a>
</li>
<li>
<a href="/adoptables/">Adoptables</a>
</li>
<li>
<a href="/links/">Links</a>
</li>
<li>
<a href="/guestbook/">Guestbook</a>
</li>
</ul>
</div>
<main id="content">
<header class="main__header">
<nav aria-labelledby="breadcrumbs-title">
<h2 class="visually-hidden" id="breadcrumbs-title">Breadcrumbs</h2>
<ol class="breadcrumbs">
<li>
<a href="/blog/">Blog</a>
</li>
<li>
<a href="/blog/posts/">Blog Archive</a>
</li>
</ol>
</nav>
<h1>Custom Domain Name and Hosting Change for Leilukin&#39;s Hub</h1>
<div class="article__info">
<p>Posted on 31 May 2024 by Leilukin
• Last updated on 4 June 2024</p>
<p>Categories:
<a href="/categories/site-updates">site updates</a>
</p>
<p>🍿 5 min. read</p>
</div>
</header>
<content-wrapper>
<aside class="left-sidebar" aria-label="Left sidebar">
<details-utils force-open="(min-width: 60rem)" force-restore>
<details class="toc__wrapper sidebar--sticky">
<summary class="toc__heading" id="toc-heading">
Table of Contents
</summary>
<nav class="toc" aria-labelledby="toc-heading"><ol><li><a href="#moving-beyond-neocities">Moving Beyond Neocities</a></li>
<li><a href="#new-host-for-leilukins-hub">New Host for Leilukin's Hub</a></li>
<li><a href="#custom-domain-for-leilukins-hub">Custom Domain for Leilukin's Hub</a></li>
<li><a href="#redirect-to-new-domain-name">Redirect to New Domain Name</a></li>
<li><a href="#what-happens-now-with-my-neocities-account">What Happens Now with My Neocities Account</a></li></ol></nav>
</details>
</details-utils>
</aside>
<article class="content">
<p>Major news: Leilukin's Hub has a custom domain name: <code>leilukin.com</code>! In addition, Leilukin's Hub is now hosted on Netlify, with the <code>leilukin.com</code> domain name pointing to the Netlify host.</p>
<div class="heading-wrapper h2">
<h2 id="moving-beyond-neocities">Moving Beyond Neocities</h2>
<a class="heading-anchor" href="#moving-beyond-neocities" aria-labelledby="moving-beyond-neocities"><span hidden>#</span></a></div>
<p>Leilukin's Hub has grown significantly since its launch on Neocities in September 2022, not just in how many pages it has, but also the fact that the site includes various resources I have shared across the internet (most notably, some of my <cite>Star Wars: Knights of the Old Republic</cite> <a href="/shrines/starwarskotor/articles">articles</a> and <a href="/shrines/starwarskotor/guides">guides</a>).</p>
<p>Furthermore, web development has become more than a hobby to me — after starting to build my own website and relearning HTML and CSS, my interest in web development has grown enough to the point I started taking online web development courses and aspiring to become a serious web developer, by taking online courses on platforms such as freeCodeCamp and Scrimba. While Leilukin's Hub is still a hobby website, I have been using this site to practice and grow my web development skills, including using a static site generator, namely Eleventy, to <a href="/blog/posts/2024-04-21-april-2024-leilukins-hub-overhaul-with-eleventy">rebuild and overhaul this site in April 2024</a>.</p>
<p>As much I appreciate Neocities for being a good platform for beginner and hobbyist webmasters to get their start in creating their own websites for free, throughout my journey in learning web development more seriously, I have also discovered other static site hosting platforms, such as GitHub Pages and Netlify, and looked into them as alternatives to Neocities.</p>
<p>Meanwhile, I have been considering purchasing a domain name for Leilukin's Hub. A custom domain name makes my website address easier to remember. Also, I have been using Leilukin as my internet pseudonym for about 17 years at this point, so it feels right to finally own a domain name with that name for my own website.</p>
<div class="heading-wrapper h2">
<h2 id="new-host-for-leilukins-hub">New Host for Leilukin's Hub</h2>
<a class="heading-anchor" href="#new-host-for-leilukins-hub" aria-labelledby="new-host-for-leilukins-hub"><span hidden>#</span></a></div>
<p>Neocities provides a <a href="https://neocities.org/supporter">Supporter subscription plan</a> with benefits including larger storage, custom domain support and removing file type restrictions, but 50 GB storage is overkill for me when the free tier's 1GB storage is already more than enough for Leilukin's Hub at its current stage.</p>
<p>Not to mention, the above-mentioned GitHub Pages and Netlify already provide custom domain support and no file upload type restriction for free. Getting a custom domain name already requires money, so I need to carefully consider if it is worth for me to spend 5 USD per month on top of my domain name to host my hobby website.</p>
<p>After much deliberation, I settled for Netlify as the new hosting platform for Leilukin's Hub. I am already using GitHub Pages to host my developer portfolio website (with a custom domain name too) as well as some of my other developer projects, and I already have a Netlify account to deploy some of my developer projects. In addition, Netlify allows you to import and deploy a project from a GitHub repository, so I may as well make use of Netlify.</p>
<p>The process of deploying Leilukin's Hub from its GitHub repository went smoothly, so it was time to proceed to the next step: buying and setting up a custom domain.</p>
<div class="heading-wrapper h2">
<h2 id="custom-domain-for-leilukins-hub">Custom Domain for Leilukin's Hub</h2>
<a class="heading-anchor" href="#custom-domain-for-leilukins-hub" aria-labelledby="custom-domain-for-leilukins-hub"><span hidden>#</span></a></div>
<p>After comparing various domain name registrars, I chose to buy my domain name from Porkbun for its competitive price for domain names. The <code>leilukin.com</code> domain name was not taken, so I seized the opportunity to place an order for it, and later succeeded in purchasing and registering it as my own.</p>
<p>Upon owning <code>leilukin.com</code>, I followed Netlify's instructions to set up DNS records to point <code>leilukin.com</code> to my website on Netlify. I lacked experience in such things, so it took a bit longer for me to set it up properly, but I eventually did it. Visiting <code>leilukin.com</code> will lead you to Leilukin's Hub on Netlify.</p>
<p>Since Porkbun provides an email forwarding feature for its domain names for free, I also decided to make use of it and set up a new email address with the <code>leilkin.com</code> domain name, <code>contact@leilukin.com</code>, and forward emails sent to this address to my Outlook mailbox. This means now you can email me at <a href="mailto:contact@leilukin.com">contact@leilukin.com</a>.</p>
<div class="heading-wrapper h2">
<h2 id="redirect-to-new-domain-name">Redirect to New Domain Name</h2>
<a class="heading-anchor" href="#redirect-to-new-domain-name" aria-labelledby="redirect-to-new-domain-name"><span hidden>#</span></a></div>
<p>There was one last piece of the puzzle to make the Leilukin's Hub's transition from Neocities to Netlify seamless: a way to redirect the <code>leilukin.neocities.org</code> address to <code>leiulkin.com</code>.</p>
<p>I want a way to redirect my Neocities site address instead of placing a web page to announce the hosting change, because I have shared my Neocities site and some of its content on multiple platforms on the internet. Redirect eliminates the need for visitors to <code>leilukin.neocities.org</code> to click a link just to go to the new address.</p>
<p>After researching ways to redirect web pages, I used JavaScript, specifically the <a href="https://www.w3schools.com/jsref/met_loc_replace.asp"><code>location.replace()</code> method</a>, for two reasons: it removes <code>leilukin.neocities.org</code> from page history, and using JavaScript allows me to write custom code to ensure only the domain gets changed, while the rest of the URL's path remains intact. For example, if you visit <code>leilukin.neocities.org/blog</code>, you will get redirected to <code>leilukin.com/blog</code>.</p>
<p>With the redirect function set up, <code>leilukin.com</code> was officially ready!</p>
<div class="heading-wrapper h2">
<h2 id="what-happens-now-with-my-neocities-account">What Happens Now with My Neocities Account</h2>
<a class="heading-anchor" href="#what-happens-now-with-my-neocities-account" aria-labelledby="what-happens-now-with-my-neocities-account"><span hidden>#</span></a></div>
<p>What happens now with my Neocities account and the Neocities version of Leilukin's Hub?</p>
<p><strong><code>leilukin.neocities.org</code>, the Neocities version of Leilukin's Hub will no longer be updated</strong>. Visiting <code>leilukin.neocities.org</code> will redirect you to <code>leiulkin.com</code>, my new domain on Netlify. That said, I still post about updates to Leilukin's Hub on my Neocities profile.</p>
<p>I am still using my Neocities account and logging in almost daily. A couple of fellow webmasters and I have been following each other on Neocities, so I am not abandoning my Neocities account any time soon, and Neocities users are still welcome to follow me and post messages on <a href="https://neocities.org/site/leilukin">my Neocities profile page</a>.</p>
<p>(<strong>Update, 4 June 2024:</strong> Originally, even when Leilukin's Hub began to switch host to Netlify, I still deployed Leilukin's Hub to Neocities by using the <a href="https://github.com/bcomnes/deploy-to-neocities">deploy-to-neocities GitHub action</a>, in order to notify my Neocities followers of updates to Leilukin's Hub, but I have changed my mind and decided to stop pushing Leilukin's Hub's updates to Neocities, so I can focus on my website's hosting on Netlify)</p>
<p>Welcome to <code>leilukin.com</code>! 🥳 Not going to lie, I am excited that this major news for my website is officially announced just a day before Pride Month starts! 🏳️‍🌈</p>
<nav class="blog__post--pagination" aria-labelledby="nextprev-title">
<h2 class="visually-hidden" id="nextprev-title">Next and Previous Blog Posts</h2>
<ul class="blog__post--nextprev">
<li class="blog__post--prev">
<p>Previous Post:</p>
<a href="/blog/posts/2024-05-29-new-guestbook-leilukins-hub/">The Search for a Guestbook Solution for Leilukin&#39;s Hub</a>
</li>
<li class="blog__post--next">
<p>Next Post:</p>
<a href="/blog/posts/2024-06-12-performance-improvement-leilukins-hub/">Improving Site Performance of Leilukin&#39;s Hub</a>
</li>
</ul>
</nav>
</article>
<aside class="right-sidebar" aria-label="Right sidebar">
<nav class="content__nav sidebar--sticky" aria-labelledby="my-contents-title">
<h2 class="content__nav--title" id="my-contents-title">My Contents</h2>
<ul class="content__nav--links">
<li><a href="/archive/">Content Archive</a></li>
<li><a href="/categories/">Content Categories</a></li>
<li><a href="/articles/">Articles</a></li>
<li><a href="/blog/posts/">Blog Archive</a></li>
<li><a href="/blog/">Blog Home</a></li>
</ul>
</nav>
</aside>
</content-wrapper>
</main>
<footer class="footer">
<p>Made with ♥ by Leilukin since 11 September 2022</p>
<ul class="inline-nav footer__links">
<li><a href="/feed.xml">RSS</a></li>
<li><a
href="/sitemap/
">Site Map</a></li>
<li><a
href="/changelogs/"
>Changelogs</a></li><li><a
href="/accessibility/"
>Accessibility</a></li><li><a
href="/colophon/"
>Colophon</a></li></ul>
<p><a href="mailto:contact@leilukin.com">Contact me by email</a></p><div class="h-card hidden">
<span class="p-name p-nickname">Leilukin</span>
<a href="/" class="u-url">Home page</a>
<img src="https://i.postimg.cc/RZJgS6tY/leilukin-bee.avif" alt="Leilukin" class="u-photo" loading="lazy">
<span class="p-country-name">Malaysia</span>
<span class="p-note">They/she. A proudly queer and autistic <span class="p-gender-identity">non-binary</span> lesbian from Malaysia.</span>
</div><a href="#top" class="top-btn">
<svg class="top-btn__arrow" focusable="false" aria-hidden="true" viewBox="0 0 26 28">
<path d="M25.172 15.172c0 0.531-0.219 1.031-0.578 1.406l-1.172 1.172c-0.375 0.375-0.891 0.594-1.422 0.594s-1.047-0.219-1.406-0.594l-4.594-4.578v11c0 1.125-0.938 1.828-2 1.828h-2c-1.062 0-2-0.703-2-1.828v-11l-4.594 4.578c-0.359 0.375-0.875 0.594-1.406 0.594s-1.047-0.219-1.406-0.594l-1.172-1.172c-0.375-0.375-0.594-0.875-0.594-1.406s0.219-1.047 0.594-1.422l10.172-10.172c0.359-0.375 0.875-0.578 1.406-0.578s1.047 0.203 1.422 0.578l10.172 10.172c0.359 0.375 0.578 0.891 0.578 1.422z"></path>
</svg>
Back to Top
</a>
</footer>
</body>
</html>