I'm coming from using Jekyll as a Static Site Generator. Content and themes are normally kept in the same directory/git repo.
I'm trying to set up a Hugo site, using the bare-bones theme Hugo Xmin. It contains the standard directory exampleSite.
How can I serve the exampleSite with the theme using Hugo (locally)? after I:
git clone git#github.com:yihui/hugo-xmin.git
cd hugo-xmin
The one-line command is:
hugo server --source exampleSite/ --themesDir ../..
Alternatively, go into the exampleSite and serve with passing the parent directory as an argument:
cd exampleSite
hugo server --themesDir ../..
Related
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.
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.
In the Netlify CMS community chat, the question keeps coming up how to manage the Hugo version without a bin folder and executable.
The one-click-hugo-cms example is a deploy to generate a Hugo static site and use Netlify CMS to be able to add posts for the site.
The Issue: The site setup uses a bin folder to store the Hugo executable for simplicity, but the developer wants to use a different version of Hugo and keep it up to date without having to keep copying new executables to the Hugo bin folder.
The bin folder for Hugo is NOT required. Netlify manages a Hugo version install in the container based on the environment variable (HUGO_VERSION) when there is a build.
Basically follow these steps:
Remove the bin folder and executable out of the project
Change the command to the bin path and call it globally
Let Netlify know what version you want to use in the netlify.toml
Remove the bin path
Edit this line
const hugoBin = `./bin/hugo.${process.platform === "win32" ? "exe" : process.platform}`;
to be
const hugoBin = 'hugo';
netlify.toml
[build]
command = "yarn build"
publish = "dist"
[build.environment]
YARN_VERSION = "1.3.2"
HUGO_VERSION = "0.36.1"
[context.deploy-preview]
command = "yarn build-preview"
NOTES:
Make sure on your local development to have Hugo installed in a global path location
Netlify installs Hugo version 0.17 by default, so use HUGO_VERSION to specify version
Optional way to manage Hugo versions explained here
one-click-hugo-cms example repo without bin folder
I'm newbie on react, I did 2 paged website for exercise, all is working well on my localhost.
But i'm confused about how upload project to my linux server.
What i did ?
I create react app via terminal with this command :
create-react-app react-demo-project
Terminal create my project and in project root i have node_modules directory.
so here is i have some questions:
1- React project will work normally on linux hosting?
2- I need to all my project upload to ftp? Because there is arround 20.000 file in node_modules directory.
With this command build your app :
npm run build
Build folder has created in your project directory, open index.html in your browser and check output...
If you saw a blank page (after build and opening index.html) , you must change the main js file path in the index.html :
default is : src="/static/js/main.ddfa624a.js"
change to : src="./static/js/main.ddfa624a.js"
I changed js path and this worked !
create-react-app has a command to bundle your app to a ready to deploy state.
npm run build
This command will bundle your app in /build folder. With the contents of this folder you can deploy your app in any hosting environment. You don't need to install your packages and libraries manually when you use this command. More information about using this command and deploying your app in different hosting environments can be found create-react-app README
Deployment
npm run build creates a build directory with a production build of
your app. Set up your favorite HTTP server so that a visitor to your
site is served index.html, and requests to static paths like
/static/js/main.<hash>.js are served with the contents of the
/static/js/main.<hash>.js file.
1- React project will work normally on linux hosting?
Yes, it will work in all webservers, unless you have server side rendering (SSR)
2- I need to all my project upload to ftp? Because there is arround
20.000 file in node_modules directory.
Files in node_modules will NOT go to your web server. These are development dependency files used only during development.
Run npm run build
This will create a folder called build in project root. This will have all html, css , images and js files
Copy all files and folders in build folder to your site root.
If your site has to be hosted in a sub folder in root you need to do the below, otherwise you will see a blank page. This is because your static files (css, js etc) are not loaded correctly.
Open package.json
Add a new entry homepage: /your_subfolder/
It will look like this
Now do steps mentioned above and your site should work fine
Add this line to package.json:
"homepage": "./"
That should make it work without the need to adjust index.html after every build.
How to deploy angular 2 website application on github? I am new to Git and github so just saw the basics on internet and created a repository on github and finally a url was generated in my git bash after running all steps and when I tried to open it Github 404 error pages was showing.
These are the commands which I ran through :
git remote add origin https://github.com/Muraliduke/MuraliDukeResume.git
git push -u origin master
ng github-pages:deploy
Is there any difficulty for single page application to host a website on github? I tried with normal html content and my website on github works fine. But this with ng2 is not working. Just saw on internet that there must be some prefix to be done to support SPA on github but since I am not familiar with github didn't understand it. So kindly suggest me a solution ?
There are a few things :
Deploying to GitHub pages using Angular CLI has been deprecated. Use angular-cli-ghpages
Add the 404.html fix
Ensure you have "turned on" GitHub pages for your gh-pages branch from the repository settings
optionally, add custom domain
This blog has everything you need.
Make sure to do a build to get the necessary files into dist .
ng build --prod
First get all relevant the files from the Dist Folder of your application
for me it was the css files in the assets folder main.bundle.js polyfills.bundle.js vendor.bundle.js
Then push this files in the repo which you have created.
1 -- If you want the application to run on the root directory - create a special repo with the name [yourgithubusername].github.io and opush these files in the master branch
2 -- Where as if you want to create these page in the sub directory of in a different brach other than than the root , create a branch gh-pages and push these files in that branch.
In both the cases the way we access these deployed pages will be different .
For the First Case it will be https://[yourgithubusername].github.io and for the second case it will be [yourgithubusername].github.io/[Repo name].
If Suppose you want to deploy it using the second case make sure to change the base url pf the index.html file in the dist as all the route mappings depend on the path you give and it should be set to [/branchname].
Github Repository - https://github.com/rahulrsingh09/Deployment