Skip to main content

Setting Up an Angular 5 site on Github Pages

Getting Started

This article will go over all the steps to setup an Angular site on GitHub pages.  The site will use Angular's AOT compiling and be served from the docs folder of the repository.

To start with you can follow the guide here to setup a new Angular project. Then you will need to setup a repository on Github.com.  The name of the repository doesn't matter, this site will use the docs folder, not the specially named repository with USERNAME.github.io as the name.



Project Changes

After that open up the project in your editor and open the .angular.cli.json file.  Change the "outDir" to "docs".  This is where the files will be created when you build the project.  The contents of .angular.cli.json are shown below with all the changes discussed in the article.

Custom Domain

To use a custom domain for your site you need to create a file name CNAME that contains only the domain name.  The GitHub help page explains how to setup DNS and everything else you need for this.  Create the file in the src folder of your project.  Then you need to add "CNAME" to the "assets" setting in your .angular.cli.json.  You can see this in the example file below.

If your site is using routing and you want the links to pages, other than the home page, to work you will need to setup a custom 404 page on your GitHub site.  There is a help document here explaining how to do that.  If all you do is add a custom 404.html file to the site it still won't make your links work.  For the Angular site to work correctly the easiest way is for your 404.html file to be the index page of your site.  In your src folder make a 404.html file and copy the contents of the index.html file into the 404.html file.  Then in the .angular.cli.json change the "index" setting to 404.html.

This is the .angular.cli.json with all the changes.


Site Setup

Now you are ready to build the site and commit all the changes.  Run the following command in your project folder:

ng build --aot --prod --env=prod

This should create a docs folder with files similar to the following:



Then you need to add all the changed files and commit everything.  Run the following commands to send everything up to GitHub.

git add .
git commit -m 'initial commit'
git push

At GitHub.com on your repository there is a Settings section.  Scroll down to the GitHub pages section.  Change the Source dropdown to the "master branch /docs folder" option.  After this your site should be up and running.  You can access it at your custom domain if you set one up, or the standard GitHub url for your repository.

Here is the output of "ng --version" for the setup used for this article.  Things could change as time goes on, but I am happy to answer any questions in the comments below.  Let me know if anyone has handled the index.html / 404.html situation differently.


Comments

Popular posts from this blog

Getting Hidden App Data From Your Google Drive

Some Android applications use space on your Google Drive to store data.  You can't see this data by browsing drive the normal way.  You can get access to it if you get the access token from the app and do a few other things.

I use an app to keep some notes and other things.  They require getting the paid version of the app to backup your data.  I wanted to see if I could get it myself without paying for the app.  I found out how to do this from this Stackoverflow post http://stackoverflow.com/questions/22832104/see-hidden-app-data-in-google-drive.  The example there uses php. Since I have been learning Python recently, I decided to see if I could do the same thing with Python.

 There is a pretty good explanation of why you need to go through all the steps you need to go through to get your data in the accepted answer for that post, so I won't go into too much detail about that here.


Using The Coldfusion XMLValidate Function To Validate User Content

Sometimes you want to allow a limited set of HTML tags in user generated content.  This can be done with the XMLValidate function in Coldfusion as long as the content is valid XHTML.

Several years ago I read an article about escaping form values posted by Ben Nadel on his site www.bennadel.com. Some discussion came up in the comments about allowing a limited set of html tags for paragraphs, bold text, and so on.  I had a need to do this for forum comments on a site that I was working on. This site was written in Coldfusion so I was looking at some of the same options mentioned in Ben's article. I ended up doing something a little different though.

We were using TinyMCE for the forum comments. TinyMCE produces XHTML code so I was able to use Coldfusion's abilities to handle XML to accomplish this task. Using the XMLValidate function and an XML schema that was modified to accept a small list of tags and attributes the comments were correctly limited. Here is the relevant po…

Using IR codes from Broadlink backup file

This is a continuation of yesterdays post about the Broadlink RM2 wifi remote.  I was able to test out using the codes to control my remote today.  They are stored in JSON format in the broadlink backup file.  The backup file is a zip file.  After you extract it there is a folder named SharedData.  There are several files in the folder.  The one that seems to have all the codes is named jsonIrCode.  The data looks like an array of objects, each with a code and some other information.