Having problems building github page(SCSS import fails (Jekyll)) - sass

I was trying to run a github page with Jekyll theme,and the website runs fine locally. However, when I try to urn in on htttps://username.github.io, GitHub cannot build the website.
I got the following error message :
Your site is having problems building: Your SCSS file myblog/assets/main.scss has an error on line 1: File to import not found or unreadable: minimaless.
The main.scss :
---
# Only the main Sass file needs front matter (the dashes are enough)
---
#import "minimaless";
It seems to be the path to the .scss file expected by GitHub is different from where the Jekyll theme put it. I checked some posts mentioned that I should put the absolute path of .scss in _config.yml file.
It seems to be the path to the .scss file expected by GitHub is different from where the Jekyll theme put it. I checked some posts link mentioned that I should put the absolute path of .scss in the directory of urlbase, which is /myblog. But I am not familiar with ruby, so I am not sure how should I do it.
The folder structure is like this :
myblog/
- assets/
- main.scss
- _sasss/
- minimaless.scss
- minimaless/
- basic.scss
- layout.scss
- hight-lighting.scss
- _config.yml
This is my GitHub page folder :
https://github.com/Po-Hsuan-Huang/Po-Hsuan-Huang-github.io

The issue could be because your source contents are within a subdirectory myblog. Try moving all the contents to the root of your repository.
It could also be because of the following in your config file:
theme: minimaless
#remote_theme: brettinternet/minimaless
theme: minimaless is not supported on GitHub Pages. Comment it out.
And finally, _site directory should not be checked into version control. Delete it from your repository and then add an entry for it in your .gitignore file.

Related

Location of specific CSS file Magento 2

I'm debugging an issue in Magento 2 and I'm looking for a specific CSS file. I logged the file name of the last file somewere in the Emogrifier.php and this is supposed to be the file:
/static/version1497256942/frontend/Speak/porto/nl_NL/css/email-fonts.css
Now, I cannot find this file anywere. I only can find the place where it's imported: _email-extend.less in that same Porto theme folder.
This is what that looks like: #import url("#{baseUrl}css/email-fonts.css");
When I go to the URL it finds that file in the static content. But I cannot find that file with that specific name anywere...
If Magento2 has been installed via composer then you are looking for '/vendor/magento/theme-frontend-blank/web/css/email-fonts.less' (If Magento2 has been installed from the github repository, then '/app/design/frontend/Magento/blank/web/css/email-fonts.less').
Grunt converts all less files into css after the static content deployment.

Github Pages font-face not working

I uploaded my project to Github pages and the font doesn't work! I've read other questions about the issue that lead me to think I need to change how I'm pointing the file, but I can't sort it out.
Here's my #font-face:
#font-face {
font-family: headerFont;
src: url(fonts/FreePixel.ttf);
}
Here's my file structure:
Portfolio/
index.html
css/
styles.css
fonts/
FreePixel.ttf
Try with a relative path, meaning starting with ./
src: url(./css/fonts/FreePixel.ttf);
That will check from which root folder GitHub page is considering that relative path.
Of course, that supposes the files are uploaded, and not (as it was the case) in the .gitignore file of the repo.

Resolving asset location issue using Ruby SCSS transpiler in WebStorm

I have this structure of SCSS:
app
styles.scss
bower_components
_colors.scss
_fonts.scss
sass
index.scss
styles.scss:
#import "sass/index";
index.scss:
#import "bower_components/_colors";
#import "bower_components/_fonts";
app folder is set as working directory in File Watcher settings and is marked as "Resource Root" in WebStorm. However, transpiling fails with error:
error sass/index.scss (Line 3: File to import not found or unreadable: bower_components/_colors.)
I've read that #imports evaluated in SCSS
relative to current file location
relative to root location
But in my case it is obvious that Ruby transpiler doesn't do attempt to find files relative to root location. Is it a bug? Or I am doing something wrong?
I installed SCSS through Ruby and set up File Watcher according to https://www.jetbrains.com/help/webstorm/2016.1/transpiling-sass-less-and-scss-to-css.html
This is my File Watcher settings:
You will get exactly the same issue when running scss.bat in command line:
C:\Projects\prj>cd app
C:\Projects\prj\app>C:/Ruby193/bin/scss.bat --no-cache --update sass/index.scss
error sass/index.scss (Line 1: File to import not found or unreadable: bower_components/_colors.)
See https://github.com/sass/sass/issues/652: current working directory being automatically placed on the Sass load path is deprecated in 3.3. You need passing the load path explicitly with -I option to work with folders relative to the working directory. Like:

