22 lines
12 KiB
HTML
22 lines
12 KiB
HTML
<!doctype html><html lang=en><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><link rel="shortcut icon" href=/img/icon.png type=image/png><meta name=generator content="Hugo 0.105.0"><meta property="og:title" content="Toasters Rocks 4.0"><meta property="og:description" content="Brand new blog, again."><meta property="og:type" content="article"><meta property="og:url" content="http://toasters.rocks/toasters-rocks-4/"><meta property="og:image" content="http://toasters.rocks/images/2020/11/bg.png"><meta property="article:section" content><meta property="article:published_time" content="2020-11-28T11:16:57-05:00"><meta property="article:modified_time" content="2020-11-28T21:15:50-05:00"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="http://toasters.rocks/images/2020/11/bg.png"><meta name=twitter:title content="Toasters Rocks 4.0"><meta name=twitter:description content="Brand new blog, again."><meta name=theme-color content="#660066"><title>Toasters Rocks 4.0 - toasters rocks</title><link rel=stylesheet href=http://toasters.rocks/css/toastersrocks.min.css></head><body><header><img src=/img/icon.png><h1>toasters rocks</h1></header><main><aside><nav><a href=/><i class="fas fa-home"></i>
|
|
Home</a><br><a href=http://juju2143.ca/><i class="fas fa-user"></i>
|
|
About</a><br><a href=/fr/><i class="fas fa-globe"></i>
|
|
Français</a><br><a href=https://yukiis.moe/><i class="far fa-comment"></i>
|
|
Comics</a><br><a href=https://codewalr.us/><i class="far fa-folder-open"></i>
|
|
Forums</a><br></nav><br><nav><a title="Twitter " href=https://twitter.com/juju2143><i style=color:#4da7de class="fab fa-twitter"></i>
|
|
<span style=color:#4da7de>Twitter</span></a><br><a title="Discord " href=https://discord.gg/cuZcfcF><i style=color:#7289da class="fab fa-discord"></i>
|
|
<span style=color:#7289da>Discord</span></a><br><a title="GitHub " href=https://github.com/juju2143><i style=color:#fafafa class="fab fa-github"></i>
|
|
<span style=color:#fafafa>GitHub</span></a><br><a title="Patreon " href=https://patreon.com/juju2143><i style=color:#f96854 class="fab fa-patreon"></i>
|
|
<span style=color:#f96854>Patreon</span></a><br><a title="YouTube " href=https://youtube.com/user/julosoft><i style=color:#e02a20 class="fab fa-youtube"></i>
|
|
<span style=color:#e02a20>YouTube</span></a><br><a title="YouTube 2 " href=https://youtube.com/c/juju2143><i style=color:#e02a20 class="fab fa-youtube"></i>
|
|
<span style=color:#e02a20>YouTube 2</span></a><br><a title="Twitch " href=https://twitch.tv/juju2143><i style=color:#6441a5 class="fab fa-twitch"></i>
|
|
<span style=color:#6441a5>Twitch</span></a><br><a title="Instagram " href=https://instagram.com/j.p.savard><i style=color:#d6249f class="fab fa-instagram"></i>
|
|
<span style=color:#d6249f>Instagram</span></a><br><a title="DeviantArt " href=https://deviantart.com/juju2143><i style=color:#c5d200 class="fab fa-deviantart"></i>
|
|
<span style=color:#c5d200>DeviantArt</span></a><br><a title="SoundCloud " href=https://soundcloud.com/juju2143><i style=color:#fe3801 class="fab fa-soundcloud"></i>
|
|
<span style=color:#fe3801>SoundCloud</span></a><br></nav></aside><article style=background-image:url(/images/2020/11/bg.png)><div class=metadata style="height:calc((var(--height) - 2em) * .5625 - 3.5em)"><h2 name=top>Toasters Rocks 4.0</h2><p>Brand new blog, again.</p><i class="far fa-calendar-alt"></i>
|
|
<time datetime=2020-11-28>November 28, 2020</time><br><i class="fas fa-tags"></i>
|
|
#<a class="btn btn-sm btn-outline-dark tag-btn" href=http://toasters.rocks/tags/meta>Meta</a><br><i class="fas fa-hourglass"></i> ~6 minutes</div><p>Well, it seems to be a tradition around this time of the year, every 368 days or so. A brand new blog. But this time, the story is quite interesting.</p><h3 id=genesis>Genesis</h3><p>The first iteration of this blog was basically my Tumblr blog. By November 2018, I became largely disinterested by Tumblr due to various reasons, and I found this blog engine called <a href=https://writefreely.org>WriteFreely</a>, written in Go, could do federation so the blog posts would show up in people’s Mastodon feeds, effectively replicating some of Tumblr’s social features. It looked pretty cool at first, but it was really beta software at best, didn’t really work fantastically, and I had to run the binary in the background. But eh, I had a pretty nice minimalistic design.</p><p>Later in November 2019, I was messing with some Plesk-based web hosting account I got for free with a cheap VPS (which hosted the blog, and later died), I discovered it could do Node.js hosting, so I decided to install <a href=https://ghost.org>Ghost</a>, just to try out if it could work, and if it could be a nice solution if I ever run out of money for the VPS. Of course, being Node.js, it’s a bit finicky and it expects you to run it on an actual VPS and not on some Plesk-based that barely could run <code>npm install</code>, but eh, it worked. Kind of. The server stopped when it’s idle until there’s a new request, so if it’s been a while no one visited the site you’d be greeted with a “The blog is starting up” message, people are idiot enough to not get you’d have to come back later and then message me the blog is broken, in which I’ll just tell them, just try again… Anyway, it worked for me, since it was free. Until they upgrade their version of Node.js or something, maybe.</p><h3 id=and-this-is-where-it-breaks-for-good>And this is where it breaks for good</h3><p>Around November 2020, said hoster moved their servers closer to Paris, France where most of their clients are, apparently. (I’m not even anywhere near Paris, so eh, probably not going to be significantly faster for me.) Downtime expected, change your IPs, the usual for a small host. From what I see, the migration went quite well, and I hope they had a nice roadtrip since they had to physically move servers from about 4 hours drive away from Paris. But what they didn’t say, unbeknownst to me, is that they axed the Node.js option in their Plesk… I complained to their Discord server and they said something along the line of it was only getting used by people uploading huge scripts and abusing the available resources. Well, bummer. At least the files and database are still there.</p><h3 id=time-for-another-engine>Time for another engine?</h3><p>Why, of course. My goal still was about building something better than WordPress. Something self-hosted, simple to maintain, very customizable, and faster than the humongous PHP script WordPress is. Which is not that hard, really. WriteFreely, while it embraces minimalism, was too minimalistic for my needs, Ghost, while it’s 17x faster than WordPress and way closer to my needs, still wasn’t cutting it, and Tumblr obviously shot themselves in the foot and is a prime example why you don’t want to go self-hosted.</p><p>So, why not a static site generator? Back then I was also messing with Pandoc, which basically converts Markdown files to HTML and I thought I could use that. I quickly realized that would basically be reinventing the wheel, so I asked around. A friend of mine recommended <a href=https://gohugo.io>Hugo</a>, which is perfect for my needs.</p><p>Now the plan is:</p><ol><li>Build a new theme for Hugo (because I can)</li><li>Export the posts from my Ghost install (which is ironically now only a ghost of itself)</li><li>Import them into Hugo</li><li>????</li><li>PROFIT</li></ol><h3 id=build-the-theme>Build the theme</h3><p>Ah, I didn’t really do that since my Tumblr days. I did changed the font a bit on the WriteFreely default theme, and I started a theme for Ghost a while ago based on the Windows 95 UI, but it never went anywhere. But this time, didn’t even looked at the default themes and starting porting that one I did for <a href=http://juju2143.ca>my bio page</a>. And, yeah, I really like Hugo. In all, it took me about a week of free time or so. Looks pretty cool, isn’t it?</p><h3 id=export-the-data>Export the data</h3><p>Now that’s the hardest part. I kinda wish here they’d give at least a headstart before they took it down so I could export the data, but eh. If you know Node.js you’d probably know if you leave some code unmaintained for more than 6 months something will surely break in a later major version of Node.js. And sure enough, something wasn’t compatible with Node 15. So I dusted off my old copy of Node 12, and now I had to figure out how the config file worked because I somehow configured it with environment variables like an idiot and now they’re gone. I also attempted to import the database dump into SQLite, but it’s too different from MySQL and I ended up installing a MariaDB server.</p><p>Now that everything is working somewhat, I could access the old blog from localhost and hit the export button.</p><h3 id=import-the-data>Import the data</h3><p>Now you’ll want to convert your backup file to a bunch of Markdown files. <code>ghost-to-md</code> is a tool that does exactly that:</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre tabindex=0 class=chroma><code><span class=lnt>1
|
|
</span><span class=lnt>2
|
|
</span></code></pre></td><td class=lntd><pre tabindex=0 class=chroma><code class=language-sh data-lang=sh><span class=line><span class=cl>npm install -g ghost-to-md
|
|
</span></span><span class=line><span class=cl>ghost-to-md yourwebsitebackup.json
|
|
</span></span></code></pre></td></tr></table></div></div><p>Now you’ll want to dump the resulting Markdown files in the content folder, the images from the old Ghost install to the static folder, fix front matter variables to the correct name, fix image URLs (both of which can be done with search and replace), and there you go, a nice website.</p><h3 id=aftermath>Aftermath</h3><p>Now I need to fix the posts one by one, since the converter didn’t do a very good job at converting stuff, in particular header images, embeds and tables, plus that script wasn’t written specifically for Hugo, and there’s a few bugs to squash here and there, but eh, since I don’t have a ton of posts it’s kinda doable. It’s still gonna be wonky a bit at first but I hope you like it.</p><h3 id=update-2020-10-29>Update (2020-10-29)</h3><p>Okay, now the workflow is completely automated. I uploaded the source to GitHub (you can <a href=https://github.com/juju2143/toasters.rocks>look it up</a> <a href=https://github.com/juju2143/hugo-theme-toastersrocks>if you want</a>, you can even use it for all I care but I pretty much made it for myself, so YMMV), then used GitHub Actions so it builds it and pushes the compiled, minified result to GitHub Pages automatically. It’s pretty cool, really. So, since GitHub lets you edit files and commit directly from the website, I can actually use it as a CMS, which is perfect for my needs. And since it’s just a bunch of HTML files and it’s on a bunch of CDNs all around the world, this thing can’t be faster. Almost.</p><p>So, I hope you like it, I hope it works for you, and if you find any issues, feel free to complain about it in the comment section or <a href=https://github.com/juju2143/hugo-theme-toastersrocks/issues>on GitHub</a>.</p></article><ul class=pagination><li class=page-item><a class=previous href=http://toasters.rocks/november-updates/>« November updates</a></li><li class=page-item><a class=next href=http://toasters.rocks/a39/>Introducing a39.ca »</a></li></ul><article><div id=disqus_thread></div><script type=application/javascript>window.disqus_config=function(){},function(){if(["localhost","127.0.0.1"].indexOf(window.location.hostname)!=-1){document.getElementById("disqus_thread").innerHTML="Disqus comments not available by default when the website is previewed locally.";return}var t=document,e=t.createElement("script");e.async=!0,e.src="//juju2143.disqus.com/embed.js",e.setAttribute("data-timestamp",+new Date),(t.head||t.body).appendChild(e)}()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a href=https://disqus.com class=dsq-brlink>comments powered by <span class=logo-disqus>Disqus</span></a></article></main><footer>Copyright © 2020 J.P. Savard - Theme by <a href=https://github.com/juju2143/hugo-theme-toastersrocks>J. P. Savard</a> - Powered by Hugo 0.105.0</footer></body></html> |