deploying a project without .html files

[gasimmammadov1]

Select Topic Area

Question

Body

Hello. i just discovered "github pages". i want to deploy a project. it was originally a project consisting of html files, but then i converted it to .handlebars files using node.js. now i want to deploy the final version of my project, but it didn't work. but it worked with the initial html files. could you help me?

[WizzzStark]

Deploying your project with GitHub Pages requires the content to be in static HTML, CSS, and JavaScript files as far as I know, GitHub Pages serves static content, which dont includes template engines like Handlebars. When you converted your project to use Handlebars, your project likely became dependent on Node.js to render the HTML content from the Handlebars templates at runtime. To deploy your Handlebars-based project on GitHub Pages, you will need to convert your Handlebars templates back into static HTML files.

Maybe a website like this coud help you translating templates to html:

https://www.takeymakey.com/convert/code/handlebars-to-html/

I hope it helped you ^^

[gasimmammadov1]

I am grateful for your answer. is there any platform that offers a cloud service where I can deploy my project containing handlebars? and it would be very good if I could deploy all type the code, not just handlebars.

[WizzzStark]

Yeah I think so, I use vercel and sometimes netlify, I recommend you try with vercel:

Here is the link,
https://vercel.com/

Its really easy so dont worry. You just have to link your git repository and it automatically deploys the website

Before deploy configure your project settings if needed. Vercel tries to auto-detect the framework and sets build commands automatically. For a Node.js app using Handlebars, you may not need to change much, but ensure the Build and Output Settings are correct for your project. For a simple Handlebars project, you might not have a build step, but for more complex setups, specify the commands required to build your project.

Once everything is set up, click Deploy. After deployment, Vercel provides a URL to view your live application. This URL is automatically generated but can be customized in your project settings.

One of the advantages of using Vercel is its support for continuous deployment. Every time you push changes to your repository (to the branch you've deployed), Vercel automatically deploys the new changes.

I have never tried personally with hanldebars but it should work and its really fast to try.

Let me know if it works! I hope so ^^

[ThanggA7]

GitHub Pages is designed to host static websites, meaning it primarily supports HTML, CSS, and JavaScript files1. When you converted your project to use Handlebars (a templating engine for Node.js), it became a dynamic application. GitHub Pages doesn’t natively support server-side languages like Node.js, which is required to render Handlebars templates into HTML.

[jdevfullstack]

I would not know the extent of your application but all BE is not for GitHub Pages, but if you are advanced enough, you can separate the logic of frontend and backend, so your full frontend only runs using GitHub Pages and your CRUD through backend's API, much like the GitHub API that any frontend service can use

regarding your situation, I think Copilot has a great suggestion but I don't know if it's applicable in your situation, this is like pre-building the static site, here it is

---

If you want to stick with GitHub Pages, you'll need to pre-render your Handlebars templates into HTML. This can be done as part of your build process. For example, you could use a task runner like Gulp or Grunt to compile your Handlebars templates into HTML files whenever you make changes. These HTML files can then be served by GitHub Pages.

Here's a basic example of how you might set up a Gulp task to compile Handlebars templates:

const gulp = require('gulp');
const handlebars = require('gulp-compile-handlebars');
const rename = require('gulp-rename');

gulp.task('templates', function () {
    const templateData = {}, // Your template data goes here
        options = {
            ignorePartials: true,
            batch: ['./src/partials']
        };

    return gulp.src('src/**/*.handlebars')
        .pipe(handlebars(templateData, options))
        .pipe(rename({ extname: '.html' }))
        .pipe(gulp.dest('dist'));
});

This Gulp task compiles all Handlebars templates in the src directory and outputs the resulting HTML files to the dist directory. You could then configure GitHub Pages to serve the dist directory.