Node.jsで作成したWebサイトをGithubページに公開する方法は?


103

Node.jsをサーバーとしてウェブサイトを作成しました。私が知っているように、node.jsファイルはターミナルでコマンドを入力することで機能し始めるので、Github Pagesがnode.js-hostingをサポートしているかどうかはわかりません。だから私は何をすべきですか?


2
見てくださいgithub.com/assemble/assembleをだけでなく、それはgrunt.jsに基づいて静的サイトジェネレータです。基本的にはgrunt assemble、git commitを実行してgh-pagesブランチにプッシュするだけで、すぐに実行できます。
jonschlinkert 2013

Herokuのは、あなたを助けるかもしれheroku.com
Achraf

回答:


102

GitHubページは静的HTMLページのみをホストします。サーバー側のテクノロジーはサポートされていないため、Node.jsアプリケーションはGitHubページで実行されません。Node.js wikiにリストされているように、多くのホスティングプロバイダーがあります

アプリフォグは、2 GBのRAMを備えたプロジェクトに無料のホスティングを提供するので、最も経済的であるように見えます(私に尋ねると、かなり良いです)。
ここ述べたように、AppFogは新しいユーザー向けの無料プランを削除しました。

GitHubで静的ページをホストする場合は、このガイドをお読みくださいJekyllの使用を計画している場合、このガイドは非常に役立ちます。


1
この例についてはどうですか?:idflood.github.io/ThreeNodes.js/public/index.html。あなたはどちらのコードを見てみた場合のNode.jsである:github.com/idflood/ThreeNodes.js
リリアンA. Moraruの

4
@ LilianA.Moraruこれはプロジェクトページです。プロジェクトページの場合、gh-pagesという特別なブランチを作成する必要があります。リポジトリのgh-pagesブランチを確認してください。純粋なhtmlファイルが含まれているため、リンクは実際にはgh-pagesブランチからのものです。
Akshat Jiwan Sharma

ちなみにいいレポ。
Akshat Jiwan Sharma

@Akshat_Jiwan_Sharmaあなたは正しいです。それは私が知っていたことでもありますが、今日私はgithubでこのサイトを見て、実際にNode.jsを使用できると思いました。それが組織の単なるリポジトリであることに気づかなかった。それがmasterブランチにあるものよりも組織自体である場合...
リリアンA.モラル2013

1
repl.itが無料のアプリホスティングをサポートするようになりましたが、メモリの量や、Gitリポジトリに接続する方法すらわかりません。ただし、小規模なプロジェクトには役立ちます。
Neil Chowdhury

32

JavaScript愛好家である私たちは、Ruby(JekyllまたはOctopress)を使用してGithubページに静的ページを生成する必要はありません。たとえば、次のようにNode.jsとHarpを使用できます。

これらはステップです。概要:

  1. 新しいリポジトリを作成する
  2. リポジトリのクローンを作成する

    git clone https://github.com/your-github-user-name/your-github-user-name.github.io.git
  3. Harpアプリを(ローカルで)初期化します。

    harp init _harp

フォルダー名の先頭には必ずアンダースコアを付けてください。GitHub Pagesにデプロイするときに、ソースファイルが提供されないようにする必要があります。

  1. Harpアプリをコンパイルする

    harp compile _harp ./
  2. Gihubにデプロイする

    git add -A
    git commit -a -m "First Harp + Pages commit"
    git push origin master

そして、これはレイアウト、パーシャル、Jade、Lessなどの素晴らしいものの詳細を含むクールなチュートリアルです。


3
私はルビー愛好家ですが、少し浮気します。ハープ+グーグルページの組み合わせは素晴らしいです!!!
ラゴスを変更する

3
既存のプロジェクトにハープをインストールするときは注意してください!
Mehul Tandale 16

1

新しいコミットがマスターにプッシュされるたびに、ノードビルドコマンドの結果(私の場合はnpmでも動作するはずです)を自動的にブランチにコミットするようにgithubアクションを設定できました。yarn buildgh-pages

ビルドされたファイルのコミットを避けたいので完全には理想的ではありませんが、これが現在githubページに公開する唯一の方法のようです。

私はこのガイドに基づいてワークフローを別の反応ライブラリに基づいており、それを機能させるために次の変更を行う必要がありました。

  • 「ノードのセットアップ」ステップを更新し、ここで見つかったバージョンを使用するように更新しました。サンプルのベースとなったものは、正しいアクションが見つからなかったためにエラーをスローしていたためです。
  • yarn exportそのコマンドが存在せず、役立つものは何も追加されていないように見えるため、を含む行を削除します(必要に応じて、その上のビルド行を変更することもできます)
  • また、ビルドを生成したコミットのSHAハッシュをアプリ内に含めることができるようenvに、yarn buildステップにディレクティブを追加しましたが、これはオプションです

これが私の完全なgithubアクションです:

name: github pages

on:
    push:
        branches:
        - master

jobs:
    deploy:
        runs-on: ubuntu-18.04
        steps:
        - uses: actions/checkout@v2

        - name: Setup Node
            uses: actions/setup-node@v2-beta
            with:
            node-version: '12'

        - name: Get yarn cache
            id: yarn-cache
            run: echo "::set-output name=dir::$(yarn cache dir)"

        - name: Cache dependencies
            uses: actions/cache@v2
            with:
            path: ${{ steps.yarn-cache.outputs.dir }}
            key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
            restore-keys: |
                ${{ runner.os }}-yarn-
        - run: yarn install --frozen-lockfile
        - run: yarn build
            env:
            REACT_APP_GIT_SHA: ${{ github.SHA }}

        - name: Deploy
            uses: peaceiris/actions-gh-pages@v3
            with:
            github_token: ${{ secrets.GITHUB_TOKEN }}
            publish_dir: ./build

代替ソリューション

next.js のドキュメントには、githubページに似たnode.jsアプリのホスティングサービスのように見えるVercelでの設定手順も記載されています。私はこれを試していないので、それがどれほどうまく機能するかについて話すことができません。


-26

ノードのjsアプリケーションをローカルからGitHubにプッシュするのは非常に簡単な手順です。

手順:

  1. まず、GitHubに新しいリポジトリを作成します
  2. システムにインストールされているGit CMDを開きます(Install GitHub Desktop
  3. 次のコマンドを使用して、リポジトリをシステムにクローンします。 git clone repo-url
  4. すべてのアプリケーションファイルが存在しない場合は、このクローンライブラリにコピーします。
  5. コミットする準備をすべて整えます。 git add -A
  6. 追跡された変更をコミットし、リモートリポジトリにプッシュされるように準備します。 git commit -a -m "First Commit"
  7. ローカルリポジトリの変更をGitHubにプッシュします。 git push origin master

14
あなたがしたのは、gitを介してGithubリポジトリにファイルをアップロードする方法を示し、回答を残す前にまず質問を理解し、StackOverflowで有意義な貢献をすることです
Precious Tom

1
あなたは質問を完全に誤解しました
Christopher Thomas

間違った答えです、これは尋ねられたものではありません
Mr_Hmp
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.