This Website

Initially, the goal of this site was to quickly create and deploy a personal website. However, over time, I became more and more invested in it. I’ve spend HOURS customizing and adding in new features. Check out this Kanban board which shows how many enhancements I’ve made.

Since my main goal was to quickly create a website, I used Hugo, a popular open-source static site generator. Hugo is built with Go lang. I decided to pick it just because of its popularity, speed, and available themes. To quickly make this site, I used a pre-built theme called Portio, however I wanted to customize it. And customize it is what I did! Since the start of this project, I’ve added a ton of customizations on top of the original theme. For example, I added a dark-mode theme, added a cool slide out menu, added multiple CSS animations, and much more!

You can see my forked project which I used as a Git submodule to my source code. I also created a seperate repository to house only the generated static files and deploy the site using GitHub Pages. I also set up Github Actions to deploy my code to a hosting platform, Firebase.

I don’t do a lot of front-end work at my current job, so this project has helped me brush up on those skills. This website is ever growing and I intent to maintain it for some time. I will continue adding new features, blog posts, personal projects, and more!

Design

• Source code

• Source code for Theme

• Static site code

Deploy

name: Deploy to Firebase Hosting on merge
'on':
  push:
    branches:
      - master
jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true
      - run: |
          echo 'Deploying to Firebase...'
          cd anthonyjdella          
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_ANTHONYDELLAVECCHIA }}'
          channelId: live
          projectId: anthonydellavecchia
          entryPoint: "./anthonyjdella"

Build

As shown above, there are three code repositories. The Source code for Theme & Static site code are submodules of the source code.

• After making changes, start the server locally with hugo serve.

• After viewing changes, build the static files using hugo or hugo -t portio.

• Push changes in public/ to the static site code repository to deploy the site.

• Push changes in themes/portio to the source code for theme to make changes to the theme.

• GitHub Actions picks up the changes and deploys the site to Firebase, where it is hosted (using a custom domain name).