Is there a way to automatically beautify the html output from Jekyll after it builds the site directory?
The easiest way should be using Jekyll::Tidy plugin.
Just add following to your _config.yml:
gems:
- jekyll-tidy
However for me it does not does not produce pretty HTML with correct indentation.
If you are OK depending on Node.js, using pretty npm package produces pretty results and is the only way which worked 100% correct for me. Just wrap it to simple script and run after building your site.
You can also checkout my blog post Pretty HTML with Jekyll where I describe my solution based on pretty npm package more in detail.
Do you want to beautify or minimize/tidy your HTML? If you just want to get smaller HTML, I'd suggest to give octopress minify-html a try, really does its job.
If you want to have nice HTML tidy HTML is fine (linked above)
Related
A while back, i made my very first Github repo. Since i added the documentation using HTML and CSS, github doesn't recongize it in the "Languages" bar. It only shows 100% Python.
How can i change it so it also includes HTML and CSS???
The "Languages bar" as you called it is powered by Linugist. According to their Documentation, Linguist ignores (or tries to ignore) generated files, binary data, documenatation and similar files.
Github's Linguist probably "ignores" your documentation folder which contains html and css or just understands that the most important code is Python.
Anyway, you can edit .gitattributes to show exactly what you want.
More info here https://dev.to/katkelly/changing-your-repo-s-language-in-github-5gjo
What do you want exactly?
I have a website in Hugo. However I have a peculiar situation.
Scientists and Electrical Engineers and others may have specific needs. For Eg: Having a single page that shows a simulation. Or in my case using webbluetooth and webusb that I have written from scratch in HTML, CSS and JS. Moreover these pages may be generated by custom scripts. So you can have git submodules inside your hugo site that specifically cater to generating these custom, single page html that you just want to add to your website.
So all I want is to have a menu item or sidebar whatever the existing theme supports, but instead of showing the default html, it should show my custom, hard-coded, already ready and prepared html file - which may as well be an index.html file in a folder with all the necessary contents ready and cooked - something like the _site folder that jekyll creates.
What do you mean by custom html?
I mean it doesn't take the formatting of the hugo theme. It has its own formatting, but because its just a single page in the whole website its not fruitful to have its own layout written in Hugo or maybe its just worth the effort to do that cause you already have it working using some other technology.
What have you done so far and what works?
I am actually coming from a Jekyll background where it's as simple as changing the layout frontmatter and making it nil or even something that doesn't exist at all and jekyll does a great job of showing custom HTML in an existing theme. Tried the same with Hugo but that didn't work.
What are you testing on?
hugo-coder and(or) hugo-academic
Any specific requests?
Ideally I would like to have submodules in my hugo site folder where those submodules generate custom html in known folders and then somehow make a corresponding markdown file in Hugo that is responsible for showing the custom html.
I want to avoid writing the whole html in the markdown itself. But if no other solution is possible then I guess I don't have a choice.
Do let me know if its possible and worthwhile to pursue this and any references that might help.
So I don't know if this is the perfect solution but it somehow works for the moment. I will not accept it as its not perfect and I am waiting for some of the more experienced folks to answer.
I got something working by doing the following -
I had a page built using Jekyll. Jekyll builds the site in a folder called _site.
I copied the _site folder into static folder of Hugo and renamed it correspondingly to CustomHTML OR you could use the flag -d <destination folder> or declare it in the _config.yml file : destination: <destination folder>
Since I am testing it on hugo-acdemic theme, for that I added the following to the config.toml file to show it in the menu -
[[menu.main]]
name = "CustomHTML"
url = "CustomHTML/index.html"
weight = 50
hugo serve And it worked.
Cool thing is that I didn't have to bother about CSS and anything else. Hugo rendered the index.html in _site properly.
EDIT
Looks like the Hugo folks also suggest doing the same way.
I'm trying to add images to a post but whenever I try to view them in a post (running Jekyll using the 'bundle exec jekyll serve --draft' option when viewing locally) - Jekyll prints the following in the Terminal:
[2019-10-27 20:38:06] ERROR `/blog/jekyll/update/2019/10/_site/assets/ruby_on_rails_image1.jpg' not found.
I'm using the following in my markdown file to add the image to a post:
I can open the image in Visual Studio Code so I know that the path to the image is correct but for whatever reason, Jekyll can't find it. I've tried viewing the image individually
Does anyone know what I'm doing wrong?
Thanks!
The ../ and _site are causing the issue. Basically, you're telling Jekyll to find the image url in the files after being processed by Jekyll (_site) and where to start looking relative to the blog post (../). To fix, just remove the .. so that the url is 
HOWEVER, relying on the image url after Jekyll processing is not a good idea. Rather, you can tell Jekyll where the image is before processing. Jekyll keeps track of the image and the image's final url. Then it uses that url to get the image. This way you don't care about how Jekyll processes stuff. You can rely on your repo's current structure instead of the structure after processing.
To do that, use the Jekyll link tag: 
Docs on link tag
I'm working on Webpack/Gulp enviroment, and I wanna add function to include HTML partials like header and footer inside other page views.
The best solution for this will be like in PHP, include file and it's fine.
I used html-webpack-plugin, html-loader and gulp-file-include but this not working for me or this build one file from this partials and on development mode on local server i can't look to results because this partial before build not working.
Someone maybe have a solution or think for this?
I've been using Jekyll 2.0 directly from the command line for the last few days. I've put all my page files into a '/pages' folder so it looks like this:
/pages
- index.html
- about.html
- contact.html
In the front matter of each page I set the permalink like this:
permalink: /about/
So when Jekyll compiles the site, I'm able to navigate successfully to localhost:8888/about/ it's been working really well.
The Grunt/Yeoman problem:
I've picked up the generator-jekyllrb for Yeoman today because I want Grunt to manage everything (live reloading etc). I set it up, everything is working fine... but Jekyll is no longer generating the folders according to the permalink.
For example, my "about.html" page inside /pages, is not having an "/about" folder generated in the root like it did when using Jekyll directly. So I can only access the page through: localhost:8888/pages/about/. Which is strange.
Here's my Gruntfile.js generated from Yeoman
I don't know a whole great deal about this stuff. I'm very new to Grunt and the CL, but this has really stumped me. If anyone could offer any advice or point me in the right direction I'd really appreciate it.
I ended up adding the following to my _config.yml:
relative_permalinks: false
which fixed the problem. I think grunt-jekyllrb must be a version behind or something, because absolute permalinks are defaults now in the latest Jekyll.