<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Masood Mohammad</title>
    <description>The latest articles on Forem by Masood Mohammad (@masoodbinmohammad).</description>
    <link>https://forem.com/masoodbinmohammad</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F440310%2Fdbfe3421-729a-4012-84af-8cb47da7b600.jpg</url>
      <title>Forem: Masood Mohammad</title>
      <link>https://forem.com/masoodbinmohammad</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/masoodbinmohammad"/>
    <language>en</language>
    <item>
      <title>Search Better. Google Dorks to Make Your Search Effective</title>
      <dc:creator>Masood Mohammad</dc:creator>
      <pubDate>Wed, 23 Sep 2020 14:56:58 +0000</pubDate>
      <link>https://forem.com/masoodbinmohammad/search-better-google-dorks-to-make-your-search-effective-5f4h</link>
      <guid>https://forem.com/masoodbinmohammad/search-better-google-dorks-to-make-your-search-effective-5f4h</guid>
      <description>&lt;h2&gt;
  
  
  &lt;strong&gt;Introduction&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;In this post I am going to share some of the useful tips and tricks while finding any information on google search engine which is commonly called as "Google Dorking" or "Google Hacking".&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Google Dorking ?&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Google Dorking is use of a special string for finding any type of results from any specified website or from the whole Internet with the help of Google Search Engine. These strings are built with the advanced search operators supported by Google Search Engine. It is also regarded as illegal google hacking activity which hackers often uses for purposes such as cyber theft.&lt;/p&gt;

&lt;p&gt;I know it is quite intimidating when you hear the word "Hacking". Not to worry because in this post I am going to share as a developer how you can make the best use of it without even crossing that line.&lt;/p&gt;

&lt;p&gt;And yes, these google dorks could be useful to anyone irrespective of the field they are in.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;How not to cross the line ?&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;As you may know, Google automatically indexes a website’s information and unless sensitive information is explicitly blocked from indexing, all of that information is then available to discovery via dorks or advanced search terms.&lt;/p&gt;

&lt;p&gt;While some links expose sensitive information on their own, this doesn’t mean it’s legal to take advantage of or exploit that information. If you do so you’ll be marked as a cybercriminal. It’s pretty easy to track your browsing IP, even if you’re using a VPN service. It’s not as anonymous as you think.&lt;/p&gt;

&lt;p&gt;All in all, even if you stumble across any sensitive information while doing a search on google and you do not use these information for any illegal activities, then you are safe. Most importantly these dorks are basically filters that we use on our search results. So cheer up and let's get started.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Dorks&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Before I dive into listing out various lists of dorks, let me start with an example so that you are aware of what I am talking about.&lt;/p&gt;

&lt;p&gt;Let us consider this example of what if we would like to know various &lt;strong&gt;software developer jobs&lt;/strong&gt; that are available online. Now Let us do our typical search on google. Ideally here is what it looks like.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fhb3p75q6dz9b1gkf1iid.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fhb3p75q6dz9b1gkf1iid.png" alt="Search without Dorks"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Right ??. As you could see google has indexed more than 800 million pages for us to this particular query.&lt;/p&gt;

&lt;p&gt;Now what if we only need the results from particular websites ? Here is where google dorks comes into picture. Look at the query below.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fdomzkabuohjgag451jjw.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fdomzkabuohjgag451jjw.png" alt="Search with dorks 1"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;As you could see I have added an extra query &lt;code&gt;site:linkedin.com&lt;/code&gt;and this is what we call a Google Dorks. &lt;code&gt;site:&lt;/code&gt; is one of the google dorks that we used to filter the search results from a particular websites. Just Look at the number of results it has filtered. Its now down to 73 million and also you can see all the results are from single website &lt;code&gt;linkedin.com&lt;/code&gt;. This is how easy it is to filter the searches and find any information over google.&lt;/p&gt;

&lt;p&gt;Now let us take this to a step further and fetch the jobs that are published only on current year.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fwaqy089jqacudpdnte49.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fwaqy089jqacudpdnte49.png" alt="Search with dorks 2"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I have just used an another dorks &lt;code&gt;after:&lt;/code&gt; which could be used filtering out results to any year. Similarly we could also use &lt;code&gt;before:&lt;/code&gt; for the same purpose.&lt;/p&gt;

