I keep getting a page not found error, no matter what I do.
Both urls, my custom domain (https://dittmaraz.life) and netlify's subdomain (https://compassionate-lumiere-512b58.netlify.com) both give me 'page not found'. This is a error page that says:
Page Not Found
Looks like you've followed a broken link or entered a URL that doesn't exist on this site.
Here's the github repo.
No build errors. There's one blog post and its draft property is set to false. netlify's build settings are set to the initial settings.
Also, config.toml's baseURL is set to 'https://dittmaraz.life/'.
Any suggestions?
You are using the default deploy folder public, but your config.toml for the site is deploying to docs
baseURL = "https://dittmaraz.life/"
languageCode = "en-us"
title = "dittmaraz"
theme = "mediumish-gohugo-theme"
summaryLength = 25
copyright = "2019 dittmaraz.life"
enableEmoji = true
publishDir = "docs"
You can change this in the app.netlify.com admin console for the site or create a netlify.toml at the root of your repository
netlify.toml
[build]
command = "hugo"
publish = "docs"
Alternatively, you can just deploy it to public by changing the value from docs to public
I see two issues:
Wrong publishDir:
As Talves already points out, the content is generated into /docs instead of the default /public directory. Easy fix, remove the publishDir from config.toml by commenting it out:
#publishDir = "docs"
Generated content in Git repository:
Netlify will generate your site, it should not be in the Git repository.
remove both directories /public and /docs
commit to Git
add .gitignore with this content:
/public/
/resources/
Related
I have hosted a simple static react app on github pages, Made all changes in package.json
But first the link was showing 404, I searched on the internet and tried adding a ? at the end of the link which resulted in the link showing a blank page.
Its showing a blank page now! I have tried all the solutions such as;
i. switching master and gh-pages branches
ii. adding ? at the end of the link
iii. changing "private" : true, in package.json to false
iv. adding /index.html at the end of the link
v. adding new commits and redeploying the app
These solutions didn't work, any help would be appreciated!!
link: https://iqramalik21.github.io/monsters-rolodex/
git repo: https://github.com/iqramalik21/monsters-rolodex
Couple of steps you need to follow exactly:
Create a new Repo and Enter username.github.io as the repository name. Replace username with your GitHub username. For example, if your username is octocat, the repository name should be octocat.github.io.
In your project(the one with your codebase) terminal run npm run build this will create a build folder in your project directory.
Push only the contents of the build folder onto the new repo you created with username.github.io name.
That's it you will start to see on your GitHub page!!
Note: Your page is hosted on the root route.
I am trying to make a simple React app with ViteJS and GitHub Pages but something is wrong with my images. I can't load them, event although I added them to assets folder. Can you help me how to fix that ?
when vite priview
vite.config.js file
that is my project, please help me
https://github.com/quocbinh-npm9081/React-App-Space-tourism-website
You are not referencing the correct url for your images you are using the path https://quocbinh-npm9081.github.io/assets/destination/image-titan.png where as it should be https://quocbinh-npm9081.github.io/React-App-Space-tourism-website/assets/destination/image-titan.png
Github pages deploys your site in your project sub-directory
You should build your site accordingly to be hosted in a sub-directory
Additionnaly, the vite doc say :
If you are deploying to https://<USERNAME>.github.io/, you can omit base as it defaults to '/'.
export default defineConfig(
// base: ''
}
If you are deploying to https://<USERNAME>.github.io/<REPO>/, for example your repository is at https://github.com/<USERNAME>/<REPO>, then set base to '/<REPO>/'.
export default defineConfig(
base: '/React-App-Space-tourism-website/'
}
then in your case:
git push -f git#github.com:<USERNAME>/<REPO>.git master:gh-pages
I understand that the normal workflow with hugo is to generate a static site using the "hugo" command, and then deploy your site by copying the public/ directory to your production web server. I don't want to do that: I just want the html files in the public/ directory to display correctly, and have links that work, when I open them in my web browser. I do not want to run the "hugo server" command.
Specifically, the links that are generated are all missing "index.html" at the end.
For example, a link to the About page will be:
file:///C:/Users/myusername/Documents/HugoTesting/quickstart/public/about/ which will open a view of that directory when I click on it. But it will display the web page properly if I can change the link to: .../public/about/index.html
How can I make that change throughout my site? I already set "relativeUrl" to true in my config file, as it says to do here:
https://gohugo.io/content-management/urls/ as it was necessary to get my index page to display properly. The documentation there says this helps to " make your site browsable from a local file system" so I know it must be possible.
I've tried using permalinks and using frontmatter to try and add "index.html" to all of my links, but hugo is adding an extra '/' to whatever I specify using permalinks, and while the "url" tag in the frontmatter works, it's not feasible for me to do for every url in every page.
I think ugly URLs configuration in Hugo might help you with this, (e.g., example.com/urls.html).
Set uglyurls = true or uglyurls: true in your site’s config.toml or config.yaml, respectively.
Using ReactJS I made a Build (reactJs static, npm build) and uploaded it to Google Cloud Storage Bucket, but getting a issue with the Path and Build folder files. The app (/static website) running but could not fetch the files from the bucket directory for eg the index.html & logo. (404 or 403 error )
Structure: Parent Bucket > Build folder (index.html, static folder & other files inside Build)
Any one have any suggestion on this. How to resolve this?
Do I need to create an app.yaml for GCS Bucket or any alternative?
I have gone through the article quite similar but for AppEngine instead of Bucket. https://medium.com/google-cloud/how-to-deploy-a-static-react-site-to-google-cloud-platform-55ff0bd0f509.
I have tried with app.yaml file but does not work for me.
I had exactly the same issue as mentioned by the OP. I am sharing my version of solution just in case anyone else ends up here.
As shown in the screenshots by OP, the 403 errors showed up for me because the URL of the static files in build/static folder was not correctly configured by the react-scripts build script.
Eg:
The url for index.html file was https://storage.googleapis.com/{bucket-name}/index.html.
However, when the page loaded, it requested files having url https://storage.googleapis.com/static/js/main.f555c3e0.chunk.js. It should rather be
https://storage.googleapis.com/{bucket-name}/static/js/main.f555c3e0.chunk.js
This is happening because by default react-scripts build assumes that your files will be served from root folder of your host.
To fix this add the following field in package.json of your project
"homepage": "https://storage.googleapis.com/{bucket-name}"
This tells the build script that it needs to add a relative path for serving static files.
For details please refer: https://create-react-app.dev/docs/deployment/#building-for-relative-paths
In order to set the routes of a static website stored in Google Cloud Storage, you need to assign a suffix to your objects. In other words, using suffixes is the intended way to configure your website. You can see more information in Hosting a static website document.
For your main index page you should set MainPageSuffix and for the not found page 404.html you should set NotFoundPage as suffix.
You can see more information on how to configure your static web here
I am keeping images in a folder public/assets/img. Then I use it in a component like that:
const imageUrl = "/assets/img/image.png"
Locally everything works fine, but on GitHub Pages in an image URL somehow name of my repo is missing, so instead of
http://name.github.io/my-repo/assets/img/image.png I get http://name.github.io/assets/img/image.png
I was following an instruction on how to create a GitHub Pages build and added in package.json the URL of my project, namely "homepage": "https://name.github.io/my-repo"
-- edit --
Also, I've just now realized, that although the routing seems to work fine, it also misses my repository name in the URL, so instead of
http://name.github.io/my-repo/subpage there is
http://name.github.io/subpage
What am I missing here?
OK, so I somehow have solved my problems, however, I am not quite satisfied with the solutions:
Fixing the URL problem (missing repo name in the URL)
I've added a basename property to my router <BrowserRouter basename="/repo-name">
Downsides: Firstly, it doesn't look good hardcoded. Secondly, npm start opens localhost:3000 which is empty now. I have to add my repo name to open the app locally, so localhost:3000/repo-name - not too neat.
Fixing images problem (also missing repo name in the URL and thus not displaying images)
I've added a process.env.PUBLIC_URL variable to the image URL: const imageUrl = ${process.env.PUBLIC_URL}/assets/img/image.png. In local environment it's empty, deployed it takes homepage value from package.json, which is https://name.github.io/repo-name
Downside: one has to add process.env.PUBLIC_URL before every image displayed in a component.
I would be grateful for any better solution!