TOPページを少し豪華にした&自動デプロイ

ブログ
Web制作
Nuxt/Content
Vue.js

TOP ページを少し豪華にした

TOP ページに新着記事のリストを置いてみた。

あと、各種コンポーネントを MDC Syntax でおくようにして、index.vue をシンプルに。

自動デプロイの設定

いろんなところの記事を参考に、GitHub への push 時に自動的にデプロイされるように Action を設定しました。 超便利

name: 🚀 Deploy website on push
on:
  push:
    branches:
      - main
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: "latest"
      - name: Install
        run: npm ci
      - name: Build
        run: npm run generate
      - name: Sync files
        uses: SamKirkland/FTP-Deploy-Action@4.3.3
        with:
          local-dir: ./dist/
          server: ${{ secrets.FTP_SERVER }}
          username: ${{ secrets.FTP_USERNAME }}
          password: ${{ secrets.FTP_PASSWORD }}
          server-dir: ${{ secrets.FTP_SERVER_DIR }}

TODO

  • push 時自動デプロイ
  • 新着記事リスト
  • index.vue のスリム化
  • タグ検索の実装
  • 記事の image に絵文字を使えるようにする(Zenn風にしたい)
  • このサイトを GitHub に Public Template として公開する