How to deploy Aurelia to GitHub Pages (gh-pages) - github

I haven't seen demos of Aurelia running in GitHub pages. I wonder if there's a gist or a repo somewhere that shows how it can be done.
Is it just a matter of configuring gulp or is there another solution?

Here is the solution using the Aurelia navigation skeleton project as an example when created into your organization as a repository as aurelia-skeleton-navigation.
Important Note: This is NOT a production solution. This is for showing how to run Aurelia within GitHub pages using an Aurelia repository that uses Gulp. It is recommended to read about jspm bundling an Aurelia app for deployment.
Start a git command line after you unzip the current release of the skeleton-navigation into aurelia-skeleton-navigation directory.
Locally from a git and npm command line:
cd <path>/aurelia-skeleton-navigation
git init
git remote add origin git#github.com:yourorg/aurelia-skeleton-navigation.git
git fetch --all
git add *
git commit -m 'initial commit'
git push origin master
git branch gh-pages
git checkout gh-pages
edit .gitignore and comment out the jspm_packages and dist paths
node_modules
# jspm_packages
bower_components
.idea
.DS_STORE
# /dist
jspm install
npm install
gulp build
git add *
git commit -m 'adding resources'
git push origin gh-pages
Navigate to your repository GitHub page:
http://yourorg.github.io/aurelia-skeleton-navigation
Updating the app on GitHub Pages
Once you make changes to your app in the master branch, you can merge those changes into your gh-pages and publish:
git checkout gh-pages
git merge master
gulp build
git add *
git commit -m 'updates'
git push origin gh-pages

Related

host github pages from /dist folder in master branch

I was trying to publish my -username-.github.io repository to github pages but my index.html is inside dist folder.
I cannot use git subtree push --prefix dist origin gh-pages because this is meant for project pages, not user/org pages.
All I want is, github to treat dist as root directory for hosting user/org page. Please help.Thanks
PS: I don't want to do redirection hack.
Configuring a publishing source for GitHub Pages (very limited)
While you can select a folder as the source for gh-pages, you can only do so for the /docs directory at the parent level, and you still have to actually commit the built files in order to do so, which means you'll have to override the .gitignore and commit them twice
Automated Deploy Scripts
If you're using npm, there are a couple packages that handle publishing sub-directories to gh-pages. Install with option --save-dev to add it to your devDependencies:
push-dir
# install
$ npm install push-dir --save-dev
# usage
$ push-dir --dir=dist --branch=gh-pages
gh-pages
# install
$ npm install gh-pages --save-dev
# usage
$ gh-pages -d dist
In either case, if get a command line tool working for you and get it configured with the right options, you can alias it in your package.json like this:
"scripts": {
"deploy": "npm run build && gh-pages -d dist"
}
Further Reading:
Deploying a subfolder to GitHub Pages
Deploy Vue to GitHub pages-the easy way!
You can't do it this way.
GitHub pages can be hosted from either:
the / folder in the master branch
the / folder in the gh-pages branch
the /docs folder in the master branch
But the user pages must be built from the / folder in the master branch.
TIP
Code on another branch than the master. After every push to this branch, build it in any CI/CD tool and push it back to the master branch.
If like me you would prefer to upload to github pages using subtree's in git you can use something like the code below.
git subtree push --prefix dist origin gh-pages

How to push eclipse workspace projects to git using GIT CMD desktop application?

I would like to synchronize all my eclipse workspace to a github repository. Please tell me the list of commands to do it.
To access Git commands from CMD. You have to set the PATH Environment Variables to Git's bin directory, mine is C:\Program Files\Git\bin.
Then configure your information for all local repo
git config --global user.name "[name]"
git config --global user.email "[email address]"
Create your repository on GitHub. Then go to your project directory(eclipse workspace projects) git init [project-name] and add all files to staging area git add --all or git add * Then commit it with some message git commit -m “Initial Commit” and then git remote add origin <url> then push your files to GitHub git push origin master
See this GIT CHEAT SHEET to know more...
Updated :
Here is the link to download GIT Cheat Sheet PDF.
Take a look !
GIT CHEAT SHEET
If you cloned your Eclipse workspace from a GitHub repository, all you need to do is
git push origin master
If you didn't, you first need to create an empty repository on GitHub. Then copy and paste the URL at the top of the page for your new repo. From the command line type
git remote add origin <paste URL here>
Now you can use the same git push command as above to push your git history to the new GitHub repo.

