Script to deploy gh-pages for Vue (Webpack) projects

_readme.md

Setup

Copy the deploy.sh on root of your project.

Deploy

Just run ./deploy.sh

deploy.sh

#!/bin/bash
set -e # Stop on error

# Colors
LGREEN='\033[1;32m' # Light green
LBLUE='\033[1;34m'
BLUE='\033[0;34m'
NC='\033[0m' # No Color

echo -e "${BLUE}================ Starting deploy ================${NC}"

# Update local with origin
git remote update origin --prune

DIST_DIR="./dist"
GIT_BRANCH="gh-pages"
REMOTE_BRANCH_TEST=`git branch -r --list origin/$GIT_BRANCH | xargs`
LOCAL_BRANCH_TEST=`git branch --list $GIT_BRANCH | xargs`
DATE_NOW=`date +%Y-%m-%d`

GIT_URL=`git remote -v | grep fetch | head -1 | cut -f2 | cut -d' ' -f1 | sed -e's/git@/http:\/\//' -e's/\.git$//' | sed -E 's/(\/\/[^:]*):/\1\//'`

# Remove dist folder if exists
if [ -d "$DIST_DIR" ]
then
    rm -rf $DIST_DIR
fi

# Clean git worktree
git worktree prune

# Check and create if remote branch not exist
# Clean local before upload
if [ "$REMOTE_BRANCH_TEST" != "origin/$GIT_BRANCH" ]
then
  git push origin master:$GIT_BRANCH
  rm -rf $DIST_DIR

  if [ "$LOCAL_BRANCH_TEST" == "$GIT_BRANCH" ]
  then
    git branch -D $GIT_BRANCH
  fi

  git worktree add -b $GIT_BRANCH dist origin/$GIT_BRANCH
  rm -rf $DIST_DIR/*
  rm -rf $DIST_DIR/.[^.] .??* # Remove hidden files
else
  git worktree add dist $GIT_BRANCH
fi

# Build project
npm run build

# Deploy new dist folder to git repository
cd dist
git add -A
git commit -m "Deploy $DATE_NOW | Commit: $(git log '--format=format:%H' master -1)"
git push origin gh-pages -f
cd ..

# Finish deploy
echo ""
echo -e "${BLUE}================ Finishing Deploy ================${NC}"
echo ""
echo -e "The commit message is: ${LGREEN}Deploy $DATE_NOW | Commit: $(git log '--format=format:%H' master -1)${NC}"
echo -e "You can check the deploy on: ${LBLUE}$GIT_URL/tree/gh-pages${NC}"
echo ""
echo -e "${BLUE}==================== Finished ====================${NC}"