&lt;p&gt;Many a times there are chances that you get annoyed by the results from particular websites. on those moments you could just use &lt;code&gt;-site:&lt;/code&gt; to not show any results from that websites. You could also filter out multiple sites extending it with the help of comma. Ex: &lt;code&gt;-site:naukri.com,indeed.com&lt;/code&gt;. And these could be applied to any dorks.&lt;/p&gt;

&lt;p&gt;By now you might have got an idea of how useful dorks could be in your day to day life and these are just the beginning. There are also other lists of dorks are available that we could use perform much more than what I have explained above using the simple search strings.&lt;/p&gt;

&lt;p&gt;Here I have listed some of the commonly used dorks on the internet.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;filetype:&lt;/code&gt; used to search for any kind of file extensions, for example, if you want to search for jpg files you can use: &lt;code&gt;filetype:jpg&lt;/code&gt;&lt;br&gt;
&lt;code&gt;allinurl:&lt;/code&gt; it can be used to fetch results whose URL contains all the specified characters.&lt;br&gt;
&lt;code&gt;inurl:&lt;/code&gt; this is exactly the same as allinurl, but it is only useful for one single keyword.&lt;br&gt;
&lt;code&gt;intitle:&lt;/code&gt; used to search for various keywords inside the title.&lt;br&gt;
&lt;code&gt;allintext:&lt;/code&gt; searches for specific text contained on any web page.&lt;br&gt;
&lt;code&gt;allintitle:&lt;/code&gt; exactly the same as allintext, but will show pages that contain titles with specified text.&lt;br&gt;
&lt;code&gt;cache:&lt;/code&gt; this dork will show you the cached version of any website.&lt;br&gt;
&lt;code&gt;inanchor:&lt;/code&gt; this is useful when you need to search for an exact anchor text used on any links.&lt;br&gt;
&lt;code&gt;intext:&lt;/code&gt; useful to locate pages that contain certain characters or strings inside their text.&lt;br&gt;
&lt;code&gt;link:&lt;/code&gt; will show the list of web pages that have links to the specified URL.&lt;br&gt;
&lt;code&gt;*&lt;/code&gt; wildcard used to search pages that contain anything before your word.&lt;br&gt;
&lt;code&gt;|&lt;/code&gt; this is a logical operator, e.g. &lt;code&gt;"blogs" | "articles"&lt;/code&gt; will show all the sites which contain "blogs" or "articles" or both words.&lt;br&gt;
&lt;code&gt;+&lt;/code&gt; used to concatenate words, useful to detect pages that use more than one specific key.&lt;br&gt;
&lt;code&gt;–&lt;/code&gt; minus operator is used to avoiding showing results that contain certain words.&lt;br&gt;
&lt;code&gt;""&lt;/code&gt; Use quotes to search for an exact phrase. Searching a phrase in quotes will yield only pages with the same words in the same order as what’s in the quotes. It’s one of the most vital search tips, especially useful if you’re trying to find results containing a specific a phrase.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Conclusion&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;This does not end here. If you are interested in exploring more about it, just do a quick search as &lt;code&gt;Google Dorks filetype:pdf&lt;/code&gt; and you will find  lot of information on it. Good luck.🤝&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;I hope this post has given you an idea of what all google dorks is about and how you could make the best use of it. If it did please help others spreading the word.😊&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Desclaimer:&lt;/strong&gt;
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;ul&gt;
&lt;li&gt;&lt;em&gt;This post was written for educational purposes only.&lt;/em&gt;&lt;/li&gt;
&lt;li&gt;&lt;em&gt;The author can not be held responsible for damages caused by the use of these resources.&lt;/em&gt;&lt;/li&gt;
&lt;li&gt;&lt;em&gt;You will not misuse the information to gain unauthorized access.&lt;/em&gt;&lt;/li&gt;
&lt;li&gt;&lt;em&gt;This information shall only be used to expand knowledge and not for causing malicious or damaging attacks.&lt;/em&gt;&lt;/li&gt;
&lt;li&gt;&lt;em&gt;Just remember, Performing any hacks without written permission is illegal.&lt;/em&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/blockquote&gt;

