Duplicate in Gatsby path to markdown file for blog post - reactjs

I am editing this Gatsby starter to make a personal website: https://www.gatsbyjs.org/starters/rolwin100/rolwinreevan_gatsby_blog/
Note that the problem I'm having with my site also happens when I develop the starter (with no changes made).
My desired outcome is pretty simple, I just want to be able to click on a blog post at site-name.com/blog/post-name that works. So, I set the path in my markdown files to be blog/post-name, replicating the starter exactly. However, when I run gatsby develop and click on the posts, the weirdest thing happens, For ex, from running the starter I get: There's not a page yet at /blog/blog/code-splitting-in-react (pictured fully below). But the page /blog/code-splitting-in-react does exist and when you adjust the url to that it brings up the page perfectly.
So the question is-- where is that extra 'blog' coming from in the path and how do I get rid of it??
error messages when I click on a blog post

You said that you are setting the url to blog/post-name. That is a relative path. It is going to start from whatever url you currently are. For example if you are in http://example.com/bla/foo you'll end in http://example.com/bla/foo/blog/post-name. You need to add a slash at the beginning: /blog/post-name.

Related

How to change title of google search list title

In this image you can see the result of codevaly it's show with my web title but i changed the title of my website to "codevaly" but still it return "my web", please help me to fix it
Click To View Image
It is my html file of react js project
Click To View Image
Now, Please point out my mistake.
Next time, insert your code and your problem in text. Pictures are frowned upon on Stackoverflow. Have you changed the title recently? If so, you might just need to wait for a google crawler to visit your page again.
More info can be found in the google search docs. Some other thing could improve the title, such as including an H1 element on your page that repeats the name.
It looks like your title and description both are not updated.
There are two possibilities for this
You have not deployed the recent code in production.
If not the first case then wait for google to crawl through your page.
Try checking with this site:Your site URL to list out all the links in your web app.
Thanks.

Netlify Page Not Found/White Page

