How to change paths and URLs in Jekyll? - jekyll

I am very new to Jekyll and I am failing to find configuration to change the following:
I built a basic Jekyll site using jekyll new . and ran jekyll serve to learn and built a layout using Jekyll. The basic test site gives me the following URL for posts: /jekyll/update/2016/01/30/welcome-to-jekyll.html. Is the URL like that because I am running jekyll serve and not jekyll build? I want to remove the the jekyll/update from the URL path, so my final URLs for posts look like the following: /2016/01/30/welcome-to-jekyll.html.
I want my pages to be stored in a separate directory _pages instead of the root directory. How can I do that?
Is there way to prepend a path to files loaded from a specific directory? For example, I want to make a /_projects directory. Then add files with the following permalinks: /prj-test1, /prj-test2, /prj-test3. When compiled, I want to get the following URLs: /projects/prj-test1, /projects/prj-test2, /projects/prj-test3, respectively. Is this possible?

Yes, everything you asked is possible.
Take a look at these examples, you might want to choose one of them. But to do as you asked, you'll need to change the permalink to /:year/:month/:day/:title.html. To do that, add this line to your _config.yml file:
permalink: /:year/:month/:day/:title.html
It depends on the structure you want to achieve. You can use collections or simply create pages inside a folder called pages (without the underscore).
Yes. You can do that via collections, for example.
I recommend you to take a look at some templates, so you can see how the code works in different ways:
Try some Jekyll Themes here and here. Download them and study their structures.
If you want to go deep, take a look how Jekyll build its own website.
Hope to have helped!

Related

Best way to add a Hugo blog to an existing static site?

The Situation
I have a website hosted on Netlify that consists of HTML and CSS files only. Let's call it "domain.com".
I want to keep that website the same, but add a Hugo blog only on "domain.com/blog/".
What I've Tried
I've created a folder called "blog" in my "domain.com" repository and copied over all of the Hugo stuff. Then I go to Netlify's build settings and told it use Hugo to build it. I don't think this works because it's looking for a config.toml file in my root folder, which isn't there, it's in the blog folder.
Then I tried creating a new Netlify site build from the /blog/ directory of the repository with the build setting "hugo --gc --minify". This doesn't work either and definitely doesn't put the the blog at "domain.com/blog/".
What I'm Wondering Now
Is this even possible?
Would I have to just start the whole thing from scratch and start from Hugo?
Is there a better way to create a CMS on "domain.com/blog/" that's free and not Hugo?
Since asking this question I have realized that it's not a good question. I'll keep it up though in case somebody has the same thought process as I did. It's not about getting Hugo onto an existing site, it's about getting your existing site onto Hugo.
I ended up porting my existing index.html and other pages with CSS over to Hugo. Basically I just copied those into the root of my Hugo site so they look exactly the same as they did before.
The only thing that is really generated by Hugo is the blog, which is the end result I needed.

Using default Hugo theme content through Netlify produces blank webpage, but works locally. blogdown

I have found the same/similar question to mine here: Create a new static page using blogdown with same hugo theme as main site but I cannot understand what the solution is as there seems not to be one explicitly, or I just do not grasp it.
I am an absolute beginner. I am testing the procedure to move generated code to netlify to produce a website.
I can put the public/post/2020-12-01-r-rmarkdown/index.html file into public/ folder in github and generate the example site on netlify e.g.:
https://github.com/hjhjonas/blogsite/tree/main/public produces
https://elastic-ptolemy-e2ba86.netlify.app/
However I plan to edit the default theme and use that instead. But the default index.Rmd file that produces the index.html file after i edit the yaml files and content files to use is like this:
https://github.com/hjhjonas/blogsite/blob/main/index.html
and produces a blank page on netfify.
But if I knit from Rstudio and serve_site() locally, it looks like this image attached, which is correctly what I need.
What I want to do is edit this original theme/layout and put the generated html into the public folder in github for Netlify to read.
The index.Rmd file that produces this local site is just
---
site: blogdown:::blogdown_site
---
I previous had a 404 error on netlify and followed these steps to realise that the html is required for Netlify to produce the deploy the page:
https://answers.netlify.com/t/support-guide-i-ve-deployed-my-site-but-i-still-see-page-not-found/125
This is the theme that I would like to use https://themes.gohugo.io/themes/hugo-lodi-theme/
I don't know how you generated the public/ folder, but it is not meant to be generated by manually copying or moving any files to it. If you publish a site via Netlify, there is no need to generate the public/ folder locally at all, because it can be automatically generated on Netlify.
First, delete index.html in the root directory, and please do not knit index.Rmd again in the future. Second, delete the public/ folder. After the two deletions, I think your site should appear on Netlify soon. If not, see if blogdown::check_site() has any recommendations.

