Static-course-builder NPM

What is this?

A static web site creator, for quickly pulling together step-by-step guides that use YouTube videos for each lesson.

Give it a simple markdown file and it creates a site with a contents page and pages for each lesson, with next and previous links. You can edit the HTML pages to create a cusotm layout for your course.

Local install.

Create a new course

mkdir testcourse
cd testcourse
mkdir assets
npm init
npm install static-course-builder --save

Add local build script to your package.json file:

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "build"
  },

Add course markdown file

Create a file called course.md and add lessons in the following format:

# How to draw a dog :Cats and Dogs;
https://www.youtube.com/watch?v=bVBW7kQShCg
Description of lesson, just text, one or two lines.

# How to draw a cat  
https://www.youtube.com/watch?v=f29MLfkbLoQ
Description of lesson, just text, one or two lines.

# How to draw a dog :Cars and Planes;
https://www.youtube.com/watch?v=wFcK-NlUQIg
Description of lesson, just text, one or two lines.

# How to draw a dog  
https://www.youtube.com/watch?v=GAvG5naR_AE
Description of lesson, just text, one or two lines.

Add your site template files

Add your template pages

contentspage.html - will be used to create index.html starting page
lessonpage.html - will be used to create each lesson page
contentsinpage.html - used to create navigation inside each lesson page

contentspage.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your course title here</title>
    
</head>

<body>
    <h1>Your course title here</h1>
     
        {{#each []}}
        <h2>{{@key}}</h2>
        <div class="panel">
            <ul>
            {{#each this}}
            <li><a href="{{ this.id }}.html">{{ this.title }}</a></li> 
            {{/each}}
            </ul>
        </div>
        {{/each}}

</body>
</html>

lessonpage.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{title}}</title>
 
</head>
<body>
 <a href="index.html">Back to contents</a>

 <hr>

 {{title}} 
             
        {{#if youtube}}
        <div class='embed-container'><iframe src='https://www.youtube.com/embed/{{youtube}}?autoplay=1' frameborder='0'
                allowfullscreen></iframe></div>
        {{else}}
        <div class='embed-container holdingvideo'>
            <h2>Sorry :( <br>No video available yet</h2>
        </div>
        {{/if}}
 
        <hr>
        <p> {{{description}}}</p>

        <hr>
                <a href="{{{prev_nav title}}}">&lt; &lt; Previous</a> | 
                <a href="{{{next_nav title}}}">Next &gt;&gt;</a>
           
        <div id="thekey" data-thekey="{{thekey}}"></div>
</body>
</html>

contentsinpage.html

<!-- Include this -->

Once you've created your markdown file, and the three template html pages..

build the course

npm run build

This will generate yor site to a folder named output

Anything in your assets folder, will also be copied to the output folder (save your images, css, javascript files etc in the assets folder..)

├── output
│   ├── index.html
│   ├── 1.html
│   ├── 2.html
│   ├── 3.html
│   └── 4.html
│   └── /assets
├── package.json
├── course.md
├── contentspage.html
├── contentsinpage.html
└── lessonpage.html

Launch output/index.html in the browser to the view the site.

handlebars path yargs fs-extra

@infinitebrahmanuniverse/nolb-stati @everything-registry/sub-chunk-2822

4 years ago

4 years ago

4 years ago

4 years ago