Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/toanbku/toanbku.github.io
https://github.com/toanbku/toanbku.github.io
Last synced: 17 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/toanbku/toanbku.github.io
- Owner: toanbku
- Created: 2017-05-15T12:53:59.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-05-15T16:30:39.000Z (over 7 years ago)
- Last Synced: 2024-11-10T08:32:33.434Z (3 months ago)
- Language: CSS
- Size: 508 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# AzerothJS
AzerothJS is an open source blog engine running on static file servers such as Github Pages or any web hosting.
In short: 100% client-side JavaScript.
## Live demo
Check out the [live demo here](http://huytd.github.io/azeroth-js/)
## What makes AzerothJS cool?
- Super lightweight
- No installation needed
- No server side code
- Made for Github Pages
- Easy to customization
- Static HTML Generator
## How to use?
### Run locally
1. Clone this project to your computer
2. Start simple HTTP server with Python:
```
python -m SimpleHTTPServer 3000
```
3. Your blog now available at [http://localhost:3000](http://localhost:3000)
### Use with Github Pages
1. Create your Github Pages
2. Clone this project and push it to your Github Pages
3. Every time you want to write, create a new `*.md` file in `posts` folder and write with your favorite Markdown Editor
4. Modify `posts/home.md`, list your posts here
5. Commit and push everything here. Done!
### Use with other web host
1. Clone this project to your computer
2. Create a new post in `*.md` format and save to `posts` folder
3. Upload the everything to your web host
4. Done
## Two display mode
Azeroth has 2 display mode: **Live Markdown** and **Static HTML**.
If you point your browser to http://yoursite.com/#/slugged-post-name, **Live Markdown** mode will be used to render HTML content directly from Markdown file.
One problem of **Live Markdown** is: it's unable to display the content when you share the site on social networks like Facebook or Twitter. To solve this issue, we use **Static HTML**. After generating static HTML content, you can access your post at http://yoursite.com/posts/slugged-post-name
## How to generate Static HTML
Run this script in your root folder:
```
node generator.js
```
The script will automatically convert all `*.md` files in `/posts` folder to `*.html`.
Now you can list your HTML pages in `home.md` instead of markdown files.
## 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`:
```html
```
### 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`:
```html
```
And change the font in `css/theme.css`:
```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`:
```html
```
### Google Analytics
In the end of `index.html` and `template.html`, there is a line:
```js
ga('create', 'Insert-Your-GA-ID-Here', 'auto');
```
Replace `Insert-Your-GA-ID-Here` with your Google Analytics ID to start monitoring your blog.
# Uhmmm, you made it, but did you use it?
Yes, I'm using it for my personal blog (http://huytd.github.io/), it's in Vietnamese.
If you prefer to read English version, Goole Translate can help (https://translate.google.com/translate?sl=auto&tl=en&js=y&prev=_t&hl=en&ie=UTF-8&u=http%3A%2F%2Fhuytd.github.io%2F&edit-text=)
# License
[MIT](https://opensource.org/licenses/MIT)