Tech - My Website

Wed, 20 May 2020 00:00:00 +0000

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:

Original Content on GitHub - my private repo
Static files Generated using HUGO Extended
Themes from Academia
Static files Hosted on AWS S3
Domain DNS AWS Route S3
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

GithubActions | Jacob Aloysious

Tech - My Website

Godaddy

Hugo

AWS Configuration

Continous Deploy (Actions)