Can't seem to get Jekyll to see posts that are in subdirectories from the root folder

I have used collections in my Jekyll website for GitHub Pages. I'm trying to get Jekyll to see the Markdown files inside the collection folder, _projects.
Here's a rundown of the file structure:
root
│
├─ _projects
│ │
│ ├─ project_1.md
│ └─ project_2.md
│
└─ /*Rest of the Jekyll folders and files, _posts, _includes, etc.*/
At the moment, I realized that you must put the Markdown files in the root, so Jekyll can be able to see and parse the files to display them when after you clicked a link that points to them via permalinks. But it cannot "see" the Markdown files if the files are not in the root folder, after testing quite a while.
Is there a way to let Jekyll see and parse files inside the subfolder, _projects, just like how it can see files in the root folder? Maybe I need to set something up in the _config.yml, I guess?
Thanks in advance.
Edit : My first answer was completely wrong. I was talking
_config.yml
collections:
project:
output: true
_project/project_1.md
---
layout: project
title: project
---
## Yo!
Project in **strong** yo `inline code`
some code
yolo !
_layouts/project.html
<!DOCTYPE html>
<html>
{% include head.html %}
<body>
{% include header.html %}
<div class="page-content">
<div class="wrapper">
{{ content }}
</div>
</div>
{% include footer.html %}
</body>
</html>
You now have a project/project_1.html page.
No need to use include: parameter in order to Jekyll to see collection folder or subfolder.
exclude: parameter can be used to ignore a subfolder in the collection.
End Edit
Old answer (nothing to do with collection)
Your _project folder is ignored by Jekyll, just like any underscored folder
To force Jekyll to parse files in this folder, in your _config.yml you can add :
include:
- _project
jekyll build and all is good !
The OP tom-mai78101 comments the the article "Jekyll Blog From a Subdirectory" from Hemanth.HM
has confirmed my guesses that subdirectories are only defined by the permalinks in the Markdown files, and not through the folders within the repository.
I quickly wrote a code snippet, and created a few Markdown files shown here, I am now able to create webpages using Markdown files nested within the _posts folder.
In short, there's no need to use collections in the _config.yml, and just use the default _posts.
It would've been better if there is a way to change the default permalink setup in the _config.yml.
The question "Jekyll not generating pages in subfolders" could be relevant, in order to make some pages being generated in a subfolder.
Or you could use a different baseurl. (Jekyll 1.0+)
Or use the _include folder (see "Jekyll paginate blog as subdirectory")
Or, The article "Running Your Jekyll Blog from a Subdirectory" (from Josh Branchaud) seems to address your situation:
Solution 1
Create a directory called blog in your public html directory (that is, in the directory that your domain points to).
Assuming you are using some sort of deployment scheme (GitHub pages or deployment methods), you need to have that deployment scheme tell Jekyll to deploy to the blog directory instead of the directory it is currently using.
(in your case blog would be projects)
Solution 2
Start by creating a directory locally where you have your Jekyll blog setup.
This directory will sit along side _posts, _site, css, etc.
This is only going to hold non-post files such as index.html.
The blog posts will still go in the _posts directory.
Next, we are going to tell Jekyll that we want it to take our blog posts and put them inside a directory called blog when it generates them.
This can be done by adding a permalink setting to the _config.yml file.
Add a line like this to the top of the file:
permalink: /blog/:categories/:year/:month/:day/:title.html.
The default (which you have probably been using) puts posts in a directory structure starting with the category, followed by the date, and finally with the title of the blog post as the name of the html file.
Which, spelled out would be
/:categories/:year/:month/:day/:title.html.
Does that look familiar? Sure does. It is what we have used above, sans the /blog part.
We are essentially emulating the default directory structure and while adding our blog directory at the beginning.
Lastly, you are going to want to add an index.html file to the blog directory that you created.
This way, when a person goes to mydomain.com/blog/ they can see what blog posts you have to offer.
This index page is going to more or less mirror exactly what you had setup originally for listing your blog posts.

