Prologue
HydePHP is more than just a static site generator; it’s a magical tool that empowers developers and creators to bring their visions to life. Designed by the talented Caen De Silva, HydePHP is a treasure trove for PHP and Laravel enthusiasts, offering an intuitive way to build stunning functional websites and much more. Inspired by its possibilities, I crafted a tutorial that dives deep into using HydePHP, coupled with my custom Composer package, the HydePHP Layouts Manager, which try to simplifies the management of layouts and reusable components within HydePHP projects.
The tutorial, originally published on my blog, takes a creative twist by telling The Tale of Zoe: an artist with a dream to turn her doodles into a best-selling brand. Through her hypothetical story, I demonstrate how anyone can build a captivating website with HydePHP featuring a hero section, an engaging FAQ accordion, and an interactive carousel, all designed to promote Zoe’s fictional book—a scenario that resonates with many aspiring artists.
Now reposted here on the Coder Legion Community, this guide not only highlights the ease and joy of working with HydePHP but also serves as a hands-on case study for exploring its features and extending its capabilities with the HydePHP Layouts Manager.
Let Zoe’s enchanting journey inspire you as we unlock the magic of static site generation, one line of code at a time.
The Tale of Zoe: From Doodler to Best-Seller with HydePHP
Once upon a time, in a land filled with pixels and code, there lived a young artist named Zoe. Zoe was a doodler—her sketchbooks brimmed with whimsical characters, enchanting landscapes, and magical creatures. Yet, Zoe had a dream: to turn her passion for art into a radiant online presence, where her designs could inspire people from all corners of the kingdom.
Whispers of a wondrous creation reached far and wide—a magical place where Zoe’s dreams had taken shape. A glowing beacon, they called it:
Zoe’s Magical Website.
Hyde Wizard’s GitHub Repo
But Zoe wasn’t sure how to make her dream come true. She had heard whispers of magical tools—arcane artifacts like Composer, the fabled package manager, and Node.js, the spellbook of modern web enchantments. These tools, they said, were the key to unlocking a powerful force known as HydePHP and its enchanting ally, the HydePHP Layouts Manager.
These tales also spoke of a mysterious guide known as the PHP Shaman, a being of both wisdom and power who walked the delicate thread between the tangible and the ethereal.
One day, as Zoe wandered through the dense and tangled Forest of Code, she stumbled upon a clearing bathed in soft, glowing light. There, standing amidst the swirling lines of logic and dreamlike patterns, was the Shaman of Code—the Hyde Wizard. Draped in a cloak that seemed woven from strands of light and shadow, the wizard’s silhouette was crowned by a pointed hat that shimmered with the symbols of forgotten scripts and timeless spells. The wizard radiated an aura of unity, as though the dual forces of science and magic were not opposites but two sides of the same coin.
Step 1: The First Spell – Creating Zoe’s Magical Website
He chanted the incantation, and with a wave of his hand, Zoe had installed HydePHP, which gave her the ability to craft a website with ease. HydePHP would help her create a platform for her doodles, designs, and stories—just like magic!
Zoe quickly followed the wizard’s guidance and, with a few commands, created the foundation for her site:
composer create-project hyde/hyde zoe-bookscd zoe-books
As the foundation materialized on the screen, the Hyde Wizard clapped his hands in delight. “Ah, but what is a magical website without a proclamation to the world? A new adventure must always start with an announcement!” He spun around dramatically, pointing his wand at Zoe’s screen.
“Let us craft your first blog post to declare your arrival!”
Zoe, catching on to the wizard’s enthusiasm, asked, “What should I say?”
The wizard grinned. “Why, tell them of the magic you bring! Something enchanting, like:
‘A Magical Doodly Website is Finally Here!’”
With the wizard’s help, Zoe created her first blog post, typing out the command with excitement:
php hyde make:post "A Magical Doodly Website is Finally Here"
In an instant, the blog post was ready, its words filled with excitement and charm. The Hyde Wizard nodded approvingly. “Now the world shall know of your journey, Zoe. This is how adventures begin—by sharing your story!”
But the Hyde Wizard wasn’t done yet. With a mysterious smile, he beckoned Zoe to follow further into the magic. “Come now, Zoe. Let us unveil a glimpse of what your website will look like. For this, we must conjure the Blog Feed Page, where all your posts will gather like a flock of enchanted words.”
With a sweep of his wand, he instructed Zoe to type:
php hyde publish:homepage
When the shimmering menu appeared, Zoe carefully selected [1], creating a page dedicated to her blog posts. As the magical command settled, the Hyde Wizard turned to Zoe with a knowing smile. “The magic needs a little spark to take full effect,” he said gently.
Understanding his meaning, Zoe answered the next prompt with a confident “Yes,” and the site began to rebuild itself, shimmering like stardust as the changes came to life. The Hyde Wizard watched proudly as the foundation grew before their eyes.
“Now,” he said, his voice lowering to a reverent tone, “it is time to ignite the Magical Engine. With this, your website will come alive, and you shall catch your first glimpse of your creation.” He gestured for Zoe to continue:
php hyde serve
Zoe held her breath and ran the incantation. The magical engine hummed to life, its gears turning invisibly in the depths of her laptop. She opened her browser, and there it was—a simple but elegant page displaying her very first blog post.
“It’s beautiful!” Zoe whispered, marveling at the default HydePHP blog feed. The structured simplicity of the design hinted at the endless possibilities lying just beneath the surface.
The Hyde Wizard smiled as Zoe’s eyes sparkled with wonder. “This, dear Zoe, is but the beginning. You’ve taken your first steps into a larger world of creation and connection. Imagine what will come next!”
Zoe nodded eagerly, but the wizard’s expression grew serious once more. “Before we can craft the landing page of your dreams, we must enhance your powers by installing a magical artifact—the HydePHP Layouts Manager. This will equip you with the layouts, components, and styles needed for the enchantments we are about to weave.”
With a wave of his staff, a shimmering list of instructions appeared before Zoe.
“To begin, invoke this spell in your terminal,” the wizard said:
composer require melasistema/hyde-layouts-manager
Zoe did as instructed, watching lines of text scroll across the terminal like incantations in a spellbook.
“Now, to channel this magic, you must set the foundation for your layouts. Rename the .env.example
file to .env
and add this line,” the wizard continued, his tone like that of a teacher passing down ancient knowledge:
DEFAULT_LAYOUT=melasistema
“This default configuration ensures your layouts will radiate with elegance and harmony. But know this: the magic of HydePHP allows you to define your own styles, should you ever wish to forge your path.”
Zoe added the line and closed the .env
file with a triumphant click.
The wizard nodded approvingly. “Good. Next, we must publish the package’s configuration so it's magic can integrate with your project. Use this command to prepare the way:”
php hyde vendor:publish --provider="Melasistema\HydeLayoutsManager\HydeLayoutsManagerServiceProvider" --tag="hyde-layouts-manager-config"
Zoe ran the command, feeling a surge of confidence as the configuration files materialized in her project.
“Impressive,” the wizard remarked, his eyes glinting. “But there’s more work to be done. To harmonize your project’s styles with the Hyde Layouts Manager, we must merge its Tailwind configuration. We have two paths forward—choose wisely.”
The wizard’s staff illuminated two options in the air.
Automated Merge: “For speed and simplicity, use this command. But be warned, this will overwrite your existing tailwind.config.js
. Back it up if you’ve customized it.”
php hyde tailwind:merge
Manual Merge: “Or, if you prefer precision, you may manually weave the Layouts Manager configuration into your tailwind.config.js
. Here’s the structure:”
(The wizard conjured a glowing scroll, displaying the configuration Zoe could copy-paste.)
const HydeLayoutsManagerConfig = require('./tailwind-layouts-manager.config.js');
module.exports = {
darkMode: 'class',
content: [
'./_pages/**/*.blade.php',
'./resources/views/**/*.blade.php',
'./vendor/hyde/framework/resources/views/**/*.blade.php',
...HydeLayoutsManagerConfig.content,
],
theme: {
extend: {
...HydeLayoutsManagerConfig.theme.extend,
},
},
plugins: [
require('@tailwindcss/typography'),
...HydeLayoutsManagerConfig.plugins
],
};
Zoe chose the automated path, swiftly running the command and watching the terminal respond with magic.
“Finally,” the wizard said, “your components require Flowbite, a library of enchanted scripts and styles. Let us add this dependency.”
With a flick of his wrist, another command appeared:
php hyde package-json:merge
“And then, weave it into your project with this incantation:”
npm install
Zoe executed both spells, her fingers flying over the keyboard.
“To bind these scripts to your project,” the wizard continued, “you must update your webpack.mix.js
with these instructions.” He pointed to another glowing scroll:
let mix = require('laravel-mix');
mix.css('node_modules/flowbite/dist/flowbite.css', 'app.css')
.js('node_modules/flowbite/dist/flowbite.js', 'app.js')
.js('resources/assets/app.js', 'app.js')
.postCss('resources/assets/app.css', 'app.css', [
require('tailwindcss'),
require('autoprefixer'),
])
.setPublicPath('_site/media')
.copyDirectory('_site/media', '_media');
“Finally, invoke the build process with this command,” he concluded:
npm run dev
The project whirred to life as the commands took effect. Zoe beamed with pride.
“Now,” the wizard declared, “you are ready for the next step—crafting your magical landing page.”
...continue reading (part 2)