SCSS import fails (Jekyll) - sass

I'm trying to setup Jekyll on GitHub pages. Locally I have no build/execution warnings/errors, even when I use bundle exec jekyll serve --safe. But the import command fails on GitHub pages. The error I'm getting back is:
Your SCSS file css/main.scss has an error on line 49: File to import not found or unreadable: base
I have not changed the contents of main.scss:
// Import partials from `sass_dir` (defaults to `_sass`)
#import
"base",
"layout",
"syntax-highlighting"
;
Defining the sass_dir variable explicitly in _config.yml doesn't help. Is there a way to debug scss files locally? I have tried using the sass command but it doesn't seem to work with scss files.
I know that the problem is with the #import part because if I comment it and push the build on GitHub pages no longer fails -- but my blog is ugly :)
Note: I have already tried what's described in SCSS #import in Jekyll 2.1 but it didn't get me somewhere.

Ok, get it ! It was simple.
Github pages is running from your repository root : faif.github.io
as your _config.yml file is in /blog, it doesn't see it an takes default settings for everything. eg : path for scss import, is faif.github.io/_sass and result in an error, because your files are in faif.github.io/blog/_sass.
First option
Move _config.yml at the root and tweak sass, includes, ... variables. I don't think it's the best option, but it can certainly be done as nearly everything if configurable in jekyll 3.1.x (documentation).
Second option
Create a blog repository
Clone it
git checkout -b gh-pages because project repositories are published from gh-pages branch only
Copy your blog folder content in this repository
Remove your blog folder from faif.github.io repository
Change baseurl to /blog in _config.yml
Commit and push
And your done.

Related

Gatsby doesn't update theme when modified in node_modules