SASS & Compass Watch Failed Import

I have been struggling with SASS and Compass on my Mac OSX for the last few days.
I have a setup like below (this is as accurate as I can make it).
Ive only done 1 site but there are around 40 with identical structure below proxysite1.com
/Library/WebServer/Documents
/WebProxy-Network
/Global_Assets
/_alerts.scss
/_badges.scss
/_breadcrumbs.scss
/_button-groups.scss
/_buttons.scss
/_carousel.scss
/_close.scss
/_code.scss
/_dropdowns.scss
/_forms.scss
/_grid.scss
/_labels.scss
/_print.scss
/_bootstrap.scss (all the files above import into this one and will use shared by all the sites)
/Asia
/USA
/EU
/UK
/www.proxysite1.com
/scss
_variables.scss
_overrides.scss
styles.scss (this imports _sass-bootstrap.scss, _variables.scss & overrides.scss)
/css
styles.css (ok so this should be the FINAL output unique for each site)
/js
/images
/index.inc.php
/index.php
/config.rb
Inside my config.rb I have these settings:
# Require any additional compass plugins here.
load "../../Global_Assets/Bootstrap3"
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "images"
javascripts_dir = "js"
Now inside my /scss folder file styles.scss
I have the following:
// Site Overrides
#import "overrides";
// Site Variables
#import "variables";
// Bootstrap3 SASS Framework
#import "bootstrap";
Right so that took a while but I want to get some good advice on where i'm going wrong ;)
Now when I visit this path via terminal
/Library/WebServer/Documents/WebProxy-Network/UK/www.proxysite1.com/
and run the command "compass watch" I get the following message:
Ants-MacBook-Pro:www.antproxy.com Ant$ compass watch
>>> Change detected at 10:17:28 to: styles.scss
error scss/styles.scss (Line 24: File to import not found or unreadable: sass-bootstrap.
Load paths:
/Library/WebServer/Documents/WebProxy-Network/UK/www.antproxy.com/scss
/Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/blueprint/stylesheets
/Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets
Compass::SpriteImporter)
overwrite css/styles.css
>>> Compass is watching for changes. Press Ctrl-C to Stop.
So hopefully this is enough info to get some good insight in to where I'm going wrong, hopefully its been clear and I'm on the right path :)
BTW the idea was to have it so I can specify different variables for each site allowing me to change colors fonts etc but share layout styles and functionality styles.
(I would have posted this as a comment however I do not have the priviledges.)
I suspect that you may have gotten some of your indentations wrong in your post as running "compass watch" in the "www.proxysite1.com" directory while the config.rb file is within "assets" wouldn't work as compass wouldn't be able to find the configuration and would assume that no compass project existed.
Regardless, how are you including Bootstrap 3?
If you are not already using it already, I would recommend trying Thomas McDonald's bootstrap-sass. Available here: https://github.com/thomas-mcdonald/bootstrap-sass
UPDATE:
Why are you including Bootstrap 3 like this?
// Bootstrap3 SASS Framework
#import "sass-bootstrap";
If you have included the correct require statement in your config.rb (inc. below) then you should be able to import it like this mate:
// Bootstrap3 SASS Framework
#import "bootstrap";
Inside of config.rb, you should have this at the top:
# Require any additional compass plugins here.
require 'bootstrap-sass'
load "../../Global_Assets"

Resources