如何将使用Node.js制作的网站发布到Github Pages？

Question

如何将使用Node.js制作的网站发布到Github Pages？

156

我使用Node.js做了一个网站作为服务器。据我所知，Node.js文件需要在终端中输入命令才能开始工作，因此我不确定Github Pages是否支持Node.js的托管。那么我该怎么办？

- dyzdyz010

2

请注意 https://github.com/assemble/assemble，这是一个基于grunt.js的静态网站生成器。基本上您只需运行 grunt assemble 然后将其提交到gh-pages分支并推送，然后就可以开始运行了。 - jonschlinkert

Heroku 可能会对您有所帮助 https://www.heroku.com/ - Achraf

8个回答

45

我们这些喜欢Javascript的人不必使用Ruby（Jekyll或Octopress）在Github页面上生成静态页面，我们可以使用Node.js和Harp，例如：

以下是步骤。摘要：

Create a New Repository

Clone the Repository

git clone https://github.com/your-github-user-name/your-github-user-name.github.io.git

Initialize a Harp app (locally):
```
harp init _harp
```

确保文件夹名称以下划线开头；在部署到GitHub Pages时，您不希望源文件被提供。

Compile your Harp app
```
harp compile _harp ./
```

Deploy to Gihub

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

这是一个关于布局、部分模板、Jade和Less等好东西的详细教程，非常酷。

- Johann Echavarria

5

我是一名红宝石爱好者，但我会稍微作弊。口琴+谷歌页面的组合太棒了！ - Alter Lagos

4

在现有项目中安装harp时要小心！ - Mehul Tandale

Harp适用于客户端（静态）站点，但不适用于服务器端，对吗？ - Timo

@Timo 是的，Github Pages 的用法。 - Johann Echavarria

为什么需要它？我可以访问我的 Node 项目中 public 文件夹中的静态文件。也许它对于避免使用 public 文件夹并将静态文件移动到根目录或者在 Jekyll 的情况下移动到 sites 文件夹是有用的？ - Timo

11

我成功地设置了github actions，以便在每次将新的提交推送到主分支时，自动提交节点构建命令的结果（在我的情况下是yarn build，但也适用于npm）到gh-pages分支。

虽然这并不完全理想，因为我想避免提交构建文件，但目前似乎这是发布到GitHub Pages的唯一方法，并且适用于任何可以作为静态文件提供的前端Node.js应用程序（或使用React或Vue等前端框架构建的应用程序）。

我根据this指南为不同的React库制定了我的工作流程，并且必须进行以下更改才能使其适用于我的情况。

更新了“设置节点”步骤，使用找到的版本here，因为我基于的示例版本会抛出错误，因为它找不到正确的操作。
删除包含yarn export的行，因为该命令不存在，并且似乎没有添加任何有用的内容（您可能还想根据自己的需求更改其上面的构建行）。
我还在yarn build步骤中添加了一个env指令，以便我可以在我的应用程序中包含生成构建的提交的SHA哈希，但这是可选的。

这是我的完整 GitHub Action：

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的文档还提供了与Vercel的设置说明，Vercel似乎是一个类似于GitHub Pages的用于托管Node.js应用程序的服务。不过我还没有尝试过，所以无法对其运行效果进行评价。

- MoralCode

gh-pages 分支不再需要。 - Timo

1

这是真的，现在您可以从任何分支发布，不过我写gh-pages的原因是 - 为了发布 - 项目的编译输出需要提交到一个分支，因为那里是它托管的地方。由于提交编译或其他自动生成的代码可能会使存储库变得混乱，最好将其放在专门用于托管的单独分支上。这不是将基于Node.js/JS框架的站点发布到github pages的理想方式，但是自从我开始寻找解决方案以来，github还没有支持更好的方式。 - MoralCode

4

我想补充一点，这是完全可能的，因为我正在做。以下是我的操作方法：

（我假设您已准备好要发布的软件包和/或目录。）

在您的 package.json 根目录下添加：

"homepage": "https://{pages-endpoint}/{repo}",

其中pages-endpoint是您在存储库的设置 -> 页面部分指定的blah.github.io端点，而repo是您的存储库的名称。

然后确保您npm install --global gh-pages --save-dev。您需要--global以确保bin文件在您的PATH上，并且--save-dev应将其添加为依赖项在您的package.json中。

之后，只需npm run build && gh-pages -d build。 -d指定您的输出构建目录。标准是build，但我的是public。如果不同，请更改它。

最后，在设置 -> 页面部分，确保选择gh-pages作为托管的分支，并将目录保留为/（根）。构建完成后，您的站点应该在github.io端点上可用。

愉快的开发！

- Casey

1

我可以使用服务器端的Node函数吗？顺便说一下，gh-pages分支已经不再需要了。 (https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site) - Timo

4

不可以在 Github Pages 上发布内容。可以尝试使用 Heroku 或类似的平台。Github Pages 只能部署静态网站，无法部署服务器。

- Dingus45191

5

请提供更多细节，否则您的问题将毫无意义。如果仔细详细地解释和阐述，您的想法可能是公正合理的。 - Francisco Maria Calisto

刚刚按照你说的做了。 - Dingus45191

Heroku 将结束其免费计划。 - Yakk Ov

4

大多数答案都已经说了，Github Pages 只能处理 HTML、CSS 和前端 JS。

但是你可以使用像 Gatsby 这样的 JS 框架，它主要用于生成纯静态文件，它在编译时收集数据。

然后将生成的文件夹用作网站的目录。

- Jovylle

3

不可以，GitHub只允许托管静态网站（只有HTML、CSS和JavaScript）。

动态网站（带有数据库、服务器等）无法作为Github页面进行托管。而Node.js应用是一种基于服务器的网站，我们无法在Github上进行托管。您可以尝试使用Heroku、Openshift来托管您的网站。

- Manish Bharti

你可以将 Firebase 添加到你的网页中。 - Alexandre Senges

-46

将 Node.js 应用程序从本地推送到 GitHub 非常简单，只需按照以下步骤进行操作：

步骤：

首先在 GitHub 上创建一个新的存储库
打开已安装在系统中的 Git CMD（安装 GitHub Desktop）
使用命令将存储库克隆到您的系统中：git clone repo-url
如果尚未克隆到此克隆库，请将所有应用程序文件复制到此处
准备好提交所有更改：git add -A
提交跟踪的更改并准备将其推送到远程存储库：git commit -a -m "First Commit"
将本地存储库中的更改推送到 GitHub：git push origin master

- Ram

38

你所做的就是展示如何通过git将文件上传到Github repo，首先要理解问题再回答，这样你才能在StackOverflow上做出有意义的贡献。 - Precious Tom

9

你完全误解了这个问题。 - Christopher Thomas

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Akshat Jiwan Sharma · Accepted Answer

GitHub Pages仅托管静态HTML页面。不支持服务器端技术，因此Node.js应用程序无法在GitHub Pages上运行。如Node.js wiki所列出的，有许多托管提供商可供选择。

~~AppFog似乎是最经济实惠的选择，因为它为具有2GB RAM的项目提供免费主机服务（如果您问我的话，这还不错）。~~
如此说明，AppFog已删除了新用户的免费计划。

如果您想在GitHub上托管静态页面，请阅读此指南。如果您打算使用Jekyll，则此指南将非常有帮助。