There is a problem with my Jekyll website after deploying it to GitHub Pages. I suspect that the CSS styling is not being loaded properly. The website appears to be properly styled when accessing the main page at philipmutua.me. However, when navigating to other pages such as http://philipmutua.me/categories/ or any other page, the CSS styling does not seem to be applied. Below is my config file:
_config.yml
# Dependencies
markdown: kramdown
highlighter: pygments
# Permalinks
permalink: pretty
# Setup
title: Philip Mutua
tagline: 'Full Stack Web Development.'
description: 'Full stack Developer'
url: https://philipmutua.me
baseurl: /
author:
name: 'Philip Mutua'
url: https://twitter.com/itsphilipmutua
paginate: 5
paginate_path: "page:num"
# Custom vars
version: 1.0.0
github:
repo: https://github.com/pmutua
email: example#email.com
linkedin: linkedin.com/in/pmutua
disqus: pmutua
plugins: [
jekyll-paginate,
jekyll-gist,
jekyll-paginate,
jekyll-seo-tag
]
head.html
<head>
<link href="http://gmpg.org/xfn/11" rel="profile">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<!-- Enable responsiveness on mobile devices-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<title>
{% if page.title == "Home" %}
{{ site.title }} · {{ site.tagline }}
{% else %}
{{ page.title }} · {{ site.title }}
{% endif %}
</title>
<!-- CSS -->
<link rel="stylesheet" href="{{ site.baseurl }}public/css/poole.css">
<link rel="stylesheet" href="{{ site.baseurl }}public/css/syntax.css">
<link rel="stylesheet" href="{{ site.baseurl }}public/css/hyde.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700|Abril+Fatface">
<!-- Icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="{{ site.baseurl }}public/apple-touch-icon-144-precomposed.png">
<link rel="shortcut icon" href="{{ site.baseurl }}public/favicon.ico">
<!-- RSS -->
<link rel="alternate" type="application/rss+xml" title="RSS" href="/atom.xml">
</head>
<div class="container" style="padding-left:30px;line-height: 2;" >
<div id="archives">
browse by <a title="The complete archive of {{ site.name }}'s Blog by category"
href="{{ site.url}}{{ site.baseurl }}/categories">category</a>
</div>
</div>
gh-pages /public/css
Build
2023-01-30T17:16:59.644485Z Cloning repository...
2023-01-30T17:17:01.558067Z From https://github.com/pmutua/pmutua.github.io
2023-01-30T17:17:01.55868Z * branch 9366bb50d1e33d9e14fd2f876eb1624f29b240ae -> FETCH_HEAD
2023-01-30T17:17:01.55886Z
2023-01-30T17:17:01.635576Z HEAD is now at 9366bb5 Update head.html
2023-01-30T17:17:01.636179Z
2023-01-30T17:17:01.782688Z
2023-01-30T17:17:01.810462Z Success: Finished cloning repository files
2023-01-30T17:17:02.72333Z Installing dependencies
2023-01-30T17:17:02.734422Z Python version set to 2.7
2023-01-30T17:17:05.986625Z v12.18.0 is already installed.
2023-01-30T17:17:07.15815Z Now using node v12.18.0 (npm v6.14.4)
2023-01-30T17:17:07.368069Z Started restoring cached build plugins
2023-01-30T17:17:07.382809Z Finished restoring cached build plugins
2023-01-30T17:17:07.868701Z Attempting ruby version 2.7.1, read from environment
2023-01-30T17:17:11.307066Z Using ruby version 2.7.1
2023-01-30T17:17:11.66631Z Using PHP version 5.6
2023-01-30T17:17:11.667382Z Started restoring cached ruby gems
2023-01-30T17:17:11.682448Z Finished restoring cached ruby gems
2023-01-30T17:17:11.683421Z Installing gem bundle
2023-01-30T17:17:11.969321Z [DEPRECATED] The `--path` flag is deprecated because it relies on being remembered across bundler invocations, which bundler will no longer do in future versions. Instead please use `bundle config set path '/opt/buildhome/cache/bundle'`, and stop using this flag
2023-01-30T17:17:12.119793Z [DEPRECATED] The --binstubs option will be removed in favor of `bundle binstubs`
2023-01-30T17:17:14.392024Z Fetching gem metadata from https://rubygems.org/............
2023-01-30T17:17:14.517051Z Fetching gem metadata from https://rubygems.org/.
2023-01-30T17:17:14.631572Z Resolving dependencies...
2023-01-30T17:17:14.69117Z sass-embedded-1.57.1-x86_64-linux-gnu requires rubygems version >= 3.3.22, which
2023-01-30T17:17:14.691487Z is incompatible with the current version, 3.1.2
2023-01-30T17:17:14.764924Z Error during gem install
2023-01-30T17:17:14.769003Z Failed: build command exited with code: 1
2023-01-30T17:17:16.001606Z Failed: an internal error occurred
Related
My AG Grid application is now failing to load styles from https://unpkg.com/ag-grid-community/dist/styles/ag-grid.css with the error:
Cannot find "/dist/styles/ag-grid.css" in ag-grid-community#29.0.0
This used to work before the v29 release.
The v29 Changelog describes why this dist folder has been deleted and the styles have been moved to a new location.
To resolve please follow the instructions from the official docs as the styles are now in a new location.
<!-- old path -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/ag-grid-community#28.0.0/dist/styles/ag-grid.css" />
<!-- new path -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/ag-grid-community#29.0.0/styles/ag-grid.css" />
I have copied/closed this repository (https://github.com/staticwebdev/vanilla-basic).
Now I want to create a HTML (let's call it dummy.html) in the src folder of this repo with the content as below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Vanilla JavaScript App</title>
</head>
<body>
<main>
<h1>Customer Approval Page</h1>
<h2> <customer name> </h2>
</main>
</body>
</html>
I found these 2 actions but they are not working for me. Can anyone help?
https://github.com/DamianReeves/write-file-action
https://github.com/1arp/create-a-file-action
I tested this with this workflow:
name: so-037-create-file
#https://stackoverflow.com/questions/73465583/github-actio-to-create-a-html-file-in-the-main-branch
on:
workflow_dispatch:
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout repo
uses: actions/checkout#v3
- name: Overwrite file
uses: "DamianReeves/write-file-action#master"
with:
path: src/dummy.html
write-mode: preserve
contents: |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Vanilla JavaScript App</title>
</head>
<body>
<main>
<h1>Customer Approval Page</h1>
<h2> <customer name> </h2>
</main>
</body>
</html>
- name: Commit & Push
uses: Andro999b/push#v1.3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
branch: main
force: true
message: 'Overwritten by Github Actions - ${date}'
and it works.
Folder before the run:
Folder after the run:
Here is the link to the file.
This is my first time using Hugo. I am using the Bento theme for my Hugo site which did not come with favicon support out of the box (I searched the entire code base and it is nowhere to be found). Consequently, I added the necessary HTML tags to the partials > head.html. When I run locally with hugo server -D or npm run dev, the favicon shows up fine.
I think there is an issue with how my relative href is written, however, whenever I change it, it breaks it locally. I am using AWS Amplify for deployment with auto cloudfront invalidation so that is not the issue.
When I inspect the page source of the deployed site, I get this for the favicons:
<link rel="apple-touch-icon" sizes="180x180" href="favicon%20not%20found%25!%28EXTRA%20string=apple-touch-icon.png%29">
You can see the issue in the href= field
Here is how my favicons are implemented in partial/head.html:
<link rel="icon" type="image/png" sizes="32x32" href="{{ "/img/favicon-32x32.png" | relURL }}">
<link rel="icon" type="image/png" sizes="16x16" href="{{ "/img/favicon-16x16.png" | relURL }}">
<link rel="apple-touch-icon" sizes="180x180" href="{{ "/img/apple-touch-icon.png" | relURL }}">
I also tried to implement this by adding the links in the config.toml and using Site.Params, but no luck with that either.
The below is how you would do it:
<link ... href="/img/favicon-32x32.png">
<link ... href="/img/favicon-16x16.png">
<link ... href="/img/apple-touch-icon.png">
So you don't have to use the hugo/Go {{}} tag (that would be for a site variable like {{.section }} - you can just put in the relative url which would simply be "/img/favicon-32x32...etc" Just make sure your image is in the corresponding folder.
I tested on my install of hugo and as long as your favicon is in the right place - that handles your problem.
Also note: If you would like to use a site variable {{ $.Site.Params etc...}} such as a href="{{ #.Site.Params etc...}} you would add the variable name and value to your config file. See below for reference on this from hugodocs:
Site Variables
I am new in this Ionic field. I created a new app in my localhost folder(C:\xampp\htdocs). When I go to "http://localhost/ionapp/www/" everything works fine but when I run the app from "ionic serve" command I get the blank page.
When I viewed the page source I found that ionic.css and ionic.bundle.js file are not loaded during ionic serve. And in the console I get the error like "angular is not defined". Can anyone please help me fix this?
Here is my index.html which should load css and js files
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="starter">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view></ion-nav-view>
</body>
</html>
So it was not the issue with my ionic but with my browser. Turns out I was getting ERR_CONNECTION_RESET in my console. So basically what I did was
Open cmd prompt as administrator.
Run the command netsh winsock reset.
Restart my computer.
I don't know how it happened but it solved all my problems.
I've recently stumbled upon an annoying problem and can't figure out what could be the cause. I'm working on a ionic hybrid app and since yesterday everything worked fine: I was able to deploy it on my android phone, I could debug it on my browser. Today I open up my project, fire the ionic serve and the browser greets me with a blank screen.
I get the address: localhost:8100/, but it really should be localhost:8100/#/app/sessions
The console log report no errors neither the net log.
This is the source code of the index.html page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/angular/angular.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
</html>
I tried to start a new ionic project but the outcome is the same: I get a blank page.
I've set the ionic serve address to localhost; I,ve tried to load all angular and ionic module but to no avail. Do you have any suggestions?
On a closer inspection I found this error (I've skimmed the log):
"Error: [$injector:modulerr] Failed to instantiate module starter due to:
[$injector:modulerr] Failed to instantiate module starter.controllers due to:
[$injector:modulerr] Failed to instantiate module starter.services due to:
[$injector:modulerr] Failed to instantiate module ngResource due to:
**[$injector:nomod] Module 'ngResource' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.**
I wasn't really sure why but angular coudn't find the ngResource module. A quick check show me spelling wasn't the real problem.
For some reason (on whitch I'm still investigating) publishing the app destroyed angular-resource.js and the resulting .min was lacking the code.
Anyway, when I tried to reload the whole thing, I was loading ngResource version 1.3.15 and angular.js version 1.3.14, making them not working.
So, I was failing Computer Science 101: "always check the versions".
I've set all the version to 1.3.15 and all is working like a charm.
For what it is worth, we had a very similar problem: ionic serve -c had no negative behavior, no error output, simply loaded a blank screen.
The problem in our case was that there was a "!" in the full path of the working directory.
Changing the working directory to a path without a "!" solved this issue.
Original solution here