easy-site
v1.1.0
Published
快速构建静态站
Downloads
3
Readme
easy-site
Building static empires with node.js.
Base on [romulus|https://github.com/felixge/node-romulus].
Install: [sudo] npm install -g easy-site
Features
Easy-site is a static site generator (like jekyll) featuring:
- a clear folder convention
- ejs template processing
- generating css from less files
- github flavored markdown
- a local development server behaving like github pages
- deploying to github pages
Planned:
- page scripts that run before rendering
- partials that can be included on any page
- plugins (themes, blogging, google analytics, disqus, etc.)
You should use easy-site if you want a simple tool for creating static github pages with node.js.
Creating a static page
Create a new directory, and inside this directory create the folder structure below:
Note: Only the pages folder is required, the other folders are optional.
/pages
/layouts
/publicNow create a file called pages/index.html and put some HTML into it:
<p>Hello World</p>Run this to build your static site:
$ easy-site build my-siteYou should now see a new folder called my-site containing your index.html
page exactly as you wrote it.
Note: If you ommit the my-site argument, easy-site will default to naming
your output folder build.
For testing your site, you should run the local development server at http://localhost:8080/ by typing this:
$ easy-site //default port 8080
$ easy-site 9000 // port 9000Layouts
In order to make this more interesting, let's say you want to wrap your new
page in a fancy layout. To do this you need to change your pages/index.html
file like this:
<% this.layout = 'default' %>
<p>Hello World</p>Now you need to create the layout itself, so add a file called
layouts/default.html:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My static empire</title>
<!-- Can be a plain css file or rendered from less, continue reading -->
<link rel="stylesheet" type="text/css" href="/css/main.css" />
<!-- You can include any JS / CSS files, main.js / main.css are just examples -->
<script src="/js/main.js"></script>
</head>
<body>
<h1>My Header</h1>
<%- page %>
</body>
</html>That's it, you should now see your page being rendered inside your template!
Accessing page variables in your layout
Let's say you want to set a title variable in your page that should be used
by the layout. For this, add this to your page template:
<% this.title = 'My title'; %>And output it in your layout like this:
<title><%= this.title %></title>Generating css from less files
Now that you have this wonderful site, you probably want to style it. To do so,
create a file called public/css/main.less:
body{
h1{
color: #0080FF;
}
}Sweet, your headline is now featuring my favorite color!
Static file support
Any file placed in the public folder will be included at the top level of the
build output folder. The local development server also supports serving them.
Using markdown
easy-site natively supports
github flavored markdown
for page files. Using markdown is as easy as creating a file with
a .md extension like pages/markdown-rocks.md and adding some markdown to it:
<% this.layout = 'default'; %>
Markdown is **fun**, and you can still use EJS inside of your markdown
templates.This page now will be served at /markdown-rocks.
Deploying to github pages
Deploying to github pages is as simple as:
easy-site deployThis should work well for project pages, but has not been tested for organization pages yet.
License
MIT License.