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

Question

我使用Node.js作为服务器创建了一个网站.我知道,node.js文件应该通过在终端中键入命令开始工作,所以我不确定Github Pages是否支持node.js-hosting.所以我该怎么做？

Answer 1

GitHub页面仅托管静态HTML页面.不支持服务器端技术,因此Node.js应用程序不会在GitHub页面上运行.Node.js维基上列出了许多托管服务提供商.

App雾似乎是最经济的,因为它为2GB内存的项目提供免费托管(如果你问我,这是非常好的).
如上所述,AppFog删除了他们对新用户的免费计划.

如果您想在GitHub上托管静态页面,请阅读本指南.如果您打算使用Jekyll,那么本指南将非常有用.

Answer 2

我们,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页面时,您不希望提供源文件.

4. 编译你的Harp应用程序

   harp compile _harp ./
   

5. 部署到Gihub

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

而这是一个很酷的教程约不错的东西一样的布局,泛音,玉石和较少的细节.

Answer 3

我能够设置github 操作，以便每当将新提交推送到 master 时，自动将节点构建命令的结果（yarn build在我的情况下，但它也应该与 npm 一起使用）提交到分支。gh-pages

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

我的工作流程基于本指南针对不同的反应库，并且必须进行以下更改才能使其为我工作：

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

这是我完整的 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的文档还提供了使用Vercel进行设置的说明，Vercel 似乎是类似于 github 页面的 Node.js 应用程序的托管服务。不过我还没有尝试过，所以无法评价它的效果如何。