I have created a blog using jekyll that is hosted via github pages. When I view the site locally using jekyll serve it loads correctly with all the css & assets showing up. However, when I view the same site on a custom domain (www.switcorn.com) the css and assets are not showing up properly everywhere except the home page.
The source code is found here: https://github.com/ishu3101/blog/tree/v1
Related
I have my website hosted on github pages and I wanted to add Google Analytics to count views on it.
I created a Google Analytics account, created a new UA property and added full path to my website ( username.github.io/reponame/ ).
Then I added global site tag to head of my index.html ...
I waited for some time but still I can see 0 active viewers in analytics page even if I active on my website using 2 devices...
Since I found various answers about setting up analytics with Jekyll, I added Cayman theme, edited _config.yml, added _includes and did whatever said in that blog but still it didn't work ( I am not used to github actually )... So, I removed whatever changes I made for that Jekyll thing and now my repository consists of only stuff which I added in the beginning.
Why is it not working on my website ? Did I go wrong somewhere ?
How do I add Google Analytics if my repository currently consists of only index.html, css files and JS files ?
Make sure to have included {% include analytics.html %} in your website somewhere. The best practice is to put it into the head of your HTML.
Inspect your webpage, for instance with Chrome tools, to check that the script containing your Analytics ID is indeed loaded.
You should see something like:
<script async src="https://www.googletagmanager.com/gtag/js?id=G-ZKGE3RWEMU"></script>
I created a Flutter web app and published it via my personal github.io repository site. This root site loads and works as expected.
I also created a simple HTML/CSS/JavaScript website and pushed it to a respository on my github. I published that site, as well, and it loads as expected. (From the repository home page I went to Settings, Pages, and enabled the respository as a GitHub Pages site by selecting its master branch for the Source setting.)
In other words, I can publish a flutter web app to GitHub Pages & I can publish more than one web site to GitHub Pages.
But when I try to publish a second Flutter web app, following the same procedures as for the simple HTML site, and even get the message from GitHub (with a green check mark) telling me my site's published, all that's displayed is my root github.io site. When I enter the URL I see the correct page title briefly flicker, but then root site immediately loads. (I have more or less the same issue as described in this post.)
If you need to host a Flutter web app at a non-root location, you need to follow the instructions for doing so:
Update the <base href="/"> tag in web/index.html to the path where
your app is hosted. For example, to host your Flutter app at
myapp.dev/flutter_app, change this tag to <base href="/flutter_app/">.
You need to change your base to <base href="/repo_name">. If you did not already have a base tag, add it.
You might also be able to just remove the base tag if you had it set to the default of <base href="/">.
I deployed a gatsby blog I made to github pages. The first page links to a blog article. Nothing shows up when the link is clicked. But if I type the url in manually (Same url that is linked) I see the page for half a second before it dissapears to a blank page.
Helpful information
Everything in the network tab is status code 200
The HTML is returned in the get request, it is visible in the response
head tag is on the page correctly, body tag is missing the html
No console errors
Works perfectly on development server (localhost)
Domain is hosted with domain.com
Using createpage gatsby plugin to generate article page
It works when I deploy on netlify to a random url so maybe something to do with my domain or the gh-pages deployment
After looking at your GitHub code, I think you have a problem here: (Wrong URL: /blog/blog/why-gatsby), also your master code does not match code with the gh-pages (I know it's generated files from gatsby build but other stuff). Also, why are you creating a static query in the index.js component? You can do that with a regular page query.
Your gatsby site starts from https://www.ragith.com/blog/ and that's why you have that kind of a problem. When gatsby look into pages, there's only blog.js inside of it.
I.E:
pages/blog.js
Link problem
<a class="article-card-link" href="/blog/blog/why-gatsby"><section><article><h2 class="article-title">Why Gatsby js ?</h2><p class="article-date">May 09, 2020</p><p class="article-excerpt">In a world with so many JavaScript frameworks such as React, Vue, heck even Next, why Gatsby? The short answer is, none of those frameworks are the target market of Gatsby. Gatsby is a static website generator. Great! Wait, who cares? Well a lot of my clients and so will yours…</p>READ MORE</article></section></a>
I tried to setup two repository github pages. Just wondering why one works and the other doesn't.
Works - https://ngaisteve1.github.io/calculator/
Doesn't Work - https://ngaisteve1.github.io/BlackJackJS/
Second question is, is it possible for my to deploy my html with Javascript in GitHub pages or is it GitHub pages is only deploy html page?
Both links work now. GitHub Pages might take a moment to deploy your most recent changes.
You can host any static content, including client-side JavaScript (GitHub Pages will not run any code for you on its back end).
I am using the 'Automatic Generator' of GitHub Pages, and I see it only generates a single index.html and other web resources.
How it works if I want to have a multi-page website generated from other markdown files?
You can get github to generate .html files from .markdown files by ensuring the top of the .markdown starts with the ---- block like this:
---
title: This will be used as the title-tag of the page head
---
hello
=====
**You are here!**
Found this here:
http://xlson.com/2010/11/09/getting-started-with-github-pages.html
Github will automatically create pages for you, if you include the markdown file.
index.html - yourname.github.io/project-name/
about.md - yourname.github.io/project-name/about
foo.md - yourname.github.io/project-name/foo
Tested this and working.
If you want to get into the really fun stuff - you need to get into Jekyll http://jekyllrb.com/
You pull the generated page, make any modification and addition you like (including adding new pages and links between the pages), then commit and push.
The generated single page helps you to make you start. You can duplicate its layout to generate other similar-looking pages by hand.
See Help.
Github Pages uses the Jekyll site generator which suports converting any number of markdown files to HTML for you, and applying the surrounding template via a layout file. See github's documentation on using Jekyll: https://help.github.com/articles/using-jekyll-with-pages
The trick is that you have to download a jekyll template/theme and include it in your gh-pages branch on your own (standard jekyll configuration), instead of just allowing Github Pages to auto-generate the one file using its own built-in themes.
GitHub Pages' automatic generator only generates one page.
You can add the new file directly, github page publishes all data (including data inside the subfolders) for you.
Just made gh-pages-generator - the utility to generate site with the navigation from multiple markdown files having links to each other.
"Github pages" hosts web page from index.md / readme.md as main page . However if you have an index.html file then it'll be hosted from html file.However , if you are trying to host a multi page website using "Jekyll themes" then Jekyll theme is not straightaway deployed in subsidiary pages .
Case 1) You are using markdowns to host your pages
index.md -> main page
page1.md -> page 1 of your website
..
so on
To generate a multiple page website using github page just give relative path to the required page without extension i.e.
make a button
Go to next page
And by clicking on this button you will be directed to page1 with jekyll theme deployed