blog-engine-sac

Blog-engine-sac

This is a static site generator, that uses markdown files as input and outputs web pages.

How to use ?

Set up

1. Download NodeJS 14+
2. npm i npm@latest-6 -g

Set up with the template

1. Copy template and follow instructions in its readme

Setup manually

1. Create a new project (folder)
2. Create a valid package.json file with npm init for example
3. Run the command npm i blog-engine-sac
4. add scripts inside package.json

  "scripts": {
    "sac": "node node_modules/blog-engine-sac/source/main.js",
    "scaleImages": "node node_modules/blog-engine-sac/source/media/image/scaleImageCli.js"
  }

1. follow instructions below to create required files
2. npm run sac
3. npm run scaleImages
4. to view the results use a static file server

Create a new post

Create a new markdown file in the folder source/. A markdown file is a normal text file with .md file extension. The name of the file is used as the name of the post. Then rebuild.

Simple post

Create a file in source/. For example my-post.md or my-post.txt.

Post with metadata

Create a simple post then create a meta file with the same base name. For example my-post.json

{
  "title": "I am about to write a title",
  "lang": "en",
  "author": "Author name",
  "creationDate": "2018/02/15",
  "modifiedDate": "2035/02/19",
  "linksBottom": true,
  "tags": ["cooking", "sports", "travel"],
  "translations": [],
  "license": "CC0-1.0"
}

External post

Create a file that describes where to find the external post. For example js-style-guide.json . Including a post from the web: Add a json file in source/ with src set to the url.

{
    "src": "https://raw.githubusercontent.com/GrosSacASac/JavaScript-Set-Up/master/js/red-javascript-style-guide/readme.md"
}

Another Example with this readme file:

{
    "src": "https://gitlab.com/GrosSacASac/blog-engine-z/-/raw/master/README.md",
    "lang:": "en",
    "Content-Type": "text/markdown"
}

site settings

Create file blog-engine-sac.yaml with

---

mainTitle: BLOG
subTitle: FOOD AND FUN
defaultLang: en
defaultAuthor: AUTHOR NAME
defaultLicense: LICENSE
categories:
- tag: categorieA
  name: categorieA
- tag: categorieB
  name: categorieB

Ideally defaultLicense is a SPDX identifier, default lang a 2 letter shorthand for the language (ISO 639-1).

Change the values as you see fit.

categories

categories are provided by the user as an array for the entire blog

for example: travel, cuisine, sports

Each category will have a dedicated index page that acts like the main index page but only lists post of that category. Posts will be in that category if they have a corresponding tag.

about page

Create file source/extras/about.md.

contact page

Create file source/extras/contact.md.

footer

Create file source/extras/footer.md.

Edit Images

Open folder images Replace the images with new ones but keep the exact filename to not break the links. (Images are linked from other files, not copied, the name of the files are used)

Required images

• images/about.jpg
• images/contact.jpg
• images/home.jpg
• images/post.jpg

Custom css

Add the following key-value pair in your site settings.

customCss: custom.css

Then create a folder named css. Inside create a file custom.css. Then copy inside custom.css the first rule found inside blog-engine-sac.css. These are some css variables easy to edit as a starting point.

user provided tags

found in the meta file as an array

auto generated tags (disabled)

are gathered from the plain text of each post based on heuristacs (rarity and uniqueness)

tags

tags is a set that combines user provided tags and auto generated tags and title. It is used for search function. They are also displayed after the post.

What is mark down

A text format. Learn it here https://commonmark.org/help/

About the code

Don't remove, edit or add any other file unless you know exactly what you are doing!

HTML files

are generated. Do not edit directly

About

Design starting point

Start Bootstrap - Clean Blog is a stylish, responsive blog theme for Bootstrap created by Start Bootstrap. This theme features a blog homepage, about page, contact page, and an example post page along with a working PHP contact form.

Changelog

Copyright and License

CC0 (Only for blog-engine-sac itself)