Tech - My Website

I registered my domain name on GoDaddy couple of years back (2018). I can’t really remember the motivation to get one registered. I almost forgot about this, until I got a reminder to renew.

Thanks to Scott, I realized the importance of key stroke - the nubmer of keystroke in your life time are finite. So if you worked on something interesting - why waste it in an email which you are never sure the recipient may or not read. Instead, write it in a blog and it would be there forever and could potentially help someone new in future.

On hindsight - this website should have ideally taken less than half a day to setup, but I ended up spending almost 2 days to set the first version. Well I was just getting my hands dirty.

This is a static website:

1. Original Content on GitHub - my private repo
2. Static files Generated using HUGO Extended
3. Themes from Academia
4. Static files Hosted on AWS S3
5. Domain DNS AWS Route S3
6. Continous Deployment Github Actions

Godaddy

This is a very trivial step, go to GoDaddy. Search if your expected domain name is available. If yes, just follow the steps that show up. Note: There are many providers GoDaddy is just one of them. I dont have a good reason why I chose GoDaddy or I haven’t seen a good reason to try other providers (read, lazy me).

Hugo

Hugo again has extensive documentation (bit overwhelming at times) on setting up. Every theme you donwload come with an example site, all you need to do is just start deleting content.

One item I really like is the live reload - when hugo server is running (locally) - the website would be auto deployed and page reloaded with new content as and when you save your file.

Tip: Theme I downloaded was using Hugo Extended and not the default one. It took me almost half a day to figure this out :-( debugging through css generation failures etc..

AWS Configuration

This article walks you through pretty much all the steps. If you are getting started, recomend to skip the cloundfront part: how-to-host-your-static-website-with-s3

Continous Deploy (Actions)

This was my favourite part, I am personally a CI/CD enthusiast. I wanted to deploy my website every time I push changes into my GitRepo.

I used S3 Sync Actions from marketplace. It has a few additional steps like generting AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY to get it configured.

Important: Secure you keys, by setting it up as secure env variable in github - so that it doesn’t show up in console log

Use my icon for the website: Every theme comes with its own default icon. Since I have referenced the theme as a GIT Submodule - as part of CD/workflow build is was always overwritten. Did a minor hack - I checked in my icon into my repo and as part of build replaced the default theme icons with mine before build step.

Below is the GitHub Action I stitched together.

    name: CD

    on:
      push:
        branches:
        - master

    jobs:
      deploy:
        name: deploy-website
        runs-on: ubuntu-latest
        continue-on-error: true
        steps:
        - name: Checkout master
          uses: actions/checkout@master

        - name: Update theme
          run: git submodule update --init --recursive

        - name: Setup hugo #https://github.com/peaceiris/actions-hugo
          uses: peaceiris/actions-hugo@v2
          with:
            extended: true #This website is based on Hugo-Extended
            hugo-version: "0.70.0" #We could also use latest

        - name: copy my icon
          run: cp -f ./assets/images/icon.png ./themes/academic/assets/images/icon.png 

        - name: Build Website
          run: hugo --minify

        - name: Publish To AWS S3
          uses: jakejarvis/s3-sync-action@master
          with:
            args: --acl public-read --follow-symlinks --delete --exclude '.git/*'
          env:
            AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET }}
            AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
            AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
            AWS_REGION: 'ap-south-1'   # optional: defaults to us-east-1
            SOURCE_DIR: 'public'      # Req: hugo gen - static files into this dir