507 lines
19 KiB
HTML
507 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" dir="ltr" id="top">
|
|
<head>
|
|
|
|
|
|
<meta property="og:title" content="Leilukin's Hub Tumbleblog Launched | 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 tumbleblog built with Chyrp Lite and hosted on InfinityFree.">
|
|
<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-06-21-leilukins-hub-tumbleblog-launched/">
|
|
<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 tumbleblog built with Chyrp Lite and hosted on InfinityFree.">
|
|
<meta name="twitter:card" content="summary">
|
|
<meta name="twitter:url" content="https://leilukin.com/blog/posts/2024-06-21-leilukins-hub-tumbleblog-launched/">
|
|
<meta name="twitter:description" content="Leilukin's Hub now has a tumbleblog built with Chyrp Lite and hosted on InfinityFree.">
|
|
<link rel="canonical" href="https://leilukin.com/blog/posts/2024-06-21-leilukins-hub-tumbleblog-launched/">
|
|
|
|
|
|
|
|
<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>.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="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>
|
|
/* lexend-regular - latin */
|
|
@font-face {
|
|
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
|
font-family: 'Lexend';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src: url('/assets/fonts/lexend/lexend-v19-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
|
}
|
|
|
|
/* lexend-600 - latin */
|
|
@font-face {
|
|
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
|
font-family: 'Lexend';
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
src: url('/assets/fonts/lexend/lexend-v19-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
|
}
|
|
|
|
/* lexend-700 - latin */
|
|
@font-face {
|
|
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
|
font-family: 'Lexend';
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
src: url('/assets/fonts/lexend/lexend-v19-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
|
}
|
|
</style>
|
|
<link rel="stylesheet" href="/assets/fonts/intel-one-mono/intel-one-mono.css">
|
|
|
|
|
|
<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">
|
|
|
|
|
|
<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">
|
|
|
|
|
|
<script src="/assets/js/MnPoD-suxd.js" defer></script>
|
|
|
|
|
|
<title>
|
|
Leilukin's Hub Tumbleblog Launched | 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>Leilukin's Hub Tumbleblog Launched</h1>
|
|
|
|
|
|
<div class="article__info">
|
|
<p>Posted on 21 June 2024 by Leilukin
|
|
|
|
|
|
<p>Categories:
|
|
|
|
<a href="/categories/site-updates">site updates</a>
|
|
|
|
</p>
|
|
|
|
<p>🍿 2 min. read</p>
|
|
</div>
|
|
|
|
</header>
|
|
|
|
<content-wrapper>
|
|
|
|
|
|
|
|
|
|
<article class="content">
|
|
<p>Leilukin's Hub now has a <a href="https://jaypeeonline.net/internet/tumbleblogs/">tumbleblog</a> at <a href="https://tumbleblog.leilukin.com/">tumbleblog.leilukin.com</a>!</p>
|
|
<p>I have been considering the idea of creating a microblog or tumbleblog for my website. The main site of <a href="https://leilukin.com/">Leilukin's Hub</a> already has a <a href="https://leilukin.com/blog/">blog</a>, but I also want another blog for shorter or more casual posts to document my thoughts and various stuff I find interesting or inspirational, especially ones that I am not sure how or where to put in the main site of Leilukin's Hub yet.</p>
|
|
<p>Tumblr has served me adequately for this purpose, which is one of the reasons it remains the social media platform I am the most active on since 2011 (yes, this means I have been on Tumblr for 13 years at this point). However, one of the reasons I eventually decided to create my own website was to not relying on social media to share my creations and interests. Therefore, an ideal Tumblr-style microblog for Leilukin's Hub would be self-hosted and sharing the same domain name of <code>leilukin.com</code>. After struggling to figure out how to implement a tumbleblog for Leilukin's Hub, I finally discovered the ideal blogging engine for my needs: <a href="https://chyrplite.net/">Chyrp Lite</a>.</p>
|
|
<p>Chyrp Lite has everything I am looking for to build a self-hosted Tumblr-style blog. The website explicitly states that you can have a tumbleblog with the blogging engine, with feathers that allow you to make not only text posts, but also image posts, audio posts, video posts, quote posts, link posts and even posts with files attached to allow visitors to download. Chyrp Lite is written in PHP, so it cannot be hosted on platforms that support static sites only, such as Neocities, GitHub Pages, Netlify (which is where <code>leilukin.com</code> is currently hosted on), etc. This is where <a href="https://www.infinityfree.com/">InfinityFree</a> came in.</p>
|
|
<p>InfinityFree is among the few hosting platforms that provides PHP and MySQL support for free, so I had created an InfinityFree account to start learning about PHP, even before discovering Chyrp Lite. In addition, InfinityFree supports custom domain without additional charges, so I have also added the <code>leilukin.com</code> domain name to my InfinityFree account, in case I need to host something with PHP and want to use a subdomain of <code>leilukin.com</code> for it. Now, I got to make use of what I learned to build this tumbleblog for Leilukin's Hub.</p>
|
|
<p>I started with adding a <code>tumbleblog.leilukin.com</code> custom subdomain to InfinityFree, configuring the DNS records on Porkbun (which manages the <code>leilukin.com</code> domain name), and requesting a free SSL certificate from InfinityFree to add HTTPS support to this blog. After making sure the <code>tumbleblog.leilukin.com</code> subdomain is ready, I followed the <a href="https://chyrplite.net/wiki/Quick-Start-Guide.html">Quick Start Guide</a> to set up Chyrp Lite, by uploading the blogging engine's files to InfinityFree with FTP, creating a MySQL database for this tumbleblog, and installing Chyrp Lite into my InfinityFree server. At last, I successfully installed Chyrp Lite on InfinityFree.</p>
|
|
<p>Leilukin's Hub Tumbleblog is now officially launched! 🥳</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-06-12-performance-improvement-leilukins-hub/">Improving Site Performance of Leilukin's Hub</a>
|
|
</li>
|
|
|
|
<li class="blog__post--next">
|
|
<p>Next Post:</p>
|
|
<a href="/blog/posts/2024-06-24-cassette-beasts-fanlisting-approved/">My Cassette Beasts Fanlisting Application has been Approved</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>
|
|
<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> |