How did I set my website up?

This article describes the way things are set up by me for the sites that I operate. I will try my best to make it as simple and as clear as possible for all of you to read.

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.

How did I set my website up?

Comments

More from this blog

How can you start your own blog?

Hello Peeps

Command Palette

Comments

More from this blog