How to publish a website made by Node.js to Github Pages?

Question

I made a website using Node.js as the server. As I know, the node.js file should start working by typing commands in terminal, so I'm not sure if Github Pages supports node.js-hosting. So what should I do?

Kadner

Take a look at github.com/assemble/assemble as well, it's a static site generator based on grunt.js. Basically you just run grunt assemble then git commit and push to the gh-pages branch and you're off and running. – Preindicate

Heroku may help you heroku.com – Adel

Answer 1

GitHub pages host only static HTML pages. No server side technology is supported, so Node.js applications won't run on GitHub pages. There are lots of hosting providers, as listed on the Node.js wiki.

App fog seems to be the most economical as it provides free hosting for projects with 2GB of RAM (which is pretty good if you ask me).
As stated here, AppFog removed their free plan for new users.

If you want to host static pages on GitHub, then read this guide. If you plan on using Jekyll, then this guide will be very helpful.

Chimpanzee

What about this example then?: idflood.github.io/ThreeNodes.js/public/index.html . Which is on Node.js if you take a look at the code: github.com/idflood/ThreeNodes.js – Differentiation

@LilianA.Moraru That is a project page.For project pages a special branch has to be created called gh-pages.Take a look at the gh-pages branch of the repository.It contains pure html files.So everything you see on the link is actually from the gh-pages branch. – Chimpanzee

@Akshat_Jiwan_Sharma You are right. That's also what I was knowing, but today I saw this site on github and thought that you can actually use Node.js. I didn't observe that it was just a repository in the organization. If it was the organization itself than it would of been in the master branch... – Differentiation

repl.it now supports free app hosting, though I am not sure how much memory it has, or even how to connect it to Git repositories. It might be useful for small projects, though. – Spieler

@AkshatJiwanSharma gh-pages branch not needed anymore. – Imprecision

Answer 2

We, the Javascript lovers, don't have to use Ruby (Jekyll or Octopress) to generate static pages in Github pages, we can use Node.js and Harp, for example:

These are the steps. Abstract:

1. Create a New Repository

2. Clone the Repository

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

3. Initialize a Harp app (locally):

   harp init _harp
   

make sure to name the folder with an underscore at the beginning; when you deploy to GitHub Pages, you don’t want your source files to be served.

4. Compile your Harp app

   harp compile _harp ./
   

5. Deploy to Gihub

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

And this is a cool tutorial with details about nice stuff like layouts, partials, Jade and Less.

Narrowminded

I'm a ruby lover, but I'll cheat it a little bit. The combination of harp + google pages is awesome!!! – Murk

Be careful when installing harp on an already existing project! – Constanceconstancia

Harp is for client side (static) sites, but not for server side, right? – Imprecision

@Imprecision yes, Github Pages use case – Narrowminded

Why do I need it? I can access static files in my node project's public folder. Maybe it is useful for avoiding this public folder and moving the static files to root or, in case of Jekyll to sites folder? – Imprecision

Answer 3

I was able to set up github actions to automatically commit the results of a node build command (yarn build in my case but it should work with npm too) to the gh-pages branch whenever a new commit is pushed to master.

While not completely ideal as i'd like to avoid committing the built files, it seems like this is currently the only way to publish to github pages and should work for any frontend Node.js app (or app built with a frontend framework like React or Vue) that can be served as static files.

I based my workflow off of this guide for a different react library, and had to make the following changes to get it to work for me:

• updated the "setup node" step to use the version found here since the one from the sample i was basing it off of was throwing errors because it could not find the correct action.
• remove the line containing yarn export because that command does not exist and it doesn't seem to add anything helpful (you may also want to change the build line above it to suit your needs)
• I also added an env directive to the yarn build step so that I can include the SHA hash of the commit that generated the build inside my app, but this is optional

Here is my full 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

Alternative solution

The docs for next.js also provides instructions for setting up with Vercel which appears to be a hosting service for node.js apps similar to github pages. I have not tried this though and so cannot speak to how well it works.

Haga

gh-pages branch not needed anymore. – Imprecision

That is true, you can now publish from any branch, however, the reason i wrote it as gh-pages is that - in order to publish - the compiled output of a build for your project needs to be committed to a branch because that is where it is hosted from. Because committing compiled or otherwise autogenerated code can clutter up a repository, it is best to have it on its own separate branch solely for hosting. This is not an ideal way to publish Node.js/JS-framework-based sites to github pages, but github hasnt supported any better way for as long as I have been looking for a solution. – Haga

Answer 4

No, You cannot publish on Github pages. Try Heroku or something like that. You can only deploy static sites on github pages. You can't deploy a server on github pages.

Gibran

Please provide more details. Otherwise, your question will be useless. Your idea would be fair if explained carefully and in detail. – Boarder

just did what you said – Gibran

Heroku is ending it's free plans – Numbskull

Answer 5

I would like to add that it IS very much possible, as I am doing it right now. Here's how I'm doing it:

(I'm going to assume you have a package and/or directory ready to publish.)

In the root of your package.json, add

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

Where the pages-endpoint is the blah.github.io endpoint you specified in the Settings -> Pages portion of your repository, and repo is the name of your repository.

Then make sure you npm install --global gh-pages --save-dev. You need the --global to ensure the bin file is on your PATH and --save-dev should add it as a dependency in your package.json

After that, just npm run build && gh-pages -d build. The -d specifies your output build directory. The standard is build, but mine was public. If it's different, just change it.

Lastly, make sure in the Settings -> Pages section, you select gh-pages as the branch to host and leave the directory as / (root). Once it's built, your site should be available at your github.io endpoint.

Happy Dev-ing!

Circumcision

Can I then use server-side node functions? BTW:gh-pages branch not needed anymore. – Imprecision

Answer 6

ahm. Yep, as most answer says. Github Pages only process html and css and a front-end JS.

But you can use JS framework like Gatsby which is mainly known to generate static purely static files, it gathers the data on compilation.

Then use that generated folder as the directory of the site.

Senhauser

Answer 7

No, GitHub allows hosting only static websites(having only HTML, CSS, javascript).

Dynamic websites(having databases, servers, and all) can't be hosted as a Github page. And node.js app is a server-based website, we can't host it on Github. You can try Heroku, Openshift to host your website.

Rootstock

You could add a firebase to your web page though – Dustin

Answer 8

Reading these answers it makes sense to me that Github Pages would not host anything but a static site so you could not host a Node JS site there.

However what confuses me is that there answers concerning something called Harp which I guess is similar to Jekyll in that you can convert a Node JS app into a static website. I get why you would want to do this in Ruby if you already developed something in Ruby and there wasn't any logic going on that couldn't be done by the client Jekyll could convert it to vanilla JS, HTML, and CSS.

What I don't get is why there would ever be a need to do this with Node JS since you are writing the application in JS anyhow. What would you gain by building an app that would run server side with Node JS then using Harp to convert it as opposed to just linking your JS to HTML using a script tag? Can you get extra functionality that you otherwise wouldn't have like using API apps to automate e-mails and getting it to convert with Harp?

Backhouse

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review – Nuisance