Is it possible to serve a static site, not necessary a hugo one, using hugo server command?
cd /path/to/some/static_site
hugo server [option for watching and serving site(NO BUILDING)]
The idea is to use Hugo as a live server during development
even for none Hugo sites since it does the job well. Was hoping
to avoid pulling in additional build dependency.
Instead of using the command hugo server, you can just use the command hugo (without any option), and Hugo will render all the content to the /public directory. Then, configure your hosting so that your website points to this directory and you will have a static site.
You can alos use hugo --minify if you want to minify your content in the /public directory.
Related
I have been trying to run my react application on a subdirectory .
I am using a load balancer (ALB) to and redirecting my application on "directory" from "https://mydomain/directory".
But static file of the build was not being found by my application
added direcctory on package.json. "homepage": "/directory"
added basename on react-router-dom
in my networks index.html is looking for ".#####/directory/static/js" and css in the same way
i am only able to run my react build by redirecting static request to my react build, but this is not the good solution because i want to run 3 applications on my ALB and this will cause me change my assets folder name manually in the build, obviously don't want to do that.
I have been applying multiple solutions but couldn't find a proper solution please someone help in this.😑
ALB doesn't do redirects, and it doesn't do any sort of request path rewriting, it simply forwards the request to the target. You need to setup your server so it is actually serving the website from that folder, in other words change your assets folder name in the build.
If you don't want to do that, you would need to look at other AWS solutions like CloudFront which can proxy the request to a different path on the origin server.
I had a scenario of publishing react app with nginx inside docker with ci/cd. It took me setup a separate express server to serve app files and resolved the issue. Here is the repository synopsis of server.js that might help:
https://github.com/mkhizerali/store-pwa/blob/master/express/index.js
Can I deploy Gatsby static pages on Godaddy server? I am not sure if that's possible.
If you have SSH/SFTP access to your server on GoDaddy (which you should), you can use any CI tool to deploy your Gatsby site.
Tools you can use are for example:
Buddy
CircleCI
Another option is to use a hoster specialized on static pages like github pages or netlify.
If you want to deploy your static website on a normal server without CI, you can run
gatsby serve -p 80 -H <your private IP address>. Replace with the IP address you get from ifconfig on linux or ipconfig on windows.
I end up building my own framework with ReactJS, now all I have to do is execute
npm run build
to create an optimized build in build directory
Zip everything from build folder.
Go to godaddy CPanel->filemanger-> public html
Upload the zip file from build folder into public html
Right click to unzip it and we are good to go
See the live demo http://hiteshsahu.com/topics
I am new in Hugo and I already created the home page ready with prebuild theme which I found on https://github.com/giraffeacademy/ga-hugo-theme but now I want to make it live on my Hostgator server so what I did after override my theme I run the command
from hugo server -D to hugo
then I see the public folder and I just used that and make it live here
http://webdemoapp.com/Bravocore/
my question is: Is this the right way to make it live? or have to install the hugo server on hostgator?
Note:I have window10 where I am working with hugo server
TLDR: Using just hugo is the right way. Source: Hugo Docs
The hugo server command is normally used for debugging purposes. To build the page itself use just hugo as command and it will generate the content within the public/ folder. You can then just upload everything to your hoster. There it should be distributed through e.g a Apache or Nginx webserver. Those are mostly preinstalled.
Typically, you should run hugo and hugo server only on your local machine where you also write the content for your website. When you run hugo, it will generate static HTML, CSS and JS which you should then upload to an appropriate webhoster or other server.
The whole point of static site generators is not having to run much or any specific backend stuff on the server to render the content of your website.
U don't need to install Hugo on ur server. Build the Hugo site by running Hugo and then the build will create a set of files which will be basic HTML pages, Upload the files to the server. The server can serve these Html pages.
U can run a Hugo site without a server bu using Netlify, Upload your code to Git repo and link the repo to Netlify then deploy your site.
I am wondering if it is possible to deploy react.js web app that I've built to a share hosting site that does not have node.js installed?
I use webpack to build the application and it creates normal html, js, css file. I uploaded the static folder that includes all those html, js(bundle.js) and css files, but when I request the site, the server reply with 404 bundle.js not found response.
Use npm run build, you should get a folder with the index html file inside that will run your app. Try this with xampp first before you actually deploy to your server.
Here is everything step by step
npm run build
or
yarn run build
it will generate a build folder that looks like this:
Copy everything and move it to the htdocs in xampp or ftp upload the directory to the public_html file in your hosting
Yes you sure can put react on a shared hosting provider.
Seeing as you're getting a 404 error (not found), you are probably referencing your react file/bundle incorrectly. It might not even be named bundle.js if you're using a boilerplate to create your application.
Can you give more information? What does your index.html file look like? What does your directory structure look like? If you are able to post these files I can tell you what the issue is.
Update:
The answer below should be accepted. (Although this would assume that you have the ability to make a build which you have not verified or not.)
Make a build using the build command through whatever boilerplate you used. Deploy those files on your shared hosting server. Make sure that index.html is at the root of where your server is expecting the root to be and your app should be live.
For deploying a react app on a shared hosting you need to create a production build. Production build is a pack of all your react code and its dependencies.
in most shared hosting we put our site/app inside a public_html directory so if we hit www.yourdomain.com it serves the code from public_html directory.
so if your react app is ready to go, edit your package.json file add a new key value:
"homepage":"http://yourdomain.com"
then create a build using following command:
npm run build
after running the command you will see a new directory named build in your app root. It will contain js and css for the app and a index.html file. You need to upload all the content inside build directory to public_html directory, and that's all, go to your domain and your app will be working just fine.
I am about to develop a web application. I will use this theme- http://startangular.com/product/flatlogic-angular-material-dashboard/ for admin panel. I already installed it on my local machine following the instructions. But this is my first time of installing a html theme like this using command lines (npm, gem and gulp).
I also noticed that all the AngularJS admin panel theme are has to be installed in that way. I mean using npm and other commands. Installation is fine. When I run this command
gulp serve
It opens the browser and show the admin panel. But the problem is I do not understand the project structure.
Admin panel is working when I serve gulp. But what I want is I just want to access without serving gulp. I mean I want to move it to xampp. Then integrate with a framework(PHP). So for now when I access directly, it is not working. What I want is I just want to have simple project, something like this
/project
========
/css
/js
/view
How can I build them into it? I mean using command lines. For now I have to serve gulp to access my project. To convert it manually, I checked the index.html and there are a lot of syntax commented I am not familiar with.
eg
<!-- build:css({.tmp/serve,src}) styles/vendor.css -->
<!-- bower:css -->
How can I convert the Angular theme into simple project to send to server for deployment? Can it be done from command lines?
Now my project is under
c:/xampp/htdocs/material_dashboard/angular-material-dashboard
When I access this
http://localhost/material_dashboard/angular-material-dashboard/src/
It shows nothing. Just white screen. No error in browser console as well.
When I access this
http://localhost/material_dashboard/angular-material-dashboard/.tmp/serve/
It is showing these errors.
All status code 404 returns.
How can I access the project without serving Gulp? From which url can I access?
Development server
Angular applications are mix of JavaScript, HTML, CSS and every paths is relative to the root of application - index.html.
In this case copy contents of dist folder. Copy whole dist folder and deploy it.
Development server just tries to simulate real one production server. If it is working on development - that one that is executed over gulp server it should also works on production environment.
Production environment
It is time to go straight with application. There are only two major steps
build it with gulp build (of course if you are using gulp and there is task like that)
copy content of the builded directory to production environment (that steps is also called deployment)
CORS issue?
AngularJS application and the backend should be executed (should run) on the same protocol, domain and port address to avoid CORS policy rules.