When I use the command hugo, it generates the index.html in the Public folder. When I open index.html, the site load like this:
But when I use the hugo serve command locally, it generates the link http://localhost:1313/, and the site load properly. It loads like this:
I think the problem is because of the not proper rendering of files or anything similar.
My approach:
I added the code relativeURLs = true and uglyURLs = true at top of the config.toml file but still it does not rendered properly.
I had set baseurl = "/" in config.toml file but this also does not work.
Your theme might be loading CSS using {{ .Site.Baseurl }}.
For example:
<link rel="stylesheet" href="{{ .Site.BaseURL }}css/style.css">
In that case, make sure that the BaseUrl defined at the top of your config.toml file is set to http://localhost:1313, which will allow your local server to find the CSS file.
You're CSS file is not loading properly. This can have several reasons, for example:
http url on an https website.
wrong "integrity" hashes on you css file.
css file is not deployed or not on same location on the server.
Google developer tools plugin might help here. If you right click on your web page, click "inspect" and go to console. You can see any loading errors.
You can install Web Server for Chrome and choose the /public folder of your Hugo website. Your site should now render correctly at the url configured (http://127.0.0.1:8887 in the example screenshot).
You might want to set baseURL to the absolute path of the public folder.
Fixed this by configuring baseUrl in config.toml.
If you're deploying using GitHub pages, you'll want to make your baseUrl equal to your github pages domain.
Related
I need to put the generated static files from a vue build inside a WordPress page, in theory, it should've been an easy quest, but the static files "have a problem" with the paths to resources like assets, CSS files, and js files.
Example: If you build a Vue project and open the index.html on the live server (vscode extension), the page will be fully white and the developer's tools will show that the resources were not loaded.
Failed to load resource: the server responded with a status of 404 (Not Found)
Looking at index.html, I discovered that if I add a "." in front of the paths inside every href, the resources a loaded.
Basically, if I change this
<link href=/css/chunk-vendors.fb624d12.css rel=preload as=style>
to this
<link href=./css/chunk-vendors.fb624d12.css rel=preload as=style>
The chunk-vendors.fb624d12.css file will be loaded. But this is a very impractical solution because I have many CSS and js files, so I really want to find an optimized solution for this.
I created the default Netlify CMS site with Hugo to test it out. The first test I wanted to do was to get Amazon Affiliate sites to work. With my actual site, I had to edit the config.toml file to include:
[markup]
[markup.goldmark]
[markup.goldmark.renderer]
unsafe = true
In order for the tags to work.
However, with this newly deployed site, it's using the config.yml file. I tried to edit the file located here: theme-name/site/static/admin/config.yml . See the photo, below.
Nothing seems to work. However, in the preview pane, the ads show up without an issue.
Suggestions?
The problem was the path. I had to add this code:
[markup]
[markup.goldmark]
[markup.goldmark.renderer]
unsafe = true
to the [theme-name]/site/config.toml file.
There were at least two config.toml files in different paths. Also, there is a config.yml file. It was a matter of choosing the right path.
I created a .js and .css file from a project and added them to a github release
https://github.com/natearn/react-vim-tips/releases
I then attempted to add the code directly to a webpage using an external script and stylesheet (linking directly to the files in the release).
<script type="text/javascript" src="https://github.com/natearn/react-vim-tips/releases/download/1.0.0/VimTips.js"></script>
<link rel="stylesheet" type="text/css" href="https://github.com/natearn/react-vim-tips/releases/download/1.0.0/VimTips.css">
For context, the script creates a global function which renders a react component, which I execute elsewhere on the page.
The network requests for the files succeed after a redirect (so 302 then 200), the javascript loads and runs, but the css rules do not get added to the page.
When I copy the stylesheet and fetch it locally, it works. So I believe the problem is in the mechanism of delivery from the CDN.
Can someone tell me what might be happening here, and how I can fix it?
Remember that GitHub repos are different from web hosting services. You are correct that the issue is related to how the .css file is being served (or rather, in your case, not being served at all). There are a few options:
1) Create a gh-pages branch and reference your stylesheet from there i.e. https://natearn.github.io/react-vim-tips/stylesheets/VimTips.css. This should actually serve your CSS properly.
2) Use RawGit to generate a proper CDN link to your VimTips.css file. I gave this a shot and have a working example at this Stackblitz: https://stackblitz.com/edit/react-bcjjdo?file=index.js. Here's the CDN link I used: https://cdn.rawgit.com/natearn/react-vim-tips/32b5ee66/stylesheets/VimTips.css
The crucial point is that either of these strategies will serve your CSS with the correct Content-Type headers, enabling them to actually load as CSS in your page. Referencing the link to downloads from your release simply prompts a download of the binary data for your CSS file, which will not work. Hope this helps you out!
Use the raw version of the file from your repo,
I have this css file from an old Hello World repo,
using https://github.com/mcarpenterjr/Hello_World/blob/master/style.css you get the file in the repository.
Using https://raw.githubusercontent.com/mcarpenterjr/Hello_World/master/style.css
you get the raw file, which is what you're looking for. To get this simply click the raw button to the upper right of the file contents on a file's page from the repo.
I suppose you could also swap https://github.com for https://raw.githubusercontent.com and drop blob from the address.
Just use this -> https://rawgit.com/
Works flawlessly.
Hi am working on Secncha Application and i use Sencha Architect. When you create a new project in Architect, by default it reference to the links given below for sencha js file and css file. But these links are not working anymore is the path changed ? my application is giving me the error
GET http://cdn.sencha.com/touch/sencha-touch-2.2.1/resources/css/sencha-touch.css 404 (Not Found)
GET http://cdn.sencha.com/touch/sencha-touch-2.2.1/sencha-touch-all.js 404 (Not Found)
A quick solution is to copy those files from your sencha touch sdk folder, in to your app folder (that XAMPP is looking at) and change the app.html accordingly.
for example:
<script src="sencha-touch-all.js"></script>
<link rel="stylesheet" href="resources/css/sencha-touch.css">
In Project Inspector -> Resources -> Library change setting "Library Base Path" to a local folder containing Sencha Touch Library. If you are using default Architect Settings, just enter touch/ (don't forget slash)
I'm trying to style the custom error pages in IIS7 with a linked CSS style sheet.
This works.
<html><head><title>404 - File or directory not found.</title>
<LINK href="http://stage.mysite.com/custErr/css/style.css" rel="stylesheet" type="text/css">
</head><body>Page Not Found</body></html>
I've created a virtual directory in mysite called custErr that contains the css and images needed.
But to make it easier to deploy I'd like to have it relative like this...
<html><head><title>404 - File or directory not found.</title>
<LINK href="../css/style.css" rel="stylesheet" type="text/css">
</head><body>Page Not Found</body></html>
After trying this I find that relative paths don't seem to work. In fact a style sheet in the c:\inetpub\custerr\en-US folder doesn't work either.
Where are these pages being served from?
Is there an easier way of doing this?
So I don't have to modify each and every absolute path for each environment?
I know this is a late reply but the reason why the relative paths don't work (I think) is because if you hosted a site such as www.myfavouritephotos.com and on visiting a directory on that site such as www.myfavouritephotos.com/images/ which is a directory in your website that doesn't have a default document like Default.aspx or whatever your site is set up as serving as a default page, IIS would return a HTTP Response of 404 for not finding a page to serve up or a 403 response because the user may not have the necessary rights to view the content of the directory under that url.
IIS by default would serve either the 404.htm or 403.htm file from within the c:\inetpub\custerr\en-US directory by default but when you replaced it with a custom htm file that replaces 404.htm, the relative path to the stylesheet you reference from that htm file would make a request at what the original url made to the server was so www.myfavouritephotos.com/images/(../css/style.css) which would result in an incorrect relative path so it may be able to be avoided by using a reference to a stylesheet with www.myfavouritephotos.com/css/style.css