spear-cli
This is SSG(Static Site Generator) for Spearly.
Usage
Install
- npm
npm install spear-cli -g
- yarn
yarn global add spear-cli
Create project
As first step, you need to create:
-
spear create
: This command start wizard creating project.
Namespace(port=undefined, action='create', projectName=undefined, src=undefined)
### Welcome to Spear CLI ###
? Name of your project (spear-cli) <Input your project name>
? Use Spearly CMS (Use arrow keys)
❯ Yes <- Choose 'yes' if you use the Spear content.
No
? Enter your Spearly CMS API KEY <Input your Spearly API KEY>
? Name of your project SampleProject
? Use Spearly CMS Yes
? Enter your Spearly CMS API KEY aaaaaa
## Your project was created 🎉
To start using, run the following command:
cd SampleProject
yarn install
To start local server, run
yarn dev
To build static sources, run
yarn build
If you finish wizard, your preparation for using spear-cli.
Editing pages
You can edit pages to you prefer. spear-cli support some features:
- Components
- You can create parts of pages as
components
.
- You can create parts of pages as
- assets
- Images / Scripsts / CSS...
- Insert Spearly content list into pages.
- You can insert list of content.
- Insert Spearly content into pages.
- You can generate specified Spearly content as page.
- Static Routing
- You can use static routing feature that moving to content pages.
You can use live-mode as well. If you want to use it, you need to execute the following command:
spear watch -s <project directory>
Static Routing
spear-cli
generate static site with Spearly CMS Content. The spec is as follow:
- File name:
/path/[alias].html
- Generated File name:
/path/<content-alias>.html
(e.g., content alias isfirst-blog
, file name is/path/first-blog.html
) - Spearly Syntax: Same to spearly embed js v3. (For detail, see official document.)
- You can create list pages by using spearly syntax as well.
Directory structures
spear-cli
has directory rules:
- components : top-level directory named `components'
- There are spear components which inserting into pages or other component.
- spear-cli allow nested directory structure. (E.g., /components/common, /components/cards)
- spear-cli ignore the name which is same to HTML DOM tag name since preventing mixed native and component content. (e.g., body, header, section).
- assets/public: top-level assets files directory named
assets
orpublic
.- spear-cli output this directory without converting.
- other directories: top-level directories any named.
- spear-cli output this directory with html converting.
- spear-cli keep directory structure.
- If there are html/spear/htm file, spear-cli traverse and insert spear component.
- If there are binary file, spear-cli output files as it is.
Example directories:
├── package.json
├── spear.config.json
└── src
├── assets
│ ├── css
│ │ └── main.css
│ └── js
│ └── main.js
├── blog
│ ├── index.html
│ └── [alias].html
├── components
│ ├── header.spear
│ └── main.spear
├── images
│ └── logo.png
├── index.html
├── pages
│ └── index.spear
└── public
└── favicon.ico
After spear-cli build, an above example directory will be the following structure.
├── dist
│ ├── assets
│ │ ├── css
│ │ │ └── main.css
│ │ └── js
│ │ └── main.js
│ ├── blog
│ │ ├── index.html
│ │ ├── first-blog.html
│ │ ├── second-blog.html
│ │ ├── :
│ │ └── second-blog.html
│ ├── images
│ │ └── logo.png
│ ├── pages
│ │ └── index.html
│ └── public
│ └── favicon.ico
├── package.json
├── spear.config.json
Note that:
-
components/header.spear
andcomponents/main.spear
was inserted pages. -
pages/index.spear
renamedpages/index.html
.
Building pages
At the last process, you can build all of them.
$ spear build -s <project directory>
Congrats! You can build your pages with Spearly 🚀🚀🚀
## Resource
spear-cli has official document by using Spearly CMS.
## Contributing
If you want to contribute this project, You can read [CONTRIBUTING.md](./CONTRIBUTING.md) !
We will wait for your participant!