I've been meaning to do this project for a while, and a challenge elsenet finally got me off my butt to do it. In a nutshell: I like making fan scripts and primers of Final Fantasy games. I've kept them private for a while, but it's time to release them to the wild. Neocities to the rescue!
My first step was to build a base HTML page to serve as the main landing page. In this base HTML page, I played around with CSS a bit until I had the start of a layout.
Next step: refactor the page to split out its pieces include Jekyll includes.
You might be asking: What the heck is Jekyll? It is a static website content manager, written in Ruby (a programming language). Ruby runs on any of the three major operating systems (Windows, MacOS, and Linux) so Jekyll can run on any of those, too. I am using Jekyll locally on a Windows 11 machine.
Jekyll Home Page - has instructions for installing both Ruby and Jekyll, as well as a tutorial to build a basic site.
Jekyll is often used for smallweb blogs, and I did considering using its built-in blog templates to post my content, but I decided to build my own layout instead. I'm not the best at CSS, but I know how to do a good web search, and found tutorials for my needs.
Let's first start with refactoring the starting webpage. I had something that looked like this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Althea Valara's Final Fantasy Recaps!</title>
<link rel="stylesheet" href="/assets/css/styles.css">
</head>
<body>
<div class="splash"><h1>Althea Valara's <em>Final Fantasy</em> Recaps!</h1></div>
<nav>
<div class="nav-box">
<ul class="navigation" style="clear:both;">
<li><a href="/">About</a></li>
<li><a href="/ffbe/">FFBE</a></li>
<li><a href="/ffxi/">FFXI</a></li>
<li><a href="/ffxiv/">FFXIV</a></li>
</ul>
</div>
</nav>
<div class="body-box">
<p>Welcome! Do you love <strong>Final Fantasy</strong> as much as I do?
Or maybe you're intrigued by the games but don't have time to play them yourself?
Here you will find recaps of some of the ongoing games in the series.
Sit back, relax, and find out why these games are so special.</p>
<div class="hero-nav">
<ul>
<li><a href="/ffbe">Final Fantasy Brave Exvius</a></li>
<li><a href="/ffxi">Final Fantasy XI</a></li>
<li><a href="/ffxiv">Final Fantasy XIV</a></li>
</ul>
</div>
</div>
<footer>
<hr width=50% align="center">
<div class="footer-box">
<ul>
<li><a href="/">About</a></li>
<li><a href="/ffbe/">FFBE</a></li>
<li><a href="/ffxi/">FFXI</a></li>
<li><a href="/ffxiv/">FFXIV</a></li>
</ul>
<p>(This site is a work in progress. Please pardon the dust.)</p>
<p><em>Written and coded by Althea Valara. Powered by Jekyll and Neocities.</em></p>
</div>
</footer>
</body>
</html>
First you need to initialize the Jekyll project:
Second, strip the repetitive pieces of the site into pieces. All pieces should reside in the _includes folder in your project directory:
header.html
<div class="splash"><h1>Althea Valara's <em>Final Fantasy</em> Recaps!</h1></div>
footer.html
<footer>
<hr width=50% align="center">
<div class="footer-box">
<ul>
<li><a href="/">About</a></li>
<li><a href="/ffbe/">FFBE</a></li>
<li><a href="/ffxi/">FFXI</a></li>
<li><a href="/ffxiv/">FFXIV</a></li>
</ul>
<p>(This site is a work in progress. Please pardon the dust.)</p>
<p><em>Written and coded by Althea Valara. Powered by Jekyll and Neocities.</br>
Multi-level menus from <a href="https://hackernoon.com/multilevel-navigation-using-jekyll-a-step-by-step-guide">this tutorial</a>.</em></p>
</div>
</footer>
The main part of the page -- the content -- then goes in index.html in the root directory of your project:
---
layout: default
title: Althea Valara's Final Fantasy Recaps!
---
<p>Welcome! Do you love <strong>Final Fantasy</strong> as much as I do?
Or maybe you're intrigued by the games but don't have time to play them yourself?
Here you will find recaps of some of the ongoing games in the series.
Sit back, relax, and find out why these games are so special.</p>
<div class="hero-nav">
<ul>
<li><a href="/ffbe">Final Fantasy Brave Exvius</a></li>
<li><a href="/ffxi">Final Fantasy XI</a></li>
<li><a href="/ffxiv">Final Fantasy XIV</a></li>
</ul>
</div>
Wait a minute... what are those four lines at the top of index.html? They are Jekyll magic called frontmatter. This front matter tells Jekyll it needs to process the file, using the default layout and with the page title listed.
Where does Jekyll get this layout from? From a file located at _layouts/default.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>{{ page.title }}</title>
<link rel="stylesheet" href="/assets/css/styles.css">
</head>
<body>
{% include header.html %}
{% include navigation.html %}
<div class="body-box">
{{ content }}
</div>
{% include footer.html %}
</body>
</html>
This uses a language called Liquid, mixed with HTML, that allows Jekyll to build pages. {{ page.title }} is the variable that we passed along in the frontmatter. {% include header.html %} tells Jekyll to insert the _includes/header.html file at that point in the code. Likewise for the footer.html.
You may have noticed that I also included a navigation.html - this is something that I built after the first refactor, using the following tutorial:
Multilevel Navigation Using Jekyll - shows you the three files necessary to build your navigation menus: _config.yml, _includes/navigation.html and a CSS stylesheet.
One of the beauties of Jekyll is that it can process languages other than HTML and CSS. It can also process Markdown files, and Yet Another Markup Language (YAML) files. _config.yml is the latter. Mine looks like this:
navigation:
- root: About
url: /
- root: FFBE
url: /ffbe/
first-level:
- text: Chapter 1
url: /ffbe/ffbe_1.html
second-level:
- text: Part I - Grandshelt
url: /ffbe/ffbe_1-1.html
- text: Part II - Lanzelt
url: /ffbe/ffbe_1-2.html
- text: Part III - Kolobos Island
url: /ffbe/ffbe_1-3.html
- text: Chapter II - Dirnado
url: /ffbe/ffbe_2.html
- text: Chapter III - Olderion Federation
url: /ffbe/ffbe_3.html
- text: Chapter IV - Zoldaad Empire
url: /ffbe/ffbe_4.html
- text: Chapter V - Magi Nation Mysidia
url: /ffbe/ffbe_5.html
- text: Chapter VI - Dark Continent Gronoa
url: /ffbe/ffbe_6.html
- text: Chapter VII
url: /ffbe/ffbe_7.html
second-level:
- text: Part I - Kingdom of Pharm
url: /ffbe/ffbe_7-1.html
- text: Part II - Land of the Crystals
url: /ffbe/ffbe_7-2.html
- text: Part III - Chaotic Darkness
url: /ffbe/ffbe_7-3.html
- root: FFXI
url: /ffxi/
first-level:
- text: Missions
url: /ffxi/missions.html
second-level:
- text: Bastok
url: /ffxi/bastok.html
- text: San d'Oria
url: /ffxi/sandy.html
- text: Windurst
url: /ffxi/windy.html
- text: Rise of the Zilart
url: /ffxi/rotz.html
- text: Chains of Promathia
url: /ffxi/cop.html
- text: Treasures of Aht Urhgan
url: /ffxi/toau.html
- text: Wings of the Goddess
url: /ffxi/wotg.html
- text: Seekers of Adoulin
url: /ffxi/soa.html
- text: Rhapsodies of Vana'diel
url: /ffxi/rhapsodies.html
- text: Scenarios
url: /ffxi/scenarios.html
second-level:
- text: A Crystalline Prophecy
url: /ffxi/crystalline.html
- text: A Moogle Kupo d'Etat
url: /ffxi/moogle.html
- text: A Shantotto Ascension
url: /ffxi/shantotto.html
- text: Abyssea
url: /ffxi/abyssea.html
- text: Voidwatch
url: /ffxi/voidwatch.html
- text: The Voracious Resurgence
url: /ffxi/resurgence.html
- root: FFXIV
url: /ffxiv/
first-level:
- text: A Realm Reborn
url: /ffxiv/arr.html
second-level:
- text: ARR Base
url: /ffxiv/arr_base.html
- text: Patches 2.1 - 2.55
url: /ffxiv/arr_patches.html
- text: Heavensward
url: /ffxiv/hw.html
second-level:
- text: HW Expansion
url: /ffxiv/hw_expac.html
- text: Patches 3.1 - 3.56
url: /ffxiv/hw_patches.html
- text: Stormblood
url: /ffxiv/stormblood.html
second-level:
- text: SB Expansion
url: /ffxiv/stormblood_expac.html
- text: Patches 4.1 - 4.56
url: /ffxiv/stormblood_patches.html
- text: The Crystal Tower Raids
url: /ffxiv/crystaltower.html
- text: Shadowbringers
url: /ffxiv/shadowbringers.html
second-level:
- text: ShB 1 - The First
url: /ffxiv/shadowbringers_1.html
- text: ShB 2 - Holminster Switch and the Aftermath
url: /ffxiv/shadowbringers_2.html
- text: ShB 3 - Il Mheg, the Faerie Kingdom
url: /ffxiv/shadowbringers_3.html
- text: ShB 4 - Meeting Emet-Selch and the Night’s Blessed
url: /ffxiv/shadowbringers_4.html
- text: ShB 5 - Yx’Maja, in the Rak’tika Greatwood
url: /ffxiv/shadowbringers_5.html
- text: ShB 6 - Rak'tika Lightwarden & A History Lesson
url: /ffxiv/shadowbringers_6.html
- text: ShB 7 - Return to the Crystarium
url: /ffxiv/shadowbringers_7.html
This is much easier to read than HTML might be! Also, by setting up navigation this way, you can easily change your navigation across the site using one file. Jekyll uses Liquid magic to build the menus. I copy and pasted the Liquid code directly from the tutorial linked above into navigation.html, though I did wrap it in a
<div class="nav-box">wrapper so I could style mine just slightly different. I'm still not great with CSS so I mostly used the CSS from the tutorial.
You can test your site using the following command:
bundle exec jekyll serve
This sets up a copy of your site at http://localhost:4000/ so you can test it in your web browser(s).
Once you are satisfied with your site locally, you tell Jekyll to build it:
bundle exec jekyll build
It builds the pages into the _site subfolder. You'll want to upload the entire contents of that folder to Neocities. Neocities has a Command-Line Interface (CLI) that makes it a lot easier to upload than dragging files one-by-one via the web interface.
Neocities CLI - instructions for installing the Neocities CLIThen you just need to do:
neocities push _site
When prompted, log in with your Neocities username and password and VOILA! The site is pushed and live!
The site I've been working on is here:
http://altheavalara.neocities.org - Althea Valara's Final Fantasy Recaps!
It's not finished yet. I still have more to copy over from my local documents, plus some parts haven't been written yet. But the base structure is there, and I'm satisfied enough with it to share it.
I'm really glad I heard about Jekyll because it's making building the individual pages much easier.