CSS/images not being loaded in Jekyll blog - ruby

I am new to Jekyll and just trying to start a Jekyll Theme example. I tried a few other themes too and all of them only load up at port 4000 with basic text and no images/styling.
Fork the project.
Clone the repo in my local machine
bundle install
jekyll serve
The server starts and I can look at the page but it is very ugly without the styling.
I know I can change the variables and configurations but I just wanted to run this as it is first. I can see all the images and in the images folder but why is this not being loaded on the blog?
I am new to Jekyll so please let me know if there is something wrong with this. Jekyll serve is the correct way to start the server right?

Have you updated the URL in _config.yml? This is used to build the links to the CSS and scripts.
When working locally you should comment it out. If you haven't already open _config.yml and change
url: http://your-site.com
to
#url: http://your-site.com
When you publish to a live site uncomment the line and update the url.

For me the problem was the baseurl: "/" instead of "" which broke my paths. So that's worth checking. The current answer lead me in the right direction to check my _config.yml but url: was not the problem.

Related

Why are all images broken on my Github Pages?

I'm a new user of Git/Github and I'm traying to use Gitghub Pages for my project but for some reason the images are all broken. I was looking for solution but I did find no one with same issue :(
Github Pages: https://dannotfound.github.io/Alessandra/
Github Repository: https://github.com/dannotfound/Alessandra
Someone knows why is it happening or how to fix it?
Github Pages uses Jekyll and Jekyll will ignore files and directories with underscores. This allows you to have files and directories within your repository yet are not exposed via the web server. Such as _config.yml and _includes/.
The fix is to rename _img to img and change your links.

What is the difference between git push and jekyll build for jekyll blog

I am creating a jekyll blog using Jekyll. In the instructions I see that there is a command to build the site using the command jekyll build.
However, I noticed that when I make changes to my code/post and perform a git push origin master the content and changes are uploaded automatically. This makes me wonder why I would need to "build" the site.
Could someone help me understand what the difference is? I'm currently trying to add Google Analytics to my blog and I suspect that knowing the difference between the two will help me get it to work properly. Thanks.
to turn a Jekyll app source code into a site you view, it has to do that build step to create the HTML that is served.
Github pages automatically does the build step for you after the code is pushed (if the repo/brach is configured for Pages).
So, you are right. It is not necessary for you to run the command.
The reason you may want to run it is to run the site locally (using your computer as the server). Or if you want to deploy it to some generic static host other than Pages. Or if you want to just view the final compiled site for some reason.

jekyll tag plugin works offline but not on github pages

There might seem to be other dupes like this, but this SO post is the closest with a hacky solution.
I got a theme that uses the tag plugin from here : http://charliepark.org/tags-in-jekyll/ Here is my site repo on github. It's hosted here : http://www.gideondsouza.com
Tags don't work online but work offline. On my local machine I see a _/site/tag/.. with folders for each tag. But this tag folder isn't generated on github? In fact I don't even see a _site folder, so maybe my understanding is off. Perhaps I need to install the github-pages gem?
I could probably fix it like in the SO post mentioned earlier, but this is hacky, I will always have to remember to copy the generated tags folder into the root.
Anything I'm missing?
Github pages only support selected plugins (see documentation here).
If you want to use your plugin, you have to generate locally and to push the _site content online.

Jekyll --force_polling not automatically refreshing (vagrant machine)

I am using a vagrant machine, I have installed Jekyll and I am having trouble getting Jekyll to watch the files and refresh them, after search around I found that I needed to use the --force_polling tag which now means if I refresh the files are updated but watch does still not refresh the browser.
I can see the files being updated in my terminal window.
Cheers.
Jekyll watch will generate your static files when you make change to sources. It is not supposed to reload page in your browser.
In order to do this, you can try to use livereload. Take a look at Daniel Doezema blog for setup instructions

Creating site with Jekyllbootstrap in github pages?

I recently created a site using Jekyll. And my site is up and running in github. In my local directory I have a folder called _sites. I changed the contents over there (my editing index.hmtl and other files), as per my wish.
I tried running :
jekyll --server
And I can see all my changes done in my local machine.
But when I commit and push. I couldn't able to see the changes in my site.
Am I missing something?
If you have plugins GitHub Pages will not serve your Jekyll powered site automatically.

Resources