I tried to insert the linkedin link in the _config.yml but its throwing an error that the page cant be found.
go to your linked in profile then copy the address that is below your profile picture starting after https://ke.linkedin.com/in/
Then go to go to your _config.yml in your blog file in github, then paste the code you copied earlier to linkedin in footer_links section. Remember to space after the colon,like so
linkedin_username: user-name-256ra147 and thats it, you are now linkedin! Hope it helps.
Still with Minima 2.5.1 (even with remote theme), so have to add as
linkedin_username: user-name
But I don't like the default vertical listing of the social links, and prefer the horizontal listing. So I customized the footer.html as follows:
<footer class="site-footer h-card">
<data class="u-url" href="{{ "/" | relative_url }}"></data>
<div class="wrapper">
{%- if site.github_username -%}
<ul class="contact-list">
<svg class="svg-icon"><use xlink:href="{{ '/assets/minima-social-icons.svg#github' | relative_url }}"></use></svg> <span class="username">{{ site.github_username| escape }}</span>
<svg class="svg-icon"><use xlink:href="{{ '/assets/minima-social-icons.svg#linkedin' | relative_url }}"></use></svg> <span class="username">{{ site.linkedin_username| escape }}</span>
<svg class="svg-icon"><use xlink:href="{{ '/assets/minima-social-icons.svg#twitter' | relative_url }}"></use></svg> <span class="username">{{ site.twitter_username| escape }}</span>
</ul>
{%- endif -%}
</div>
</footer>
Related
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 /.
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 am using the following expression
<ul>
{% assign mypages = site.pages | sort: "order" %}
{% for page in mypages %}
<li class="intro">
<a href="{{ page.url | absolute_url }}">{{
page.title }}</a>
</li>
{% endfor %}
</ul>
at my site's index.md to generate list of all pages and all works perfect
Also I am using modified version of the above-mentioned code
<marquee behavior="scroll" scrollamount="17"
direction="left" height="80px" loop="-1"
style="border:0px" width="99%" padding="0px"
onmouseover="this.stop();"
onmouseout="this.start();">
{% assign mypages = site.pages | sort: "order" %}
{% for page in mypages %}
<a href="{{page.url|absolute_url}}"> {{
page.shortname }} <span class="rate">{% include
indexmod.html %}</a></span> <span class="rex"> |
</span> {% endfor %}
</marquee>
to generate Bloomberg-like scroll marquee area made from some meta data and rating value (include indexmod.html), but there are appearing 7 "spook" pages without title and linking to: 404.html, feed.xml, sitemap.xml, robots.txt, redirects.json, style.css...
I have try to add thouse pages into ignore list in _config.yml
Thanks in advance for trick how to add all of them into some exclude filter.
Here is screen of the mentioned marquee on my site. Topic 032C 0.24 is linking to a real article with title "032C" with rate 0.24, next topic is wrong and linking to 404.html with rating 0.0, next topic is good again 4S4R, and all rest zeros are titles empty rates for technical files of my site. I have left only 2 real articles on my site for easier fixing the glitch.
I see there is no any comments. I have fixed part of problem using exclude line in front matter for 404.md. But still have question about other 5 files with extensions .css .json .xml .txt.
Therefore I am redirecting rest of question to a new topic
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>
i have an blog index page with a list of blog posts and excerpts.
once i click on the "read more" link, the full blog post is opened but lacks of its title and date of creation.
the blog index is structured like so:
{% for post in paginator.posts %}
<div class="entry">
<h1>{{ post.title }}</h1>
<span class="date"><i class="fa fa-clock-o"></i> {{ post.date | date: "%m-%d-%Y"}}</span>
{{ post.excerpt }}
<a class="more-link" href="{{ post.url }}">continue reading <i class="fa fa-chevron-right"></i></a>
</div>
{% endfor %}
i've tried throwing {{ post.title }} and the date in blog posts, both in the front matter or inline in the article, but it just shows up empty.
how can i show the title in my opened blog post?
thanks!
To edit how your blog posts are displayed you have to edit the template file in the _layouts folder. By default Jekyll uses post.html as a template for blog posts. Make sure that you have {{ page.title }} in the used layout file and regenerate your site. Now the blog title will appear on all of your individual post pages, please note that it won't appear if the post title is not specified in the front matter of the post.