Promoes is a project to recreate my personal website with blogging features and it is currently live on https://promoes.com/.

Summary

Technology Stack

Languages

Vue, TypeScript, SCSS

Detailed

Website Hosting

Both the production and preview channels are hosted on Firebase. The app is deployed to these channels using GitHub Action workflows.

GitHub Workflows

Build and deploy to preview channel on pull request. firebase-hosting-pull-request.yml

name: Deploy to Firebase Hosting on PR
'on': pull_request
jobs:
  build_and_preview:
    if: '${{ github.event.pull_request.head.repo.full_name == github.repository }}'
    runs-on: ubuntu-latest
    env:
      NODE_VERSION: '16'
    steps:
      - uses: actions/checkout@v2

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: ${{ env.NODE_VERSION }}
          cache: yarn

      - name: Install dependencies
        run: yarn --frozen-lockfile

      - name: Build site
        run: yarn docs:build

      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_PROMOES_32392 }}'
          projectId: promoes-32392

Build and deploy to production channel on merge to the master branch. firebase-hosting-pull-request.yml

name: Deploy to Firebase Hosting on merge
'on':
  push:
    branches:
      - master
jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    env:
      NODE_VERSION: '16'
    steps:
      - uses: actions/checkout@v2

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: ${{ env.NODE_VERSION }}
          cache: yarn

      - name: Install dependencies
        run: yarn --frozen-lockfile

      - name: Build site
        run: yarn docs:build

      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_PROMOES_32392 }}'
          channelId: live
          projectId: promoes-32392

Website Routing

Cloudflare handles both the DNS resolution and content delivery, so the SSL certificate is generated by Cloudflare. While Firebase has its own CDN, using Cloudflare brings additional DDOS protection and reduces the load on Firebase.

Coding Frameworks

The website is powered by the Vue 3 framework. VuePress V2 is used to generate static sites from posts in markdown format and Gungnir theme is applied to provide additional features for blogging like tags and catalogs.