d8ce045ead
While Next.js can handle static sites, we've had a few issues with it, notably a performance hit at runtime and some bugginess around routing and SSR. Gatsby being fully intended for high-performance static sites makes it a great technical fit for the Shields frontend. The `createPages()` API should be a really nice way to add a page for each service family, for example. This migrates the frontend from Next.js to Gatsby. Gatsby is a powerful tool, which has a bit of downside as there's a lot to dig through. Overall I found configuration easier than Next.js. There are a lot of plugins and for the most part they worked out of the box. The documentation is good. Links are cleaner now: there is no #. This will break old links though perhaps we could add some redirection to help with that. The only one I’m really concerned about `/#/endpoint`. I’m not sure if folks are deep-linking to the category pages. There are a lot of enhancements we could add, in order to speed up the site even more. In particular we could think about inlining the SVGs rather than making separate requests for each one. While Gatsby recommends GraphQL, it's not required. To keep things simple and reduce the learning curve, I did not use it here. Close #1943 Fix #2837 Fix #2616
73 lines
2.3 KiB
Makefile
73 lines
2.3 KiB
Makefile
SHELL:=/bin/bash
|
|
|
|
SERVER_TMP=${TMPDIR}shields-server-deploy
|
|
FRONTEND_TMP=${TMPDIR}shields-frontend-deploy
|
|
|
|
# This branch is reserved for the deploy process and should not be used for
|
|
# development. The deploy script will clobber it. To avoid accidentally
|
|
# pushing secrets to GitHub, this branch is configured to reject pushes.
|
|
WORKING_BRANCH=server-deploy-working-branch
|
|
|
|
all: website test
|
|
|
|
website:
|
|
npm run build
|
|
|
|
deploy: deploy-s0 deploy-s1 deploy-s2 clean-server-deploy deploy-gh-pages deploy-gh-pages-clean
|
|
|
|
deploy-s0: prepare-server-deploy push-s0
|
|
deploy-s1: prepare-server-deploy push-s1
|
|
deploy-s2: prepare-server-deploy push-s2
|
|
|
|
prepare-server-deploy: website
|
|
# Ship a copy of the front end to each server for debugging.
|
|
# https://github.com/badges/shields/issues/1220
|
|
rm -rf ${SERVER_TMP}
|
|
git worktree prune
|
|
git worktree add -B ${WORKING_BRANCH} ${SERVER_TMP}
|
|
cp -r build ${SERVER_TMP}
|
|
git -C ${SERVER_TMP} add -f build/
|
|
git -C ${SERVER_TMP} commit --no-verify -m '[DEPLOY] Add frontend for debugging'
|
|
cp config/local-shields-io-production.yml ${SERVER_TMP}/config/
|
|
git -C ${SERVER_TMP} add -f config/local-shields-io-production.yml
|
|
git -C ${SERVER_TMP} commit --no-verify -m '[DEPLOY] MUST NOT BE ON GITHUB'
|
|
|
|
clean-server-deploy:
|
|
rm -rf ${SERVER_TMP}
|
|
git worktree prune
|
|
|
|
push-s0:
|
|
git push -f s0 ${WORKING_BRANCH}:master
|
|
|
|
push-s1:
|
|
git push -f s1 ${WORKING_BRANCH}:master
|
|
|
|
push-s2:
|
|
git push -f s2 ${WORKING_BRANCH}:master
|
|
|
|
deploy-gh-pages:
|
|
rm -rf ${FRONTEND_TMP}
|
|
git worktree prune
|
|
GATSBY_BASE_URL=https://img.shields.io \
|
|
NEXT_ASSET_PREFIX=https://shields.io \
|
|
npm run build
|
|
git worktree add -B gh-pages ${FRONTEND_TMP}
|
|
git -C ${FRONTEND_TMP} ls-files | xargs git -C ${FRONTEND_TMP} rm
|
|
git -C ${FRONTEND_TMP} commit --no-verify -m '[DEPLOY] Completely clean the index'
|
|
cp -r build/* ${FRONTEND_TMP}
|
|
cp favicon.png ${FRONTEND_TMP}
|
|
echo shields.io > ${FRONTEND_TMP}/CNAME
|
|
touch ${FRONTEND_TMP}/.nojekyll
|
|
git -C ${FRONTEND_TMP} add .
|
|
git -C ${FRONTEND_TMP} commit --no-verify -m '[DEPLOY] Add built site'
|
|
git push -f origin gh-pages
|
|
|
|
deploy-gh-pages-clean:
|
|
rm -rf ${FRONTEND_TMP}
|
|
git worktree prune
|
|
|
|
test:
|
|
npm test
|
|
|
|
.PHONY: all website deploy prepare-server-deploy clean-server-deploy deploy-s0 deploy-s1 deploy-s2 push-s0 push-s1 push-s2 deploy-gh-pages deploy-gh-pages-clean deploy-heroku setup redis test
|