如何将Node.js创建的网站发布到Github Pages?


103

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


2
还要看看github.com/assemble/assemble,它是一个基于grunt.js的静态站点生成器。基本上,您只是运行grunt assemble然后git commit并推送到gh-pages分支,然后就可以运行了。
jonschlinkert

Heroku可能会帮助您heroku.com
Achraf

Answers:


102

GitHub页面仅托管静态HTML页面。不支持服务器端技术,因此Node.js应用程序不会在GitHub页面上运行。如Node.js Wiki上列出的,有很多托管服务提供商。

应用程序雾似乎是最经济的,因为它为具有2GB RAM的项目提供免费托管(如果您问我,这是相当不错的)。
如此处所述,AppFog删除了新用户的免费计划。

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


1
那么这个示例呢?:idflood.github.io/ThreeNodes.js/public/index.html。如果您看一下代码,它将
Lilian A. Moraru 2013年

4
@ LilianA.Moraru这是一个项目页面。对于项目页面,必须创建一个名为gh-pages的特殊分支。看看存储库的gh-pages分支。它包含纯HTML文件。链接实际上来自gh-pages分支。
Akshat Jiwan Sharma

尼斯回购。
Akshat Jiwan Sharma

@Akshat_Jiwan_Sharma你是对的。这也是我所知道的,但是今天我在github上看到了这个站点,并认为您可以实际使用Node.js。我没有发现它只是组织中的存储库。如果它是组织本身,而不是原来在分支机构中...
Lilian A. Moraru 2013年

1
repl.it现在支持免费的应用程序托管,尽管我不确定它有多少内存,甚至不确定如何将其连接到Git存储库。但是,它对于小型项目可能很有用。
尼尔·乔杜里

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

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


3
我是一个红宝石爱好者,但我会作弊一点。竖琴和谷歌页面的组合很棒!!!
Alter Lagos

3
在现有项目上安装竖琴时要小心!
Mehul Tandale'9

1

我能够设置github操作以自动将节点构建命令的结果提交(yarn build对于我而言,但它也应与npm一起使用)gh-pages每当新的提交被推送到master时,分支。

虽然我不想避免提交生成的文件,这并不是完全理想的,但似乎这是当前发布到github页面的唯一方法。

我基于指南的工作流使用了一个不同的React库,并且必须进行以下更改以使其对我有用:

  • 更新了“设置节点”步骤,以使用此处找到的版本因为我基于它的示例中的抛出错误,因为它找不到正确的操作。
  • 删除包含的行 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应用程序的托管服务。我还没有尝试过,因此无法说明它的工作原理。


-26

将节点js应用程序从本地推送到GitHub的步骤非常简单。

脚步:

  1. 首先在GitHub上创建一个新的存储库
  2. 打开已安装到系统的Git CMD(安装GitHub桌面)
  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 repo,在回答之前先了解问题,以便您在StackOverflow上做出有意义的贡献
Precious Tom

1
您完全误解了这个问题
Christopher Thomas

错误的答案,这不是要问的问题
Mr_Hmp
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.