search

chrisrhymes / bulma-clean-theme

A clean and modern Jekyll theme based on Bulma
http://www.csrhymes.com/bulma-clean-theme/
MIT License
383 stars 484 forks source link

Local Jekyl build of bulma clean theme and then push to Github #50

Closed currentsauce closed 3 years ago

currentsauce commented 4 years ago

Hi Chris,

I was hoping you could give me a few pointers please! I'm creating a little website/blog to post about my electronic engineering projects and hacks, and want to use your theme, it looks perfect!

Rather than use the remote_theme within the config yaml file, I would like to be able to do local development and do local jekyll builds, and then push to github (pages) when I am ready for it.

Frustratingly, I cannot get my head around it, and I was wondering if you had any tips and tricks? Jekyll & Github pages is a new one to me, but certainly enjoy a challenge and learning.

Thanks very much,

James

chrisrhymes commented 4 years ago

Hi James, If you install the GitHub Pages gem in your site too then you can run bundle exec jekyll serve and you should then be able to build your site locally and preview it at http://localhost:4000.

One more tip, if you set livereload: true in your _config.yml then it should auto reload the site when you save changes.

Hope this helps.

currentsauce commented 4 years ago

Hi Chris, Thank you so much for your reply. Yes that helps. I am going to start from scratch here (nothing really lost). So, would it be correct to start with the fresh pull of your repository, add the github-pages gem to the gem file, and then run the bundle exec jekyll serve ?

The github pages gem readme says "You are not required to install Jekyll separately." - though I already have it, should I remove it?

Thanks so much!

James

chrisrhymes commented 4 years ago

Hello,

Rather than cloning the repo you can use the gem of the theme. This way you can update the gem version in future in your gem file and get updates.

This post should guide you through it and then you can add the GitHub-pages gem.

https://www.csrhymes.com/bulma-clean-theme/development/2019/02/09/getting-started-with-bulma-clean-theme/

currentsauce commented 4 years ago

Hi Chris,

Thank you for pointing me to your blog post - I must have missed that one! I'd only seen the guide that details using the remote theme setup.

Unfortunartely i've run into a problem. Default jekyll new xyz works fine, but as soon as I add gem "bulma-clean-theme" to the gem file and change theme to theme: bulma-clean-theme, when I run bundle I get errors which I haven't been able to resolve 😕

C:\Users\james\Documents\GitHub\currentsauce.github.io>bundle install Fetching gem metadata from https://rubygems.org/.......... Fetching gem metadata from https://rubygems.org/. Resolving dependencies... Bundler could not find compatible versions for gem "jekyll": In snapshot (Gemfile.lock): jekyll (= 4.1.1)

In Gemfile: jekyll (~> 4.1.1) x64-mingw32

bulma-clean-theme x64-mingw32 was resolved to 0.8.1, which depends on jekyll (~> 3.8) x64-mingw32

Running bundle update will rebuild your snapshot from scratch, using only the gems in your Gemfile, which may resolve the conflict.'

Doing the bundle update doesn't fix:

C:\Users\james\Documents\GitHub\currentsauce.github.io>bundle update Fetching gem metadata from https://rubygems.org/.......... Fetching gem metadata from https://rubygems.org/. Resolving dependencies... Bundler could not find compatible versions for gem "jekyll": In Gemfile: jekyll (~> 4.1.1) x64-mingw32

bulma-clean-theme x64-mingw32 was resolved to 0.8.1, which depends on jekyll (~> 3.8) x64-mingw32

Is this something you are familiar with?

Sorry that this isn't going straight forward for me, really appreciate the assistance. (I've started sponsoring you because I feel a bit cheeky asking for help from you!)

Thanks,

James

limsherwin commented 4 years ago

I believe you need to edit your Gemfile so that you will be using Jekyll v3.8, then run bundle update again

# This will help ensure the proper Jekyll version is running.
# Happy Jekylling!
# gem "jekyll", "~> 4.1.1"
gem "jekyll", "~> 3.8"
chrisrhymes commented 4 years ago

Hi James, @limsherwin is correct, you need to set jekyll 3.8 in your Gemfile as the GitHub pages gem uses this version.

currentsauce commented 4 years ago

Hi Chris, Things going well so far, doing it bit by bit whenever I get chance! Just a quick one, I did notice that adding in the livereload: true in my _config.yml file causes errors when invoking bundle exec jekyll serve.....brace yourself for a massive cmd dump!

C:\Users\james\Documents\GitHub\currentsauce.github.io>bundle exec jekyll serve
Configuration file: C:/Users/james/Documents/GitHub/currentsauce.github.io/_config.yml
            Source: C:/Users/james/Documents/GitHub/currentsauce.github.io
       Destination: C:/Users/james/Documents/GitHub/currentsauce.github.io/_site
 Incremental build: disabled. Enable with --incremental
      Generating...
       Jekyll Feed: Generating feed for posts
                    done in 2.857 seconds.
 Auto-regeneration: enabled for 'C:/Users/james/Documents/GitHub/currentsauce.github.io'
