見出し画像

簡易CMSで無料ブログを公開、 Guthub Pagesでの公開 #Vue #Vue-CLI #javascript

■ 概要:

CMSのアップデート内容で、Guthub Pages対応の修正や
設置の手順等となります

・cms.json の読込パス修正
・css読込修正
・vue.config.js の追加

・前は、
 netlifyに設置して。ドメイン直下にCMSを配置しましたが。
 今回は、Github Pages のドメイン直下でなく
 プロジェクト単位で、サイトを追加する。
 下層フォルダに、CMS配置するような例となります。

■ 環境

Vue CLI
dexie : 3.0.1
vue: 2.6.11
vue-router

■ 参考のコード

■ 設定の手順

・github pageの設置方法で、プロジェクト単位で設置する場合が
 対象になります。
設置するURLが、下記のように。user + [.github.io] / project
になるイメージです。

例:
https://user123.github.io/proect123

・vue.config.js の変更 

https://github.com/kuc-arc-f/vue_spa3cms3/blob/master/vue.config.js

プロジェクト名= sample に、配置する場合です,
Vue-cliの、ルートパス変更手順と。同様ですが
publicPath を、修正します

module.exports = {
 publicPath: '/sample',
}

・設定すると、下記URLで。CMS公開できます
https://user123.github.io/sample

・上記の設定後、Vue build (npm run build)

して、上記プロジェクトに、push

github pageの設定が、完了すれば。公開されます。

・前と、同様ですが
 投稿データ等は、CMS編集機能で、編集、jsonエクスポートし
 jsonファイルのみ、pushすれば、編集内容が公開されます

■ 参考の、デモのページ
https://kuc-arc-f.github.io/cms-sample

■ 参考のコード

・前の、表示機能

・編集機能

ここから先は

0字

IndexedDB, Vue CLI 開発の事例、ノウハウに関する記事を集めました。 ■ 免責事項 / 注記 , 内容について動作確認…

この記事が気に入ったらサポートをしてみませんか?