Jekyll deployed in github shows raw text of index.html file - github

I am trying to deploy the Jekyll website using the forked repo from https://github.com/cotes2020/jekyll-theme-chirpy theme. On my local system, all works fine. I have followed through all the instructions given in https://chirpy.cotes.page/posts/getting-started/#deployment and all appears to be ok. Even Github build status also indicates that the site is up and running at https://wxguy.github.io. However, when I access https://wxguy.github.io from firefox, The following line is displayed:-
--- layout: home # Index page ---
This is the exact content of the index.html located at the root of the project. I have renamed the index.html to index.md and deployed it again to GitHub. But still, the problem persists.
Next, I copied the content of _layouts/home.html to index.html again pushed it to GitHub. This time, it only displayed the text of Front Matter.
From the message I received on the firefox, it appears that GitHub is not building Jekyll site properly. I have deployed my site on the master branch in the remote.
I have gone through other blog source files which use the same theme at https://github.com/v3rtumnus/jekyll-blog. I am not able to figure out if any major changes I made to any configuration files.
Can someone help me to resolve this issue?

I got the issue solved by doing the following:-
The theme I am using uses GitHub action and hence I have to configure it under GitHub/username/username.io/settings --> Actions --> General --> Scroll down the page to select "Workflow Permissions" and "Read and write permissions".
Deploy your modified site to Github.
Go to again settings GitHub/username/username.io --> Check if the workflow is completed successfully. If not, then rerun the process.
Go to settings -- > Pages --> Select gh-pages as a branch and /root as a directory.
Wait for a few min and your site should be up and running.
I also found that there was an issue with the browser cache which was not allowing a new page to load from the server. Therefore, I opened the site in private mode.
Hope it helps others.

change setting to deploy source = github actions

Related

Jekyll/Github site does not show correct sample blog post on Github

I am running Windows 10 with GitHub Desktop. I installed Jekyll and tried to create a test blog.
I started with the instructions at:
https://docs.github.com/en/pages/setting-up-a-github-pages-site-with-jekyll/creating-a-github-pages-site-with-jekyll
I created the repository in GitHub Desktop and immediately published it to Github.com.
When I use GitHub Desktop to "open in bash" as mentioned in the link above, I get sent to:
E:\codingPractice\DocSourceBlog\DocSourceBlog>
Following the suggestions in the link above, I enter:
E:\codingPractice\DocSourceBlog\DocSourceBlog>mkdir docs
E:\codingPractice\DocSourceBlog\DocSourceBlog>cd docs
E:\codingPractice\DocSourceBlog\DocSourceBlog\docs>git checkout --orphan gh-pages
I enter $ jekyll new . and I get
New jekyll site installed in E:/codingPractice/DocSourceBlog/DocSourceBlog/docs.
I edit the gemfile, comment out the "gem jekyll" and change the next line to
gem "github-pages", "~> 214", group: :jekyll_plugins
by substituting the current version number into the boilerplate of the above link.
I run bundle update and bundle exec jekyll serve and localhost:4000 shows the expected site, including a sample blog post that can be accessed by clicking "Welcome of Jekyll!" That sample blog post starts off with:
You’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways,
I use GitHub Desktop to commit the changed files to the branch and publish the branch to GitHub.
I refer to instructions at:
https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site#choosing-a-publishing-source
I go to github.com/longarchivist/DocSourceBlog/settings/pages and set the source to "gh-pages" and "docs"
I go to https://longarchivist.github.io/DocSourceBlog/ and see that some of the content is there, but the blog post does not seem to show up as expected at "Welcome to Jekyll!" I click the link and get to
https://longarchivist.github.io/jekyll/update/2021/04/18/welcome-to-jekyll.html
but that has the 404 page.
I check the github web interface to make sure that the "_posts" directory is there.
I noticed that the address of the "Welcome to Jekyll!" link was:
http://localhost:4000/jekyll/update/2021/04/18/welcome-to-jekyll.html
I can speculate that ruby somehow destroyed the correct Jekyll configuration when I tried bundle exec jekyll serve but if that was enough to break the system then the documentation seems to be badly misleading.
I tried editing the config file. The "baseurl" variable is now "/docs" and the link address is
https://longarchivist.github.io/docs/jekyll/update/2021/04/18/welcome-to-jekyll.html
However, the desired sample blog post still does not display. Instead
https://longarchivist.github.io/docs/jekyll/update/2021/04/18/welcome-to-jekyll.html
is still a 404 page.
So the localhost problem is not the key to the problem.
Any constructive criticisms would be appreciated.
The best way seems to be to start a root directory that must contain your username first, then start a separate project directory for each project.
After creating a project directory, use "jekyll build" to auto-generate a Jekyll site. Add posts manually in the posts directory: somehow the index finds them automatically.
Then go back to the root site and manually add a link to your project directory.
For example:
https://longarchivist.github.io/
links to
https://longarchivist.github.io/codediary/
which currently has two posts. I created the second post by copying the original, then renaming it. Jekyll apparently expects the post filename to have the correct day and month, so when I use this tactic in the future, I will have to update those manually.

