I'm trying to build a site with jekyll. I managed to make math work and upload some files. Now the overall distribution of content is not optimal.
I get a link to "HEAD" that lists a series of updates of Jekyll. I would like to get rid of that.
The main url redirects to some blog entries while you have to click on "About" in order to go to some general information about me. I would like to do it in the opposite way, i.e. having the about section shown in the main url of the page https://rjraya.github.io/ and the blog in some derived url like https://rjraya.github.io/blog
Here are the sources of the page. How can I do this simple changes? I understand that I'm using the Minima template.
Re: HEAD
I think the "HEAD" is coming from the History.markdown file. It is strange that the "HEAD" does not show up in a local jekyll serve development environment. I suspect the code below is picking up History.markdown in jekyll, along with about.md when rendering header.html.
https://github.com/rjraya/rjraya.github.io/blob/ddc6a2f5c5804961da6ac79472b7f77052bef267/_includes/header.html#L20-L27
<div class="trigger">
{%- for path in page_paths -%}
{%- assign my_page = site.pages | where: "path", path | first -%}
{%- if my_page.title -%}
<a class="page-link" href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a>
{%- endif -%}
{%- endfor -%}
</div>
RE: Page Title URL Computational reflections
Change the href from / to /blog in this line
https://github.com/rjraya/rjraya.github.io/blob/ddc6a2f5c5804961da6ac79472b7f77052bef267/_includes/header.html#L7
<a class="site-title" rel="author" href="{{ "/blog" | relative_url }}">{{ site.title | escape }}</a>
RE: About URL
Remove the permalink : /about/ from the about.md page. The about.md will be come the homepage (e.g. /) in the next step.
https://github.com/rjraya/rjraya.github.io/blob/gh-pages/about.md
RE: Show about.md information on homepage rjraya.github.io and show _posts markdown files under rjraya.github.io/blog
Let jekyll use the default behavior of assigning permalinks based on the markdown filename.
Rename index.md to blog.md. This will move the list of _posts files from / to /blog.
Rename about.md to index.md. This will move the content of about.md from /about to /.
Related
I'm not sure what I've done. I've added some new pages from my collections folders.
The folders and files are created in the site folder.
However I can iterate my collections and see the links, however the links provide 404 errors as the files aren't being created.
I've re-saved the files as utf8 but this didn't hel, mentioned in a related question.
I've even removed all the files and put back the original test files which did work previously.
Foolishly I didn't have the project under source control.
Obviously jekyll can see them and read their contents and the loops work...
But the files aren't being generated.
<h3>User Guides</h3>
{% for user in site.stt_userguides %}
{::nomarkdown}
<a href="{{ user.url }}">
<h3>{{ user.title }}</h3>
</a>
<p>{{ user.content | markdownify }}</p>
{:/}
{% endfor %}
<h3>Features</h3>
{% for user in site.stt_features %}
{::nomarkdown}
<a href="{{ user.url }}">
<h3>{{ user.title }}</h3>
</a>
<p>{{ user.content | markdownify }}</p>
{:/}
{% endfor %}
I'm using this command ...
bundle exec jekyll serve
It confirms the files aren't found.
Due to initial configuration issues implementing collections, I had inadvertently removed the output: true setting, also useful to add the permalink property under your collection in config.yml.
As shown in the collections section on this page https://jekyllrb.com/docs/permalinks/
As a novice starting out on GitHub Pages, I am lost among the sea of materials on the web that seem to help with my following problem:
I am using Jekyll to build my blog hosted via GitHub Pages and would like to add a background image in my default homepage like this.
So, how do I do it? I have started out, but have little to no knowledge of HTML / CSS and would thus be grateful for a simple way to do the same.
I am currently using the default minima theme! :)
Minima doesn't have a provision to easily render a "cover photo" like you expect to. But that doesn't mean, it is impossible to render one.
When using Minima, your homepage is rendered via the file ./index.md and layout file _layouts/home.html. So, if your working directory doesn't contain the home layout, create the _layouts directory with a file named home.html.
The home layout in Minima
I'll explain what the layout contains so that you'll be able to use that knowledge in other areas.
The layout contains the following code. Copy the entire code below into the _layouts/home.html file you just created in the above step:
---
layout: default
---
<div class="home">
{%- if page.title -%}
<h1 class="page-heading">{{ page.title }}</h1>
{%- endif -%}
{{ content }}
{%- if site.posts.size > 0 -%}
<h2 class="post-list-heading">{{ page.list_title | default: "Posts" }}</h2>
<ul class="post-list">
{%- for post in site.posts -%}
<li>
{%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%}
<span class="post-meta">{{ post.date | date: date_format }}</span>
<h3>
<a class="post-link" href="{{ post.url | relative_url }}">
{{ post.title | escape }}
</a>
</h3>
{%- if site.show_excerpts -%}
{{ post.excerpt }}
{%- endif -%}
</li>
{%- endfor -%}
</ul>
<p class="rss-subscribe">subscribe via RSS</p>
{%- endif -%}
</div>
Let's dissect the layout chunk by chunk:
---
layout: default
---
This is a front matter block that tells Jekyll the 'home' layout is a subset of the 'default' layout.
<div class="home">
This opens up a container for everything else on the home page and is closed by the </div> on the very last line.
{%- if page.title -%}
<h1 class="page-heading">{{ page.title }}</h1>
{%- endif -%}
This a template instruction that would render the home page's title if it was provided in the front matter inside file ./index.md.
{{ content }}
This is another template instruction that pulls in content (anything apart fron the front matter) from the file using this layout. In our case, that would be ./index.md.
The remaining chunk {%- if site.posts.size > 0 -%} cycles through the posts in your site and renders a list of those posts.
The cover image
We now have a fair idea regarding what our template is made of. But there is no mention of the code to render the cover-photo.
Agreed. So, let us code that in then. Insert the code from the following steps before the line with {{ content }} in the layout
First, add a container for the image.
<div class="hero">
</div>
Then insert the HTML markup to render the image of your choice (say, ./assets/home-feature.jpg) within it:
<div class="hero">
<img class="feature-img" src="{{ 'assets/home-feature.jpg' | relative_url }}" />
</div>
With just the above markup, your image would perhaps be too big for your page. So we should constrain the size with some CSS styling.
Minima uses Sass partials to generate the CSS for your site. Therefore, we'll need to overwrite a partial with some custom code.
Create a new directory named _sass with a subdirectory named minima and finally a file inside the _sass/minima directory named _layout.scss. Copy the contents at this link into that file.
Now add the following custom code towards the end of the file:
/* Cover Image */
.hero {
.feature-img: {
max-width: 100%;
}
}
Rendering background image
All of the above is to just render a cover-photo. To render the image as a proper background-image, you can do the following..
First, we need to adjust the markup to render text in the foreground and image only as the background:
<div class="hero">
{{ page.hero_text }}
</div>
With the above in place you are now able to control the text over your background-image via front matter in ./index.md.
And then bring back the image using CSS:
/* Cover Image */
.hero {
background: url('../home-feature.jpg');
}
Getting the url to your image is a little tricky since we can't use Liquid instructions inside sass partials in vanilla Jekyll. So you'll have to experiment with it for your particular site.
For more tips regarding CSS backgrounds, check this link
Have you look into the inspector tool? Another easy way is to look at the code snippet of that website which you can find here: https://github.com/mnp-club/mnp-club.github.io
I'm pulling up the exact code for what they do to achieve that effect this will :
https://github.com/mnp-club/mnp-club.github.io/blob/master/_layouts/page.html
<div id="main" role="main">
<article class="entry">
{% if page.image.feature %}<img src="{{ site.url }}/images/{{ page.image.feature }}" class="entry-feature-image" alt="{{ page.title }}"{% endif %}
// Alternatively a simpler way will be to just include the img src code.
// <img src="insert-image-url.jpg" class="entry-feature-image"/>
// Whole bunch of code for body here
</article>
</div>
And to make it a full-width header image, just give it a css of
.entry-feature-image {
width: 100%;
}
My blog run on jekyll minima and github pages as well and I have a default header for certain pages. Making it full width is just a matter of CSS.
https://github.com/wing-puah/thegeekwing-jekyll/blob/master/_layouts/default.html
What you can do is just add the html code for the image to the _layouts/default.html file.
There are different ways to achieve what you want. Understand that you have little experience with html and css but I will suggest to pull up the inspector tools and see the code to identify which code does what. Hope that helps!
I have started a small website with a few pages and a couple of blog posts. It is hosted on my organization's server and I ftp'ed all contents of _site/ directory into a subdirectory of the website. Hence the Jekyll site is at http:// myusername.foobar.foo/thiswebsite/ .
In my _config.yml
baseurl: "/thiswebsite"
url: "http:// myusername.foobar.foo"
Now all pages show up correctly. But blog posts don't.
In YAML front matter of each blog post:
permalink: /:title.html
Then I ended up generating links on index.html page to blog posts at http:// myusername.foobar.bar/blog-title.html but the actual blog posts are found at http:// myusername.foobar.bar/thiswebsite/blog-title.html. So if people click on the links found on index.html they will see 404.
On index.html I have:
{% for post in site.posts %}
<h2>{{ post.title }}</h2>
<blockquote>
{{ post.excerpt }}
</blockquote>
{% endfor %}
I would have thought {{ post.url }} would automatically insert correct URL for the posts, but apparently that's not happening. :(
Where did I screw up?
(Jekyll version 3.1.2)
Note: blank space after http:// is intentional as StackExchange thinks I'm posting links and that's apparently not allowed. In my actual markdown and html they are proper URLs.
Link to a collection item (post are collections items) or pages :
eg : {{ post.title }}
or {{ post.title }}
And it's the same for resources links (image, script, css, ...).
eg : <link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}">
or <script src="{{ site.baseurl }}/js/script.js"></script>
Pagination works locally when i jekyll serve such that I get index.html with my first page of posts, but when i push and travis builds and then deploys the site, the home page lacks the first 10 posts. If I navigate to /page2 the 11-20 posts are there.
I noticed that the index.html in my source is not being rendered at all when i deploy. But it is being rendered when i serve locally.
What could cause the first page of posts to not render at all?
Here is my _config.yml setting
paginate: 10
paginate_path: "page:num"
here is my ci build script
#!/usr/bin/env bash
set -e # halt script on error
gem install jekyll-paginate
bundle update
bundle exec jekyll build
Here is what shows up on the index.html. Yet if i go to /page2 manually, the 11-20 posts show up. So its just something with the first page
UPDATE: I just checked on the server and the ./_site/index.html file is being generated properly. But the index.html that ends up in the root has no paging, no pages ... looks like the image above. I'm not sure why it is not being put in the root.
try this way:
change to paginate_path: "/page:num" , in _config.yml
and also add
<div class="pagination">
{% if paginator.previous_page %}<a class="new" href="{{ paginator.previous_page_path }}"></i> newst post </a>{% endif %}
{% if paginator.previous_page %} {%if paginator.next_page %} <span class="sep"></span> {% endif %}{% endif %}
{% if paginator.next_page %}<a class="olderpage" href="{{ paginator.next_page_path }}">oldest post</i> </a>{% endif %}
in last line of index.html
Following the Jekyll Collections documentation, I wrote the following code in _config.yml
_config.yml
collections:
- popular_posts
So when I print {{ site.collections }}, the output is "popular_posts".
I also made a folder called "_popular_posts" at the same level as "_posts".
_popular_posts contains two .md files with some YAML front matter, same as a post.
However, if I print {{ site.popular_posts }} or {{ site.collections.popular_posts }}, there is no output.
How do I have Jekyll recognize the .md files in that directory so that the following code will work?
{% for popular_post in site.popular_posts %}
<a href="{{ popular_post.link }}">
<h1>{{ popular_post.title }}</h1>
<img class="pop-img" src="{{ popular_post.image_url }}">
</a>
<span id="pop-order"><span class="pop-current-popular_post-number">{{ popular_post.number }}</span>/5</span>
{% endfor %}
It's quite easy! You're on the right track. In your _config.yml:
collections:
- popular_posts
This will tell Jekyll to read in all the files in _popular_posts.
If you want each of those two files to have a corresponding output file (like how _posts works now), you'll want to change your _config.yml to:
collections:
popular_posts:
output: true
This will produce files at /popular_posts/filename1.html and /popular_posts/filename2.html, one page for each post.
Collections are only recently up on GitHub Pages so if you were trying this there, it would have failed.
Check out jekyll-help for more help if you need it!