githubで個人プロジェクトを作成する方法のオンラインプレゼンテーションdemo

前言
Githubは現在優秀な同性交友プラットフォームとして、多くの優秀なオープンソースプロジェクトを維持している.現在、Githubのフロントエンドに関する項目も数え切れないほどあり、Vue、React、Angularなどです.自分も公式ドキュメント+githubで新しい技術とフレームワークを学びます.githubで関連項目を検索すると、良いドキュメントを書くだけでなく、プロジェクトのオンライン実行Demoも与えられている項目があります.事実は雄弁に勝っており、オンラインプレゼンテーションはプロジェクトにより良い印象を与える可能性があります.githubで自分の個人プロジェクトのソースコードを維持しながらプロジェクトのホームページを生成するにはどうすればいいですか?
Githubプロジェクトのホームページ
Githubはユーザーに静的ページを実行するアドレスを提供し、個人プロジェクトの静的ページをどのように表示しますか?以下に、プロジェクトのホームページを作成するキーを示します.

gh-pagesブランチ

アクセスアドレス:[githubユーザ名].github.io/[プロジェクト倉庫名]例えば:monster 1935.github.io/vue-example

生成プロジェクトホームページは,まず,表示したい静的ページをプッシュするGithubパーソナルプロジェクトウェアハウスのgh-pagesブランチの下にあり,上記のアクセス形式でアクセスする.
ソースコードを維持しながらプロジェクトのホームページを同時に生成する方法
以下では、Vueの単一ページアプリケーションを例に、完全なプロジェクトメンテナンスおよびプロジェクトホームページの生成手順を示します.
一、Github上にリモート倉庫を作成する
githubで個人プロジェクトのリモートウェアハウスを作成します.以下に示します.
二、cloneリモート倉庫からローカルへ
リモート・ウェアハウスを作成したらgitツールを使用してリモート・ウェアハウスcloneをローカルに次のようにします.
三、vue-cliを使用してvue単ページ応用プロジェクトを生成する
プロジェクトルートディレクトリに入り、vue-cliを使用してvueのプロジェクトの初期構造を生成します.手順は次のとおりです.

#  webpack        
vue init webpack vue-example

vue-cli足場ツールを使用してvueプロジェクトを生成する過程で、いくつかの補助ツールライブラリをインストールするかどうか、自分のプロジェクトの要求に応じて適宜インストールするか、プロジェクトを生成してインストールするかどうかをプロンプトされます.
プロジェクトの生成が完了するとpackageに入ります.jsonが存在するディレクトリはnpm installコマンドを実行し、プロジェクトの実行に必要な依存をインストールします.
依存インストールが完了すると、npm run devコマンドを実行してローカルのwebpack-dev-serverを起動して開発デバッグを行います.下図に示すように、vueプロジェクトの初期化が完了したことを示す画面が表示されます.後期はこの基礎の上で自分のプロジェクトの開発を行うことができます.
四、プロジェクトをリモート倉庫にプッシュする
プロジェクト開発中にgithubリモートウェアハウスにプロジェクトソースコードをプッシュして管理できます.

git add --all

git commit -m 'Initial the vue project'

git push 

五、プロジェクト構築コマンドを実行し、構築後の静的ページをgh-pagesブランチにプッシュする
プロジェクト開発完了後、 npm run build パッケージファイルを実行し、ファイルのパッケージ配布プロセスを行うことができる.

gh-pagesブランチ git checkout -b gh-pages

に切り替える.

npm run build コマンドを実行し、コード

を構築する.

distディレクトリの下のすべてのフォルダをリモートウェアハウスのgh-pagesブランチにプッシュし、次のコマンドを実行します:

#     dist   ，  .gitignore           
git add -f dist

#         
git commit -m 'Initial the page of project'

#   dist      
git subtree push --prefix dist origin gh-pages

注意:git subtreeコマンドを使用すると、ソースコードと構築コードを同じブランチで維持でき、配置時にdistディレクトリの下の内容だけをプッシュできます.
小結
以上説明したgithub上のgh-pagesブランチ上でのプロジェクトの生成ホームページは、主にgithubが提供する静的ページ解析機能を利用しているため、本明細書に属する範囲は静的ページの配置にのみ使用される.Vueアプリケーションをgh-pagesブランチに配備すると、vueのwebpack構成がパッケージ化時にpublicPathがルートパスであり、静的ページがサーバにアクセスされている場合に上記の問題が発生しないため、一部のリソースがロードできないという問題が発生する可能性があります.github解析時にルートパス解析でエラーが発生するため、githubに静的ページを配置する際にpublicPathを現在のディレクトリ、すなわち publicPath: './' に設定することを考慮できます.
Vue-cli webpackテンプレートで生成するvue項目は、上記の問題が発生する場合はconfig/indexを設定.jsのbuildオブジェクトの下のassetsPublicPathフィールドはassetsPublicPath: './'で、原理はpublicPathフィールドを設定することです.
更新
github gh-pagesにより簡単に導入できる方法が発見され、gh-pagesはローカルプロジェクトからgithubへのコミットプロセスをより簡単に管理することができます.詳細はvue-ghpages-testを参照してください.