Locally, I can view my site easily and all theme changes.
However, once the site is deployed to Netlify, all I am greeted with is a blank white screen.
I tried toggling baseURL configurations to no avail. However, if I rename my _index.md file to index.md in the /content folder the contents of that file will display when deployed via Netlify.
There are no build errors in Netlify or locally.
My working files can be seen at the following GitHub repository.
Explanation Summary: The _index.md file at the root of your content directory is using your themes/gwynn/layouts/index.html template, but you are not telling it to display any content or data from your frontmatter.
themes/gwynn/layouts/index.html code:
<!DOCTYPE html>
<html>
<body>
{{ range first 10 .Data.Pages }}
<h1><a href={{ .Permalink }}>{{ .Title }}</a></h1>
{{ end }}
</body>
</html>
Nothing is showing up because you are displaying only the pages in your site, but both have draft: true set in the frontmatter of the pages in post.
Solution to show Home page Title:
themes/gwynn/layouts/index.html
<!DOCTYPE html>
<html>
<head>
<title>{{ .Title }}</title>
</head>
<body>
<h1>{{ .Title }}</h1>
{{ range first 10 .Data.Pages }}
<h1><a href={{ .Permalink }}>{{ .Title }}</a></h1>
{{ end }}
</body>
</html>
To show the page links, you can set draft: false within content/post/first.md and content/post/second.md
Netlify doesn’t automatically know that you have a Hugo site. In the app.netlify.com interface, navigate to Site settings, then “Build & deploy” in the left-hand navigation.
In the Build command field, type hugo, and in the Publish directory, type public. I think this should be enough.
(If not, here’s a more detailed config from the Hugo site. That strikes me as too complicated, though.)
Going further, and this is optional, I prefer to run the hugo command locally, which generates the whole site, and the resulting public directory becomes part of my repo. In that case, I leave the above Build command: field blank, but keep the Publish directory: public field.
Related
So basically, I bought the custom domain of nexus-cheats.com, and went to connect it to my GitHub pages website of archiemourad.github.io/Nexus (/Nexus is the homepage). I entered the custom domain and set up the DNS, did the DNS checks and everything seemed to be working (Image Below) (My website is using React.js) Now, when loading the domain nexus-cheats.com It brings me to a blank page, And it "seems" to be working in a way It loads the tab title but nothing else. In the console there are a bunch of cookie related warnings. But no errors. When I go to nexus-cheats.com/Nexus i get the default GitHub pages 404. And get two errors. One is the denail of loading of my favicon.ico (Tab logo) Error => Content Security Policy: The page’s settings blocked the loading of a resource at https://nexus-cheats.com/favicon.ico (“img-src”). The other is a server GET 404 error => GEThttps://nexus-cheats.com/NexusALTHOUGH after loading nexus-cheats.com/Nexus and going back to nexus-cheats.com I get two more errors, both being the failure to load certain files in my react app. Errors => GET https://nexus-cheats.com/Nexus/static/js/main.89be2f5c.js GET https://nexus-cheats.com/Nexus/static/css/main.1bf437ff.css These (I assume) Are the build version my GitHub pages website is running on. Anyone know a solution? Or the problem going on here?
DNS CONFIG: My A: Record is set to 185.199.108.153 My CNAME: Record is pointing to archiemourad.github.io. (www)
----edit: Solved, but I kept all of my original text for brevity---
I'm getting this same exact error and situation right now.
I don't have answers yet, but it looks like React is trying to connect the %PUBLICURL% to the wrong place now. This comes from my /public/index.html file.
<!DOCTYPE html>
<html lang="en">
<head>
...
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
...
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
...
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
I subtracted irrelevant code and added the ...'s, for the record.
Locally, my network tab in my browser's developer tools shows:
http://localhost:3000/{project-name}/manifest.json
But, when I hosted it the exact way you have (with it working properly before I added the custom domain), it returns:
{my-custom-domain}/{project-name}/manifest.json
The /public/index.html file has loaded, but it can't access the other files it calls correctly.
It seems that the index.html is adding an extra part to the address from the %PUBLICURL%. By that, I mean the %PUBLICURL% adds the {project-name} between the custom domain and the files it is trying to access. My url should read:
{my-custom-domain}/manifest.json
I can edit the values in the developer's tools to remove that part, and then the files will load. But, this still doesn't solve the issue.
---------edit: solved the issue---------
I am unsure if the above changes are necessary, but I did remove the %PUBLICURL% from my /public/index.html file.
Now for the good part - the fix!
In your package.json, be sure to change the:
"homepage": "your-github-url"
to:
"homepage": "your-fancy-new-custom-domain"
Save it up and then run your build script included in most of the resources I found ( like this: https://create-react-app.dev/docs/deployment/#step-2-install-gh-pages-and-add-deploy-to-scripts-in-packagejson ):
npm run deploy
This will update your project, post it to your GitHub, and deploy it. Then just check that you have the same settings as you originally posted an image of on your GitHub pages, and it should work!
This questions it's maybe obvious, but I can't do it?
How can I publish my paragraphs in Zeppelin 0.8.0?
The docs says that you only need to copy the link that appear when you press "link this paragrah" and put it in your website page.
I did that procedure buuuuuut. It is not working.
I did the simplest website page just for test it, just the <iframe> URL </iframe> and appear a whitebox without anything.
<!DOCTYPE html>
<html>
<head>
<title>HTML Test</title>
</head>
<body>
<p>Below is an iframe.</p>
<iframe http://goku:8080/#/notebook/2DM1X52VT/paragraph/20180804-155205_969494590?asIframe width="800" height="450">
<p>iframes are not supported by your browser.</p>
</iframe>
</body>
</html>
I don't now if I need to config something else in Zeppelin because when I put another URL in <iframe URL> </iframe> the website page works
The way to solved it was installing in chrome a extentions Ignore X-Frame headers.
I have a react website and in my html template I put the google analytics tracking code snippet.
The tracking works on my local (so I can actually see my dev session in GA console) but it doesn't work after I deploy to cloud. Here how my template looks like and react just render the root div.
<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body>
<div id="root" />
</body>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="GA link..."></script>
<script>
GA tracking code...
</script>
</html>
My site is here. You can see from the source code the tracking code is there. However current session just doesn't show up in GA.
When I go to your site I see calls going out to Google Tag Manager and Google Analytics and Doubleclick.
Maybe you have a script blocker (uBlock Origin, Noscript, ...) disabled on localhost but active on the production site?
I resolved it eventually. Regenerate another project in GA and use the new project worked for me. Maybe it was something mess up with my old project setup.
I am writing a fairly complex HTML5 website making extensive use of AngularJS. The Website is hosted in a Python application on Amazon's Elastic Beanstalk.
The file "projectname/app/views/views.py" looks like this:
from app import application
from flask import render_template
#application.route('/')
def index():
return render_template('main.html')
The "main.html" looks like this:
{% extends "layout.html" %}
{% block content %}
<script src="{{ url_for('static', filename='lib/google-maps/angular-google-maps.min.js') }}"></script>
<!-- here are more javascript libs being loaded, also css files -->
<div ng-app="myApp" ng-controller="applicationController">
<div ng-include="'/static/partials/home/menu.html'"/>
<div ng-include="'/static/partials/home/home.html'"/>
<div ng-include="'/static/partials/home/footer.html'"/>
</div>
{% endblock content %}
The "layout.html" looks like this:
<!DOCTYPE html>
<html manifest="/static/manifest.mf">
<head lang="en"
profile="http://www.w3.org/2005/10/profile">
<!-- favicon -->
<link rel="icon"
type="image/png"
href="{{ url_for('static', filename='img/favicon.png') }}"/>
<meta charset="UTF-8">
<title>Website title</title>
<link href="{{ url_for('static', filename='css/styles.css') }}" rel="stylesheet" type="text/css"/>
<link href="{{ url_for('static', filename='css/colors.css') }}" rel="stylesheet" type="text/css"/>
<link href="{{ url_for('static', filename='css/animations.css') }}" rel="stylesheet" type="text/css"/>
<!-- more javascript libs loaded here ... -->
</head>
<body style="overflow-y: hidden">
{% block content %}
{% endblock content %}
</body>
</html>
In addition to these files I have dozens of html files that build up all parts of the website. These are included in the right places using ng-include.
What I experience is that whenever I deploy the website, all browsers seem to cache most of it and then only load parts of the new version which results in really really ugly behavior. For example, some javascript files are loaded in the new version, but html files are still old, so the views are really messy and lots of errors occur. When I reset the cache (for example in Chrome by pressing Shift-F5 under windows or by opening up the developer console and refreshing the website), everything is fine and the new version is loaded fully.
However, I cannot expect my customers to open up any development console whenever I redeploy a new version of the website.
So I read up some stuff about manifests, and as you can see I have a manifest.mf file referenced in the layout.html. Here is its content:
CACHE MANIFEST
# 2016-01-07:v1.0.4
# This is the default section for entries. Files listed under this header (or immediately after the CACHE MANIFEST) will be explicitly cached after they're downloaded for the first time.
CACHE:
/static/img/login-background.jpg
# Files listed in this section may come from the network if they aren't in the cache, otherwise the network isn't used, even if the user is online. You can white-list specific URLs here, or simply "*", which allows all URLs. Most sites need "*".
NETWORK:
*
# An optional section specifying fallback pages if a resource is inaccessible. The first URI is the resource, the second is the fallback used if the network request fails or errors. Both URIs must from the same origin as the manifest file. You can capture specific URLs but also URL prefixes. "images/large/" will capture failures from URLs such as "images/large/whatever/img.jpg".
FALLBACK:
On every deployment, I change the first line and update the release date and version number. Also I add large images or files to the CACHE section (currently only some background image).
The manifest is also properly loaded, as can be seen from the Chrome developer console when loading the page. It says:
Creating Application Cache with manifest https://my.website.net/static/manifest.mf
my.website.net/:1 Application Cache Checking event
my.website.net/:1 Application Cache Downloading event
my.website.net/:1 Application Cache Progress event (0 of 1) https://my.website.net/static/img/login-background.jpg
my.website.net/:1 Application Cache Progress event (1 of 1)
my.website.net/:1 Application Cache Cached event
So the cache file itself is working. However I still get half-updated pages whenever I deploy a new version. What can I do to fix this?
Any ideas are highly appreciated! Thanks a lot,
Christian
I have built a Node.JS app (meaning I wrote my own HTTP server within the the main JS file, which works as it should with the rest of the application). The HTML and CSS renders as it should within localhost. Even JQuery works (with the source file imported via CDN). However, I have tried adding very basic AngularJS within the Index.html page and the AngularJS refuses to show (anywhere) in my localhost. It should be showing the number "3", but does not.
This is my Index.html page with the angular code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{title}}</title>
<link rel="stylesheet" href="/css/home.css">
<script src="/node_modules/angular/angular.js"></script>
<script src="/node_modules/angular-route/angular-route.js"></script>
</head>
<body>
<body ng-app>
<p>AngularJS code: {{ 1 + 2 }}</p>
</body>
<div class="hm-container">
<h1 class="hm-title">Some text</h1>
</div>
</body>
</html>
The console log message in chrome says:
"Failed to load resource: the server responded with a status of 404 (Not
Found) http://localhost:3000/node_modules/angular/angular.js"
The Index.html page renders the Angular code correctly only as a standalone isolated HTML page (without the CSS) when tested within my Brackets text editor browser preview and when tested as a stand alone HTML file using the HTTP-Server module. It correctly shows the number "3". So I know my angular code itself is not the issue here. In my localhost the HTML page does not show the number "3", nor does it even show "{{ 1 + 2 }}". It simply reads: "AngularJS code:" with the rest of the HTML and CSS etc.
Even importing the AngularJS source file via CDN, or downloading the AngularJS source file from Angular's site, instead of from NPM does not make any difference. I have played with the directory structure as well per some of your recommendations, with no luck. So I know it is not the file path of the Angular source file which is the issue.
I have been stuck on this for too many days, have lost sleep, and foregone all other activities all because of this, so If any of you can give me your input as to what is going on and how to resolve this issue, I would be extremely grateful!!! :)
Alright, this is how I solved the issue. It was a server-side issue as I had originally suspected. Within the main Node.JS file (typically either named server.js or app.js) the following is needed:
you will most likely already have this part...
var express = require('express'),
app = express();
Then immediately after the above code block skip a few lines and add...
app.use(express.static(__dirname + '/views'));
Apparently this is how Express knows where to serve your JS files. The 'views' folder is where my HTML pages are. You may have them in a folder named 'public'.
The solution to the following link is what helped me solve the issue: AngularJS Code not working with NodeJS
I will add that this is definitely strange to me in that JQuery works by importing it's source file via CDN WITHOUT THE ABOVE CODE CHANGE, yet Angular would not work via both a locally downloaded Angular source file OR via the Angular CDN! If I ever figure out why this is so, I will be sure to update this answer. If any of you Angular, Node, Express experts know why this is so, please enlighten us all!
Hopefully this helps someone running into a similar issue. A big thanks to the two of you that tried to help me solve this weird issue. Your time and input was greatly appreciated!
There is problem obviously in attaching Angular JS to your index. You have already said that you even tried attaching through CDN.
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<h1> {{1+2}} </h1>
</div>
</body>
</html>
This works, I have checked. Try to integrate your stuff in this code. And follow Jason's suggestion to attach angular js from your system only. Keep the angular js file within the same folder.
To make that work, you need a directory structure like this:
|--app
| |--index.html
| |--node_modules
| | |--angular
| | | |--angular.js
| | |--angular-route
| | | |--angular-route.js
| |--css
| |--home.css