Creating a static HTML post using HydePHP

This tutorial assumes you have already setup HydePHP.

This blog post will show how to scaffold a blog post using the Hyde CLI

Visual learner? Here is a short video showcasing the process: https://www.youtube.com/watch?v=gjpE1U527h8

We will be using the make command to scaffold our file. In your favourite terminal, navigate to your project directory and run the command.

1php hyde make:post

We should now get the following output:

1Creating a new post!
2 
3Please enter the title of the post, it will be used to generate the slug.
4 
5What is the title of the post?:
6>

Let's fill in the title we want and hit enter.

Next, we will be asked to fill in some meta information. These are not required and you can just hit return to use the defaults, though they will make the post look nice so we will add them here!

 1What is the title of the post?:
 2 > Creating a static HTML post using HydePHP
 3 
 4Tip: You can just hit enter to use the defaults.
 5 
 6Write a short post excerpt/description:
 7 > In this tutorial we go through the simple process of generating a static blog post
 8 
 9What is your (the authors) name?:
10 > Caen
11 
12What is the primary category of the post?:
13 > tutorials

Next, we will be given a preview of what the post will look like. If something does not look write we can write no to abort. But for now, we will hit enter to use the preselected yes option.

 1Creating a post with the following details:
 2Title: Creating a static HTML post using HydePHP
 3Description: In this tutorial, we go through the simple process of generating a static blog post
 4Author: Caen
 5Category: tutorials
 6Date: 2022-03-19 16:19
 7Slug: creating-a-static-html-post-using-hydephp
 8 
 9Do you wish to continue? (yes/no) [yes]:
10 > yes
11 
12Post created! File is saved to /dev/HydeDocs/_posts/creating-a-static-html-post-using-hydephp.md

Awesome! As you can see the current date has automatically been injected using the proper format. A slug has also been generated.

We can also use the outputted file path to open the Markdown file in our text editor. I'm using VSCode.

This is the contents of the file. The title has also been filled in for us.

 1---
 2title: Creating a static HTML post using HydePHP
 3description: In this tutorial, we go through the simple process of generating a static blog post
 4category: tutorials
 5author: Caen
 6date: 2022-03-19 16:19
 7slug: creating-a-static-html-post-using-hydephp
 8---
 9 
10# Creating a static HTML post using HydePHP

Now that we have the file, let's fill in the post with actual content and then we can build the site!

If this is the first time you are building the site you may need to compile the frontend assets using NPM. If you don't have NPM you can download the files from the latest GitHub release and add them to the _site directory.

1npm install
2npm run dev

And then we build the site with

1php hyde build

We can now open up the created file with is saved in _site/posts/creating-a-static-html-post-using-hydephp.html!

Syntax highlighting by Torchlight.dev