</description>
      <category>webdev</category>
      <category>codenewbie</category>
      <category>search</category>
      <category>dorks</category>
    </item>
    <item>
      <title>How I Built My Blog Using Gatsby and Netlify</title>
      <dc:creator>Masood Mohammad</dc:creator>
      <pubDate>Wed, 19 Aug 2020 21:33:25 +0000</pubDate>
      <link>https://forem.com/masoodbinmohammad/how-i-built-my-blog-using-gatsby-and-netlify-540j</link>
      <guid>https://forem.com/masoodbinmohammad/how-i-built-my-blog-using-gatsby-and-netlify-540j</guid>
      <description>&lt;blockquote&gt;
&lt;p&gt;In this post i am excited to share you on how i built my blog site and also provide you some of the resources which i personally found useful. If you are person who is willing to have your personal blog , I hope this post will help you to get going. &lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Lets jump into it straight away then.🏃‍♂️&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Introduction&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;While i was in search of some of the templates to start off with my blog site. I found this beautiful &lt;a href="https://www.gatsbyjs.com/starters/mhadaily/gatsby-starter-typescript-power-blog" rel="noopener noreferrer"&gt;Gatsby starter template&lt;/a&gt; ❤️  by &lt;a href="https://twitter.com/mhadaily" rel="noopener noreferrer"&gt;Majid Hajian&lt;/a&gt; which was primarily using styled components and typescript. It also includes some of the great features such as SEO, PWAs, Light/Dark theme etc.Coming from a .NET background i always love working on typescript as it is statically typed and it brings familiar OOPs concepts to JavaScript. These things altogether just drove me to start using it.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Demo&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F9wxna6111wobajqt0781.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F9wxna6111wobajqt0781.gif" alt="Getting started"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/mhadaily/gatsby-starter-typescript-power-blog" rel="noopener noreferrer"&gt;Source Code&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;What is Gatsby&lt;/strong&gt; ? 🙄
&lt;/h2&gt;

&lt;p&gt;For those of you have not heard of this word yet, Gatsby is a static site generator that uses React. Everything is configured out of the box including React, Webpack, Prettier and many more.&lt;/p&gt;

&lt;p&gt;If you haven’t used React before there is definitely a  learning curve but there are plenty of well written tutorials that makes learning React very accessible. Not to mention the official &lt;a href="https://reactjs.org" rel="noopener noreferrer"&gt;React documentation&lt;/a&gt; is very well written.&lt;/p&gt;

&lt;p&gt;If you want to know more about Gatsby and interested in building something , You can follow this &lt;a href="https://www.gatsbyjs.org/docs" rel="noopener noreferrer"&gt;documentation&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Netlify&lt;/strong&gt; ?? 🤔
&lt;/h2&gt;

&lt;p&gt;While i was working on my portfolio, I have used GitHub pages for hosting website because it’s free and fairly easy to set up. Although I still think GitHub pages is a great tool, Netlify takes the process one step further to make the developer experience even more efficient. You can find more differences between these two &lt;a href="https://www.netlify.com/github-pages-vs-netlify" rel="noopener noreferrer"&gt;here&lt;/a&gt; &lt;/p&gt;

&lt;p&gt;Once you’ve hooked up Netlify to your repo, each push to your GitHub repository, automatically builds your website according to the static site generator you’re using and deploys it to production. Here is the &lt;a href="https://www.netlify.com/blog/2016/02/24/a-step-by-step-guide-gatsby-on-netlify" rel="noopener noreferrer"&gt;step by step guide to get started&lt;/a&gt;. &lt;/p&gt;

&lt;p&gt;Although i am currently using Netlify only for static site hosting, it supports cloud functions, domain management (with SSL), form submissions, a/b testing and more.&lt;/p&gt;

&lt;p&gt;Besides features, Netlify’s web interface is clean and easy to use. Coming from using AWS past projects, the difference i feel is night and day. While AWS has it’s advantages being highly configurable, the large portion of us developers are unlikely to use these functionality. &lt;/p&gt;

