You can start by installing Node Package Manager. Npm is a default package manager for the JavaScript runtime environment Node.js
$ npm install --global npm@latest
To check whether is node succesfully install or not.
$ npm --version
You can procced then by installing Gulp. Gulp is a cross-platform, streaming task runner that lets developers automate many development tasks. To install gulp globally run
$ npm install --global gulp-cli
If you have previously installed gulp then remove it.
$ npm rm --global gulp
To check whether is gulp succesfully install or not.
$ gulp --version
You can procced then by installing Jekyll. Jekyll is a static site generator. You give it text written in your favorite markup language and it uses layouts to create a static website. You can tweak how you want the site URLs to look, what data gets displayed on the site, and more. To install Jekyll globally follow the instruction to the jekyll website
https://jekyllrb.com/docs/installation/To check whether is Jekyll succesfully install or not.
$ jekyll -v
Then You set.
In the root of your project folder, run npm install to install all package.json dependency
$ npm install
What next, you can launch your App with this command
$ npm run dev
This command will execute all the assets(js,scss and html) to the _site folder separately.
If everything was installed correctly, you should see the compile version running on http://localhost:3000/
Note: If your http://localhost:3000/ is not available or set to a existing server please change the base url on your _config.dev.yml
There is two Yaml configuration files: _config.yml and _config.dev.yml that when running in development mode the _dev_ configuration file overrides `baseurl` and `jekyll-minifier` default values.
Copy and paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.
<link rel="stylesheet" href="assets/css/next.css">
Most of bootstrap components require the use of JavaScript to function. Specifically, they require jQuery, Bootstrap.bundle.js.
We added some popular plugins in the /vendor folder. Our next.js and different xxxx.custom.js file contains some additional scripts which may come handy for your project.
<script src="assets/js/vendor/jquery.min.js"></script>
<script src="assets/js/vendor/popper.min.js"></script>
<script src="assets/js/vendor/bootstrap.min.js"></script>
<script src="assets/js/next.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Next</title>
<link rel="stylesheet" href="assets/css/vendor/perfect-scrollbar.css">
<link rel="stylesheet" href="assets/css/vendor/prism.css">
<link rel="stylesheet" href="assets/css/next.css">
</head>
<body class="app is-collapsed">
<!-- Import Sidebar here -->
<!-- Check Next-sidebar docs for more -->
<div class="container-wide">
<!-- Include navbar here -->
<!-- Include page content here -->
</div>
<script src="assets/js/vendor/jquery.min.js"></script>
<script src="assets/js/vendor/popper.min.js"></script>
<script src="assets/js/vendor/bootstrap.min.js"></script>
<script src="assets/js/next.js"></script>
</body>
</html>