I am trying to use Jekyll to build my portfolio site which is hosted through Github Pages. However, after going through the setup process and watching some tutorials this is what I have in my project folder:
As you'll notice, it seems to be missing some important folder such as _layouts, but it also seems to be working fine. What am I missing here?
The tutorials or docs you saw may be missing gem themes, Jekyll 3.2.0 introduced gem based themes: By default you won't have these typical directories:
/assets
/_layouts
/_includes
/_sass
But you can always overwrite them or copy to your jekyll instance to modify them.
Related
Was the Jekyll home page made with Jekyll? And if so what theme did they use and is it publicly available.
I recently noticed that the site dev assets looks very similar to the Jekyll home page and uses Jekyll, however while looking through the source I could not find the name of the theme in any of the config files.
Thanks in advance for any help.
I went through the docs/ directory of the jekyll repository. They're definitely using Jekyll. In _sass/, only two files are not original:
_gridism.scss, GitHub Repo: gridism
_normalize.scss, GitHub Repo: normalize.css
All the rest are essentially original, as in the developers of the website made the theme themselves.
I am working on the css and html of a simple web-project.
I would like to use livereload to update what gets rendered in the browser on the fly whenever I make a change to any of the files in my project.
From the description on the livereload website:
What does LiveReload do?
LiveReload monitors changes in the file system. As soon as you save a
file, it is preprocessed as needed, and the browser is refreshed.
Even cooler, when you change a CSS file or an image, the browser is
updated instantly without reloading the page.
Since this is not a rails/sinatra project, but just simple html/css/js, what could I use to get live reloading?
E.g. is there some lightweight server in the gem repos that could solve this for me?
You could use the catapult gem to set up a simple sprockets app, without sinatra or rails. It is just a static site that makes it easy to use a sort of asset pipeline. I have used it a lot and I love it.
Then in your Gemfile you can add gem 'guard-livereload' project here.
Just follow the setup instructions, you may also have to check out guard to get everything working nicely together.
I only am suggesting catapult because it makes setting up a simple static site incredibly easy with the added benefit of sprockets, coffeescript and your flavor of sass.
To do this without catapult, just run bundle init (assuming you have the bundler gem installed) in your root directory which will create a Gemfile. Then all you need to do is add the guard-livereload gem like I wrote above.
enjoy
I'm just wondering if there is a way to integrate SASS into Jekyll. All that I need is an automatic .scss compilation into .css when I launch Jekyll.
I don't see anything wrong with compiling assets when you launch (which I take to mean run) jekyll. The whole point of running jekyll is to pre-compile your site, which is good for performance.
As for asset conversion-- there are many plugins available that focus on this. I like the Jekyll Asset Pipeline gem, which supports any language (e.g. Scss, Less, CoffeeScript, Erb, etc.) and has a bunch of features (e.g. asset tagging, compression, gzipping, etc.) that set it apart. It also seems to be the fastest growing Jekyll-related gem these days, which I take to mean that it is gaining traction in the community.
If you want to keep it as simple as compass watch you can use the Guard gem along with guard-jekyll and guard-compass (and if you like style injection, guard-livereload).
Guard bundles multiple 'watch' actions under a single terminal window, and is much easier to set up than a robust asset pipeline. Install the gems, configure the .guardfile according to the guard-compass and guard-jekyll instructions, cd to your directory and type guard. Any time a relevant file changes your sass files and/or jekyll site will be recompiled.
Native Sass, and CoffeeScript, processing debuted in Jekyll v2.0:
http://jekyllrb.com/docs/assets/#sassscss
Full disclosure: I am the lead dev behind this project.
The easiest way I've seen to setup Sass with Jekyll is with jekyll-compass. This gem will do exactly as you describe: Any time jekyll builds your website (jekyll build, jekyll serve, etc) your Sass will be compiled into the output folder along with the rest of your website. Check out the readme linked above for full usage details.
There's also some work under way currently by the Jekyll guys to get Sass support into the core of Jekyll so that everyone will have at least basic access to Sass and the wonderful feature-set it provides.
The new rails 3.1 asset pipeline confused me a lot. In rails 3.0.x, with the sass gem, my global css file got updated when I edit .scss files. But in rails 3.1, that doesn't work anymore. It seems like I have to run a rake task to update my css files whenever I modify the .scss files. I feel like I misunderstand something about the new asset pipeline, but I don't know what it is. Can someone provide a solution or explanation to this problem? Thank you.
There are two possible causes of this. I am assuming that you are in development mode, and that all the gems are loaded.
1. Config
In development mode files are compiled on-demand and cached until any changes are made. You have to get the new 3.1 config options set in the right files or this might not work as expected.
Check out the Rails guides section on upgrading.
2. Extensions
The other is getting the extensions in the right order. For scss that would be file.css.scss. This tells Sprockets to parse the files as scss first, and that the have a css extension. If you had .erb on the end - file.css.scss.erb - then erb is processed first, then scss.
Upgrading apps is a bit tricky because so many things have changed. The asset pipeline guide has lots of useful information and advice.
Sass / SCSS has this built in already so you don't have to do ERB pre-processing.
image-url("image.png")
http://guides.rubyonrails.org/asset_pipeline.html#coding-links-to-assets
For me this problem resolved very easy.
I simple deleted all precompiled *.css files from assets/stylesheets and remain all *.scss files. Rails worked fine with *.scss directly, withoutn precompile.
In Ruby, if you run the command gem server it will present you with a web page of documentation for all the gems you have installed on your machine. Can something similar be done for your local documentation, so that all of your local rdoc documentation is in one easy to access place? Any advice would be much appreciated, thanks.
Though this question is a bit old, here's what I would do:
Create gems out of your projects. You don't have to publish them just keep the gemspec on your local
Generate your local documentation from the root of your projects. This should give you two separate docs folders (if you have two projects)
Use gem server --dir=/path/to/project/one --dir=/path/to/project/two
OR
You can generate the documentation for each project using rdoc in their root folder
Then open each doc/index.html as a separate tab in your browser ;)