How do I configure GitHub to use non-supported Jekyll site plugins?

I just created a great gallery for my Jekyll blog which builds perfectly on my localhost:4000. However, GitHub pages doesn't support the Jekyll Gallery Generator plug-in I am using: https://github.com/ggreer/jekyll-gallery-generator
I read about the alternative method of hosting Jekyll on a traditional host using FTP (uploading the _site directory) http://jekyllrb.com/docs/deployment-methods/ However, rather than reconfigure my entire site and hosting, It would be great if GitHub Pages could be used somehow even though I'm using a non-supported plugin.
What is a workaround for this?
Depending if you deal with a User/Organization (UO) site or a Project site (P), do :
from your working folder git init
git remote add origin git#github.com:userName/userName.github.io.git (UO) or git remote add origin git#github.com:userName/repositoryName.git (P)
jekyll new . creates your code base
in _config.yml, set the baseurl parameter to baseurl: '' (UO) or baseurl: '/repositoryName' (P)
in .gitignore add _site, it will be versioned in the other branch
jekyll build will create the destination folder and build site.
git checkout -b sources (UO) or git checkout master (P)
git add -A
git commit -m "jekyll base sources" commit your source code
git push origin sources (UO) or git push origin master (P) push your sources in the appropriate branch
cd _site
touch .nojekyll, this file tells gh-pages that there is no need to build
git init init the repository
git remote add origin git#github.com:userName/userName.github.io.git (UO) or git remote add origin git#github.com:userName/repositoryName.git (P)
git checkout master (UO) or git checkout -b gh-pages (P) put this repository on the appropriate branch
git add -A
git commit -m "jekyll first build" commit your site code
git push origin master (UO) or git push origin gh-pages (P)
You now have something like Octopress does. Look at their rake file, there are some nice comments inside.
Better way is to configure Travis to automate deployment of jekyll with non-supported plugins. Follow Travis getting started guide to enable Travis for your repo.
Create script/cibuild with the following content
#!/usr/bin/env bash
set -e # halt script on error
bundle exec jekyll build
touch ./_site/.nojekyll # this file tells gh-pages that there is no need to build
Create .travis.yml with the following content (modify as required)
language: ruby
rvm:
- 2.3.3
before_script:
- chmod +x ./script/cibuild # or do this locally and commit
# Assume bundler is being used, therefore
# the `install` step will run `bundle install` by default.
script: ./script/cibuild
# branch whitelist, only for GitHub Pages
branches:
only:
- master
env:
global:
- NOKOGIRI_USE_SYSTEM_LIBRARIES=true # speeds up installation of html-proofer
sudo: false # route your build to the container-based infrastructure for a faster build
deploy:
provider: pages
skip_cleanup: true
keep-history: true
local_dir: _site/ # deploy this directory containing final build
github_token: $GITHUB_API_KEY # Set in travis-ci.org dashboard
on:
branch: master
Deployment steps (after every push):
Build will be created using our custom script script/cibuild in _site directory
_site will be pushed to gh-pages branch.
github pages will serve site as it is without building it again (because of .nojekyll file)
Reference: My repository https://github.com/armujahid/armujahid.me/ is using this method for continuous integration using Travis CI

Does github honour Jekyll's "source" variable?