&lt;p&gt;The best part about Netlify is that it’s free. If you’re in a large team or need more resources for cloud functions, form submissions and more they do have paid options. If you plan on building a small blog like me, it’s unlikely you’ll need to pay for anything.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Conclusion&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Gatsby and Netlify are the one of easiest ways to build and publish a static website. Personally i have learned many things while i was working on and i hope that this will help you as well. Good luck. 🤝&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;If you find this post useful, please help others spreading the word. Leave your suggestions and feedback.&lt;/p&gt;
&lt;/blockquote&gt;

</description>
      <category>gatsby</category>
      <category>netlify</category>
      <category>webdev</category>
      <category>codenewbie</category>
    </item>
    <item>
      <title>Clean Code Using Null Conditional Operator and Coalescing Operator</title>
      <dc:creator>Masood Mohammad</dc:creator>
      <pubDate>Thu, 06 Aug 2020 19:22:25 +0000</pubDate>
      <link>https://forem.com/masoodbinmohammad/clean-code-using-null-conditional-operator-and-coalescing-operator-l70</link>
      <guid>https://forem.com/masoodbinmohammad/clean-code-using-null-conditional-operator-and-coalescing-operator-l70</guid>
      <description>&lt;h3&gt;
  
  
  &lt;strong&gt;Introduction&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;In this article i am going to share one of the useful tips in writing a clean code which i have learnt in C#.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Example&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;For a demo purpose lets take employees in an organisation as an example and lets create the Employees object which has 3 properties namely EmployeeID, Name and Salary.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;class Employees
{
    public int? EmployeeID { get; set; }
    public string Name { get; set; }
    public long? Salary { get; set; }
}
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;Lets consider the use case that we are going to fetch an employee details from database and display or bind these data in front-end.&lt;/p&gt;

&lt;p&gt;For demo purpose i am going to initialize our employees object with some sample employee details.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;List&amp;lt;Employees&amp;gt; employee = new List&amp;lt;Employees&amp;gt;()
{
    new Employees() { EmployeeID = 1, Name = "John", Salary = 10000 },
    new Employees() { EmployeeID = 2, Name = "Steve", Salary = 20000 },
    new Employees() { EmployeeID = 3, Name = "Robert", Salary = 30000 }
};
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;As you can see i have created list of employees object with three employees details.&lt;/p&gt;

&lt;p&gt;Okay , now we have our data ready. We will consider looping through each employee and display the data in the console.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;foreach (var item in employees)
{
    if (item != null)
    {

        if (item.EmployeeID != null)
        {
            Console.WriteLine(item.EmployeeID);
        }
        else
        {
            Console.WriteLine("No ID Exists");
        }

        if (string.IsNullOrEmpty(item.Name))
        {
            Console.WriteLine(item.Name);
        }
        else
        {
            Console.WriteLine("No Name Exists");
        }

        if (item.Salary != null)
        {
            Console.WriteLine(item.Salary);
        }
        else
        {
            Console.WriteLine("No Salary Exists");
        }
    }

}
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;here i have used traditional way of implementation. As you can easily guess it what i basically did was just looped through each employee and checked for any null reference for employee object itself and for its properties.&lt;/p&gt;

&lt;p&gt;However if this object has many properties and if you need to have these type of checks for every property then this code becomes more lengthy. Hence this is when the &lt;strong&gt;Null Conditional Operator&lt;/strong&gt; and &lt;strong&gt;Null Coalescing Operator&lt;/strong&gt; comes into picture. Let me simplify the same logic which was written above using these operators&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;foreach (var item in employees)
{
    Console.WriteLine(item?.Name ?? "No Name Exists");

    Console.WriteLine(item?.EmployeeID.ToString() ?? "No ID Exists");

    Console.WriteLine(item?.Salary.ToString() ?? "No Salary Exists");
}
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;Isn't this so clear, concise and yet so easy to implement. Now Let me explain what are these operators and how does it work.&lt;/p&gt;

&lt;p&gt;The &lt;code&gt;?&lt;/code&gt; operator is the null conditional operator and this operator lets you access members and elements only when the receiver is not-null, returning null result otherwise. In our case if the item object is null it returns null if not it will print the items properties.&lt;/p&gt;

