Hope you’re doing well.
I’ll show you how you can deploy your angular 5 app in github pages. Why? you know what? It’s free. And you can add your custom domain to it. That’s awesome, right? Yea of course.
So first we’ll need to install a npm package called
.You should install it globally as it has nothing to do with your project. It’s just a command line tool.
npm i -g angular-cli-ghpages
2. Build Project
If you are using angular-cli you can just build your project for production by passing a –prod flag. use –base-href to pass a base url for your project.
ng build --prod --base-href "/REPOSITORY_NAME/"
This will build your project into /dist folder.
3. Publish on github Pages
Just use this command to publish your build files to github pages
and then go to your github repository->Settings->Choose gh-pages branch as source.
This should do the trick. If you want to keep using github pages domain.
But wait! aren’t we suppose to use our own domain? Yes.
4. Using Custom Domain
We can add our custom domain on custom domain box on repository setting. It’ll work fine. But the problem is, your project will be hosted on
“example.com/repository_name” instead of “example.com”.
We don’t want this.
So how can we solve this problem?
well use this command for building your angular app.
ng build --prod --base-href "/"
Setting / as base url, you can now use your custom domain. One problem there, if you use go to github pages link of your repository it won’t find the assets for your project as it looks from the relative path ‘/’ instead of ‘/repo/’. But when you add your custom domain it’ll work fine.
Need I remind you to push the build to github again after a new build? 😉