Hugo theme not rendering when built - hugo

I have a Hugo site using the hyde-hyde theme.
When I serve the site with hugo serve -D, I can view the site with the expected theme:
When I build the site to the public directory with command git submodule init && git submodule update && hugo version && hugo and open the site, the theme markup is missing?
Does anyone know what I'm doing wrong?
Note: I added the theme as a submodule to the themes directory.

At the beginning of config.tohml, you need to specify your real domain name,
because after the assembly all files will be searched in the root of this address (replace "example.com" with the domain name)

Instead of using a 1-line command, I would advise to do it step by step.
The problem might be with git submodule update. The main common error I face when using this command is that git asks me to commit the complete distribution, and refuse to update the submodule if I have uncommited changes.
To bypass this behavior, you can try the following commands:
git submodule update --remote
git submodule update --remote --force
Or the problem might be with hugo
Try the following command to have more info on what is happening:
hugo --log --verbose

Related

Git react folder in Gitlab

I'm going to make a git to my project include spring and react, as shown below:
after I create a local repo and just push this into gitlab as it told me: btw before I git push I have to write "git pull --rebase origin main", otherwise I can't push my repo to gitlab. But I think that is maybe not the reason.
And afterwards it has problem with the react folder in gitlab, and there is no problem with the spring folder, as shown below: I can't open the react folder in gitlab.
So my question was: why only the react folder has this problem but spring not? and how can I fix it? When I open the react folder by vs code, the version control tool also doesn't work when I made some changes.
Very thankful for answering!
why only the react folder has this problem but spring not?
Because delivery-react is probably a nested Git repository (meaning there is a delivery-react/.git), unless you have a .gitmodules file in your main repository.
If you want to add delivery-react as a regular folder:
git rm --cached delivery-react # no trailing /
git commit -m "Remove nested folder"
git add delivery-react
git commit -m "Add deliver-react"
git push

Hugo is unable to find themes directory

In my project I have a small script that runs some build scripts to prepare my dev. But, my current configuration is causing an error. It's looking for the themes directory in the wrong location.
My build script lives in the root directory. And my hugo app lives in frontend/. I want to call the build script from route and have it build hugo.
/my-project
/frontend
/custom-theme
build-script.sh
My frontend/config.toml:
baseURL = "https://site.local"
title = "Site Title"
themesDir = "themes"
theme = "custom-theme"
disableKinds = [ "taxonomyTerm", "taxonomy", "robotsTXT" ]
When I run my build script from the build directory with the following command I get an error:
# Build HTML and CSS
npm run build:dev --prefix $PWD/frontend/themes/custom-theme
# Hugo frontend
hugo --config $PWD/frontend/config.dev.toml
# Build PHP dependencies
composer install -d $PWD/api/
The error:
Error: Unable to find theme Directory: C:\Users\James\Projects\my-project\themes\custom-theme
It's missing the \frontend part of the path. It should be:
C:\Users\James\Projects\my-project\frontend\themes\custom-theme
Is it possible to tell hugo where to look for the themes?
It sounds like Hugo is assuming your paths are relative to the current directory. You're building from the C:\Users\James\Projects\my-project directory, so when Hugo puts that together with your themesDir setting of themes, it gets C:\Users\James\Projects\my-project\themes. Instead, try setting themesDir = "frontend\themes".
A corollary to this is that you will need to set all the other directory options as well if you want Hugo to behave like it would if you built from the frontend directory. For example, you would need to set contentDir = "frontend\content" and layoutDir = "frontend\layout". You can check which directories are configurable in the Hugo documentation.
A caveat, though: I haven't actually tested this myself, so if it doesn't work, that's probably why. :)

ReactJS app published to Github pages with custom domain

I have a reactjs application that I created using the create-react-app. I have installed gh-pages and successfully deployed it to github pages (project page) using the following command:
gh-pages -d build
However, when I add a custom domain to my github project repository my application could not load the js and css files. My browser is looking for the following files:
http://my.custom.domain/<repo name>/static/css/main.caaf9ea4.css
http://my.custom.domain/<repo name>/static/js/main.76fabd7f.js
The correct link to load these files should be:
http://my.custom.domain/static/css/main.caaf9ea4.css
http://my.custom.domain/static/js/main.76fabd7f.js
In the GitHub repo pages, I have set custom domain to be 'my.custom.domain' (root domain without www). The source is gh-pages branch.
My DNS settings are:
A record, #, value: 192.30.252.153
A record, #, value: 192.30.252.154
CNAME record, www, value: username.github.io
Any ideas how to change the settings so that repo name is not added to the domain?
Make sure your package.json have the attribute homepage. e.g.
"homepage": "https://<git-USER>.github.io/",
That's literally what I just did with my cra projet. If you want to take a look on my project just look at the develop branch. However, I haven't use gh-pages -d build. I just built the project myself and create the branch gh-pages and put the content of my build into it. It should be the same though.
Adding a copy CNAME script to my package.json scripts worked for me as it wasn't being published to gh-pages branch automatically in the React Create App build dir.
"copy": "cp ./CNAME ./build/CNAME",
"predeploy": "yarn build && yarn copy",

Why is create-react-app's build directory in .gitignore?

This is clearly something I'm misunderstanding but I'm desperately struggling to find an answer.
I've been teaching myself React with create-react-app, I've run "npm run build" to spit out my finished project, and I have the project pushed to a private bitbucket repo.
My expectation would be to then SSH to my server, and git clone the /build directory in order to make this project live. Obviously that is possible (if I removed /build from .gitignore), but since the /build directory is in .gitignore this clearly isn't the intended/desired behaviour.
So, my question is - what is? How does one publish a completed build to server without pulling from git (and obviously without FTP)?
Thanks!
The build directory is in .gitignore as it can be generated from the existing files.
To minimize upload/download time only essential items should be kept in the git repo. Anything that can be generated need not be in the repo (The build directory in this case).
If you are working on a server that has node (AWS, Heroku etc) you can git clone the entire repo on the server and then run npm run build there (after npm install). Then you can do something like
npm install -g serve
serve -s build
The serve module serves static files and you pass the build folder as a parameter.
If you are working on a more old style server like Apache static hosting with cPanel etc then you will need to upload the entire build directory containing static files and index.html.

How to quickly deploy React / Redux app as a sample?

It seems one way is to deploy the React app to Heroku, but is there a simple way to deploy to our own website or to GitHub page feature so that you can see the page off from GitHub? (just as a sample, not for production)
Details:
It seems that one possible way may be to use
wget -r --no-parent http://localhost:8080 -P sample -nH
cp -rf images any_needed_folder sample
and now you can git add sample and git commit and push to github and turn on the GitHub page for your repo and be able to see your React app inside of sample.
You also need to change the paths in the index.html, from /bundle.js to bundle.js, etc, because you need relative path instead of going to the root of your website.
(I used wget to recursively download index.html, bundle.js, and style/ (the CSS files) because bundle.js cannot be found in the whole directory on the local hard drive. I used wget because curl doesn't seem to be able to download recursively)
Ok, I found that the latest React, it will tell you to use
create-react-app hello-world
to create the app, and then there is an official
npm run build
to build it to host it as a Gthub page, or on your own website.
If wget is doing what you want, cool, use that.
For the actual deploying, I recommend using gh-pages on npm. It handles creating an orphan branch and copying your output files into it, and then pushing all in one command.
Install it:
npm install --save-dev
And in an npm script:
gh-pages -d sample

Resources