Github pages shows blank page - html

My repo: https://github.com/something/personal_website
My website: https://website.com/
I can not figure out why my GitHub pages can’t load any of my source files. The files I want to load are in the src folder. Everything works as it should on localhost. It only loads index.html which is a white blank screen, I don't have anything coded in this file. I’ve seen a few similar posts about this issue but have not found any common discrepancies.
I have installed through npm the gh-pages module and done “npm run deploy”; this created my gh-pages branch. I’ve updated my package.json with the appropriate information. As far as I can tell I have no capital letters in my repository.
I hosted another website previously on Github Pages at this domain with no issues. It appears that Github pages and the process has changed since then and I can’t get it to work.

The problem is that your homepage is trying to load assets from https://something.com/personal_website/static/js/main.3edbf089.chunk.js rather than https://something.com/static/js/main.3edbf089.chunk.js.
Remove the personal_website extension from homepage in package.json and the routes should work properly.
Therefore your new package.json should look like:
{
"homepage" : "https://something.github.io/",
"name": "my-website",
"version": "0.1.0",
...

Make sure that your package.json contains
"homepage": "https://username.github.io/appname"
If you are using BrowserRouter, set the basename:
<BrowserRouter basename={process.env.PUBLIC_URL}>
Your .env file cannot contain something like PUBLIC_URL=/ when you do a deploy (it was the problem in my case)

I've been stuck to this for two days. And finally, I solved it.
It is working to local but after deployment it is opening the blank page.
Problem is we changed the homepage path. So We need to update paths which are in our code.
If I give an example with my case, I added homepage into the "package.json" file something like:
"homepage": "https://[YourGitHubAccountName].github.io/[YourProjectName]"
So after adding this, app doesn't work because The paths which are inside of my code need to be change.
For example:
'/' paths should become '/[YourProjectName]' or
'/test' should become '/[YourProjectName]/test'

Adding "homepage": "https://myusername.github.io/my-app", to your Package.JSON might solve your problem.
remember replace your github user name and your app name.

Related

Random behavior due to a file conflict running a Jekyll theme locally?

I have, in some unexplained way, managed to get my first Jekyll site with the "Agency" theme running locally.
However, there is something that is still not right. I extracted all the files from the biggest zip file of the theme, which seem to cover all files.
First I must point out that I'm not using GitHub at all for my site. Using only local resources on my Windows machine (afaik), and I'm developing by browsing http://localhost:4000.
I get this warning:
Jekyll Feed: Generating feed for posts
Conflict: The following destination is shared by multiple files.
The written file may end up with unexpected contents.
C:/web/_site/assets/css/agency.css
- assets/css/agency.scss
- C:/web/assets/css/agency.css
...done in 0.1660095 seconds.
This creates strange behaviour. I run these commands:
bundle update
bundle exec jekyll serve
... The site works perfectly until I make some changes that make the style of the page go bananas. I assume it has to do with the warning of the CSS file. It's like it reverts back to some default CSS and my latest changes won't show.
When running the serve command everything auto-updates anyway. The CSS warning conflict never goes away though.
In my _confg.yml file, I could run any of these lines (or comment them both out) and it will work:
theme: raviriley/agency-jekyll-theme
remote_theme: raviriley/agency-jekyll-theme
I'm still confused in general about how Jekyll works and what might have happened in my case. Hope someone can help me solve the conflict thing.
Not sure what you have changed in your CSS but I cannot reproduce your issues using the Agency theme locally on Windows (I have downloaded the theme here and copied all files).
By default, the _config.yml file contains this line for the theme: theme: jekyll-agency. After running bundle and starting the jekyll server, I can see the page. Any modification, such as * { color: red } shows fine, I don't get errors in the logs.
One difference to your version
There is no agency.css file but only the SCSS version of it. The SCSS file is localed in assets\css\agency.scss
This file imports all the other variables and styles. The styles are placed in scss files in these three folders:
base
components
variables
Of course, you can also add styles to the agency.scss file but I would not do it, the component/layout structure makes sense. Read about the Sass Basics here: https://sass-lang.com/guide

Using default Hugo theme content through Netlify produces blank webpage, but works locally. blogdown

I have found the same/similar question to mine here: Create a new static page using blogdown with same hugo theme as main site but I cannot understand what the solution is as there seems not to be one explicitly, or I just do not grasp it.
I am an absolute beginner. I am testing the procedure to move generated code to netlify to produce a website.
I can put the public/post/2020-12-01-r-rmarkdown/index.html file into public/ folder in github and generate the example site on netlify e.g.:
https://github.com/hjhjonas/blogsite/tree/main/public produces
https://elastic-ptolemy-e2ba86.netlify.app/
However I plan to edit the default theme and use that instead. But the default index.Rmd file that produces the index.html file after i edit the yaml files and content files to use is like this:
https://github.com/hjhjonas/blogsite/blob/main/index.html
and produces a blank page on netfify.
But if I knit from Rstudio and serve_site() locally, it looks like this image attached, which is correctly what I need.
What I want to do is edit this original theme/layout and put the generated html into the public folder in github for Netlify to read.
The index.Rmd file that produces this local site is just
---
site: blogdown:::blogdown_site
---
I previous had a 404 error on netlify and followed these steps to realise that the html is required for Netlify to produce the deploy the page:
https://answers.netlify.com/t/support-guide-i-ve-deployed-my-site-but-i-still-see-page-not-found/125
This is the theme that I would like to use https://themes.gohugo.io/themes/hugo-lodi-theme/
I don't know how you generated the public/ folder, but it is not meant to be generated by manually copying or moving any files to it. If you publish a site via Netlify, there is no need to generate the public/ folder locally at all, because it can be automatically generated on Netlify.
First, delete index.html in the root directory, and please do not knit index.Rmd again in the future. Second, delete the public/ folder. After the two deletions, I think your site should appear on Netlify soon. If not, see if blogdown::check_site() has any recommendations.

Why won't Github Pages serve my documentation?

I use sphinx to build html documentation, and am in the middle of open-sourcing some of my company's private repos.
Internally, we serve documentation from an S3 bucket through Cloudfront so we can put access controls in front of it. But for open source, I figured publishing via Github Pages would be the path of least resistance.
However, I cannot get the service to work correctly.
Here is my repo, with my index.html in the /docs folder.
Here is the site, which is not applying any of the linked css, and with all page links broken.
I tried to isolate the issue by making a test repo with just the built documentation, and publishing from master.
As you can see, this one does not even try to serve the index.html, I just get a 404 page.
These files work both locally and when serving from AWS, so I'm a little at a loss for why Github Pages is not serving it correctly. I feel like I must be making some sort of dumb oversight. If anyone with more experience could take a look and point me toward the error of my ways I would really appreciate it. I'm a backend engineer for the most part so website logic is a little outside my normal wheelhouse. Thanks in advance!
To anyone else running into the same thing, I figured it out. Because I am pre-building the site in my CI/CD pipeline, I don't need jekyll to build the site for me, and need to add an empty config file for it.
From [here][https://www.docslikecode.com/articles/github-pages-python-sphinx/]:
Next, you set up the .nojekyll file to indicate you aren’t using
Jekyll as your static site generator in this repository.
Thank you for your help!
You need a _config.yml, and you need to enable github pages on Master for the repo (go to settings). After that, you also need a Gemfile it the following:
source 'https://rubygems.org'
gem 'github-pages'
Normally, the GitHub pages site needs to be in the root, and yours looks like it's in a /docs folder, so I'm sure you can Google how to do that. It might not be possible though with GH pages, I'm not sure.
If it must be a subfolder and not the root of the project maybe something like this would work: https://gist.github.com/cobyism/4730490
Heres whats in my _config: for barebones sites:
permalink: pretty
sass:
sass_dir: _scss
style: compressed
I'm sure you can leave sass out

Setting a GitHub pages site from a Jekyll-generated page

I cannot setup a new Jekyll-based GitHub pages site based on the tutorials I've read. Here is the full list of steps I took:
Ran jekyll new jek_test. This created a new dir.
Used GitHub desktop to create a git repository in that dir, then pushed it to a new git repository, jek_test.
In the project settings GitHub Pages panel, I choose master branch as source.
So far this had no effect I could see. Navigating to https://gadial.github.io/jek_test/ yielded a 404 error.
I added the following two lines to the projects Gemfile:
source "https://rubygems.org"
gem "github-pages", group: :jekyll_plugins
Now, after pushing to GitHub, the https://gadial.github.io/jek_test/ link is working, but the page loaded is obviously incorrect; the CSS is not loaded, the links are wrong, etc.
I guess I am missing several crucial steps, but all the tutorials I've found either go "simply push it and everything will be ok", or seem to assume I am not using a Gem-based theme, meaning all the layouts, css files etc. are explicitly stored in the _layouts directories etc.
Am I going about this the right way? What is the simplest method to get a Jekyll-generated site up and running on GitHub pages?
You are using minima which is the default so, that's not the issue but, if you have a look at your about.md you'll see that it is looking for a layout called page. You currently don't have a _layouts folder
Try creating a folder called _layouts and create a layout in that called page.html with however you want it to display the contents of all files with layout : page
The default page.html can be found here.
You will need to change url to "https://gadial.github.io" and baseurl to "/jek_test".
If this two attributes are not set up properly, Jekyll won't know where to look for your resources.

Setting up a GitHub Pages project page. Page is up but images and main.css are not loading

Hello People of Stack Overflow,
First time setting up a project page on GitHub pages. I'm thinking I probably missed something very simple, but I have tried everything I could find, also hoping that even though this question has a high probability of being a bit idiotic that the formatting is pretty good.
The story so far...
Hosting a static site on GitHub pages. It's a project page based on a working repository. I created a gh-pages branch and pushed to this branch. That branch is now set to default and all the files are up on the repo I have looked at several questions on stack overflow that are very similar to the problem I am having but they don't seem to be quite the same.
The page is loading here
but neither the images or the CSS formatting is loading. The page was built with html, css and bootstrap.
Questions that are very like the problem:
This seems the closest: static resources not loading (rep < 10)
Maybe I need to address the root file somehow in the _config.yml? Like in this question: github pages not building (rep < 10)
Thinking the answer lies here: in the jekyll docs (rep < 10)
Avenues explored:
Created .nojykell file in the root folder, this seemed to be the best option as I don't actaully need jykell.
As another possible route, Created config.yml file
with keep_files: [img, app.js, main.css];
and then include: [img, app.js, main.css];
also added highlighter: rouge; in the 1st line, per a build error.
Jykell gave me an H10 error at one point and I installed kramdown, although that did not do anything, got the same error. This seems like an unnecessary step because I'm not using jekyll, just need a spot to serve the files already created in the interwebs.
Updated ruby
Removed ../ in front of files on the .html pages
Other things you might need to know:
File structure:
- root
- img
- .nojykell (empty)
- app.js
- index.html
- artist.html
- gallery.html
- main.css
Let me know if you have any suggestions and thanks. :)
Good to see you figured it out.
For future reference, a .nojykell wouldn't have solved the problem:
It is now possible to completely bypass Jekyll processing on GitHub Pages by creating a file named .nojekyll in the root of your pages repo and pushing it to GitHub. This should only be necessary if your site uses files or directories that start with underscores since Jekyll considers these to be special resources and does not copy them to the final site.
https://github.com/blog/572-bypassing-jekyll-on-github-pages