stratify-web v1.3.1
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
Contributions and feedback are welcome, this is a weekend project built out of curiousity, any good changes will be merged.