https://github.com/sirkitree/hublog-ng

Jekyll-based blogging on GitHub with an AngularJS app.
https://github.com/sirkitree/hublog-ng

Last synced: 3 days ago
JSON representation

Jekyll-based blogging on GitHub with an AngularJS app.

• Host: GitHub
• URL: https://github.com/sirkitree/hublog-ng
• Owner: sirkitree
• Created: 2013-09-04T16:18:32.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2013-09-10T01:53:29.000Z (over 11 years ago)
• Last Synced: 2024-04-14T14:52:02.781Z (10 months ago)
• Language: JavaScript
• Size: 734 KB
• Stars: 9
• Watchers: 3
• Forks: 3
• Open Issues: 4
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# hublog-ng

_Jekyll-based blogging on GitHub with an AngularJS app._

http://jeradbitner.com/2013/08/angularjs-posting-interface-for-your-github-jekyll-site/

## Installation

1. Install Jekyll

 * `~ $ gem install jekyll`

 * `~ $ jekyll new my-awesome-site`

 * `~ $ cd my-awesome-site`

1. Grab the AngularJS app to control your site

 * `~/my-awesome-site $ git clone [email protected]:sirkitree/hublog-ng.git`

 This should give you the following custom files:

 * `~/my-awesome-site/hublog-ng/new.html` - this is the app for creating new posts

 * `~/my-awesome-site/hublog-ng/js/filters.js` - required by github.js

 * `~/my-awesome-site/hublog-ng/js/githubpost.js` - custom controllers for authentication with github.js

 

 As well as some components from bower:

 * `angular` - angularjs library

 * `angular-github-adapter` - PascalPrecht's Angular adapter module for github.js

 * `github` - library for github integration, utilized by the adapter module

 * `jquery` - jquery library

 * `jquery-autosize` - jquery autosize library for expanding the textarea as you type

 * `marked` - for realtime markdown conversion (used as an Angular filter)

1. Copy your default layout (_layouts/default.html) to new.html

 * `~ $ cp ~/my-awesome-site/_layouts/default.html ~/my-awesome-site/_layouts/new.html`

1. Edit your new.html layout and add in the following directives to the body tag:

 * `data-ng-app="app" data-ng-controller="AuthCtrl"`

1. *optional* : The new.html from hublog-ng has classes for bootstrap to make it looks nicer than the default css that comes with jekyll. It is recommended to add in bootstrap to the top of your new.html inside of `_layouts`.

```html

```

1. *optional* : Test this out by running `~/my-awesome-site $ jekyll serve` and opening `localhost:4000/hublog-ng-new.html` in your browser.

1. Since this is a repo that we want to access inside of another, let's delete hublog-ng's .git file

 * `~/my-awesome-site $ rm -rf hublog-ng/.git`

1. Turn this project into it's own repository on GitHub.

 * create a [new repository](https://github.com/new)

 * `~/my-awesome-site $ git init`

 * `~/my-awesome-site $ git checkout -b gh-pages` (this is github specific branch that tells github you want to run it through jekyll)

 * `~/my-awesome-site $ git add .`

 * `~/my-awesome-site $ git commit -m "initial commit"`

 * `~/my-awesome-site $ git remote add origin [email protected]:[your-username]/[your-repository].git`

 * `~/my-awesome-site $ git push -u origin gh-pages`

That's it. Now you just customize your Jekkyl site as you normally might.