Why can't I host my project on github pages?

I have a simple weather app using react I've built and pushed to Github. Everything works when I run it locally but when I try to host it on Github pages, I get a 404 error.
https://caseycling.github.io/weather-app/
I'm not sure what I did wrong as I took the same steps as with every other project I've succesfully deployed: went to settings and under Github pages, I chose master branch as the source. Initially, it was just displaying the readme but now it only displays a 404 error message. When I've googled this issue, some people are saying I need to move my folders to the root of the directory but I'm not sure how to do that exactly.
Here is the repo:
https://github.com/caseycling/weather-app/
My understanding is that in order to run a react app in github pages you need to setup the gh-pages plugin and have a special 'deploy' build script in package.json
https://itnext.io/so-you-want-to-host-your-single-age-react-app-on-github-pages-a826ab01e48
https://codeburst.io/deploy-react-to-github-pages-to-create-an-amazing-website-42d8b09cd4d
https://medium.com/the-andela-way/how-to-deploy-your-react-application-to-github-pages-in-less-than-5-minutes-8c5f665a2d2a
There are also apparently certain restrictions in what you can do with the router in github pages websites, but for a simple app it should be sufficient.

Github page not showing the contents of my index.html

My code works fine locally. However, when I tried it on a GitHub page url, the content don't show only the background colors show. How can I fix this?
UPDATE:
Mixed Content: The page at 'https://vanessachu.github.io/WebResume-3.0/' was loaded over HTTPS, but requested an insecure script 'http://code.jquery.com/jquery-latest.min.js'. This request has been blocked;
the content must be served over HTTPS.
This is error from chrome's web console, you can filter the console in DevTool to only show errors and then you will find it appears as the first error, since most of your vendors libs depends on $/jquery, you can either:
a) Download a minified jquery and place it in your js folder
b) Request it from a CDN that serves static assets using https instead of http. Personally prefer UNPKG - https://unpkg.com/jquery#3.3.1/dist/jquery.min.js
Some web security readings you might find useful: what is mixed content.
From the GitHub Pages doc:
You should follow bellow steps:
1. On GitHub, navigate to your GitHub Pages site's repository.
2. Repository settings buttonUnder your repository name, click Settings.
3. select-gh-pages-or-master-as-sourceUse the Select source drop-down menu to select master or gh-pages as your GitHub Pages publishing source.
4. click-save-next-to-source-selectionClick Save.

Github pages returns readme file instead of index.html. Can't host my react project

I have problem with host my react project on gh-pages.
i Have my repo on github ----> GitHub repo
My page return readme file instead of indx.html (public/index.html). ---> My Page
What should i do to my page with my react app works correctly?
In my experience, it was simply a latency issue. When I initially committed index.html (in the root of the repo), myorg.github.io continued to serve README.md. After a few hours, I returned and tried it again - lo and behold my index.html was served. Because of the time I was away, I can't make a guess about how long it takes github pages to update.
I have added front matter part to the readme.md and it fixed the problem.
---
permalink: /index.html
---
After this it shows index.html instead of readme. I have found this solution also helps for custom 404 pages. https://help.github.com/articles/creating-a-custom-404-page-for-your-github-pages-site/
Yes, the problem is in how you have deployed your site, you should deploy your target index.html to gh-pages
Check this out:
https://medium.freecodecamp.com/surge-vs-github-pages-deploying-a-create-react-app-project-c0ecbf317089
It gives a detailed and pretty good explanation on how to deploy react application to github pages.

GitHub pages are not updating

