A simple tool to build out a static website using nothing but Markdown. Useful for static blog sites and feeds.
You can read a documented process of building this tool here.
npm i -g stratify-web
NodeJS > 14.0.0
create-stratify-project <Directory Path> <App Name>
cd <Directory Path>
This creates a simple project at the directory path.
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
-->
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.
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.
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>
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.
Once the build for your project is complete, you can run:
stratify start
It internally uses serve to serve the build output.
The dev server has hot reloading enabled for development ease. Run the following command:
stratify dev
Contributions and feedback are welcome, this is a weekend project built out of curiousity, any good changes will be merged.