What sites are being operated by me?

• sandeepbhat.co.in

• blog.sandeepbhat.co.in (sub-domain of my portfolio site)

Technologies and tools used

• Hugo

• GitHub (Git)

• Netlify

• Hashnode

• GoDaddy

Steps taken to create a personal portfolio site from scratch

• You start by buying a domain in GoDaddy. You can buy a domain easily in any of the Domain name registrars like GoDaddy, Namecheap, porkbun, gandi, etc.

• Go to gohugo.io and choose an existing theme that fits your needs.

• Follow the documentation to easily set up the site by adding your configurations in config.yaml. In short, you need to clone the theme and add it as a submodule in your repository under the "themes" folder in a hugo project structure. Sample hugo project structure can be seen in this repo.

• For more advanced customizing such as modifying the CSS or HTML layouts in a given theme, they can be overridden by creating the equivalent HTML or CSS files in your project inside "layouts". This can be left untouched if you do not need to make any changes to HTML or CSS files in the theme chosen by you.

• Run hugo server to start a development server and check that your site loads fine in your local system.

• Next, we need to decide how to host the website for public consumption. Assuming that the portfolio site is mostly a static site which is nothing but mostly a collection of HTML and CSS files in simple terms. This provides us with multiple options to deploy them

  • S3 bucket in AWS or its equivalent in Azure or GCP bundled with GitHub Actions with the following configuration (for Azure). I started with this.

  •   name: ci
    
      on:
        push:
          branches:
            - master
    
      jobs:
        deploy:
          runs-on: ubuntu-18.04
          steps:
            - name: Git Checkout
              uses: actions/checkout@v2
              with:
                submodules: true
                fetch-depth: 0
            - name: Fetching Google Analytics ID
              uses: microsoft/variable-substitution@v1
              with:
                files: 'config.yaml'
              env:
                  googleAnalytics: ${{ secrets.GOOGLE_ID }}
    
            - name: Setup Hugo
              uses: peaceiris/actions-hugo@v2
              with:
                hugo-version: "0.74.2"
    
            - name: Build
              run: hugo --minify
    
            - name: Azure Login Initialization
              uses: azure/login@v1
              with:
                  creds: ${{ secrets.AZURE_CREDENTIALS }}
    
            - name: Upload to Azure blob storage
              uses: azure/CLI@v1
              with: 
                azcliversion: 2.18.0
                inlineScript: |
                    az storage blob upload-batch --account-name sandyportfolio -d '$web' -s ./public
    
            - name: Azure CLI Logout
              run: |
                  az logout
    

  • Build and host on Netlify. This enables CI/CD in the sense that the moment you commit to the master branch in the GitHub repo, it triggers build and deployment automatically. You can also set up integrations like Lighthouse for speed testing, push sitemap to Google servers for better search result matching and many more such integrations.

    

DNS configuration

Having hosted my sites in two different places -

• Blog in hashnode that gets the benefit of the ready audience with managed hosting

• Portfolio site self hosted in Netlify

This means that I need to manage DNS to ensure the single domain owned by me (sandeepbhat.co.in) can be used for both purposes by way of sub-domains.

• DNS points to Nameservers of Netlify in GoDaddy which is the DNS registrar for me.

• DNS records in Netlify to point to the portfolio site and hashnode for the blog.

  

Conclusion

This concludes a brief blog on how my sites are set up and configured for easy access. As you can see it's pretty easy to get started and there are multiple options available to anyone who wants to start hosting blogs or portfolio sites.

Option 1: Readymade blogging Websites

This is the easiest option available. You can get started by using blogging websites like blogspot.com or hashnode.com and set up your blog in no time. There could be more similar options.

They provide you with a subdomain that uses their site's domain for example a site in hashnode can be like "sandeepbhat.hashnode.dev" by default. Some of them let you attach the site to a custom domain that you might own.

In my case, I own the domain "sandeepbhat.co.in". I created a sub-domain called "blog.sandeepbhat.co.in" under my existing domain by adding a new DNS entry of the type A record. What this means is that you could attach your blog created in say hashnode to point to your domain or sub-domain. I will show how my current setup is done with easy steps to replicate.

Pros:

• Best in class tooling for editing blogs or writing blogs which includes Grammarly etc.

• Easy to use.

• Needs no user management for hosting needs. Hence no separate payment or maintenance for hosting the blog.

Cons:

• Watermark of the website provider.

• Need to upgrade for more features or to remove watermarks.

• Cannot customize beyond what is made available.

Option 2: Custom blog

This option is for those who are more hands-on and want to build something from scratch. This can be time-consuming if you are doing it for the first time.

I for one ended up doing something like this with a difference. My portfolio site is self-hosted and managed from the ground up but my blog is hosted on hashnode. I did this using a single domain which I bought on GoDaddy (sandeepbhat.co.in).

So my portfolio site is up at sandeepbhat.co.in and my blog is at blog.sandeepbhat.co.in

Pros:

• A portfolio site made ground up lets me customize it to my taste instead of it being hosted on a readymade site where it can get drowned in a sea of other portfolio sites.

• Blog hosted on hashnode helps me save time with the tooling it provides and I was not too interested in customizing it much. Blog involves lots more changes frequently as you publish more blogs whereas a portfolio site need not be updated frequently.

• Working in a CI/CD Platform company (Harness.io) I wanted to ensure my portfolio site has CI/CD integrated as well. I achieved this using Netlify where-in I push updated code to my repository in GitHub and this triggers a build and deployment to Netlify. All without even a separate "build and deploy" button to click.

• A single domain name saves me from additional costing as well. GoDaddy lets you configure a sub-domain which you need to set up in Hashnode as well. This sets up the necessary A record.

Cons:

• Time consuming.

• Need to integrate multiple tools manually like mailchimp for mailing or DISCUS for comments, etc.

That's it for my first entry in the newly launched blog. In the coming days, I intend to start documenting my experiences during my recent trip to Europe. Till then, stay tuned...