Unable to load the EventMachine C extension; To use the pure-ruby reactor, require 'em/pure_ruby'
Traceback (most recent call last):
        22: from C:/Ruby26-x64/bin/jekyll:23:in `<main>'
        21: from C:/Ruby26-x64/bin/jekyll:23:in `load'
        20: from C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/jekyll-3.8.7/exe/jekyll:15:in `<top (required)>'
        19: from C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/mercenary-0.3.6/lib/mercenary.rb:19:in `program'
        18: from C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/mercenary-0.3.6/lib/mercenary/program.rb:42:in `go'
        17: from C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/mercenary-0.3.6/lib/mercenary/command.rb:220:in `execute'
        16: from C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/mercenary-0.3.6/lib/mercenary/command.rb:220:in `each'
        15: from C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/mercenary-0.3.6/lib/mercenary/command.rb:220:in `block in execute'
        14: from C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/jekyll-3.8.7/lib/jekyll/commands/serve.rb:75:in `block (2 levels) in init_with_program'
        13: from C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/jekyll-3.8.7/lib/jekyll/commands/serve.rb:93:in `start'
        12: from C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/jekyll-3.8.7/lib/jekyll/commands/serve.rb:93:in `each'
        11: from C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/jekyll-3.8.7/lib/jekyll/commands/serve.rb:93:in `block in start'
        10: from C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/jekyll-3.8.7/lib/jekyll/commands/serve.rb:101:in `process'
         9: from C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/jekyll-3.8.7/lib/jekyll/commands/serve.rb:147:in `register_reload_hooks'
         8: from C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/jekyll-3.8.7/lib/jekyll/commands/serve.rb:147:in `require_relative'
         7: from C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/jekyll-3.8.7/lib/jekyll/commands/serve/live_reload_reactor.rb:3:in `<top (required)>'
         6: from C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/jekyll-3.8.7/lib/jekyll/commands/serve/live_reload_reactor.rb:3:in `require'
         5: from C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/em-websocket-0.5.1/lib/em-websocket.rb:3:in `<top (required)>'
         4: from C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/em-websocket-0.5.1/lib/em-websocket.rb:3:in `require'
         3: from C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/eventmachine-1.2.7-x64-mingw32/lib/eventmachine.rb:8:in `<top (required)>'
         2: from C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/eventmachine-1.2.7-x64-mingw32/lib/eventmachine.rb:8:in `require'
         1: from C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/eventmachine-1.2.7-x64-mingw32/lib/rubyeventmachine.rb:2:in `<top (required)>'
C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/eventmachine-1.2.7-x64-mingw32/lib/rubyeventmachine.rb:2:in `require': cannot load such file -- 2.6/rubyeventmachine (LoadError)

C:\Users\james\Documents\GitHub\currentsauce.github.io>

Also, I'd like to change the colour scheme, I've read https://github.com/chrisrhymes/bulma-clean-theme#colours-and-styles, but it says to set a sass variable in assets/css/app.scss, but right now, in \_site\assets\css I only have app.css - there is no .scss file - am I missing something here, both literally and figuratively?!

EDIT: I've just compared to your github pages repo, and I notice that the assets/ directory should be in the top level, with the .scss file. Do I need to manually create it?

Thanks for your assistance, massively appreciated! I know i'll get something ace pulled together with this!

James

currentsauce commented 4 years ago

...also, serving locally works fine, but I have just pushed to github, and the theme and theme content doesn't show, just the content from my index.markdown file (Which is just "Hello"). Thanks again, James

chrisrhymes commented 4 years ago

Hi,

For the live reload issue, I've not used Jekyll on Windows so I'm not sure I can help. Maybe look on https://talk.jekyllrb.com/

For the colour scheme you need to create your own assets/css/app.scss file and overwrite the color. More info here: https://github.com/chrisrhymes/bulma-clean-theme#colours-and-styles

I took a look at your _config.yml and you need to use remote_theme rather than theme for it to render correctly in GitHub pages.

remote_theme: chrisrhymes/bulma-clean-theme

Hope that helps

currentsauce commented 4 years ago

Hi Chris, Couldn't find anything in the documentation about adding an inline logo image in the menubar. Would like to have an icon to the left of the main title in the top (would be to the left of "C.S.Rhymes" on your page), wondering if there is a way of doing this? Thanks! James

chrisrhymes commented 3 years ago

The best way of doing this would be to copy the contents of the theme's _includes/header.html to your own Includes/header.html file and modify it as required. This will be used when the site is built instead of the default theme version. Check out overwriting theme defaults in the Jekyll documentation for more information.