I'm developing my own gatsby.js theme (actually I've forked and modified another theme, then created new npm package for it). When I change any theme file in node_modules, for example footer.js, I don't see any changes while running gatsby develop until I delete cache with gatsby clean. In the past (2 years ago) when I was making first changes to my npm module, everything was updating as it should. I must also mention that I've cleaned node_modules and updated all dependencies with yarn to the latest available versions.
For example, I'm making this change:
<p className="text-lead"><b>Last modified</b> {lastUpdate}</p>
to
<p className="text-lead"><b>Last change</b> {lastUpdate}</p>
Then gatsby develop detects change:
success onPreExtractQueries - 0.004s
success extract queries from components - 0.128s
success write out requires - 0.003s
success Re-building development bundle - 0.198s
success Writing page-data.json and slice-data.json files to public directory - 0.014s - 0/1 73.40/s
But I see no change in the browser window until I run gatsby clean.
Here's part of my gatsby-config.js at root project folder:
...
plugins: [
{
resolve: "#arturthemaslov/gatsby-theme-intro-maslov",
options: {
basePath: pathPrefix,
contentPath: "content/",
showThemeLogo: false,
theme: "gh-inspired",
},
},
...
Also, I've noticed this warning when running gatsby develop:
warn The #arturthemaslov/gatsby-theme-intro-maslov plugin has generated no Gatsby nodes. Do you need it? This could also suggest the plugin is misconfigured.
Maybe that's something to do with this problem? I've also tried ghosting parts of theme plugin by putting theme files into root src folder, but no luck.
Reason why it isn't working is because you shouldn't be modifying anything in the node_modules directory and when you:
I must also mention that I've cleaned node_modules and updated all
dependencies with yarn to the latest available versions.
You just reverted or updated every dependency within the node_modules directory and if you updated to the latest you need to go through every dependency and see if you have any conflicts which you likely do.
Do note you're also using a theme with Gatsby "^2.20.12" and Gatsby is now on version "^5.2.0".
You also mentioned in the comments you're updated the NPM package while the repository source code is dated a few years. Do not think this is a good approach and you should look at building a release and using the Github Action NPM Publish

Adding _includes and _layouts files to Jekyll directory

I'm new to Ruby and Jekyll, and I've been following this tutorial on how to create a static-site. I've reached the part where we're supposed to edit files inside the _includes and _layouts folders, but those folders don't appear in my directory. There is however a _site folder with an index.html file inside it, and it looks like that's what's showing when I run the website with 'jekyll serve'. Am I supposed to add these folders and files in myself, or should I edit _site/about/index.html to match what the tutorial has?
Here's a picture of what my current folder structure looks like:
Yes, you should add those folders and files yourself. Copy them from the theme repo and skip anyone you don't want to customize / override. The default theme config created by command jekyll new is https://github.com/jekyll/minima
The _site folder is being generated on the fly, it reflects the result of the customization.

GitHub Pages failed to build your site: File to import not found or unreadable: variables

I am trying to build a simple blog with Github Pages and I have tested my changes locally with jekyll serve bundler. The problem is when I push my changes to GitHub, I see the following error:
Your SCSS file blog/styles.scss has an error on line 15: File to import not found or unreadable: variables. Load path: /hoosegow/.bundle/ruby/2.5.0/gems/jekyll-theme-primer-0.5.4/_sass.
I looked at _sass/_variables.scss file and I don't see any obvious issues.
Any pointers? Appreciate any help (FYI - I new to ruby and jekyll ecosystem)
I was able to find the cause of this issue. The problem was that all my blog files were under the blog/ directory in the repository and GitHub Pages does not use that as the source to publish the blog. It expects the source to be at the root of the repository. Once I moved all the files to the root of the repository, everything worked fine.

How to use modules replace functionality in cloud functions

I have a google cloud function that is a subdirectory in a repository. It uses the "Directory with source code" option in the settings menu. I keep getting this error on deploy:
Deployment failure:
Build failed: go: parsing /utils/pubsub/go.mod: open /utils/pubsub/go.mod: no such file or directory
go: error loading module requirements
I'm assuming that GCF does not upload the entire directory to the instance, but instead only the folder? This breaks the replace functionality of Go modules. Is there something I am doing wrong?
Link to the repo: https://github.com/FreekingDean/jeffbotgo/tree/5d735cc/slackevent
I work at Google and on this product.
Only the directory where you run gcloud is uploaded. There is no staging step beyond zipping the current directory and uploading it.
Notably, modules are preferred by the builder over vendor. If there is a go.mod, modules will be used. When you upload your function, it only includes the directory with your function at the root, not any directories one level up. So, when there is a go.mod and you have a replace directive pointing one level up, it will not work.
The solution for now with this layout is to vendor and not upload the go.mod/go.sum files. When using gcloud, you can create a .gcloudignore file to do this for you. See https://cloud.google.com/functions/docs/concepts/go-runtime#specifying_dependencies for more detail. Alternatively, modify your project to include any necessary helper packages in subdirectories.
I had the same issue today.
When reading thru the documentation for the 8th time i came across a warning box bellow the "Vendor directory" headline.
Warning: If your project has both a go.mod file and a vendor directory
at the root of your project, the vendor directory will be ignored
during deployment. You must use a .gcloudignore file to ignore the
go.mod file in order to ensure that your vendor directory is used
during deployment.
So basically once i added a .gcloudignore file with go.mod (will add go.sum as well) everything worked. So i guess if you have a go.mod file the cloud function will try to fetch dependencies instead of using the ones uploaded in the vendor folder.
I'm just guessing here tough.

how to configure sphinx to use local mathjax

I'm having some trouble getting Sphinx to build pages with a local mathjax library. In the documentation here, it says just to add the following mathjax_path = "MathJax-2.7.4/MathJax.js" to conf.py, but after building the files, I still get <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
Is there something else I need to do, besides run make html to get the configuration to load?
I just added the mathjax_path = "MathJax-2.7.4/MathJax.js" to the end of my conf.py file.
I figured out that Sphinx doesn't rebuild your files unless your .rst source files changed. Because the configuration file doesn't touch the .rst files, it won't cause a rebuild. I ended up just removing all the files from the build directory and letting it recreate all the files.

Resources