npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ember-cli-github-pages

v0.2.2

Published

Easily manage gh-pages of your ember-cli addon

Downloads

12,077

Readme

ember-cli-github-pages

npm version Ember Observer Score Code Climate
Dependency Status devDependency Status

If you need to throw up a quick example of your addon in action, this is the addon for you!

This addon provides new command(s) to help manage a gh-pages branch for your addon. It's an addon for addons.

Installation & Setup

First you need to install ember-cli-github-pages:

ember install ember-cli-github-pages

Upon install, this addon will modify your 'tests/dummy/config/environment.js'. Commit these changes with the following command:

git add -A && git commit -m "Added ember-cli-github-pages addon"

Then you need to create the gh-pages branch and remove the unnecessary files:

git checkout --orphan gh-pages && rm -rf `bash -c "ls -a | grep -vE '\.gitignore|\.git|node_modules|bower_components|(^[.]{1,2}/?$)'"` && touch .gitkeep && git add -A && git commit -m "initial gh-pages commit"

Usage

Once that's done, you can checkout the branch you want to create the gh-page from (likely master) and run the command to build and commit it.

Then run ember github-pages:commit --message "some commit message" in order to rebuild gh-pages branch.

git checkout master
ember github-pages:commit --message "Initial gh-pages release"

Ember Addons: Add a Demo URL

Once you've created a gh-pages branch, tell the world! Add a demoURL key to the ember-addon object in your package.json. See the ember-cli documention for details.

A note about Org and User Pages

While in general, github repo pages will serve the content in the gh-pages branch, org and user pages serve content in the master branch. When using this addon to develop a Org or User page, edit your Ember Application on an alternate branch such as ember. Once you are ready to build the application and send to GitHub you can either:

  • add the --branch master option to the ember github-pages:commit command
  • make the gh-pages branch on your local machine track the master branch on origin via the command:
git branch --set-upstream gh-pages origin/master

A complete Org/User Pages example

  1. Create a new Ember CLI project ember new myBlog. Replace myBlog with the name of your project.
  2. Go to the newly created project and install this addon: cd myBlog && ember install ember-cli-github-pages.
  3. Remove the changes made to environment.js, as they are not required for Org/User pages: git checkout -- tests/dummy/config/environment.js
  4. Commit the changes: git add -A && git commit -m "Added ember-cli-github-pages addon https://github.com/poetic/ember-cli-github-pages"
  5. Create a new branch named ember which will store all the ember related code: git checkout -b ember
  6. Run the following command as mentioned above: git checkout master && rm -rf `ls -a | grep -vE '\.gitignore|\.git|node_modules|bower_components|(^[.]{1,2}/?$)'` && git add -A && git commit -m "initialises gh-pages(in case of organisation master) commit"
  7. Switch back to ember branch: git checkout ember;
  8. Build the site using ember-cli-github-pages: ember github-pages:commit --branch master --message "adds base site"
  9. Create new Org/User repo on Github and add the origin: git remote add origin https://github.com/knoxxs/knoxxs.github.io.git. Here knoxxs is my username.
  10. Push the master branch: git push -u origin master.
  11. Open http://knoxxs.github.io/.

Advanced Usage

You may optionally specify an ember build environment and a branch name as parameters

git checkout master
ember github-pages:commit --message "Initial demo app release" \
                          --branch="my-demo-app" \
                          --environment=development

| Optional Argument | Default Value | Description | |-------------------|---------------|-------------| | environment | production | Ember build environment (i.e., development, production) | | branch | gh-pages | Branch to commit your app to | | destination | . | The directory into which the built application should be copied | | message | new gh-pages version | The commit message to include with the build, must be wrapped in quotes |

You will still need to push the gh-pages branch up to github using git. Once you do that you can access the repo at http://username.github.io/repo-name. It may take a few minutes after pushing the code to show up.

FAQ

How can I create an automated deploy script?

For ease of use you can add the following to your package.json:

  "scripts": {
    "deploy": "ember build --environment production && ember github-pages:commit --message \"Deploy gh-pages from commit $(git rev-parse HEAD)\" && git push origin gh-pages:gh-pages"
  }

And then you can execute npm run deploy and it will deploy with a commit message that references the commit ID you deployed from, and push that branch to github.

Some of my assets (images) aren't showing up, what do I do?

This addon creates a production build, which fingerprints resources automatically. If you have dynamic resources in your templates, they will not be fingerprinted, so you need to ignore the fingerprinting for those resources in your ember-cli-build.js file. See the fingerprinting docs.

Authors

We are very thankful for our many contributors

Legal

Licensed under the MIT license