After running hugo import jekyll, everything seems to be working fine except for the images. I'm running it locally through hugo server -D.
Inside blogpost1.md that lives in content/post, I have an image with the path:
That I changed to the following as per Hugo docs:
Following is the folder structure:
|_ content
|___ post
|_____ blogpost1.md
|_ static
|____ assets
|_______ img
|_________ 2018
|___________ SIS2018.jpg
And config.toml file that I have yet to touch:
baseURL = "http://example.org/"
languageCode = "en-us"
title = "My New Hugo Site"
theme = "ananke"
I also tried changing it to plain HTML but I'm still getting a 404:
<img src="/static/assets/img/2018/SIS2018.JPG" title="image title" />
In my setup everything is working fine using the following code + structure:
{{ .Site.BaseURL }}img/posts/image.png (you can omit the {{ .Site.BaseURL }} part if relative paths are fine)
My image is located in static/img/posts/image.png
My post is located in content/posts/post.md
So you could try to remove the leading slash when using  (use assets/img/2018/SIS2018.jpg instead of /assets/img/2018/SIS2018.jpg)
For the plain HTML part <img src="assets/img/2018/SIS2018.JPG" title="image title" /> should work.
Related
I am building a hugo blog site and I have some front matter that I would like to get rendered in the layouts. When I view the results on my localhost:1313, I can see the front matter being populated, but when I host the site on Netlify, the front matter and partial files won't render.
I'm not sure what else to do. I've cleared the console of any errors, made sure my content files match the layout files etc.
Any help?
Here is the link to the live netlify site: https://stoic-meninsky-a5758a.netlify.app/
Here is my directory structure:
-content
-about
-_index.md
-blog
-_index.md
-post-1.md
-_index.md
-layouts
-_default
-baseOf.html
-about
-section.html
-blog
-section.html
-single.html
_index.html
This is a sample file that is pulled from one of my content markdown files:
---
title: "The Herman Show | Blog"
linktitle: "Blog"
draft: true
newsletter: "This is the newsletter"
---
This is how I call the front matter: <p>{{ .Params.newsletter }}</p>
This is how I loop over the section pages to get a navbar
{{ range .Site.Sections }}
<li>{{ .LinkTitle }}</li>
{{ end }}
Make sure your markdown files in the content directory are marked to: drafts:false
I'm creating a website using Jekyll.
so far I have four pages which are created automatically from four md files which md files are in the root of the project.
index.md
about.md
login.md
register.md
Here is the content inside my login.md file
---
layout: layout-default
title: some login title
permalink: /login
theme: secondary-theme
nav:
menu-items:
- type: text
text: Don't have an account?
- type: link
text: SIGN UP
class: button
linkPath: /register
sections:
- type: 3
class: form-section
header-line-2: Login Section!
form:
api: http://127.0.0.1:8080/login
submit-text: LOG IN
form-controls:
- label-text: EMAIL ADDRESS
input-type: email
input-placeholder: Enter your email
input-name: email
- label-text: PASSWORD
label-link-text: Forgot password?
label-link-path: #
input-type: password
input-placeholder: Enter your password
input-name: password
---
What i do is iterating the sections and applying html attribute values depending on the variables inside each section. That way i can have as many sections rendered as i want on one page. And they can also be different depending on the classes and content i put in the md file.
The problem is that if the project gets too complicated with different styles for sections and so on. I would like to separate each section content. It would be nice if i could make a folder lets say login/sections folder
and then put md files inside and then inside login.md file include these section md files. This way the code would be much more organized.
Is there way to do that, and is my approach actually good.
Jekyll provides the ability to include files into another files. The magic directory for this is _includes. Example:
If you create a file named _includes/sections/s1.html, you can include that into any other file with the following tag:
{% include sections/s1.html %}
This approach works for:
including HTML file into HTML
including HTML file into Markdown (since Markdown can contain HTML code)
including Markdown into Markdown
If you want to include a Markdown file into a HTML, you have to use some trick:
{% capture m %}{% include sections/s1.md %}{% endcapture %}
{{ m | markdownify }}
I am looking for an answer of how to use Liquid for my background image path in css file and hoping the image can be seen in localhost and on Github at the same time.
The first background path only worked on Github and the second one only worked in localhost. Is there any way to achieve what I want without comment out the code every time I commit to Github? I was thinking maybe I need to use {{%%}} so I read the documentation from Jekyll and looked up for answers but still no luck.
CSS
---
---
.content-wrapper {
max-width: 800px;
margin: 0 auto;
height: 2600px;
background: url({{site.baseurl}}/_site/assets/img/dummy_blog_content.jpg);
background: url({{site.url}}{{site.baseurl}}/assets/img/dummy_blog_content.jpg);
}
YML
baseurl: /project
exclude: ["README.md"]
You can use absolute_url to automatically prepend the url and base_url in liquid but that should be done in your templates:
{{ "/assets/style.css" | absolute_url }}
The generated url shouldn't have _site in it, as that won't work in Github pages. In your template refer to your css location, in this case /assets/style.css:
<link rel="stylesheet" href="{{ '/assets/style.css' | absolute_url }}">
Using aside, I'm trying to show an edit icon to be clicked to call custom protocol with the title of the blog.
For example, when 2014-01-19-python-iteration-with-range.markdown is the markdown of the octopress blog, clicking the sidebar edit icon open://Users/doc/prg/source/_post/2014-01-19-python-iteration-with-range.markdown is invoked.
I modified _config.yml to have this line:
post_asides: [
asides/edit.html
]
I also put the edit.html as follows in the asides directory.
<section class="googleplus{% if site.googleplus_hidden %} googleplus-hidden{% endif %}">
<h1>
<a href="open:///Users/doc/prg/source/_posts/{{ ??? }}">
<img src="/images/self_edit.png" width="32" height="32">
Edit
</a>
</h1>
</section>
Following the hints in this site, I tried page.path, but nothing shows up.
What variable should be filled in ??? to get the file name of the post?
Or how can I know the markdown file name of the octopress post?
I thought about using {{ page.id }} and replacing / with - together with some string change can get the file path of markdown, but I don't know how to translate the name.
I got an answer from this site.
When page.path is not available, copy the following code into any rb file in plugin directory.
class PagePathGenerator < Generator
safe true
## See post.dir and post.base for directory information.
def generate(site)
site.posts.each do |post|
post.data['path'] = post.name
end
end
end
And I have the link correctly.
I have built a website based on the Jekyll code for the website for Apache Buildr. The Buildr website automatically generates a table of contents for each page based on the headers in the textile format files.
For example, you write a page using textile marking out the headings like so . .
h2(#why). Why are we doing this?
BLah blah balh etc ..
h2(#something). Some other header
BLah blah balh etc ..
Then in the default HTML you have some code that pipes the content into something called toc and then you put the contents afterward. For example ...
<div id='content'>
<h1 id='{{ page.title | downcase | replace(' ', '_') }}'>{{ page.title }}</h1>
{{ content | toc }}
{{ content }}
</div>
On the Apache site they get the desired results (the toc is shown followed by the contents). However, on my site, the contents are rendered twice. No table of contents is generated.
Furthermore, if I clone the Apache Buildr project directly from github and run jekyll --server in the doc folder of that project, then no table of contents is generated either.
What am I missing?
I emailed the Buildr developer mailing list and someone told me to look here for inspiration. Turns out that the relevant code snippet is ...
module TocFilter
def toc(input)
output = "<ol class=\"toc\">"
input.scan(/<(h2)(?:>|\s+(.*?)>)([^<]*)<\/\1\s*>/mi).each do |entry|
id = (entry[1][/^id=(['"])(.*)\1$/, 2] rescue nil)
title = entry[2].gsub(/<(\w*).*?>(.*?)<\/\1\s*>/m, '\2').strip
if id
output << %{<li>#{title}</li>}
else
output << %{<li>#{title}</li>}
end
end
output << '</ol>'
output
end
end
Liquid::Template.register_filter(TocFilter)
Make a folder in the source folder of your site called _plugins and then paste this code into a file called TocFilter.rb within that folder.
It works!!
Where is toc defined? It isn't listed as one of the standard liquid filters or jekyll extensions, so likely you are missing a plugin.
I've used ghiculescu's JS TOC on my Jekyll powered Github blog. It works very well.
Example.
jekyll-toc plugin does this for you out of the box.
Add the following to your GemFile
gem 'jekyll-toc'
Add the following to your _config.yml
plugins:
- jekyll-toc
Add the following liquid tag where you want the TOC to be generated.
{{ content | toc_only }}
And finally set toc: true in your post's front-matter.
I added this value as a default in my _config.yml so that TOC is applied to all my posts by default.