#MadeWithHydePHP

Introduction

It should come as no surprise that I love HydePHP and the amazing things it lets you create using it. In this post, I'll show off some creations I've made with Hyde.

If you are not familiar, Hyde is a static site builder written in PHP using the Laravel framework. What I really like with Hyde is that like Laravel, it's a progressive framework. You can create amazing sites with just Markdown and not have to touch a single line of code as Hyde comes with its own frontend built with TailwindCSS.

Feeling limited by Markdown? No sweat! Since Hyde uses Laravel Zero we have access to many features you'll feel right at home with, such as Blade templating where Blade files are automatically compiled into static HTML. You can even hook into APIs during the build process to fetch data for your site. You'll see an example of this later on in the article.

Let's get into it!

The HydePHP.com page

The Hyde homepage is of course made with Hyde and uses all major features of the framework. Let's take a look at the homepage which is made with Blade.

Blade Landing Page

See the live page at https://hydephp.com/

The welcome screen is adapted from one of the many built-in pages, namely the welcome homepage. You can also create static pages with just Markdown as well.

Markdown Blog Posts

See the live page at https://hydephp.com/posts

Hyde started out as a static blog generator, so of course, we need to look at the blog post module! All you need to do to create blog posts is to put Markdown files (which you can create using the interactive php hyde make:post command) in the _posts directory. They will then be added to the post feed and compiled into static HTML that is both semantic, data-rich, and accessible! The post metadata is specified using front matter.

Markdown Documentation Page

See the live page at https://hydephp.com/docs/master/blog-posts

The documentation module in Hyde is something I'm really happy with how it turned out. All you need to do is place a Markdown file in the _docs directory and it will be automatically compiled into a static documentation page where the sidebar is automatically populated and can be grouped with optional YAML Front Matter.

Using APIs

While Hyde sites are static once compiled, that does not mean you can't do fun stuff before that happens!

See the live page at https://hydephp.com/dashboard

This section for example, which is on the "hidden" dashboard page, pulls data from the Packagist API during compile-time and uses it to create this dynamic component. The actual HTTP request is made using the Laravel HTTP client which makes working with APIs easy as A-PIe (sorry).

What's next?

If you have not tried out Hyde, you should! I promise it'll be worth it. And please use the hashtag #MadeWithHydePHP on dev.to and Twitter, and wherever else you are, so I can see! I'd love to feature your creations on the website, speaking of, here is a link to it: https://hydephp.com/

By the way, HydePHP is completely free and open source and only takes a minute to install with Composer:

composer create-project hyde/hyde --stability=dev