Website
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
2017
2018
.bowerrc
.gitignore
README.md
package.json

README.md

Heobus

核爆試驗場,請小心輻射傷害。

Add Nuxt.js Modules

https://github.com/nuxt-community/awesome-nuxt#modules

Add bootstrap-vue

$ cd 2018
$ yarn add bootstrap-vue

Add Nuxt Font Awesome 5

$ cd 2018
$ yarn add qonfucius-nuxt-fontawesome
$ yarn add @fortawesome/fontawesome-free-brands
$ yarn add @fortawesome/fontawesome-free-solid

Edit nuxt.config.js

...
  fontAwesome: {
    packs: [
      {
        package: '@fortawesome/fontawesome-free-brands',
        icons: ['faGithub', 'faFontAwesome']
      },
      {
        package: '@fortawesome/fontawesome-free-solid',
        icons: ['faBus']
      }
    ]
  },
  modules: [
    '@nuxtjs/pwa',
    'bootstrap-vue/nuxt',
    'qonfucius-nuxt-fontawesome',
  ]
...

Project Initiation

Install vue-cli

$ npm install -g vue-cli
...
...
...
+ vue-cli@2.9.3
added 259 packages in 29.661s

Initiation

$ vue init nuxt-community/pwa-template 2018
...
...
...
   vue-cli · Generated "2018".

   To get started:

     cd 2018
     npm install # Or yarn
     npm run dev

Change dev web server port number by edit package.json

...
...
...
  "config": {
    "nuxt": {
      "port": "3084"
    }
  }
...
...
...

Run dev web server

$ cd 2018
$ yarn dev
...
...
...
 DONE  Compiled successfully in -8371ms

 OPEN  http://localhost:3084

Generate static files

$ cd 2018
$ yarn generate
$ aws configure --profile hoebus
AWS Access Key ID [None]: ********************
AWS Secret Access Key [None]: ****************************************
Default region name [None]: us-east-1
Default output format [None]: json
$

Upload to AWS S3 bocket

$ cd 2018/dist
$ aws s3 sync --profile hoebus --acl public-read --exclude .DS_Store . s3://s.hoebus.idv.tw
...
...
...
upload: ..\..\..\..\..\..\益\github\yihua1218\hoebus.idv.tw\2018\dist\_nuxt\vendor.93b0c8260fefcdb7f815.js to s3://s.hoebus.idv.tw/_nuxt/vendor.93b0c8260fefcdb7f815.js

CloudFront Invalidation

$ aws cloudfront create-invalidation --profile hoebus --distribution-id ELS5MFWQF4M40 --paths "/*"
{
    "Invalidation": {
        "Status": "InProgress",
        "InvalidationBatch": {
            "Paths": {
                "Items": [
                    "/*"
                ],
                "Quantity": 1
            },
            "CallerReference": "cli-1525541713-944104"
        },
        "Id": "I3UTIMZMSOB7BB",
        "CreateTime": "2018-05-05T17:35:18.038Z"
    },
    "Location": "https://cloudfront.amazonaws.com/2017-03-25/distribution/ELS5MFWQF4M40/invalidation/I3UTIMZMSOB7BB"
}

Issues

  1. Icons load incorrectly (very large) in server side when using library.add (Nuxt.js)

Edit nuxt.config.js and add css:

...
  css: [
    '@fortawesome/fontawesome/styles.css',
  ],
...

References

  1. 5 分鐘快速了解 FontAwesome 5, PJCHENder
  2. Nuxt Font Awesome 5
  3. Font Awesome