stratify-web

v1.3.1

Published

2 years ago

A simple tool to build out a static website using nothing but Markdown.

Downloads

0High
0Medium
0Low

d_e_v.e_s_h

Stratify

A simple tool to build out a static website using nothing but Markdown. Useful for static blog sites and feeds.

Read the writeup

You can read a documented process of building this tool here.

Get Started

npm i -g stratify-web

Min Requirements

NodeJS > 14.0.0

Create a New Project

create-stratify-project <Directory Path> <App Name>
cd <Directory Path>

This creates a simple project at the directory path.

Editing Your Pages

Use the pages folder to make changes to your pages. They support comments, all markdown is rendered to static HTML at build time.

pages/index.md -> index.html post build
pages/subpages/subpage.md -> subpages/subpage.html post build

<!--
Supports HTML style Comments
-->

To change the title of the page, just add this to the top of the file.

<!--
Title: Page Title
-->

Templates

There will be inevitably times when you want to add new stylesheets to the project, or include external scripts, in those cases, the power of plain HTML can come in handy. You can use the template pre-provided in the templates directory or create new ones for each page.

If you have a page post-1.md, you can create a templates/post-1.html file and it will be picked up, if a matching template name is not found, the builder defaults to the templates/index.html file. If no templates are found, the html output generated is a simple conversion of the markdown to HTML.

An example of a template is:

<html>
	<head>
		<title>{{ title }}</title>
		<!-- Add your desired stylesheets here -->
	</head>
	<body>
		<!-- This serves as a template for your file, 
			add stylesheets, 
			scripts or any other properties that you need common in your pages.
		-->
		{{ content }}
	</body>
</html>

{{ title }} and {{ content }} are dynamically replaced with the title and content of the page at build time, support for more dynamic fields coming soon.

Static Assets

Put your static assets like images, videos and other files in the public folder. They are automatically moved to the build output and are available in the same directory as the finally built pages.

Environment Variables

Although a markdown based file should not have environment variables, you can use environment variables in templates.

Make sure to start your environment variables with STRATIFY_APP_ and save them in .env file.

<html>
	<head>
		<title>{{ title }}</title>
		<!-- Add your desired stylesheets here -->
	</head>
	<body>
		<!-- This serves as a template for your file, 
			add stylesheets, 
			scripts or any other properties that you need common in your pages.
		-->
		{{ content }}
	</body>
	<script type="text/javascript">
		const variable = process.env.STRATIFY_APP_ENV_VARIABLE;
	</script>
</html>

Building your project

stratify build

This compiles your markdown pages to HTML and puts them in the build folder. This folder can then be served through a CDN or hosting provider like Vercel, Netlify since it's completely static.

Serving Build Output

Once the build for your project is complete, you can run:

stratify start

It internally uses serve to serve the build output.

Running the dev server

The dev server has hot reloading enabled for development ease. Run the following command:

stratify dev

Contribution & Issues

Raise an issue

Create a Pull Request

Contributions and feedback are welcome, this is a weekend project built out of curiousity, any good changes will be merged.