Setting a GitHub pages site from a Jekyll-generated page

I cannot setup a new Jekyll-based GitHub pages site based on the tutorials I've read. Here is the full list of steps I took:
Ran jekyll new jek_test. This created a new dir.
Used GitHub desktop to create a git repository in that dir, then pushed it to a new git repository, jek_test.
In the project settings GitHub Pages panel, I choose master branch as source.
So far this had no effect I could see. Navigating to https://gadial.github.io/jek_test/ yielded a 404 error.
I added the following two lines to the projects Gemfile:
source "https://rubygems.org"
gem "github-pages", group: :jekyll_plugins
Now, after pushing to GitHub, the https://gadial.github.io/jek_test/ link is working, but the page loaded is obviously incorrect; the CSS is not loaded, the links are wrong, etc.
I guess I am missing several crucial steps, but all the tutorials I've found either go "simply push it and everything will be ok", or seem to assume I am not using a Gem-based theme, meaning all the layouts, css files etc. are explicitly stored in the _layouts directories etc.
Am I going about this the right way? What is the simplest method to get a Jekyll-generated site up and running on GitHub pages?
You are using minima which is the default so, that's not the issue but, if you have a look at your about.md you'll see that it is looking for a layout called page. You currently don't have a _layouts folder
Try creating a folder called _layouts and create a layout in that called page.html with however you want it to display the contents of all files with layout : page
The default page.html can be found here.
You will need to change url to "https://gadial.github.io" and baseurl to "/jek_test".
If this two attributes are not set up properly, Jekyll won't know where to look for your resources.

Can Jekyll serve files when a directory of the same name exists?

I have a simple use case on a site that I am publishing with Jekyll:
I need to list values of a certain type. Let's say one type has URIs of the form .../base/typex/value. I am generating a file .../typex/value.md and Jekyll happily serves it.
I also want to serve pages listing all values. That page should be named .../base/typex or .../base/typex/ (I don't mind either way).
I cannot use the file .../base/typex/index.md to do this because in some cases, index is actually a valid value.
I am creating .../base/typex.md, but Jekyll ignores it, regardless of the permalink that I put in there that specifically has no trailing slash. Instead of serving the file, Jekyll serves the directory listing.
Is there any way I can solve this puzzle? If Jekyll had support for serving .../base/typex.md, everything would be good, but it seems as if as soon as there is a directory .../base/typex/, Jekyll simply ignores this file. Is there any workaround or configuration I can use? (And this is going to get hosted on GitHub, so I have no control over the Web server configuration.)
( https://github.com/dret/webconcepts/issues/25 has the backstory, in case anybody is interested. But the issue is fully described here, so there is no need to follow that link. )
I just tried to reproduce it with your provided repository, thanks for that!
If you create a file http-method.md in /concepts and set the permalink to
permalink: /concepts/http-method/, my local jekyll serves the page both in /concepts/http-method and /concepts/http-method/

Configure generating path with Jekyll

If there are files called members/alice.md and members/bob.md, the Jekyll generated position will be members/alice.html and members/bob.html. How can I set them to be members/alice/index.html and members/bob/index.html?
You can do this with Permalinks.
Here are 2 approaches that may suit you:
1. Per-page YAML frontmatter
If you just want specific pages to have that behavior, just add a permalink: option in your YAML frontmatter for your Markdown post.
For example: In members/alice.md's YAML frontmatter add:
---
permalink: members/alice/
---
2. Edit the _config.yml file
As per the documentation I've linked above, the simplest way (which I recommend) way to achieve this is with Jekyll's built-in pretty option.
Add this in your _config.yml:
permalink: pretty
This removes the .html from the static output by making all posts have their own folder and named as index.html.
Your browser would then display this as yoursite.com/members/alice/, note that the index.html is hidden, a behavior on most browsers. If you head on over to peek at the output _site folder, you'll see a folder in members named alice, and a file index.html inside.
Also note that:
You need to restart the Jekyll server every time you make a change in _config.yml, unlike other files that the Jekyll server will detect changes and regenerate, this configuration file will not and the WEBrick server must be restarted for changes to take effect. :)
You could also refer to the documentation on other more customizable options as well. Here's also a tutorial for reference too.