My Hugo website is configured to publish in a folder called docs, which is the source (master/docs) for the website on my GitHub repo; however, the website itself won't show any css/js.
I've tried manually changing the reference for css in the index.html file so that the path is khobbs3.github.io/docs/main.....css but that doesn't seem to help either.
The repo: https://github.com/KHobbs3/ktechnology
The website:
https://github.com/KHobbs3/ktechnology
RESOLVED: set up new repos following https://gohugo.io/hosting-and-deployment/hosting-on-github/ tutorial.
Published site: http://khobbs3.github.io
It looks like there are no CSS /js files on the static folder. Hugo uses the static folder to render the js and CSS files and also for images.
I hope someone can help me to figure this out since i've been trying several thing throughout the day and I still couldn't find the root of this issue. The github is failing to load the jekyll content... giving me several error at every attempt... I searched for similar issues here and i also modified my yml file in the url as suggested in other posts but with no success. If someone could help me i would appreciate since i just literally lost atm. tia
https://github.com/CarlasHub
enter image description here
In _config.yml, set :
baseurl: "/carlashub"
url: "https://CarlasHub.github.io"
Have you set Github Pages up in the settings within the Github repo?
goto --
Settings > Options > Scroll down > GitHub Pages
Make sure you have selected the source, this will generate a CNAME file in your repo which will contain the URL. After a short while, you will be able to see your site.
Below is an example of the config.yaml I use on most of my projects.
title: Site Title
url: "https://domainame.com"
baseurl: /
google_analytics_key:
email:
description: Test stuff.
# Build settings
paginate: 5
paginate_path: "/blog/:num/"
permalink: pretty
markdown: kramdown
permalink: /:title/
sass:
style: compressed
plugins:
- jekyll-feed
exclude:
- Gemfile
- Gemfile.lock
plugins: [jekyll-paginate]
I'm constantly getting the following error messages from github when I try to push my Jekyll site to their pages.
The page build failed with the following error:
Page build failed. For more information, see
https://help.github.com/articles/troubleshooting-github-pages-build-failures.
If you have any questions please contact us at
https://github.com/contact.
I ran jekyll serve to see if anything suspicious is going on, but the only thing it gives me is a warning: Build Warning: Layout 'default' requested in app/index.html does not exist.
Am I missing something? All my files are on Github: https://github.com/BobWassermann/confguide
Github pages is looking for your files at the root of your repository, then as it doesn't find _layouts and so on, at the right place, the build fails.
To avoid this, in config.yml add source: app.
Note: As your repository will be served at https://github.com/BobWassermann/confguide, all links to your assets will fail.
To avoid this, in config.yml add baseurl: /confguide.
And in default.html call your assets with {{site.baseurl}} like this :
<link rel="stylesheet" href="{{site.baseurl}}css/syntax.css">
and same for other assets (css/js/img).
Tried everything above, but nothing helped.
Went trough everything and found the bug. Github does not support a "_" folder in your images directory, even if it's in your copy task in Gruntfile.
Removing my "_posts" folder in the img folder solved this issue.
I'm using GitHub pages to host my latest site:
http://mysite.github.io/
I was wondering if there was a way to remove the .html extension from the end of sub-pages:
http://mysite.github.io/contact.html
since there is no access to the server.
It already works and you don't have to do anything
I'm not sure if you are already aware of that or not but to remove .html extension from GitHub Pages all you have to do is remove .html extension from your links.
In other words it already works and you don't have to do anything. You don't have to use subdirectories, CNAME, redirects, Jekyll _config.yml, YAML front-matter or any other hack suggested in all of the answers here.
Examples
For example you can use:
https://rsp.github.io/gh-pages-no-extension/test1
instead of:
https://rsp.github.io/gh-pages-no-extension/test1.html
and it displays the same file.
Just change the links in your links and that's it.
Tests
I made some tests to demonstrate how it really works where you can click links and it highlights which file is loaded with which URL, including warnings about insecure redirects in certain cases.
For eaxample, the link:
https://rsp.github.io/gh-pages-no-extension/test1
shows that it is displayed by the test1 in the URL but actually displays the file test1.html:
Problems with other solutions
Using things like index.html in special subdirectories as suggested here in other answers will not do what you want, which is simply serving the example.com/name.html when asked for example.com/name, but would instead give you a 301 redirect to example.com/name/ (note the trailing slash) which in turn would give you the contents of example.com/name/index.html file.
That leads to the following problems: you are in a different directory and you need to use <a href="../name"> instead of just <a href="name"> for links to other pages on the same level and the same goes for all assets (or you can use absolute paths as someone suggested which is not a good idea on GitHub pages - especially project pages - because after forks and projects renaming you have to remember to update all of the links and js/css assets in all of the html files).
The other thing is that now you have a useless redirect for every navigation - which incidentally redirects from HTTPS to HTTP (from secure URLs without the slash to insecure URLs with a slash), e.g. see:
https://rsp.github.io/gh-pages-no-extension/dir (secure HTTPS)
which (at the time of writing) redirects to:
http://rsp.github.io/gh-pages-no-extension/dir/ (insecure HTTP)
and NOT to:
https://rsp.github.io/gh-pages-no-extension/dir/ (secure HTTPS)
as you might expect, so make sure that you are aware of that. See:
(Note that this image is linked to a secure HTTPS URL but you end up using an insecure HTTP connection - you may need to use incognito mode to see that.)
This is how the headers look like, as of June 17, 2016:
$ curl -I https://rsp.github.io/gh-pages-no-extension/dir
HTTP/1.1 301 Moved Permanently
Server: GitHub.com
Content-Type: text/html
Location: http://rsp.github.io/gh-pages-no-extension/dir/
... ^^^^
Hopefully GitHub will fix that in the future.
(I discovered it when I was writing this answer almost a year ago and this problem is still present as of June 2016.)
Though strangely enough, as of June 17, 2016 (I'm not sure if it always was the case because I noticed it recently while updating this answer) this URL:
https://rsp.github.io/gh-pages-no-extension (secure HTTPS)
redirects to:
https://rsp.github.io/gh-pages-no-extension/ (secure HTTPS)
as it should. See the headers:
$ curl -I https://rsp.github.io/gh-pages-no-extension
HTTP/1.1 301 Moved Permanently
Server: GitHub.com
Content-Type: text/html
Location: https://rsp.github.io/gh-pages-no-extension/
... ^^^^^
The only difference is that it is a project root URL and not a deeper directory inside the project (see the project structure) so the buggy redirect seems to be present only in deep links inside a project's GitHub Pages and on one browser I tested only when you use incognito mode.
The bottom line is that you need to be careful. My advice would be to avoid all redirects altogether and only use those URLs that don't result in any redirects at all.
I would assume you would have to use subdirectories (but there may be a simpler way):
/index.html => http://jasonhoffmann.github.io
/contact/index.html => http://jasonhoffmann.github.io/contact
However, you may have more control using CNAME to redirect the GitHub page to your own domain. Sorry I don't have a definite answer for you, but hopefully this can get you started.
You can do this through Jekyll, a static site generator built into GitHub Pages. It has some permalink settings that can be set in either the _config.yml (which will affect all Pages and Posts on your site) or in the YAML front-matter for each Page/Post.
For example, you could add the following code to your contact.html file:
---
permalink: contact/
---
This would be inserted before <!DOCTYPE html>, but Jekyll will take care to strip it out when it's served on GitHub Pages. When you do this, you'll be able to access the page at jasonhoffman.github.io/contact instead of jasonhoffman.github.io/contact.html. What Jekyll is actually doing is creating a directory called contact and putting an index.html file inside of it with your contact.html content. If you install and run Jekyll locally, this is what you'll see:
.
|- _config.yml (optional)
|- contact.html
|- index.html
|- css
|- styles.css
|- img
|- image.jpg
|- _site
|- index.html
|- contact
|- index.html
|- css
|- styles.css
|- img
|- image.jpg
If you don't install Jekyll locally, you'll see all of that, minus the _site folder. When you push this to GitHub, their servers will run Jekyll and generate and serve the equivalent of a _site folder for you (but it won't be visible in your GitHub repository).
You could also skip Jekyll and create a contact subdirectory with an index.html inside. Either way, you'll also need to make sure any links to assets (img, css, js) in your site have a preceding /. For example,
<link rel="stylesheet" href="css/style.css">
Should instead be
<link rel="stylesheet" href="/css/style.css">
I'm using the arctic fox theme, which uses following link strings:
<a class="page-link" href="{{ page.url | prepend: site.baseurl }}">{{ page.title }}</a>
The solution is to add remove: '.html' as filter, which results in
<a class="page-link" href="{{ page.url | remove: '.html' | prepend: site.baseurl }}">{{ page.title }}</a>
Local serving with Jekyll currently does not work, but is promised for Jekyll 3.0: https://github.com/jekyll/jekyll/pull/3452
For now, all you need to do is just add permalink: /your-pretty-url
The other answer doesn't work. I've tried. You need to add the '/' prefix.
For example:
---
layout: post
title: "Welcome to Jekyll!"
date: 2017-04-29 22:04:31 +0700
categories: jekyll update
permalink: /welcome
---
As user rsp has mentioned that pretty permalinks are already implemented by GitHub Pages and one does not have to do anything, this will not be done when running the Jekyll server locally or in Jekyll by default. If you want to remove html extension from pages using Jekyll in your own non Github Pages site (still served with Jekyll) or have a local development site that is similar to Github Pages as much as possible before pushing to GitHub,
You just need to add this to the _config.yml file:
permalink: pretty
This removes the .html from link by making all posts have their own folder and the posts named as index.html.
Removed .html extension by changing permalink as
permalink: /:title/
Don't forget the last /
There is one simple thing you can do, which is to make a folder that has your html file name... in your case it will be /contacts. Then rename your contacts.html to index.html then move it into the /contacts folder that you created.
output:
http://mysite.github.io/contact
I created a "jekyll new xx" site locally. When I run Jekyll serve it works very nicely.
Now, I create a new github repo and a branch gh-pages: https://github.com/pitosalas/deleteme
However when it is rendered as a github page it looks all wrong, like style sheets and other assets are missing.
Update
Steven Perry: Thanks for your response, but I had a typo. I wanted to point to the github repo containing the Jekyll "input" files which are then regenerated into the stuff that is served to the browser. The extra slash in the CSS file is an excellent clue but it is in a file generated by Jekyll I think. I can't edit it directly I need to figure out how to get Jekyll to generate it correctly. Do you know?
<link rel="stylesheet" href="/css/syntax.css">
<!-- ^
/
remove this slash ---
-->
Example
For more info, your problem file is here
default.html