Jekyll custom theme (running locally) - jekyll

I'm new to Jekyll and I am trying to get a custom theme up and running. Here's is what I've done so far:
Created my Jekyll site. CD to the directory I wanted to install it and ran
bundle exec jekyll serve
These files were created and I was able to see the site locally at the default 4000 port.
I then tried following the instructions here for installing your own theme. I entered this in my terminal:
$ jekyll new-theme skull_and_roses
As the instructions indicated it built out a new directory...
It also added a directory in the _site directory, not sure if that is correct:
I then followed these instructions:
But when I go to run it:
bundle exec jekyll serve --watch
I get an error:
The skull_and_roses theme could not be found.
Like I said, this is my first run at Jekyll so any help would be appreciated.

I also use jekyll theme template (It is a nice template with friendly manual) and customize it to set up my own github page recently.
Beside create repo on github use username (username.github.io), What I did on my mac (locally) are:
set up env for using Jekyll, you can reference: https://jekyllrb.com/docs/
$ git clone https://github.com/username/username.github.io.git (assuming you have already create the repo).
$ cd username.github.io
$ git clone <theme github repo>
put all the theme files into the root of your website files (dir we create in step2)
usually the theme template will have Gemfile, if really not, you can try to create Gemfile and type in:
source 'https://rubygems.org'
gem 'github-pages', group: :jekyll_plugins
After you confirm you have Gemfile, Run
$ bundle install
$ bundle exec jekyll serve
Now, you can enter localhost:4000 or 127.0.0.1:4000 to check the theme can run on local serve.
Then you can mainly modify _config.yml file, like title, author, and other from the theme template instructions. You can check it locally(localhost:4000 or 127.0.0.1:4000) whenever you update something and you want to check the result. Usually changing in _config.yml, you need to restart the jekyll serve (using ctrl+c to stop and run $ bundle exec jekyll serve to restart the service to check the modification. You may need to modify more than _config.yml file to meet your own requirement, at least like about.md or add your own posts in _post.
After you finish modification from theme template and make your own github page you like. You can push the local repo to remote repo (master branch of username.github.io). Btw, if you work locally, you can use branch to test features you want to add, checking result locally and then merge to master when you are satisfied with the result.
Finally, you can check: https://username.github.io and enjoy your own github page.
For your question about _site and other things you may want to know, you may also want to check followings:
Creating and Hosting a Personal Site on GitHub
Quick start & tutorials on jekyll

Related

jekyll on github pages ignores custom layout

I'm trying to clone the repo https://github.com/TowerofHanoi/towerofhanoi.github.io on my GitHub, based on the website https://toh.necst.it and publish it on a new GitHub pages instance. I'm doing this to check that a new article is well formatted for publication.
I'm having trouble generating the website on GitHub pages, the site is somehow bad: https://mencucci.github.io/towerofhanoi.github.io/ (my repo: https://github.com/Mencucci/towerofhanoi.github.io).
Locally on my Ubuntu machine, I can get the site to render properly with the following commands:
bundle init
bundle add jekyll
rm -rf \_site && bundle exec jekyll serve --verbose
I couldn't get the remote to build properly.
I tried:
adding a valid theme (no changes)
using a custom build action (no changes)
I noticed a difference in the logs: local, and github. The local log references the /_layout directory, but the remote one does not. Maybe it doesn't "see" the theme?
Thank you for your time
Figured it out, my main issue was that I was running the site using the default url, which hosts the site at <username>.github.io/<repo_name>. Some hard coded elements assumed that the site be hosted at domain root instead. I solved my issue by using a custom domain, which mapped the to the base domain (empty path).

Is there a directory that will place items in the root of _site on build?

I have a bunch of static files (basically favicons, apple-site-icons, etc) that I want to be at the root of _site when it's built. Currently they're just sitting at the root of my main code folder (along with _posts, _scss, _layouts, etc). It builds fine but it would be nice to move them into a subdirectory so the main directory isn't cluttered up (it's an OCD thing).
Is there any folder where I can put these items so they automatically copy to the root of _site when I build? I know I can write a script to do this and trigger it after the build, and there's probably an extension I could lean on, but I'm looking for a solution that just automatically moves them when I run jekyll build for simplicity.
NBD if I can't do it, just curious because I'm kind of a neat freak.
Thanks!
Jekyll allows you to do exactly that using permalinks.
Permalinks are the output path for your pages, posts, or collections. They allow you to structure the directories of your source code different from the directories in your output.
A simple example extracted from the official page is a case where you have /my-pages/about-me.html with the front matter as follows:
---
permalink: /about/
---
This way you specify the output url. In this example, you could access it in local with localhost:4000/about/
The source option. You can specify this in your _config.yml or as a command line option (https://jekyllrb.com/docs/configuration/options/). How you set this has slightly different requirements/implications.
First, move everything that belongs to the Jekyll site into a folder (e.g. "src").
Then set one of these up (assuming you have a Gemfile):
Command line option with root Gemfile:
Keep Gemfile in the root folder
Run bundle install
Run bundle exec jekyll serve --source src
Command line option with nested Gemfile:
Run BUNDLE_GEMFILE=src/Gemfile bundle install
Run BUNDLE_GEMFILE=src/Gemfile bundle exec jekyll serve --source src
Config file option:
Keep Gemfile and _config.yml in the root folder
Add source: src somewhere in your _config.yml
Run bundle install
Run bundle exec jekyll serve
Each solution here might work better with other external services building your site. There are likely other ways to set this up, but this should get you started.

Hugo not generating the same styling as in development mode

This is my first time I'm trying to generate a static website.
Everything works fine in development mode with hugo server command.
The styling is great, but when I'm trying to generate the final static files with hugo command the theme seems not to be applied properly and I don't understand why.
I've tried two themes (what's in the quickstart and another one) but I get similar results with both.
These are the commands what I've entered into console in the later case:
hugo new site testsite
cd testsite
cd themes
git clone https://github.com/cowboysmall-tools/hugo-devresume-theme.git
cd ..
cp themes/hugo-devresume-theme/exampleSite/config.toml .
hugo server
# styling seems to work
hugo
# the opened public/index.html is broken
Can anyone tell me what am I doing wrong?
I've followed these tutorials:
quick-start
hugo-devresume-theme
UPDATE
after checking the errors in chrome console I can see values like this:
<link href="/dist/css/app.1cb140d8ba31d5b2f1114537dd04802a.css" rel="stylesheet">
if I delete the / from the beginning of /dist/css/app.1cb140d8ba31d5b2f1114537dd04802a.css the style seems to be applied correctly.
Obviously I don't want to do this every time manually. Is there any solution for this in configuration?
Meanwhile I've figured out that the problem originates from this setting in config.toml:
baseURL = "mywebsite.com"
#...
Instead of the above setting I've tried this one and it seems to work now properly:
baseURL = ""
relativeURLs = "True"
#...
Once you set the baseurl in your theme config.toml there is no need to change it.
You probably figured out that hugo and hugo server are two different commands
hugo server is for when you are developing your site and viewing it locally
hugo you only run this when you are ready to deploy your finished site ... then copy all the files from the public/ folder to your website.
It's not intended for you to browse public/ folder from your local machine. Just use hugo server.
Running hugo may not rewrite your css directory. If you want to ensure that it does, instead of running hugo in the command line, make a quick bash script that first deletes the css directory, and subsequently calls hugo to rewrite the files in that directory. Here is something I wrote which should work. I store this file in my /scripts directory.
#!/usr/bin/env bash
SCRIPTPATH="$( cd "$(dirname "$0")" >/dev/null 2>&1 ; pwd -P )"
cd "$SCRIPTPATH"/../docs/css/
rm home.min.css
rm page.min.css
cd "$SCRIPTPATH"/../
hugo
Then when I want to rebuild my hugo site, I run this script. I just call it hugo.sh.