In an attempt to make my workflow a bit neater, I came across the source tag, which allows me to host my "dev work" in a separate folder than my _site.
This is awesome, but it does not appear to be honoured by Github pages? I feel like I am doing something wrong though, so just wanted to check. I couldn't find much about it online.
In this case, I don't explicitly need github to do it, but it would be great to have this consistent workflow for projects that do rely on github pages.
Thanks!
GH Pages overrides the source setting in the Jekyll config file:
https://help.github.com/articles/troubleshooting-github-pages-build-failures#source-setting
http://jekyllrb.com/docs/github-pages/#project-pages
You don't need to change source or destination parameters to version them separately. You can just version them in two different branches from the same repository.
Why versioning in different branches ?
If you need some plugins (generator, tag, ...) or build tasks (gulp, grunt, ...) that will not run on gh-pages, you will have to publish your Jekyll sources in a branch and your build results in a separate branch.
For a User / Organization site, it will be master for the site build, and sources (or any name you like) for the code. A User / Organization site will be versioned at github.com/userName/userName.github.io and hosted at http://userName.github.io (or with a custom domain)
For a Project site, it will be gh-pages for the site build, and master (or any name you like) for the code.
A Project site will be versioned at github.com/userName/projectName and hosted at http://userName.github.io/projectName.
Steps for User\Organization site
create a repository on github (eg: https://github.com/userName/userName.github.io)
go to command line and cd pathTo/yourJekyllSource
git init
git remote add origin git#github.com:userName/userName.github.io.git
jekyll new . creates your code base
in _config.yml, set the baseurl parameter to baseurl: ''
in .gitignore add _site, it will be versioned in the gh-pages branch
jekyll build will create the _site destination folder and build site into it.
git checkout -b sources
git add -A && git commit -m "jekyll base sources" commit your source code
git push origin sources push your sources in the sources branch
cd _site
touch .nojekyll, this file tells gh-pages that there is no need to process files
git init
git remote add origin git#github.com:userName/userName.github.io.git
git checkout master
git add -A && git commit -m "jekyll first build" commit your site code
git push origin master
And your good to go !
Your deploy can be made like this :
cd pathTo/yourJekyllSource
jekyll build
git add -A
git commit -m "your commit message"
cd _site
git add -A
git commit -m "your commit message"
Steps for a Project site are described here and I've made an automation Rakefile, it can do everything for you from setup to deploy.
Enjoy !

Middleman and Github pages

I'm trying to create a static site using Middleman. The git repo master has the source files. The static files are generated in the build folder which is in .gitignore. I have a branch gh-pages for Github pages. How do I setup things such that the gh-pages has contents of the build folder of master.
Thanks.
Looks like this gem provides an elegant solution:
middleman-gh-pages
I've started using the same technique as Octopress uses, it works great for Middleman.
Basically I use two git repositories, one inside the root folder and one inside the build folder. The root repository pushes to the develop branch on the GitHub remote and excludes the build directory. The repository inside the build directory pushes to the master (or gh-pages) branch of the same GitHub remote.
To automate the pushing of the new static pages, I use the following Rakefile:
desc "deploy build directory to github pages"
task :deploy do
puts "## Deploying branch to Github Pages "
cp_r ".nojekyll", "build/.nojekyll"
cd "build" do
system "git add ."
system "git add -u"
puts "\n## Commiting: Site updated at #{Time.now.utc}"
message = "Site updated at #{Time.now.utc}"
system "git commit -m \"#{message}\""
puts "\n## Pushing generated website"
system "git push origin master"
puts "\n## Github Pages deploy complete"
end
end
Another good gem is middleman-deploy. After you have installed it and configured everything, you can simply run
$ middleman deploy
and your build directory will be pushed to GitHub pages. You can specify which branch you push to in the config. I also have a blog post here regarding switching from Jekyll to GitHub pages and it talks a little about deployment.
I couldn't find a clean way of doing this. This is a script I've been using:
bundle exec middleman build
mv build /tmp/
git checkout gh-pages
git rm -rf .
cp -r /tmp/build/* .
git add .
git commit -m "Update site"
rm -rf /tmp/build
git push
git checkout master