StaticHog

NPM Github

StaticHog allows users to quickly generate huge static websites through template pages and cast documents.

How to install

npm install -g statichog

Author and License

This was created by William McGonagle and is licensed under the ISC license. If you want to edit the code for yourself, you can. But, you have to give all credits for the code that I wrote and the idea, to me.

William's Website

William's Github

William's Twitter

William's Facebook

Current Release

The current release lets users create a JSON tree as a cast for the template. The template is a piece of HTML that contains elements with id attributes. These ID attributes will be the same as the keys in the cast JSON object.

The current release also has support for computed file. This can be used for cases where the user wants to manipulate their page information in any way they want.

compute

The compute command is used to quickly fill out the template page using information provided by the cast, and the Javascript on the template page. This is very similar to how PHP works, except it is using Javascript, and it returns a static webpage, so PHP ideas like session variables will not work.

Scripts

Scripts are used just like PHP. In the html, use <?hog to start out the hog code, and to end it, just type ?>. When using scripts, replacement is not allowed. This means that you cannot use %text% in the template because it will not be replaced by anything. But, if you still want that to be changed to the cast text, just replace %text% with <?hog output = cast.text; ?>. The compute system allows the same exact functionality as the replace system, but with a lot more functionality. Now, you can do things like the example below.

<?hog

  var title = cast.blogTitle;
  var titleLength = title.length;

  output = "Blog title is ${title}, and its length is ${titleLength}.";

?>

Another example (below) is array manipulation done with hog script.

<?hog

  var a = cast.joinVar; // Variables from cast can be used

  console.log("Hey!"); // This wont return anything

  // The only way to give output is with setting the output variable
  output = new Array(60).join(a);

?>

Hog scripts that reference other hog scripts also work as expected. This technique is known as hog chaining. This is shown in the example below.

<?hog

  var hogText = "Oink";

?>
<?hog

  output = "The last hog said: " + hogText;

?>

replace

The replace command is used to quickly fill out the template page with whatever text you want. This can be very useful for filling out boilerplate webpages.

For the title

The title is possibly the simplest part of the replacement process. Simply put %key% in the title, and the string that is connected to this key will replace it.

Cast

{
  "title": "This is my title"
}

Template

<title>%title% - Steve</title>

Result

<title>This is my title - Steve</title>

For Direct Replacement

Direct replacement is probably the second easiest. Just set the ID of the element whose content you want replaced to whatever key you want to replace it. This can be used in many different ways, but the simplest way is shown below.

Cast

{
  "name": "Mark"
}

Template

<p>My name is <p id="name"></p></p>

Result

<p>My name is <p id="name">Mark</p></p>

For Array Replacement

Say you have the body of your blog, and you want to have h3 tags and p tags. What you would be able to do is set the ID attribute of a parent of these elements, and then use that same ID in the Cast. But, instead of using a string as the Cast body, use an array of strings. This will let you do multiple items in a very human readable way.

Cast

{
  "body": [
    "<h3>Section A</h3>",
    "<p>Hey, this is section A!</p>"
  ]
}

Template

<div id="body">

</div>

Result

<div id="body">
  <h3>Section A</h3>
  <p>Hey, this is section A!</p>
</div>

Metatags

For the meta tags, add to the cast with an object called meta. Fill the meta object with a few strings, like shown below. Then, run the command, and all major media sites should now be able to display your page in a simplified way. Note: your html page MUST have a head. If the page does not have a head, the program will crash.

Cast

{
  "meta": {
    "title": "William's Website",
    "description": "This is a simple little website",
    "twitter": "@WilliamMcGona11",
    "alt": "A cute picture of a cat",  
    "url": "http://www.william.com/",
    "image": "http://www.placekitten.com/"
  }
}

Template

<head>
  <title>Some Random Title</title>
</head>

Result

<head>
  <title>Some Random Title</title>
  <meta name="twitter:card" content="summary">
  <meta property="og:type" content="website" >
  <meta name="twitter:title" content="William's Website">
  <meta property="og:title" content="William's Website" >
  <meta name="twitter:description" content="This is a simple little website">
  <meta property="og:description" content="This is a simple little website" >
  <meta name="twitter:site" content="@WilliamMcGona11">
  <meta name="ttwitter:creator" content="@WilliamMcGona11">
  <meta name="twitter:image:alt" content="A cute picture of a cat">
  <meta property="og:image:alt" content="A cute picture of a cat" >
  <meta name="og:url" content="http://www.william.com/">
  <meta name="twitter:image" content="http://www.placekitten.com/">
  <meta property="og:image" content="http://www.placekitten.com/" >
</head>

Future Releases

Bulk generation may be added so that entire static websites can be generated at once. This would possibly work in tandem with SQL databases, or CSV datasets. This would allow for a simpler processing of data, and a much smaller amount of repetition for the generation of JSON files.