次の展開.githubページへのJSアプリ

このブログは、HTML、CSS、ブートストラップに依存するウェブサイトを再構築する文書です.JSは次を使用します.JSフレームワークは、パフォーマンスを改善し、コストを削減し、将来の変更のための私のワークフローを増加させる.

2021 Update
I have moved Wallis Consultancy from GitHub Pages to Vercel. . Essentially, Next.js integrates with Vercel a lot better than with GitHub Pages.
I've kept a version of Wallis Consultancy hosted on GitHub pages for this blog and have updated all links to Wallis Consultancy below.
Having said that, GitHub Pages is 100% still a good place to host your Next.js project!

完成したウェブサイト(githubページでホストされています)https://james-wallis.github.io/wallisconsultancy/
ソースコード:https://github.com/james-wallis/wallisconsultancy

ノーイントロ

Wallis Consultancyの再実装JSのアプリケーションが完了です.このブログ記事は、次を取るプロセスを文書化します.JSSプロジェクトとGithubページでのホスティング.カバーする

使用next export を変換します.静的ウェブサイトへのJSプロジェクト.

ウェブサイトを構築し、それをAにプッシュするためにTravisパイプラインを構築するgh-pages 枝.

技術の概観

Githubページ

GitHub Pages is a static site hosting service that takes HTML, CSS, and JavaScript files straight from a repository on GitHub optionally runs the files through a build process and publishes a website.

GitHub Pages

トラビス

Travis CI is a hosted continuous integration service used to build and test software projects hosted at GitHub and Bitbucket.

それはオープンソースプロジェクトのための無料であり、自動的にGithubと統合します.あなたがしなければならないすべては.travis.yml ファイルと行く準備が整いました.
Travis CI

次。jsエクスポート

next export allows you to export your app to static HTML, which can be run standalone without the need of a Node.js server.

にHTMLを生成するout ディレクトリ.そこからツールを使用することができますserve あなたのアプリケーションを実行します.
このブログで使用されている技術が導入されましたので、次のようにしましょう.githubページへのJSアプリ.

Travisビルドの作成

githubリポジトリにTravisを接続することは、A.travis.yml . 以下のドキュメントは、このプロセスとトラヴィスビルドで秘密環境変数を使用する方法です.

クリエイトア.travis.yml githubリポジトリの一番上のディレクトリにあるファイル.

以下のコメントを追加します.

language: node_js # Node.js based project
node_js:
  - 12 # Level of Node.js to use
cache:
  directories:
  - node_modules # Cache the node_modules folder for quicker build times
script:
  - npm run build # Runs next build
  - npm run export # Runs next export and generates the out directory
  - touch out/.nojekyll # Creates a file telling Github not to build the project using Jekyll
deploy:
  provider: pages # Informs Travis this is a deployment to GitHub Pages
  skip_cleanup: true # Prevents Travis from resetting the working directory made during the build
  github_token: $github_token # GitHub access token to use when pushing to the gh-pages branch
  local_dir: out # Directory to push to the gh-pages branch
  on:
    # Only deploy when the build is on master or main branch - two common default branch names
    # If you're using a different branch name, add it here
    all_branches: true
    condition: $TRAVIS_BRANCH =~ ^(master|main)$

詳しくはofficial Travis Github Pages docs

したら、あなたは.travis.yml リポジトリには、github_token あなたにプッシュする必要がありますgh-pages Travis CIの設定に変数を設定します.

最初にAPIトークンを取得するCreating a personal access token - GitHub Docs 注:このブログを作っている間、私のリポジトリはプライベートだったので、全体をrepo スコープ.しかし、あなたはちょうどpublic_repo スコープ.

フルgithubレポスコープ

オープンhttps://travis-ci.com/github/{your_username}/{your_repository} ブラウザで.

より多くのオプション->設定に移動します.

トラビス設定

一度新しいenvironment variable 呼ばれるgithub_token そして、あなたのアクセストークンをvalue . 必要に応じてマスターブランチでのみ利用可能にします.

環境変数

今、あなたはTravis設定を設定して.travis.yml あなたの最初のTravisビルドを開始する準備が整いました.これを行うには、新しい.travis.yml マスターブランチに自動的に起動します.あなたが既にこれをしたならば、Travis CI UIからマスターの新しい構築を始めてください.

Phew、それは多くの設定でした、しかし、それはされます.ウェブサイトが見えるように、githubページを設定しましょう.

セットアップgithubページ

この時点で、Travisビルドは正常に完了し、作成してくださいgh-pages あなたの倉庫のブランチ.これは、静的なウェブサイトコードが利用可能であり、ちょうどどこかgithubページのようにサーブする必要があることを意味します.

あなたは、見ることができるべきですgh-pages 枝.
必要なリポジトリのgithubページを有効にするには、次の手順に従います.

Githubリポジトリの設定タブに移動しますhttps://github.com/james-wallis/wallisconsultancy/settings )

“githubページ”セクションにスクロールします.

タブの下にgh-pages branch
Githubページの設定

少しの間、あなたがあなたのウェブサイトにアクセスすることができなければなりません.これは、Githubページで静的サイトをホストするために必要なセットアップです.
または.