jekyll not generating index.html

I have been using Jekyll for my blog and it has been working fine. Now I am trying to add new posts from a computer running Ubuntu 14.04 and Jekyll 2.4.0. The problem is that, only on this computer, it does not generate index.html in _site.
I can't find anything in the documentation that helps, and in any event, I'm using git so I have the same configuration on all of my machines.
So the question is: How does one turn off generation of index.html in Jekyll, and how can it be turned back on?
[Update: I did gem uninstall jekyll followed by gem install jekyll, rebuilt the site, and everything works fine. The original install must not have completed properly.]
To turn generation off you can remove this file. Or to use static index.html file remove markdown section enclosed with double triple --- in header (in this case static index.html will be parsed). Also mention filename it in exclude: section of _config.yml to avoid copying to _site folder.

Auto regeneration is not working with _config.yml?

I installed jekyll and run it from cli:
jekyll --server --auto
But when I change _config.yml I can't see that my changes where applied and I have to restart server every time.
I really need to restart server every time when I change _config.yml? Or there is some workaround?
I believe you are correct; that changes to _config.yml always require restarting the server.
After all, _config.yml provides options that you can override in the call to Jekyll. So it is unclear how auto should behave if an option is called on the command line run of jekyll which overrides some of the _config.yml settings, and then the config is edited. Which would take precedence then? the _config.yml or the original command line argument?
If you have the server running, you don't need to restart it. A (little bit) quicker way to is to run jekyll build or bundle exec jekyll build after editing your _config.yml file.
Parker Moore, maintainer of Jekyll, confirms that _config.yml changes are not autogenerated or picked up by a running, watching Jekyll server.
No I remember why we can't do this: if you change either source or destination, you're eff'd, so we said 👎 to this suggestion. Definitely use _data if you're using custom data. Otherwise, a quick ^C and restart should be 👌
https://github.com/jekyll/jekyll/issues/2302#issuecomment-43160557
I really need to restart server every time when I change _config.yml?
Or there is some workaround?
There is some workaround:
1) Install watchy.
npm i -D watchy
2) Restart on config change (for example as a package.json script)
"scripts": {
"restart": "watchy -w _config.yml -- bundle exec jekyll serve --drafts --watch",
(--drafts is unrelated, but I am assuming you do this locally in dev/authoring mode...)