I am trying to learn how to use jekyll so i can create some sites and host them on github pages... But i am having a problem following the tutorial on the jekyll website, The css folder in the assets directory is not being created when i run jekyll build or jekyll serve, i have even tried bundle exec jekyll build and clean.
I have tried a few things still cant find a solution.
The github repo for my code is at https://github.com/blaze4dem/timiking please help me understand what i am doing wrong here.. Thanks in advance.
First, you're storing your scss in _assets/css, which as an underscored folder is ignored by jekyll.
Move it to assets/css folder, with no underscore. It will then be generated.
The second problem is how you call your generated css in _layouts/home.html.
<link rel="stylesheet" type="text/css" href="/assets/css/style.scss">
Requested from your index page at http://127.0.0.1:4000/timiking/, it resolve to http://127.0.0.1:4000/assets/css/style.scss then 404.
Simply use your baseurl :
<link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/assets/css/style.css">
Related
Here is the link to my repo: https://github.com/kadrianoliver/mariesmagictouch. When I first uploaded the files from my computer this was the code in my index.html to link to styles.css:
<link rel="stylesheet" href="css/styles.css">
My css file, "styles.css" was in a folder titled "css", but GitHub doesn't allow you to upload a folder you have to upload a file, so the css file could no longer use this pathway. So I researched here and found people were using this code to link a css file to html in Github:
<link rel="stylesheet" href="styles.css" type="text/css">
But the deployment still just shows html and this path did not work either. What am I doing wrong? Thank you in advance.
First of all, you shouldn't use github the way you do. You whould use git to push your files to github.
You should commit your changes and push them to your repo from the terminal. This way all files get uploaded in a bundle with comments, so you can change between commits in the future if needed.
Tutorial for pushing with git to github
I was trying to build a simple html page on github that can be used as a linking to some of my program there inside. I have build a index.html for my github.io page, so, I tried to display it but with no success. In fact the html code cannot find the css file. Any suggestions or experience in that?
Thanks
PS: the link is albz.github.io
or: https://github.com/albz/albz.github.io
several path options, local and absolute
In your _site directory the index.html is at the same level as main.css
Therefor, in the head section you should change:
<link rel="stylesheet" href="/_site/main.css"></head>
to:
<link rel="stylesheet" href="/main.css"></head>
I would like to say that I have been looking at this problem for the past two hours, reviewing similar questions. I can not seem to find the issue, Initially I thought it was due to my baseurl and the file path for the css. Everything is styled perfectly on my local server.
I would greatly appreciate if anyone can give me some pointers. My git hub repo is https://github.com/Nappolini/nappolini-port
Many thanks.
In _config.yml set :
baseurl: /nappolini-port
url: https://nappolini.github.io/
In _layouts/default.html, call assets with
<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/main.css">
Laravel 5.4 here.
I added test.css file under public/css/ and then made a call in my layout.blade.php like this:
<link href="{{ asset('css/test.css') }}" rel="stylesheet">
but the asset does not get loaded.
My problem is that i am trying to run css for jquery-ui. I downloaded jquery-ui-bundle via npm and then required it in resources/assets/js/bootstrap.js. Widget works, but the calendar shows up without styles. So i try to add styles manually by referencing them directly through the template. Unfortunately, this doesn't help.
You can directly put js/CSS into your public folder if they don't require compiling first (which is in your case) - There is no harm in that
But if you want to go as per recommendation:
Pull library using NPM,
Add js/CSS into gulpfile.js which you want to copy to the public folder:
elixir((mix) => {
mix.sass('app.scss')
.webpack('app.js')
.mix.copy('node_modules/foo/bar.css', 'public/css/bar.css');
});
https://laravel.com/docs/5.4/mix#copying-files-and-directories
Run npm run command
And then include into your blade view like:
<link href="{{ asset('css/bar.css') }}" rel="stylesheet">
For simplicity, you can just simply copy source file to public\css or public\js and link it to your project file. In other words, link
rel="stylesheet" type="text/css" href={{asset('css/bootstrap.css')}}
I have Rails application with documentation which is static html pages in the /public folder.
The tree of my public folder:
-public
-docs
-intro
introduction.html
-css
some.css
index.html
Index.html file is:
<link rel="stylesheet" href="css/some.css" type="text/css" />
Some of the text
<li>href="intro/introduction.html"><em>Introduction</em></a></li>
When I open index page css isn't loaded, and when I try to click on link it says routing error. As I understood static pages don't know where to look for css and other html pages.
I just want static pages without any routes and controllers, nginx.
Any ideas?
All the public folder content is accessible via "/"
<link rel="stylesheet" href="/docs/css/some.css" type="text/css" />
You can use high_voltage gem to generate static_pages
Its perfectly valid to serve static files (pages or not) via the public directory. As Kirka121 said rails is not really built for this purpose but can still work with it.
In development environment it should just work to serve whatever files you have in public, for production environment you might need to configure whatever server you use to serve them - but this should be covered by its normal setup anyway, if not its set up wrong.
So by default the rails public folder can directly by accessed at the root of the project.
As far as your code goes the relative links/urls seem to be the issue. Its generally better to use absolute paths for everything not to confuse anything, which leads to very hard to find bugs.
With your folder structure and example this would be:
<link rel="stylesheet" href="/docs/css/some.css" type="text/css" />
Some of the text
<li><em>Introduction</em></li>