I'm trying to deploy my first react app and I followed the link below to deploy it on gh-pages. When using Git Bash I didn't get any error message, assuming that it worked. However, when I open the link through settings, it just shows a blank page. What am I doing wrong? Thank you in advance.
Here is the link to my repository: https://zerhar.github.io/todo-app/
Link to how to deploy a react app to Git Hub Pages: https://facebook.github.io/create-react-app/docs/deployment#github-pages-https-pagesgithubcom
If I "view-source" https://zerhar.github.io/todo-app/ I see that the JavaScript script tags are not pointing to the correct path.
For example, here is one of the script tags which links out to this dead link:
<script src="/Zerhar/todo-app/static/js/2.15fea075.chunk.js">
It needs to be adjusted, so the link becomes this:
<script src="/todo-app/static/js/2.15fea075.chunk.js">
I'm not quite sure where the script tags are being setup as I didn't see them listed here but that would be the first thing to try to fix.
Related
I've been trying to build my first github page for several weeks already. It shows an empty page and I don't know if I'm doing something wrong?
Here is my repository https://github.com/NatellaGomza/reactdnd/tree/gh-pages and page https://natellagomza.github.io/reactdnd/
Thank you in advance!
Look inside your index.html. There are scripts looking like this <script defer="defer" src="/reactdnd/static/js/main.42b16ba6.js"></script>.
As you can src starts with / which is not what you want with github pages, because your page is deployed to https://natellagomza.github.io/reactdnd/ and not https://natellagomza.github.io/.
The solution depends on the bundler you are using.
I guess that you are using create-react-app so the simple change in package.json will do. Try adding "homepage": "./" and then build.
I personally use this gist that automatically builds and deploys my apps after each push to the main branch
I'm at a beggining of my programmer journey, this is my firt post, probably not last.
So here is problem. I build portfolio project in React, using create-react-app. It was not necessary technology but I wanted to practice, by moving simple site to React. I used routes for multipage (there is only 2 pages). I used custom domain, because this will be site for my mother hairdresser salon, and Netlify free hosting. Here is link:
https://bozena.net.pl/
I struggle with redirection for gallery (galeria).
https://bozena.net.pl/pages/Gallery
If I go directly there or refresh, its not working. I used API for pictures, if thats matter. I found out I need to use _redirects file in build folder, but I cant figure out exact syntax for this (I checked Netlify documentation about _redirects). For now my _redirects file looks like this:
/ https://bozena.net.pl/#price-div
/ https://bozena.net.pl/#contact
/(whats here?) https://bozena.net.pl/Gallery
I tried different paths for this gallery, like /pages/Gallery (here is jsx file for gallery) but I didnt find anything working. price div and contact are divs on main page,and this directions will get me to main page. Anyone help me get this gallery link working?
Here is code for whole page:
https://github.com/kadynski/Hairdresser-app
code
bold
italic
quote
Draft saved
I'm at a beggining of my programmer journey, this is my firt post, probably not last.
So here is problem. I build portfolio project in React, using create-react-app. It was not necessary technology but I wanted to practice, by moving simple site to React. I used routes for multipage (there is only 2 pages). I used custom domain, because this will be site for my mother hairdresser salon, and Netlify free hosting. Here is link:
https://bozena.net.pl/
I struggle with redirection for gallery (galeria).
https://bozena.net.pl/pages/Gallery
If I go directly there or refresh, its not working. I used API for pictures, if thats matter. I found out I need to use _redirects file in build folder, but I cant figure out exact syntax for this (I checked Netlify documentation about _redirects). For now my _redirects file looks like this:
/ https://bozena.net.pl/#price-div
/ https://bozena.net.pl/#contact
/(whats here?) https://bozena.net.pl/Gallery
I tried different paths for this gallery, like /pages/Gallery (here is jsx file for gallery) but I didnt find anything working. price div and contact are divs on main page,and this directions will get me to main page. Anyone help me get this gallery link working?
Here is code for whole page:
https://github.com/kadynski/Hairdresser-app
Try this
add a file in your project public folder name it as _redirects
and then paste this code and save (and deploy) /* /index.html 200
Source: https://answers.netlify.com/t/netlify-page-not-found-when-sharing-react-router-dom-based-links/11744/2
I am building a personal website using Hugo Static Page Generator, but when I do hugo serve, I am no longer seeing a page, but simply a blank page at localhost:1313.
I deleted everything and did a fresh install. But still, Hugo is serving blank pages.
In the blank page, I see the Favicon of the previous site draft I had, even though I deleted everything from the previous theme. I cleared the browser in Chrome and tried a different browser too, but it's still not working.
Not sure what information I can provide, as there are no error messages. How can I fix this?
The problem is likely to be the theme - it is either missing or broken. Hugo does not come with any default/fallback theme if you fail to provide a working one.
Debugging guide:
Check the themes folder, and follow the quickstart.
Try using another, simpler theme.
It may only be a question of configuring the theme, you may read the hugo theme documentation too.
Please verify your config.toml file points to right theme.
If following Quick start tutorial, you might have forgot to run
echo 'theme = "ananke"' >> config.toml
I ran into the same issue after following the hugo getting-started / quickstart guide but instead of using an existing theme i created a very basic theme:
Install hugo i picked install hugo on windows
Create a New Site hugo new site quickstart
Add a Theme
cloning a theme (for example the ananke-theme ) is easier <-- this is what the quickstart does and what i left out
instead you can create a theme with hugo new theme [your-theme-name] which adds a theme skeleton inside your site-folder for example C:\Hugo\Sites\example.com (see the screenshot)
Add Some Content hugo new posts/my-first-post.md
Start the server hugo server -D --watch --verbose
After you created a theme files and folders should be under Sites/example.com/themes/your-theme-name/. Since most of the generated files are (nearly) empty you have to edit a few of them before the quickstart sample is working.
Based on develop a Theme for Hugo i edited /themes/your-theme-name/layouts/index.html
<!DOCTYPE html>
<html> <body>
{{ range first 10 .Data.Pages }}
<h1>{{ .Title }}</h1>
<div>{{- .Content -}}</div>
{{ end }}
</body> </html>
Basic information about hugo taken from develop a Theme for Hugo
Hugo configuration files (TOML, YAML or JSON) are located in the root of your site
Hugo default: Markdown inside content/,
content files contain metadata (frontmatter) and text (/markdown) --> html to public/,
example frontmatter attributes: date, title, description, categories, tags
templates under themes/ (or layouts/)
three types of templates: single, list, partials
theme templates under /themes/your-theme-name/ and then under /layouts/ for index.html and under /layouts/_default/list.html and /layouts/_default/single.html
HTML files will be written to the public/ directory.
You may want to read the hugo theme documentation.
I had the same problem when I cloned my blog from Github but didn't include themes submodules. Including submodules solved my problem:
git clone --recurse-submodules https://github.com/username/your-blog
It could be potentially an issue with the config.toml in the Hugo project directory.
I recently ran into a similar issue where I was seeing only a blank page while trying to create a custom theme with the Hugo and all you have to do is tell Hugo where to find your initial HTML page to render on the browser.
If you are trying to install a theme OR creating a custom theme, go to config.toml in the base directory and specify the theme name as given below:
theme = "${theme_name}"
If you are using the default/custom theme, the theme name will be same as the folder name under themes folder in the project directory.
So I am trying to emulate the example "Hello !" given on the Angular website here: http://angularjs.org/ under the section The Basics.
I have placed the following file in my my-user-name directory which contains the angular.js directory that is installed when you clone the Angular repo as per the site's instructions.
<!doctype html>
<html ng-app>
<head>
<script src='js/angular-1.0.0rc6.js'></script>
</head>
<body>
<input type="text" ng-nmodel="name">
<h2>Hello {{name}}!</h2>
</body>
</html>
I am running the angular server via grunt webserverwhich I run from my home directory path and access the above html file by typing http://localhost:8000/angular.html But I get a blank page. I realize that the path js/angular-1.0.0rc6.js doesn't mean anything in the context of my home directory in that there is no js directory in my home dir and similarly no angular-1.0.0rc6.js lying anywhere around those environs. I just copied that path-name from the example. What is the standard protocol in terms of where the script files are located relative to where you develop your angular apps?
Thank you!
There's so many possibilities that I'd nudge you in a slightly different direction to get started. Check out Yeoman (http://yeoman.io).
Yeoman is a nice way to learn because, after running it (which just takes typing 'yo angular' on the command line once Yeoman is installed), it gets you started with a small working app that you can experiment with and it scaffolds up a nice overall base (code/test scaffold, tools, ...) to build from. And it even uses grunt, as you did, to launch your app (you'll just type grunt server and your app should appear in a browser (with live reload working - which is a cool time saver).
Yeoman should save you from having to figure out the kinds of things you are now- is my file in the right location? is my server pointing to the right place? etc... All taken care of by yeoman.
Here's a tutorial showing how to install Yeoman and install Angular: http://www.sitepoint.com/kickstart-your-angularjs-development-with-yeoman-grunt-and-bower/
You'll see it's only a handful of commands.
In case you'd like to dive in more, here's a talk posted by the Angular team about using Yeoman with Angular: http://www.youtube.com/watch?v=XOmwZopzcTA
I am new to EXT JS environment. I am working on a dynamic java project in eclipse indigo where i want to use ext-js calendar in one of my jsp.I saw the EXT_JS calendar demo from downloaded 'ext-4.1.1' sdk(index.html file in ext-4.1.1a\examples\calendar).
I want to create a .js file as like ext-js calendar page. So for that i followed the path given in
http://loianegroner.com/2010/11/spket-setting-up-eclipse-ide-for-ext-js-and-jquery-development/ to integrate ext-js in eclipse.
But now when i copy index.html to my webcontent folder then it is not working(Originally it is showing nothing). But when i copy the entire ext-js source code to my workspace web content then running the index.html file in example/calendar folder of ext-4.1.1a giving me required result.But I don't think this as a solution.
I could not find any way also how to start to do my task.
So Pls anybody help me here...
Regards :
Dev
When nothing shows up on the screen, it is commonly a case where the ExtJS library isn't loaded. Without seeing the code, it's hard to pinpoint the issue.
Using Chrome Dev tools or Firebug for Firefox, take a look at the console and/or network output.
The files you're looking for will be included in the <head> section of your index.html. There should be ext-all.js or possibly ext-all-debug.js at a minimum, plus the style sheets.
If this is your issue, then you need to include the proper paths to the ExtJS library. This can be the local installation, or you can use a CDN. For example:
<script src="http://cdn.sencha.com/ext-4.1.1-gpl/ext-all.js"></script>