I am using Jekyll, writing both drafts and posts. I have many drafts (hidden) but only a few finished posts (published).
$ tree
...
├── _drafts
│ ├── <a bunch>
...
├── _posts
│ ├── <a few>
I would like to show the number of drafts (currently in _drafts) without publishing their contents.
This requires accessing "draft post" data in Liquid (Ruby), and while site.posts is defined, site.drafts is not.
How can I programmatically access drafts, without preprocessing?
One potential solution is:
Move all drafts from _drafts to _posts. This way, they can be accessed via site.posts.
In the YAML front matter of drafts, add tags: draft.
In Liquid: filter out all posts with tag draft from being displayed, but count their number.
This solution should work fine, but I'd like to keep drafts separate from posts somehow so that they can be distinguished at a glance. Maybe adding a _posts/drafts subdirectory is the best-of-both solution.
Related
I'm trying to set up Jekyll based blog posts on my site, but running into trouble styling the URLs how I'd like (<site URL>/blog/<blog title>). Based on the documentation here, I should be able to do this by either doing permalink: none and setting the category to blog or by doing permalink: /:category/:title or permalink: /blog/:title in my _config.yml file, but none of these produces the desired result, with even the none preset just giving me /blog/2022/06/22/<blog title>.html
Any ideas what I'm doing wrong?
As far as I know, there isn't a way to introduce a string in the permalink like that.
However, you can try forcing all your posts to have a category blog thus allowing you do use permalink: /:categories/:title. To do that you can move your posts directory inside a blog directory. That'll tell Jekyll that all posts there are part of the blog category:
$ tree .
├── blog
│ └── _posts
│ └── 2022-06-23-welcome-to-jekyll.markdown
[…]
A problem with that approach is that other category names will appear in the final URL as well. For example, I created a default Jekyll site (with jekyll new test), changed the permalink definition in _config.yml and moved the posts directory like above. The resulting permalink for the default post is:
http://localhost:4000/blog/jekyll/update/welcome-to-jekyll
If you don't care about categories, or if having some posts get extra categories but everything being contained in /blog, this should work.
Here is my repository on my Hugo blog:
I'd like to insert an image to a post with the following text:
However, it does not come out and it gives an error of 404 - Page not found.
What am I making wrong here?
You have a typo in the image link. You have an images directory, but reference "content/post/image/..." without the "s". That won't fix it for you though.
There are a few ways to link images.
Option 1. Put all of your images in the static/ directory. Then reference the image file with a leading slash, e.g.:
Option 2. Use sub-directories to hold the markdown file and any related resources.
create a directory post/creating-a-new-theme
move your existing markdown file into that directory, and rename it to index.md
create a subdirectory post/creating-a-new-theme/images and move your images in there
reference the image as 
More info on option 2: https://github.com/gohugoio/hugo/issues/1240#issuecomment-753077529
More options
There are more sophisticated ways to reference images using the frontmatter, as well: https://gohugo.io/content-management/page-resources/
TL;DR
Put your images in the static directory, just like below, use it in markdown like  or  if you don't want to build a post folder
If you search the hugo documentation, you can find Image Processing | Hugo
But! That's no a markdown way to insert an image. If you don't miss the Getting Stated, you will find the static Directory, which says can store images, that's it!
[static](https://gohugo.io/content-management/static-files/)
Stores all the static content: **images**, CSS, JavaScript, etc. When Hugo builds your site, all assets inside your static directory are copied over as-is. A good example of using the static folder is for verifying site ownership on Google Search Console, where you want Hugo to copy over a complete HTML file without modifying its content.
How to use it
Put your images in the static directory, just like below, use it in markdown like  or  if you don't want to build a post folder
static
└── images
├── my_post_folder
│ ├── my_image.png
└── my_image2.jpg
I am combining many small semi-static, single-page webapps into one larger web site. The backend is a lot of proxies, but the forward facing server basically just make it look like the app was moved from the root filepath to a more specifics one. IE:
/
├── css
│ └── app1.css
├── index.html
└── js
└── app1.js
would be moved to
/apps/app1/
├── css
│ └── app1.css
├── index.html
└── js
└── app1.js
This migration has been relatively painless mainly due to the use of ./ in the apps' html files, such that most apps just load their resources relative to their new location. The problem I am having is that some apps are resolving ./ differently. For these trouble cases, the primary html file gets loaded; however, the ./ in the script and style elements are resolving to a higher file-path (IE: I would expect ./ to resolve to /apps/app1 but am getting /apps). It may be a coincidence, but the troubled apps often have additional, non-index HTML files.
What are the rules for how ./ is resolved?
Determine the base URL
This is usually the URL of the HTML document
It might be overridden by the base element
For CSS it is the URL of the stylesheet
JS is always with respect to the HTML document
Remove everything after the last / in the path section of the URL
e.g. the base URL for https://example.com/example/foo?bar=baz#fragment is https://example.com/example/
Keep in mind that an HTML document might be visible at the path /example and /example/ and you should avoid this by making one path canonical (I prefer the one that ends in a /) and redirecting to it from the other
Strip the ./ from the front of the relative path
Append the result of step 3 to the result of step 2
A common gotcha is to confuse URLs with file paths. While a simple static site will usually have a direct 1:1 mapping between them, many modern sites will use routing code (e.g. for Express for HTML documents and a separate static route for static files like images, js and css.
I am trying to deploy some ui components on Netlify. However, it is not recognizing my index.html files inside the subfolders. Hence nothing is showing up on my deployed site. Also, all 3 index files have links to each other. This is my file structure
├── ui-components
├── blog-cards
│ └── index.html
├── login
│ └── index.html
├── ads-manager
│ └── index.html
Do I have to delete my subfolders and bring out my index files for it to deploy on Netlify or is there any way around it?
Edit:
I made some progress by doing this instead by putting a _redirects file in the root of my app as suggested
/ /blog-cards/index.html 200
/login /login/index.html 200
/ads-manager /ads-manager/index.html 200
It's finding my index.html inside the blog-cards folder however it's not loading my css file now. Full folder structure
├── ui-components
├── blog-cards
│ └── index.html
│ └── style.css
│ └── images
Here's a link to the netlify site
You don't have a main index.html file, which is why nothing is showing up on your deployed site. You should add something there, even just a blank page or a placeholder with links to the other projects.
You probably don't have to though, just browse to <siteurl>/ui-components/blog-cards and that should work.
Update after further comments.
If there is a subfolder you want the site to automatically go to upon landing, then you can use Redirects.
For example, putting the below in a file called _redirects in the root of your app will do what I think you need:
/ /ui-components/blog-cards 200
/login /ui-components/login 200
/ads /ui-components/ads-manager 200
(the 200 status code means that it will be a redirect under-the-hood, which makes the URL stay clean as you have said.)
Update
Yeah, so the forwarding is making the .css files to fail to load.
<link rel="stylesheet" href="style.css"> will look at the current URL and add style.css to it, which is obviously not what you want.
You could change to forwarding it with a 302, which would mean the new (not nice) URL would show up, but then the css path would resolve correctly.
Alternatively, you could add a second stylesheet link that looks for ./blog-cards/style.css.
Or if the css is small enough you could inline it, making it all simpler.
Recently I've been working on a project in Django that uses a site-wide CSS layout, so I decided that each template (in this case a template in /projects/index.html) used would extend a base file containing the header, footer, javascript, etc. called base.html.
The problem is that my directory structure looks like so:
.
├── static
│ └── base.html
├── templates
│ └── projects
│ └── index.html
And, as you can see the base file I want to extend is in a higher directory than that of the index.html file. Normally, I would use a relative path and use the following code at the top of the index file: {% extends "../base.html" %} or simply use an absolute path to the file (if necessary)
It seems, however, that by using either of these methods, whatever is inside the quotes for extends simply gets appended onto the current path, and my call to the upper directory with .. gets ignored entirely.
That is, if the current path is, for example, /project/templates/projects and I use {% extends "/project/static/base.html" %}, that will be appended to the current path, causing the system to look for /project/templates/projects/project/static/base.html, which, of course, doesn't exist. After researching I came across an article that said the blocking of relative paths is intentional for security purposes, but it leaves me with no way to access any file outside the current working directory.
I figured this had to be an extremely common setup when building a website, and so there must be some sort of way to interact with multiple templates that I'm just not aware of yet. If anyone has any information on that, it would be much appreciated.
Your base.html should be residing in a templates directory and not in the static directory.
This is because you define where django searches for templates using the TEMPLATE_DIRS in your settings.py file. Here, I give an example which computes your TEMPLATE_DIRS value dynamically.
import os
TEMPLATE_DIRS = (
os.path.join(os.path.dirname(__file__), '..', 'templates'),
)
In additional, you need to be aware that django depends on another setting called TEMPLATE_LOADERS to determine the priority in which it loads up your html files/templates, while searching through your templates directories.
TEMPLATE_LOADERS = (
'django.template.loaders.filesystem.Loader',
'django.template.loaders.app_directories.Loader',
# 'django.template.loaders.eggs.Loader',
)
Once your base.html is located in your templates directory, all you need to do in your html files is to write:-
{% extends "base.html" %}
and you would extend correctly
All of your html templates should live under the templates directory (including your base.html). The location of this folder is set using the TEMPLATE_DIRECTORY settings in your settings.py. The static folder is solely for css, js, etc.
When inheriting from another template using the extends tag, the path you give is always relative to your template directory, not project.