I have been trying to figure out Netlify redirects. My Netlify app is at this link (however this is a blockchain application and requires that you have metamask, so I will try to explain my problem so that you don't have to install it to actually answer my question): rekt.netlify.app
I have two main problems:
I have already tried the whole _redirects file with /* /index.html 200 in it. This works when I go to rekt.netlify.app/games and refresh, it will actually come back to that page. That's good. The issue is when I then go to rekt.netlify.app/games/Valorant for example, it will be a white page on refresh, and I cannot figure out why. In my react application, I have react router set up so the path is path="/games/:game"
I went to the Networks tab in the google inspect and I found that this was the request URL when I refresh the page on /games/Valorant: https://rekt.netlify.app/games/static/css/2.80dce9aa.chunk.css
As you can see, the issue is probably something to do with that /games/ comes before /static/ in the URL. I'm a beginner so I don't know what that actually means.
The second issue I am having is that, the img tags of the games load on the /games page, however, when you click on a specific game and attempt to go to a /games/Valorant for example the image will not load. I believe this is due to a similar problem. I have gone into Network tab of google inspect and when I look at the image being loaded in the /games page, it attempts to GET https://rekt.netlify.app/static/media/league_wallpaper.f5e6bf5f.jpg which works. However, when being loaded in the /games/Valorant page, it attempts to GET https://rekt.netlify.app/games/static/media/league_wallpaper.f5e6bf5f.jpg and this does not work, it's a blank page.
You can notice that the second link there has /games/ in it which I believe is preventing it from getting the image. Potentially the problem here is that anything more than one / in the URL is messing things up? I'm not sure. This is the link to my github project: https://github.com/jacob-tucker/ReKt
Edit: Here are some screenshots that will hopefully help. This first one shows that the request URL is trying to get the image from /games/static (which I don't think makes sense). This is happening on the /games/Valorant page.
And then here is a screenshot of /games/Valorant trying to load as well after I refresh the page and get a blank white screen (it returns a status code of 200 because I have /* /index.html 200 in my _redirects file.
I had a the same issue a while ago, I've just added
"homepage": "https://my-app.netlify.app",
in package.json and it worked perfectly.

How to add list of blog posts in Blog section with netlify CMS?

I already asked this question in the Netlify community but no response yet so I thought I should also post the question here in case someone could help solve the problem.
I am using Hugo-academia template for my site. It works fine but the issue is that I am unable to view a list of my posts in the BLOG section. I have three sections(About | BLOG | Resume) on the website I'm working on
Once I create a post with Netlify-CMS, it creates the post successfully and I can see the post under Recent Posts in my homepage. But if I click on BLOG, I am unable to see the accumulation of my blog posts.
Unfortunately, the Github repo is private but here's how my content directory looks like (Kindly note that I am using hugo-academic theme)
content/blog/index.md
I expect that once I create a blog post (let's call it 'new-post') with netlify CMS, a folder should be created automatically and create a pull request on my GitHub. Something like this:
(On a side note, I changed post in the original theme to blog in mine so the URL will make use of blog instead of post).
Kindly help me with this problem. I can provide any other details that may assist with getting this problem solved.
After playing around with the template, I was able to solve my problem.
I was able to solve this problem by changing a little detail in netlify's cms config.yml located in static/admin/. I changed folder: 'content/post' to folder: 'content/blog'
The list of posts is now located at ../blog but the downside is that the page looses its original soothing styling.

Web App - manifest.json not applied if it's in a sub-path

I am attempting to create a react based web app. I got it working the way I wanted, and it behaved as a web app the way I expected -- for now, that means to me that on my phone, from chrome, if from the chrome menu I choose 'Add to Home screen' it shows up as if it were an app (showing up with its own icon & launching in a new window outside of chrome).
After getting that working, I decided to reorganize so that the path would be the way I wanted it - from mydomain.com -> apps.mydomain.com/appName. I moved the code to the proper directory, and when I browse there I see my "app".
I noticed an issue right away where the static assets were not loading, I fixed that by adding a symlink in www/mydomain.com pointing to www/mydomain.com/appName/static. At this point, I thought my app was properly reorganized.
Unfortunately, when I tried "add to Home screen" from chrome, it now makes a regular shortcut, which to me seems to indicate the manifest.json isn't being applied. This all adds up to me to be a fundamental issue I don't understand with code organization for sub-paths which gave me pause.
So my question is: What do I need to do to properly host my web app in a sub-path?
Notes:
I am using nginx - I am suspicious that my issue lies in configuration there, and if more info on my configuration there is needed, I can provide it.
Regarding the change to apps. - sorry if it obfuscates the problem somewhat, to note I just added an alias - thus apps.mydomain.com appears to be equivalent to mydomain.com - I only noted it in case that assumption was wrong and part of the problem.
Pardon my question language if it's wrong, I am new-ish to web, and may not be using the lingo properly - that also is why I am probably having difficulty just googling this.
Thanks!
I think I figured it out. My app was made with create-react-app, and in the package.json I edited the homepage to be my path.
Found this out from here:
https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#building-for-relative-paths

Weird Content of Facebook share/like button preview from angular app

I have an issue with share/like button from Angular app. I finally made it working correctly with links but share/like preview if completely wrong. I tried XFBML.parse(), switching to html 5 mode, etc.
There are two complete enigmas:
1. I got "Given URL is not allowed by the Application configuration..." despite adding all possible variants to fb app setting.
When share preview appear - it has "Angular", but I never added it anywhere.
Here is the link
Would be grateful for any ideas...
Thx
The Facebook Scraper only looks at the HTML code your server delivers, it does not execute any JavaScript.
So if you want to share different articles, you need an individual URL for each article, that delivers the relevant meta data when requested from the server.
You can find some more explanation and hints on how to implement this in this article, http://www.michaelbromley.co.uk/blog/171/enable-rich-social-sharing-in-your-angularjs-app

Resources