Hi, hope you have learnt how to write posts on your Jekyll Blog with the help of my previous post.

In today's TUTORIAL you will learn how to automate this deployment using Travis and Github pages.

For this you need:
⚡ A GitHub account
⚡ First of all, you need a new account on Travis.org.

From here, the tutorial starts.
➜ Go to your newly created account on Travis and click on your profile image.

➜ There go to the settings feature.

➜ Now you can see the list of all your GitHub repositories there.

➜ Under Legacy Services Integration, check/enable the repo for which you want to automate the deployment process.

➜ Now you can see that an automatic webhook is added by Travis to your target repo settings. You can check this by going to the settings of your target repo on Github.

➜ Once you have enabled the webhooks of Travis, the next thing is to create a .travis.yml file inside your repo folder on your local system. This is done to configure Travis on your project.

➜ Once you will start committing this file, Travis will automatically trigger on every push/ actions.

➜ Now its time to pay attention to what the configuration in .travis.yml will look like.

NOTE: We will be configuring this file in JSON here.

➜ First, we have to set up its language; ex- Nodejs.

➜ Then you need to specify the version of the language; ex- 11.6.3

➜ Then you need to specify that you will cache all the npm dependencies. This will help in speeding the process in case you need to build again and again.

➜ Its time to set up Travis hooks
install:
-npm ci

script:
-npm test
-npm run build

deploy:
provider: pages
skip-cleanup: true
github-token: GITHUB_TOKEN
local_dir: build
on:
branch: gh-pages

NOTE: You have to replace GITHUB_TOKEN with your personal GitHub token.

➜ Its time to add these configurations to the repo.

➜ For this, open git. Switch to your target folder
cd [FOLDERNAME]

➜Then switch to github branch
git checkout [BRANCHNAME]
git checkout gh-pages

➜ Stage the changes
git add .

➜ Commit the changes
git commit -m "automating deployment"

➜ Finally push the changes
git push origin [REPONAME]
git push origin gh-pages

This is it. We did it together. Next time when you make any commit in this project, it will be automatically deployed on the Github page.

With respect to this, travis will on the success/failure of this deployment.

If you get stuck on any point, ask in the comments sections.

Connect with me on
Instagram
https://www.instagram.com/p/CFqrvobFlsL/?igshid=j3lhn2qi3og0

Twitter
https://mobile.twitter.com/_SinghVikas_