Pages

Tuesday, 1 December 2015

静态博客程序-AzerothJS

AzerothJS is an open source blog engine running on static file servers such as Github Pages or any web hosting.

Check out the live demo here: http://huytd.github.io/azeroth-js/
What make AzerothJS cool?

Super lightweight
No installation needed
No server side code
Easy to customization

How to use?
Run locally
Clone this project to your computer
Start simple HTTP server with Python:  python -m SimpleHTTPServer
Your blog now available at http://localhost:3000

Use with Github Pages
Create your Github Pages
Clone the this project and push it to your Github Pages
Every time you want to write, create a new *.md file in posts folder and write with your favorite Markdown Editor
Modify posts/home.md, list your posts here
Commit and push everything here. Done!

Use with other web host
Clone this project to your computer
Create a new post in *.md format and save to posts folder
Upload the everything to your web host
Done

How to customize?
Change code highlighting theme

The original theme for the code highlighting is Tomorrow Night. If you don't like it, there are many pre-installed themes inside css/highlight folder. Pick one and replace to line 6 of index.html:
<link rel="stylesheet" href="./css/highlight/tomorrow-night.css">
Change the font family

The original font for the blog is Roboto Slab. You can change the new font by replacing line 4 of index.html:
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,300&subset=latin,vietnamese' rel='stylesheet' type='text/css'>
And change the font in css/theme.css:
* {
    font-family: 'Roboto Slab', serif;
    font-size: 20px;
    font-weight: 100;
}
Insert your Social links

There are some social icon links in footer, put your own one by edit the index.html:
<div class="footer">
    <p>Created with <a href="http://github.com/huytd/azeroth-js">azeroth.js</a></p>
    <div class="social">
        <a href="#"><i class="icon-facebook-squared"></i></a>
        <a href="#"><i class="icon-twitter-squared"></i></a>
        <a href="#"><i class="icon-linkedin-squared"></i></a>
        <a href="#"><i class="icon-github-squared"></i></a>
        <a href="#"><i class="icon-mail-alt"></i></a>
    </div>
</div>

from https://github.com/huytd/azeroth-js
----------

我的补充:
cd /usr/local
git clone https://github.com/huytd/azeroth-js azeroth-js-site
cd azeroth-js-site
root@AR:/usr/local/azeroth-js-site# ls
css  font  generator.js  img  index.html  js  posts  README.md template.html
root@AR:/usr/local/azeroth-js-site#
(/usr/local/azeroth-js-site/里有index.html,所以/usr/local/azeroth-js-site/就是静态网站的根目录)
新建源贴:
root@AR:/usr/local/azeroth-js-site# cd posts
root@AR:/usr/local/azeroth-js-site/posts# ls
lorem-ipsum.md  
home.md
root@AR:/usr/local/azeroth-js-site/posts# nano test-1.md
root@AR:/usr/local/azeroth-js-site/posts# cat test-1.md
# test1

this is test1.
<br>just take a look.
<br>just test to see if it's ok.
<br>is it ok?
(源贴中,一定要至少写6行内容。否则会发表失败
root@AR:/usr/local/azeroth-js-site/posts# nano home.md
(在每新建一个源贴后,还需编辑home.md文件,在其最上方加上:
---

[测试1](posts/test-1.html)

---
root@AR:/usr/local/azeroth-js-site/posts# cd ..
root@AR:/usr/local/azeroth-js-site# node generator.js (这个就是更新静态网站的命令)
root@AR:/usr/local/azeroth-js-site# cd posts
root@AR:/usr/local/azeroth-js-site/posts# ls
lorem-ipsum.md
lorem-ipsum.html
home.md
home.html
test-1.md
test-1.html
root@AR:/usr/local/azeroth-js-site/posts#  nano test-2.md
root@AR:/usr/local/azeroth-js-site/posts#  cat test-2.md
# 测试2

这是测试2.
<br>看看如何呢?
<br>测试一下,看是否ok?
<br>没问题吧?
(源贴中,一定要至少写6行内容。否则会发表失败
root@AR:/usr/local/azeroth-js-site/posts#
root@AR:/usr/local/azeroth-js-site/posts# nano home.md
root@AR:/usr/local/azeroth-js-site/posts# cat home.md
---

[测试2](posts/test-2.html)

---

[测试1](posts/test-1.html)

---
...
root@AR:/usr/local/azeroth-js-site/posts# cd ..
root@AR:/usr/local/azeroth-js-site# node generator.js

演示站点:http://surmount.biz.st:5431,http://azt.smt.biz.st
项目地址:https://github.com/huytd/azeroth-js,该静态博客程序无换页功能。
作者的示范博客的源码地址:https://github.com/huytd/huytd.github.io