Yuuko is currently under active development and is designed for personal use. It streamlines the blog creation process, making it easy for users to harness the capabilities of Markdown. The project takes inspiration from Bearblog's user-friendly features and aims to provide a smooth and enjoyable experience for bloggers.
Visit my hosted page to explore a live example of a blog generated by Yuuko. This demonstration highlights the seamless integration of Markdown and HTML, providing insights into the generator's capabilities.
The folder structure is designed to ensure the proper functionality of the generator. As observed, CSS files should be placed in the rendered directory.
In the event of asset inclusion, it is imperative to insert them into the rendered folder, as the to-render directory exclusively supports HTML and Markdown.
src
├── to-render
│ ├── index.md
│ ├── metadata.html
│ ├── header.html
│ └── footer.html
├── rendered
│ └── styles.css
└── file in Root
The markdown used here closely follows the standard/original syntax. It employs the showdown converter, indicating the presence of some extended syntax that can be reviewed here.
Another topic worth noting is the option to use YAML at the top of the file to insert the page's title. Although it can be used to include other <meta> tags, it is recommended to use it solely for the title. To add <meta> tags, it is advisable to use the metadata.html file.
---
title: Page Title
---Note: If the title is not included in the markdown, a placeholder present in the render.js file will be inserted.
<title>${frontMatter.title || 'Placeholder Title'}</title>The HTML used here is standard, no mystery. In this context, it is used to insert reusable blocks, similar to JavaScript frameworks.
The default template is as follows, and is present in render.js:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>${frontMatter.title || 'Placeholder Title'}</title>
${metaContent}
</head>
<body>
<main>
${headerContent}
${htmlContent}
</main>
${footerContent}
</body>
</html>-
frontMatter.title: Page title. found in the YAML of the markdown.--- title: Home ---
-
metaContent: all elements contained in the<head>. Found inmetadata.html.<link rel="stylesheet" href="../styles.css">
-
headerContent: Header and navigation bar component of the page. Found inheader.html.<header> <a href="../index.html"> <h1>Your blog name!</h1> </a> </header> <nav> <p> <a href="../index.html">Home</a> </p> </nav>
-
htmlContent: The text content present in the markdown to be converted. Found in the markdown file. e.g., the content ofindex.mdwill be the content ofindex.html.# Hello World! -
footerContent: Content of the page footer. Found infooter.html.<footer style="padding: 25px 0;"> <span> Made with <a href="https://github.com/pingpongpng/yuuko"> yuuko </a> </span> </footer>
Example of rendered HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<link rel="stylesheet" href="../styles.css">
</head>
<body>
<main>
<header>
<a href="../index.html">
<h1>Your blog name!</h1>
</a>
</header>
<nav>
<p>
<a href="../index.html">Home</a>
</p>
</nav>
<h1>Hello World!</h1>
</main>
<footer style="padding: 25px 0;">
<span>
Made with
<a href="https://github.com/pingpongpng/yuuko">
yuuko
</a>
</span>
</footer>
</body>
</html>In the render.js file, you will create a template following the following structure within the processFile() function. Keep in mind that the HTML file needs to be in the root of the to-render directory.
const headerFilePath = path.join(toRenderFolderPath, 'header.html');
const headerContent = fs.existsSync(headerFilePath) ? fs.readFileSync(headerFilePath, 'utf-8') : '';You will then insert it at the desired location in the HTML template using the variable:
<body>
${headerContent}
</body>npm run start:render: Generates HTML files.npm run start:build: Transfers content from the rendered directory to another folder.npm run start:both: Executes both commands simultaneously.npm run start:live: Generate a local hostnpm run start:backup: Create a backup of the projectnpm run start:renderlive: Update the HTML files and launch a local host