I'm running into a weird issue with GitHub pages. I pushed a new commit to my personal pages page maltzj.github.io, but the new article isn't showing up there. When I execute the server locally, a post lives at localhost:4000/posts/the-price-of-inconsistent-code/. However, when I go to http://maltzj.github.io/posts/the-price-of-inconsistent-code I get a 404. I also added a new file which should live at http://maltz.github.io/test.html, but that also throws a 404.
Everything builds and runs locally. My Git repository is up to date, and there is nothing on the GitHub status page about problems with builds, so I'm at a little bit of a loss about where to go with this. How can I get my page to update with new content that I add?
For reference, the location of the repository which backs my page is http://github.com/maltzj/maltzj.github.io
None of these solutions solved it for me. The solution was to edit the index.html file in the GitHub website.
The website then updates on the web as expected.
Go to your index.html file through your site (example.github.io/index.html) and then reload the page. Then you can go back to (example.github.io) and it should have updated. You can do the same with the master.css file, etc.
If it doesn't work, try reloading (github.com/example/example.github.io/[blob/master/]index.html) instead and it will have updated.
For others, also check the dates of your posts. I just had this problem. I'm at UTC+11 and I'm pretty sure the server is at UTC. Thus if I date my posts with my local time, the server thinks they are in the future and won't build them. Using UTC avoided this for me.
As mentioned by joao cenoura in the comments below:
you can tell jekyll to show "future" posts by adding future: true to your _config.yml
and/or add timezone: TIMEZONE to specify your timezone.
See https://jekyllrb.com/docs/configuration/ for more info.
I had an empty CNAME file. Check that if you're having a similar issue.
I had this fault today with a static page - the cause was actually a service failure at GitHub Pages itself. You can check for service messages at https://www.githubstatus.com/.
I had the problem of having an unverified email. The update worked for the first time, but it failed after that. A verified email is needed to trigger a GitHub pages build. Also a deploy key cannot be used for this, as it won't trigger a build.
Source: http://web.archive.org/web/20140712011932/https://help.github.com/articles/troubleshooting-github-pages-build-failures/
Disclaimer: this was the case in 2014. Don't know if it's still required.
I had an unclosed <a> tag which caused the build to be pending forever. Fixing that solved the issue.
It makes sense that GitHub would verify your links.
I got it to work.
Mine was a simple problem. It was a browser cache problem.
I opened my link on a different browser and it showed me the updated push.
In my case, none of above solutions works. Finally I find out the reason is: there is "relative_permalinks" option in my _config.yml. This option is recently deprecated in Jekyll 3.0.
Refer to:
https://help.github.com/articles/removing-relative-permalinks/
I know this might sound simple, but make certain you are on the right branch and in the right file.
In my case, I made a GitHub page and tried to commit from my local repository on the master branch. Also, I was updating my filename instead of index.html. These were my errors. I had to switch to the GitHub page branch and update in the index.html commit, push and then everything worked fine.
For me, I just waited ~5 minutes, and it was updated.
If someone has made the branch gh-pages from scratch (manually) the problem is that you need a file call params.json to make it work.
I don't have this params.json file, but it still works...
In my case, it happened to be that I mentioned a relative path to refer to an image, something like - ./test.png.
It seems that it's not allowed, and it may be a security issue or what. Whatever, if you've done something like that, remove it and refer to it as test.png.
In my case the problem was because of my repository was private. After I made it public, the problem has gone.
The weird part of story is that I was able to create private repository and use GitHub pages with it. I did it in accordance with the official guide (http://take.ms/p2SS7). It worked fine for about 9 commits, but on the 10-th it became broken.
I ran into the same mysterious issue today. I pushed some new code to my github.io-repository, but the changes did not show up on the corresponding webpage. I inspected the page and did not see the new code in the source. I solved the issue by doing a hard reload. On Chrome, you can do a hard reload by opening up Dev Tools and right-clicking on the refresh-button and choosing Hard Reload.
Please refer to the Jekyll troubleshooting website, as there are multiple error sources: Troubleshooting Jekyll build errors for GitHub Pages sites
In my case a German umlaut ("ö") in a Markdown file caused the problem.
In my case, I forgot to define kramdown in _config.yaml
# Build settings
markdown: kramdown
This was caused when I was converting from a theme without to a theme with the kramdown requirement.
Make sure your run
npm run deploy
Clear your browser cache.
In my case, after trial and error on some solutions here, what fixed it was adding the encoding to the _config file like this
encoding: UTF-8
More troubleshooting options here
For me it was an issue with not properly having a .gitmodules file.
I was able to troubleshoot in the settings tab of my repository, under the GitHub pages section, which indicates build issues and was helpful for troubleshooting.
Oddly (and simply) enough I created a new branch, made that branch the "default" branch and pushed from there.
This worked for me.
My GitHub Pages was turned off under the Settings tab of the repository.
I don't remember turning it off, but there it was, and turning it back on was the fix.
In the repository settings, make sure the GitHub Pages is currently being built from the gh-pages branch.
In my case, my problem was after git push my GitHub file was updating but not showing my website on GitHub pages.
Note: I was creating Website by React
Also, on the HTML project, I faced the same problem. In that case, I just did first of all git pull and then git status | git add . | git commit -m"adding some content" | and git push. It worked for me.
But in the React project, it didn't work. I run this again on my cmd npm run deploy then my React web application is showing on GitHub pages.
My suggestion is to try everything showing on this post comments. Because the solution to this problem is not one.
In my case I left an empty parameter, url, in _config.yaml.
After I've specified url: example.github.io everything started to work.
I had this problem this week and no solution worked.
I don't use Jekyll, only pure static HTML.
It just sat three days refusing to update.
Here is what I had to do to get it to publish again.
Make a snapshot branch from master.
Reset the master branch to the last commit that is live. (Commits tab, green checkmarks indicate published commits)
Make a new commit with a smoke test. I made an HTML comment I could grep.
Force push master.
Check results curl https://example.com | grep SMOKETEST
Reset master again, removing the smoke test.
Cherry-pick each commit from the snapshot branch you need to get your unpublished changes back into master (cherry-picking gives the commits new ids/hashes, avoiding the risk of anything having cached them from before).
Force push master again.
Now you should get green checkmarks and published updates.
Note: It could be enough to force push to remove the commits that are stuck and getting them back again. The smoke test is almost certainly not required. Cherry-picking may not be required.
Github doesn't publish to github pages for me if I edit and commit files directly on github web site.
However, if I edit file locally and commit with GitHub Desktop, then change is published to site within seconds.
BTW, my email is verified, so this shouldn't be an issue. And I'm using same account.
Solution worked for me for an app created using create-react-app :
Go to GitHub Pages section under repository settings
Change source from gh-pages branch to master branch
Wait and check your custom domain website, should show master branch README.md file
Now change the source back to gh-pages
Wait couple minutes, now latest changes reflected on custom domain website
I had tried different solutions, none worked. Like a new commit, an empty commit, browser cache clear, wait for 5 - 10 minutes, delete gh-pages branch and push again, edit CNAME, create a new CNAME under on master branch etc
Note: My app has no _config.yaml file, no jekyll. I'm using custom domain with https (google domains). gh-page branch auto created by package.json script deploy: "gh-pages -d deploy"
In my case, I had made a couple of changes in the index.html and style.css files but those changes were not reflecting on the Github pages. But when I updated the Readme file by adding one line the Page got updated.
Maybe you can try this, as it might work for you just like it did for me.
If you are deploying some simple HTML codes, try this:
First, go to Actions > Deploy static content to Page:
Then, click the Run workflow:
My site failed to deploy today because of a transient failure in the GitHub Pages deploy actions. The action needed to be re-run through the Actions tab for the new version of my site to appear.
The story:
I pushed new content, on a site that's purely static and doesn't use Jekyll. After many fruitless Shift-Ctrl-R reloads on Chrome, I decided to investigate. I first visited Settings→Pages for the site’s repository, and saw that no recent deploy had taken place.
Why not, I wondered? After double-checking that my push had really gone through, I clicked the word “deployed”, and was taken to a GitHub Action that had failed!
Since the error message ECONNRESET looked like a generic network error internal to GitHub’s network, and not any problem with my site, I clicked the “Re-run” button in the upper right and asked GitHub Actions to re-run the failed task. Within a few seconds it had been re-tried and had succeeded!
Lessons:
Deploys are vulnerable to transient errors.
Deploys these days happen as normal GitHub Actions that you can inspect.
The deploys can be re-tried.