Question
I would like to understand why my CSS resources are not loaded on my personal Github IO page tobias-schmidt.site.
Issue
When I acess my page via the custom dns tobias-schmidt.site or via the direct github dns mrtobe.github.io the site correctly loads the index.html but not the referenced CSS files. When I click on the blog post it does correctly load the CSS. Then for this surfing session the CSS is also available on the index.html.
Setup
dns from GoDaddy with A-Record setup for tobias-schmidt.site - this dns was added in the settings of the github repo
Website is generated with hugo - full project is hosted under https://github.com/mrtobe/mrtobe-hugo - ./deloy.sh is used to deploy the page
Hugo generates a static website that is hosted here https://github.com/mrtobe/mrtobe.github.io
Best guess
I checked different posts and found that it might be mixed content, but I have no idea on how to solve this with github pages.
You have a SSL certificate problem.
tobias-schmidt.site uses an invalid security certificate.
The certificate is only valid for the following names: *.github.com, github.com, *.github.io
Error code: SSL_ERROR_BAD_CERT_DOMAIN
Github pages doesn't provide HTTPS for custom domains.
When you access https://tobias-schmidt.site github pages server is sending his certificate which is not valid for your domain and browser are blocking request until you agree using this certificate.
For now, in conf.toml, you have to set baseurl = "http://tobias-schmidt.site". This in order to have hugo craft http urls.
In a second time, you can try to secure you site with services like cloudflare or have a look at Netlify.
Related
I have a SPA (built with angular) and deployed to Azure Blob Storage. Everything works fine and well as you go from the default domain but the moment I refresh any of the pages/routes, index.html no longer gets loaded and instead getting the error "the requested content does not exist"
Googling that term results in 3 results total so I'm at a loss trying to diagnose & fix this.
You can simply configure the error page to index.html in your static website:
Actually the issue was I didn't have 404.html defined -- the blob storage for SPA doesn't understand what file to serve for any other routes than the root one. So every other route will go to the 404 file. But in a SPA even the 404 goes through the index file. So all I did is mention index.html as my 404 file and all is well.
For me adding the index.html page as the Error document page did not help when navigating by url as it would still reload the app. I posted an answer elsewhere relating to rather using the Angular HashLocationStrategy and that does not cause a page reload when changing the URL manually.
Answer on other SO question
There is a new static Webapps solution by Microsoft. It is currently in preview mode but I think it is the most convenient way to use/deploy a SPA in the Azure infrastructure. You can use your custom domain with free SSL, version control, and set up a route to redirect everything to the index.html (fallback routes: https://learn.microsoft.com/en-us/azure/static-web-apps/routes) for example. see more details here: https://learn.microsoft.com/en-us/azure/static-web-apps/
Generally, you've created a CDN profile and an endpoint, but your content doesn't seem to be available on the CDN. Users who attempt to access your content via the CDN URL receive an HTTP 404 status code. You can follow these methods in troubleshooting Azure CDN endpoints that return a 404 status code
There are several possible causes, including:
The file's origin isn't visible to the CDN. The endpoint is
misconfigured, causing the CDN to look in the wrong place. The host is
rejecting the host header from the CDN. The endpoint hasn't had time
to propagate throughout the CDN.
With CDN, At the initial request, the client directly accesses to the origin server, afterward, at the following request, when you refresh the page, the client requests to the CDN cache server until their time-to-live (TTL) elapses. See Manage expiration of Azure Blob storage in Azure CDN and Control Azure CDN caching behavior with caching rules.
In this case, you may ensure websites blob content is publicly available on the Internet. After that, you may verify that your origin settings are properly configured. Verify that the values of the Origin type and Origin hostname are correct. Verify HTTP and HTTPS ports is represented as your static website is listening on. Kindly you could get more details from that troubleshooting link.
TL/DR
You could set the error document (404) to also be your index.html
This is a quick fix that will still return 404, however will also actually follow your deep link.
This isn't a 'fix'. It's more of a hack - the real fix is to add a CDN with some URL redirect rules on your hosting server. here is a great guide: https://antbutcher.medium.com/hosting-a-react-js-app-on-azure-blob-storage-azure-cdn-for-ssl-and-routing-8fdf4a48feeb
Rule itself
But to save you the click, the CDN rule using standard microsoft CDN (the cheaper one) is something like this:
(add the condition with the '+ condition' button)
If URL file extension > less than 1 extension > no case transform
(add the action with '+ Add action' button)
source pattern: '/' > Destination: '/index.html' > preserve unmatched path: no
Explanation
Ill attempt to add an explanation that I think nobody else did nicely.
What this rule will do is say any URL request that isn't for a direct file, eg.
example.com/xyz
example.com/user/xyz
example.com/tabs/post/12345
Or ANYTHING without a direct file extension (like '.png' or '.pdf' or '.html')
Then we will rewrite the URL to be 'index.html' this is the host file where the SPA has javascript to handle deep links for paths like in the example - therefore you will not get a 404 and the code will handle gracefully.
So I had github pages set up with a custom domain without problem on namecheap a day ago. Then I tried switching to Https via github's newly added support for https on pages. After too much frustration I switched over to CloudFlare for Https but I'm now getting an error ERR_TOO_MANY_REDIRECTS
Here's my DNS settings on CloudFlare.
Check your SSL setting in the Crypto tab. You should have it set to "Full". If it is set to "Flexible", then Cloudflare will use HTTP to connect to the origin, even when the client browser connects to Cloudflare over HTTPS. GitHub is probably responding with a redirect to HTTPS in this case -- not realizing that the original client is already using HTTPS, and so this redirect creates a loop.
More info here:
https://support.cloudflare.com/hc/en-us/articles/115000219871
The two typical causes of redirect loop errors are:
Cloudflare SSL options that are incompatible with your origin web
server’s configuration, and
Page Rule misconfiguration.
you can update in Custom domain github pages
https://github.com/yourusername/yourusername.github.io/settings/pages
Custom domains allow you to serve your site from a domain other than xxx.com with www, i was clear this issue with this way.
I tried to set up Gitlab Pages, until now I finished uploading my static website files👇
Uploading artifacts...
coverage/lcov-report: found 77 matching files
Uploading artifacts to coordinator... ok id=1038 responseStatus=201 Created token=QXJjgkf2
But I got no idea where my page hosted.
I took a glance at this documentation but it was still vague to me.
I have a private Gitlab instance.
My Gitlab entry is under http://abc.def.com (I configured a type A DNS to my host IP 111.111.111.111, a reverse proxy pointing at localhost:9000).
My project project1 is under my team team1.
I have also configured DNS http://team1.abc.def.com to 111.111.111.111 , and there is a nginx reverse proxy on my server which http://team1.abc.def.com -> localhost:9000.
I assume I should see my static page available on http://team1.abc.def.com/project1 , but nothing was there. Where exactly are my pages hosted?
You have to activate the pages feature. In your gitlab.rb:
pages_external_url "IP_OF_YOUR_GITLAB"
gitlab_pages['enable'] = true
There is a tutorial: https://www.youtube.com/watch?v=dD8c7WNcc6s&feature=youtu.be
And the complete documentation: https://docs.gitlab.com/ce/administration/pages/index.html
You'll need to ask your sysadmin under which wildcard domain Pages is served: https://docs.gitlab.com/ce/user/project/pages/getting_started_part_one.html#gitlab-pages-domain
Then you'll know where your site was deployed to.
Example: on GitLab.com, all Pages domains are served under *.gitlab.io, therefore, your website will be deployed to username.gitlab.io (user/group site) or to username.gitlab.io/project-name (project website).
You need to find out the wildcard domain of your GitLab instance and replace gitlab.io with it.
See also: Pages' limitations: https://docs.gitlab.com/ce/user/project/pages/introduction.html#limitations
pages_external_url is the url of your website
You can set up a git-runner to pick the work for publishing your website. In this part you need to deal with .gitlab-ci.yml file
For the gitpage URL, you can find it under setting -> pages, there should be a URL for the website. Usually is under namespace.example.com/projectname.
If you didn't see the page under the setting, it is usually a configuration issue. You just need to enable it, and re-congiure the gitlab.
For gitlab pages to work, you need to put your website files (html, CSS etc.) in a folder named public.
Update your .gitlab-ci.yml file with something like the following
pages:
script:
- mv coverage/lcov-report public
artifacts:
paths:
- public
Also, remember to name the job in question pages
I have my domain pointed in Cloudflare with SSL. My website runs with HTTPS protocol. The reason i mention them running is this.
I have my blog at blogspot and want to give it custom domain name which google allows. Unfortunately google wont allow HTTPS there. I had created my blog like this in DNS as blog.domain.com which runs as https://blog.domain.com and if i host this subdomain via Github, it opens correctly. The problem is when i use this subdomain in blogger, then there arises conflict and my site goes offline. Where am i mistaking in setting up all this?
Don't enable full or restricted SSL option in cloudflare. Use flexible SSL instead. This will setup things correctly.
I have this one page which has an iframe inside of which a survey page is embedded, unfortunately i'm getting "Your connection is not secure" error inside the iframe. Does anyone know how to fix this issue? By the way, the website is SSL certified, not the page i'm trying include inside the iframe. Also this is a php site not wordpress.
Thanks
You are always going to have this problem when an HTTPS page references non secured content. You options are:
move the page hosting the iframe (and its associated content) outwith HTTPS. Although, in theory a HTTP page should be able to reference HTTPS hosted javascript, CSS and images without emitting warnings, this will probably vary by browser
move the survey page into HTTPS. I am guessing that you don't host this yourself - have you contacted the provider to ask if they can provide the service via HTTPS? Have you considered using a different provider?
proxy the HTTP survey page via your server - this would require some clever configuration on the webserver or terminating the SSL connection in front of a proxy operating in reverse mode for your service and rewriting/forwarding mode for the survey. Basically, if you don't control the infrastructure this is probably a non-starter.
re-implement the survey capability within your own site.
Bear in mind that as soon as your site is exposed outside of HTTPS it becomes vulnerable to more attacks.
.htaccess is not going to help - it overrides the behaviour within a vhost - the HTTP and HTTPS sites will operate in seperate vhosts.