You have an open source project on GitHub and want to deploy? then this is the article for you
In this article we will discuss:
- How to deploy your project to GitHub page.
- Using TravisCI to auto deploy every time you commit your code.
Deploy your project to GitHub page
go to your project on GitHub then click on Setting
At the bottom of the setting page, you will see this
Select master branch
In your project, install package called gh-pages
npm install gh-pages --save-dev
This package will help us create a branch on GitHub called "gh-pages", and deploy our build version of the project there.
Go to your package.json and add this
{
"name": "<your project name",
"version": "0.1.0",
"homepage": "https://<your username>.github.io/<your repository name>/", <---- HERE
"private": false,
....
"scripts": {
....
"predeploy": "yarn run build", <--- and here (change yarn to npm if you use npm)
"deploy": "gh-pages -d build" <--- and here
...
},
The predeploy script helps us build the project every time you run deploy Now, run
yarn deploy (or npm deploy)
And done, your app is deployed on GitHub page!!
Use TravisCI to automate deployment for your project
What is CI/CD ?
Continuous Integration(CI) & Continuous Delivery(CD)
In software engineering, continuous integration is the practice of merging all developers' working copies to a shared mainline several times a day - wikipedia
Which means that this practice enabled you to merge your code more frequently and usually being checked and deployed by automated system, this leads to less conflicts and problems will be detected earlier.
And CD is the extended version of CI, after being tested and verified, new code will be automatically deployed on to production server where client can see the updates.
TravisCI
TravisCI is a hosted CI service that allows you to build and test projects on GitHub. Open source projects are free of charges.
- Go to travis-ci.com and sign in with GitHub
- Activate "Github Apps Integration" and select your project(s).
- Add a file called .travis.yml into the root folder of your project (same place as package.json)
// .travis.yml
language: node_js
node_js:
- "stable"
cache:
directories:
- node_modules
script:
- yarn build
deploy:
provider: pages
skip_cleanup: true
github_token: $github_key
local_dir: build
on:
branch: master
- Get your github_token here
- After you have the token, set it as a variable at TravisCI by going to your repository > setting
All done, now commit your code, you should see something like this
Thanks for reading, see you in the next article.
Pepega Clap