I am using GitHub pages for my website!. I add new pages as md files, which nicely works when there are no figure included.
However, when I did some analyses in RStudio (.Rmd file) the final md file does not display any figure or leaflet object when used with GitHub pages. When I include the html file directly everything works nicely except for the fact that it does not look like the rest of my site (which I want, of course). I have to mention that I use an adapted version of the beautiful-jekyll template! by Dean Attali!.
I was wondering why it is not working. Maybe it is due to an issue with some css file. Remember: When I load RStudio's html output everything is displayed as intended. Here! is a link to the respective GitHub repository.
I hope that there is someone out there having an answer to this.
Thanks!
Note: In case you cannot access the repository/files, you can download the files here. It's the .Rmd as well as the output as .md and .html, and the .RData. As said before, including the .html works, but doesn't have the formatting according to my .css. .md fails in the way it doesn't show figures or leaflet objects, but the formatting is fine. Have a look.
Now, the issue with missing figures was solved.
One has to be careful where to place the folder containing all figures. It has to have the same path as the .md files.
Additionally, the embedding has to be changed in the .md file from  to .
That's it for the figures. Now I'm looking for a smart way of handling the leaflet objects.
Related
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.
Hello I have a problem with my blog homepage (https://igorkowalczyk.github.io/blog) does not work, but normal posts such as (https://igorkowalczyk.github.io/blog/categories/offtop) do work.
I don't even know what the problem is.
I suspect that it's a problem with index but I don't know exactly.
Someone knows maybe for what it does not work?
Your IgorKowalczyk/blog/index.md uses paginator.posts, which should be working only in HTML files, not md (markdown files).
The categories/offtop.html is an HTML file, properly rendered/generated by Jekyll.
The pagination logic should not sit inside the content files (e.g. individual post or document files). It belongs in the layout files.
If you place markdown code into your layout or include files you will have to explicitly pass it through the markdownify filter.
My recommendation is to keep your content (e.g. blog posts) in .md files (which will only contain markdown syntax) and everything dealing with the structure of your site in .html files (which will only include HTML syntax).
The OP MAJO mentions in the comments having to restore the right content for the index.html file: commit ac2ad43
I know i can convert an MD file to HTML with a bunch of scripts.
I become part of a site which is hosted on github, and it has a place_holder.md file. I can view its content if i isit to place_holder domain. If i change anything in the md file, and i push it to the repo it get updated immediately. If i visit the place_holder.html i can see its content, even that the file is not in the github repo
So my question is:
Does github hoster stuff has an auto md converter which i cannot see? In this case where can i get something like this?
Do webbrowsers understand markdown by default? Then why dont i see place_holder.md in the url?
Thanks
If i visit the place_holder.html i can see its content, even that the file is not in the github repo
Of course you can look at the place_holder.html file it is an html file on your computer that your browser can render so you can view it.
Does github hoster stuff has an auto md converter which i cannot see?
I do not believe github has an "auto md converter".
In this case where can i get something like this?
You can use jekyll to convert your plain text and markdown to static html pages which you can host on the web. You also can get text editors to preview your markdown before you convert it into html which can be helpful. Here is one online text editor.
I'm not sure how you're asking to implement this, but take a look at marked. It's super easy to use and very flexible.
I work on a very large enterprise web application - and I created a prototype HTML page that is very simple - it is just a list of CSS and JS includes with very little markup. However, it contains a total of 57 CSS includes and 271 javascript includes (crazy right??)
In production these CSS/JS files will be minified and combined in various ways, but for dev purposes I am not going to bother.
The HTML is being served by a simple apache HTTP server and I am hitting it with a URL like this: http://localhost/demo.html and I share this link to others but you must be behind the firewall to access it.
I would like to package up this one HTML file with all referenced JS and CSS files into a ZIP file and share this with others so that all one would need to do is unzip and directly open the HTML file.
I have 2 problems:
The CSS files reference images using URLs like this url(/path/to/image.png) which are not relative, so if you unzip and view the HTML these links will be broken
There are literally thousands of other JS/CSS files/images that are also in these same folders that the demo doesn't use, so just zipping up the entire folder will result in a very bloated zip file
Anyway -
I create these types of demos on a regular basis, is there some easy way to create a ZIP that will:
Have updated CSS files that use relative URLs instead
Only include the JS/CSS that this html references, plus only those images which the specific CSS files reference as well
If I could do this without a bunch of manual work, if it could be automatic somehow, that would be so awesome!
As an example, one CSS file might have the following path and file name.
/ui/demoapp/css/theme.css
In this CSS file you'll find many image references like this one:
url(/ui/common/img/background.png)
I believe for this to work the relative image path should look like this:
url(../../common/img/background.png)
I am going to answer my own question because I have solved the problem for my own purposes. There are 2 options that I have found useful:
Modern browsers have a "Save Page As..." option under the File menu, or in Chrome on the one menu. This, however does not always work properly when the page is generated by javascript
I created my own custom application that can parse out all of the CSS/Javascript resources and transform the CSS references to relative URLs; however, this is not really a good answer for others.
If anyone else is aware of a commonly available utility or something like that which is better than using the browser built in "Save page as..." option - feel free to post another answer.
I'm using Doxygen to create html output.
I'd like to customize the output so that the index.html file could be more noticeable, since at the moment it is buried half way down a huge list of files in the html output folder.
For example, if it were moved up one directory to be outside of the 'bits and pieces' html files then it would be much more accessible for others who will be looking for it. However, I can't just ass a line of script to copy it to that location, since all of the links it has would break.
If I could configure Doxygen to have the index file go to a different location, or if you can think of another solution to my problem, I'd be grateful for your response.
Thanks
I would leave the documentation in its place and instead use the meta refresh option of the HTML language. Place a file, for instance called, "Documentation.html" in any folder you want with the following content
<meta http-equiv="REFRESH" content="0;URL=RELATIVE/PATH/TO/index.html">
As I mention in comments to the OP the easiest solution is probably to create a symbolic link or shortcut to the index.html file generated by doxygen, rather than trying to get doxygen to change the layout of it's output files. This symlink/shortcut can then be placed in the root directory of your project (or elsewhere), pointing to ./html/index/html, and named anything you like to make it obvious to your users what it is.