&lt;p&gt;The &lt;code&gt;??&lt;/code&gt; operator is the null coalescing operator and this was designed to be used easy with null-conditional operators. It provides default value when the null conditional operator returns null. Hence in our example if the item properties are null then right side of the code going to be printed.&lt;/p&gt;

&lt;p&gt;That's it . This is how you can easily use these two operators in combination to make your code look simple and clean.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;If you find this post useful, please help others spreading the word.😊 Drop in your suggestions and feedbacks.&lt;/p&gt;
&lt;/blockquote&gt;

</description>
      <category>beginners</category>
      <category>dotnet</category>
      <category>csharp</category>
      <category>codenewbie</category>
    </item>
    <item>
      <title>Hosting Angular App to GitHub Pages for Free</title>
      <dc:creator>Masood Mohammad</dc:creator>
      <pubDate>Tue, 04 Aug 2020 19:49:08 +0000</pubDate>
      <link>https://forem.com/masoodbinmohammad/hosting-angular-app-to-github-pages-for-free-2g3h</link>
      <guid>https://forem.com/masoodbinmohammad/hosting-angular-app-to-github-pages-for-free-2g3h</guid>
      <description>&lt;h2&gt;
  
  
  &lt;strong&gt;Introduction&lt;/strong&gt;
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;This is my very first article on dev.to and i would truly appreciate your valuable suggestions and feedback.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;In this article i am going to share with you my learning while i was deploying my portfolio website to GitHub pages and also i will give you some of the other articles to go through if you foresee any  difficulties with my way of deploying the app.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Heads up&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Before you start deploying your app, make sure to have your GitHub repo as public in order to opt for free hosting service. GitHub does charge if you do want to host your app that is private.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Getting started&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Assuming that you have already built a beautiful app and waiting for it to kick off and deploy. If that is not the case and you need to know how to get started with building angular app please go ahead and refer the angular &lt;a href="https://angular.io/docs"&gt;documentation&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;To get started with, here is an another &lt;a href="https://dzone.com/articles/deploy-angular-app-on-github-pages"&gt;article&lt;/a&gt; which explains you about one of the ways of deploying your App to GitHub pages. If this works for you i am happy for you and you do not have to come back here. 😉&lt;/p&gt;

&lt;p&gt;But if you still want to know the other alternatives or if the above method did not work out for you , please continue reading further. Personally i found the below method pretty cool and easy to manage later stages.&lt;/p&gt;

&lt;p&gt;Now here is the thing, once you have all your app ready, install this package called &lt;code&gt;angular-cli-ghpages&lt;/code&gt; by using below command in your Angular CLI.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npm install -g angular-cli-ghpages
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;once you have installed this package globally, the very next step is to build your project with production flag and set the correct base href address.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;ng build --prod --base-href "https://username.github.io/"
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;if you are confused with the base-href address that's okay. you can always change that to whatever works out for you later on.&lt;/p&gt;

&lt;p&gt;If you are working on Angular6+ then make sure to set your outputpath from &lt;code&gt;dist/[PROJECTNAME]&lt;/code&gt; to &lt;code&gt;dist/&lt;/code&gt;.This is because Angular 6 changed angular.json's &lt;code&gt;"outputPath": "dist/"&lt;/code&gt; into &lt;code&gt;"outputPath": "dist/[PROJECTNAME]"&lt;/code&gt;, which placed everything in the dist folder in a sub folder. if this is not changes then it might break &lt;strong&gt;ngh's&lt;/strong&gt; functionality.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Hosting&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Now just run the below command to start deploying your app to github pages.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;ngh
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;and your app will be hosted at &lt;code&gt;https://username.github.io/&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;You can optionally add a message to the commit when deploying:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;ngh --message="First deploy"
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;You can also specify which branch to deploy:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;ngh --branch=master
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;And finally, you can always do a dry run before actually deploying to see the output:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;ngh --dry-run
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;That’s wrap 🙂. I hope you have understood how easy it is to deploy your app/project over GitHub.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;If you find this useful please help others by spreading the word&lt;/em&gt;.😊&lt;/p&gt;
&lt;/blockquote&gt;

</description>
      <category>angular</category>
      <category>github</category>
      <category>webdev</category>
      <category>tutorial</category>
    </item>
  </channel>
</rss>
