You are viewing an inferior version of the site because your browser does not support WebP. Do upgrade to something like Chrome or Firefox. Loading websites like this causes them to require a fallback set of images and they are almost always lower quality and larger in size.

Serve Static Pages With Some Power

Does every website need a full CMS? No. I don't think so. However when it comes to static pages there is some functionality we can build that can facilitate lightweight handling of dynamic data. Static pages hold probably one fair concept in use is that you can max on creativity on that page vs. using an HTML editor inside some content management system or if nothing else, cumbersome.

2022-07-20T:00:00:00+00:00 July 20 2022 00:00:00

<?php ob_start(); ?>

Start by making an index.php and begin output buffering.


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>{XPATHTITLE}</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="icon" href="./favicon.ico" type="image/x-icon">
	<meta property="og:title" content="Your Site Title{XPATHTITLE}" />
	<meta property="og:description" content="{XPATHDESC}" />
	<meta property="og:url" content="{XPATHURL}" />
	<meta property="og:type" content="blog" />
	<meta property="og:site_name" content="Your Site Name"/>
	<meta property="og:image" content="{XPATHIMG}" />
	<meta property="og:image:width" content="1200" />
	<meta property="og:image:height" content="628" />
	<meta name="twitter:widgets:csp" content="on">
	<meta name="twitter:card" content="summary_large_image">
	<meta name="twitter:site" content="@your_twitter">
	<meta name="twitter:creator" content="@your_twitter">
	<meta name="twitter:title" content="Your Site Title{XPATHTITLE}">
	<meta name="twitter:image" content="{XPATHIMG}">
	<meta name="twitter:description" content="{XPATHDESC}">
  </head>
  <body>
	<!-- This is the only mandatory block -->
	<header>
	<h1>Point of Article</h1>
	<img src = "/img/articleimage.webp" />
	<div>This is an introductory paragraph to the subject</div>
	</header>
	<!-- End of mandatory block -->
    <main>
        Article content, etc
    </main>
	<script src="index.js"></script>
  </body>
</html>

This is from a basic HTML 5 boilerplate template with site info and social media cards built in to be filled out dynamically. The point here is we're building the template using curly brackets to form variables for dynamic values.


<?php
$page = ob_get_clean();
$dom = new DOMDocument();
@$dom->loadHTML($page);
$xpath = new DOMXPath($dom);
$xtitle = $xpath->query('//header/h1'); 
$ximg = $xpath->query('//header/img/@src'); 
$xdesc = $xpath->query('//header/div'); 
$xt = $xtitle->item(0)->textContent; // innerHTML of article header h1
$xi = $ximg->item(0)->textContent; // src property value of header image
$xd = $xdesc->item(0)->textContent; // innerHTML of div in header
$page = str_replace("{XPATHURL}","https://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'],$page);
$page = str_replace("{XPATHTITLE}", " - ". htmlspecialchars($xt,ENT_QUOTES), $page);
$page = str_replace("{XPATHDESC}", htmlspecialchars($xd,ENT_QUOTES), $page);
$page = str_replace("{XPATHIMG}", $xi, $page);
echo $page;
?>

Now we use PHP's XPath to read values in your HTML portion of the document. We only need a small portion of the HTML to be relatively static so XPath can consume it's contents and use it for other portions of the site we've setup the dynamic variables. Any type of functionality can be added in this PHP section as long as it's applied to the '$page' variable and the echo is last. You can even implement extra features and cache results using the functionality learned in the article covering Caching with APCu.


<?php
include("inc/header.php");
Content here
include("inc/footer.php");
?>

It's wise to break these up into 3 sections in your project tree. A header file, a footer file and the content pages. You could realistically make those header and footer files using this code by making the header be down to the <header> tag and the footer be from the </main> to the bottom of the document which are then 'include()'ed on each page you create.

Contact Krysti

GitHub:

IRC:

Direct.Me:

Ko-fi:

Photos:

E-Mail / Notify of errors:

coder [@] krysti.engineer

Please be patient contacting me, I don't really check much of social media or anything. If you use the IRC be sure to stick around because that's how IRC works, silly. :P