何かが正しくない.CSSスタイリングはどこですか

あなたが上記の両方のセクションに従うならば、あなたはそれがあなたのローカルマシンを見たので、あなたのウェブサイトを見たいと思っています.
代わりに、おそらく正しいコンテンツを使用してウェブサイトで挨拶されるが、スタイリングはありません.また、ページ間を移動しようとすると解決しません.次のようになります.

CSSのないWallisコンサルティングサイト
なぜ、あなたが尋ねるこの出来事ですか?
次.JSは、CSS、JavaScriptファイルとイメージをホストすることを期待しますuser.github.io/ しかし、githubページの場合、サイトは私のケースで、subpathでホストされますuser.github.io/wallisconsultancy . この結果、ウェブサイトでは依存関係や他のページへのリンクを見つけることができません.
このローカルで実行することにより、これを再現することができますnext export それからserve 出力ディレクトリの親ディレクトリを提供するout ). だから私にserve wallisconsultancy 出力ディレクトリがwallisconsultancy/out .
OK、しかし、我々はそれを修正することはできますか?
もちろん!
注:カスタムドメイン上でホストするつもりならば、この問題は消えます(Githubページのようなサブパスを使用していない限り).このブログの残りをスキップして、次のブログを読んでください.

次へ。AjsetPrefixとベースパス

この次のセクションは2つのサブセクションに分割されます.最初に、CSSのスタイリングやその他の資産をイメージを使用して修正しますassetPrefix . 二つ目は別のページへのリンクを固定し、最初にルートをプレフィックスする環境変数を使い、次にbasePath , 新しい設定変数がNext.js 9.5 .

固定CSSとその他の資産

固定CSSと他の資産は簡単ですし、いくつかの手順だけで行うことができます:

オープンまたは作成するnext.config.js file .

追加するassetPrefix あなたにmodule.exports いずれかの側で前方スラッシュを使用してgithubページのサブパスの値を使用します.私にとってこれは

module.exports = {
    assetPrefix: '/wallisconsultancy/',
}

その単純な変更で、あなたはその変更をGithubページにプッシュすることができて、あなたが期待するページレイアウトを見ることができるでしょう.

ページ間のリンクの修正

次.JS 9.4以降
次の前に.ページのリンクを修正する<Link> あなたが持っていたそれはprefix . これを実現する最も簡単な方法は、

オープンまたは作成するnext.config.js file .

環境変数の追加BACKEND_URL 開始時に前方スラッシュを使用してgithubページのサブパスの値を指定します.私にとってこれは

module.exports = {
    env: {
        BACKEND_URL: '/wallisconsultancy',
    },
}

変更する<Link> 以下のように変更することでプレフィックスを使用するコンポーネント

<Link href={`${process.env.BACKEND_URL}${href}`}>{href}</Link>

それで、およそページへのリンクのためにhref のために<Link> から変更する

href="/about"

to

href={`${process.env.BACKEND_URL}/about`}

これは少し厄介ですが、幸いにも、次は.JS 9.5これはAの導入で簡素化されたbasePath 変数.
次.JS 9.5以降
Aの代わりにBACKEND_URL あらゆる<Link> , Next.js 9.5 introduces the basePath variable . 使う必要があるのは、

オープンまたは作成するnext.config.js file .

加えるbasePath あなたにmodule.exports 開始時に前方スラッシュを使用してgithubページのサブパスの値を指定します.私にとってこれは

module.exports = {
    basePath: '/wallisconsultancy',
}

ファイナルネクスト.設定。js

組み合わせassetPrefix and basePath マイnext.config.js は

module.exports = {
    basePath: '/wallisconsultancy',
    assetPrefix: '/wallisconsultancy/',
}

ボーナス:とnext-optimized-imagesイントロダクションnext-optimized-images これは、画像を圧縮することにより、ウェブサイトのパフォーマンスを向上させるために使用することができます.
githubページのサブパスの問題を修正するにはimagesPublicPath 私の変数next.config.js . この修正でこのようになります.

const withPlugins = require('next-compose-plugins');
const optimizedImages = require('next-optimized-images');
module.exports = withPlugins([
  [optimizedImages, {
    mozjpeg: {
      quality: 80,
    },
    pngquant: {
      speed: 3,
      strip: true,
      verbose: true,
    },
    imagesPublicPath: '/wallisconsultancy/_next/static/images/',
  }],
  {
    basePath: '/wallisconsultancy',
    assetPrefix: '/wallisconsultancy/',
    env,
  },
]);

そして、それで、私のウェブサイトはGithubページでホストされて、よく見えます、そして、私は私が予想するように、ページの間で進むことができます.今、世界中の誰にもあなたのウェブサイトを表示することができます!
Here's the link to Wallis Consultancy again to see the result of the above steps!

ラウンドアップ

このブログでは、次のビルドとエクスポートを行うTravisビルドをどのように構築するかを示しました.静的ウェブサイトへのJSアプリケーション.それから、私はそれからウェブサイトと固定されたCSSとリンク問題をホストするためにGithubページを設定しました、そして、Subpathはそれにウェブサイトをホストします.
このシリーズの次のブログでは、Githubページでカスタムドメインを使用する方法を紹介します.