I started fiddling with Octopress recently, and I found a theme for Jekyll that I liked it.
The problem is that this theme doesn't have a similar structure that Octopress needs for themes.
I tried to clone the repo directly into my Octopress folder then use rake install['name-of-theme'] but that didn't work and I just got some errors about missing folders (source, sass).
So my question(s) is, how to install a theme for Jekyll with Octopress? is there a directory structure I need to follow? what are the minimum files requires to make it work?
I Googled a little bit but I didn't find anything related to converting a Jekyll theme.
Thanks.
You can't. The author of Octopress made his own theme layout and plugins to support it. Jekyll is meant for you to create your own theme layout as you wish (it's barebones). Think of Jekyll as a great framework to write your own static site, a store front or a wiki or a blog - from scratch. Octopress, on the other hand though, adds a framework on top of Jekyll: theme layout, a number of plugins defaulted for a blog site, SEO throughout the templates, a config file for controlling this framework-on-top-of-a-framework (Octopress framework on top of Jekyll framework). Basically, you can take Jekyll and write your own theme layout any way you wish; but with Octopress, you already have a strict theme layout to adhere to.
Octopress' rake install[] command to install a theme just copies a bunch of files to specific directories, following the authors specific theme format.
He's also changing the format from time to time as well, which usually breaks even older Octopress themes working on current Octopress sites (doesn't seem to worry about backwards compatibility). I know: I really tried some old responsive ones I found only to get errors with the latest Octopress as of April 2014.
Anyhoot, after many tries, I finally just sat down and copy-n-pasted the HTML into a new Octopress theme manually myself. Created my own "theme" to try to get some older Octopress themes working.
Still didn't like it as it was buggy (and I was trying several older Octopress themes); so, I gave up and just wrote my own Octopress theme from scratch and moved on. Personally, I don't like how Octopress' layout is, well, laid out. Far too many freakin incremental files. I basically just built my own from scratch and skipped several of the "custom" stuff. This allowed me the freedom of mocking up my own raw responsive set of HTML files and organize it how I wish (http://eduncan911.com).
I understand why he added the custom stuff in the last few months: for people that don't know much about frontend or just wanted a quick place to tweak this font, change that color, or just add a JS script to the custom footer and be done with a plugin.
Me? I already had a full HTML/JSS responsive HTML mockup I wanted to use. I only needed to utilitze Octopress' articles and show/hide the pagenation and comments. I didn't need that elaborate Octopress template layout. Though, now if anyone wants my theme, they can only copy exactly what I did and will need to modify it as they want. I did keep the SCSS generation though, as I like SCSS.
https://github.com/eduncan911/eduncan911.github.io/tree/source
Related
Basically I need to change the look and feel of a NopCommerce application, and I have created a separate theme folder and can do my CSS changes there. But there's only so much you can do with CSS. At some point I'll need to update html to make it look like the way I want.
So what I am concerned about is that if I change the layout and individual pages html to make the site look like how I want, what will happen if later I have to upgrade NopCommerce version, will my markup changes break or is it not a problem.
I have seen NopCommerce themes and it looks like they have updated the markup but I am not sure if its right to do it.
You're already halfway there, it's the same process as for changing the CSS. Simply copy all the cshtml files you intend to modify to your theme's folder and change the code however you need to. The modified files should be under Themes/YourTheme/Views, as per nopCommerce standard. When you install your theme, it will render the pages from here instead of the default folder. This way, the default views are left untouched, and your changes have no impact on the default theme.
For example, in the default theme of version 4.4, the homepage is rendered from Themes/DefaultClean/Views/Home/Index.cshtml. To customize the layout of this page for your theme, copy the Home folder to Themes/YourTheme/Views and you're good to go.
It's all explained in detail with examples in the official documentation- Customizing nopCommerce Themes
As indicated in this similar question (Switch theme in an existing Jekyll installation) there are many jekyll themes to choose from.
I would like to keep my own content separate from the jekyll theme used.
Is there a good (standard?) way of structuring a jekyll project so that your content can be kept distinct from the theme?
Most of your content is kept separate but there is a little bleedover.
This is evident from the answer to the linked question.
Changing the theme later can become a painpoint.
Ideally I would like to structure the project such that there is a theme sub-directory or similar and the theme may be altered by pointing at a different sub-directory.
Doing this dynamically (making the web-site 'skinnable' would be nice to have but not essentiall).
Is there a dynamic theme theme somewhere?
Short answer: Yes, you can keep theme and content separate, but only if your site stays with the basic layout calls (default, page, post).
Longer explanation and exceptions: If your existing jekyll installation is pure: you have edited only the content in pages, posts and not created-used special layouts, then, you can use the jekyll-remote-theme plugin and the switch is seamless, assuming that the new theme is not doing something radical with the defaults.
If your existing theme has special layouts (e.g., splash.html and the new one does not have it) then your pages that employ the respective layout will become orphans (i.e., basic html with no special formatting).
I have switched an existing installation that had been extensively edited, so I got several orphan pages, which I had to manually switch to a layout that makes sense within the new theme.
In conclusion, you can keep content and theme separate in many common cases (e.g., personal blog), but not if you want a custom solution (e.g., personal portfolio with gallery and splash pages).
Jekyll is tool that allow content separation beautifully, be it also from theme files. It's not about standard structuring - although following points will help out.
Do not move or disturb structure of theme files as it may be bought from 3rd party.
Create content as blocks and put jekyll code to insert them at runtime in theme. So if you want header somewhere you can insert {% include head.html %}. Also have a look at contentblocks plugin.
I am still using the default Octopress 3 theme, but would like to use Jekyll themes The instructions online, though, suggest that I fork a theme, change the _config file, and then add my content.
It seems like, since the themes should just be sass and _layout, I should be able to install those files and have a new theme.
I haven't seen clearer examples or documentation on that.
Posting here per the jekyll website.
Generally, the best way is to fork the theme, and copy over your content in the _posts folder, and your _config file, as per this answer.
It would also be possible to copy over the theme files into the _sass, css, _includes and _layouts folders, since this is where the theme rests, but this would mean a) more work and b) you can quite easily mess it up. Oh, and the js folder, the index.html file, any other pages not using the page layout...
Ultimately, Jekyll is not like Wordpress; It's not easy to just drop in a new theme.
Forking a jekyll theme just for using it is not a good practice, even github has recognised it and now provides the template type. Forking is good mainly for contributing back to the original.
The easiest way to switch theme on an existing or new jekyll installation is to use the following plugin: jekyll-remote-theme, which is available since November 2017.
The remote_theme method is almost similar to Wordpress usability, instead of clicking around you have to type-in the name of the new theme in the config file. You do not need to fork a theme or touch any of the style files.
This is an elegant solution, because in the long term you prefer the experts (i.e., the theme maintainer) to handle bugs and new version in the theme, while you can focus on your content.
If you have a custom theme with new and elaborate layouts then the switch might take some more manual work
I have a website written in HTML5 and CSS3 and I want to use this site in WordPress. I tried to upload it like template, but it didn't work. How can I solve this issue?
Sirko pointed you in the right direction. WordPress relies on PHP processing and MySQL database so you cannot simply upload it to the theme folder and activate. The HTML and CSS theme will need to be modified to incorporate the core WordPress theme development, at least. It isn't that difficult if you understand how WordPress works.
If you simply want to start with converting the theme to WordPress to support pages and menus alone, it isn't so complicated. If you are very new to this, it might be a stumbling block. You really should learn the core components to making a WP theme. Good luck!
Elegant themes walkthrough - HTML converted to WordPress
Your question is far too general to answer without you narrowing the scope; start with https://codex.wordpress.org/Main_Page to find out how to install and run WordPress, read https://codex.wordpress.org/Theme_Development if you want to adapt your current design to a WordPress theme. And you will need to import content, either by the database or manual entry with the WordPress editor. Read up and then come back to SO with more specific questions.
There is a reason why people sell themes either with HTML5 and Wordpress, though seperate in nature but structural in bound.
It is a long process but simple if you have knowledge of websites:
https://www.elegantthemes.com/blog/tips-tricks/converting-html-sites-to-wordpress-sites
Same as Markatledge said previously, by following the link above it can help you.
I'm confused at the relationship between jekyll and jekyll bootstrap. I'd like to start a blog and I'm not really sure which site to use for tutorials and whatnot.
Jekyll is the main thing. It's what generates your markdown and templates into static html pages.
Jekyll Bootstrap is just a project that helps you make Jekyll sites faster/better. It uses Twitter Bootstrap, which you could totally do on your own.
And it's got stuff like rake tasks to make it easier to create new posts, and pages. For example, you can create a new post like this: rake post title="Hello World".
Unfortunately, Jekyll Bootstrap is no longer maintained because the author created his own static site generator.
I would just start with plain Jekyll if I were you, but there are probably some great ideas you can take from Jekyll Bootstrap. For instance, if you like Twitter Bootstrap, it's a great idea to include that in your site. Also, those rake tasks could be handy. It can be a pain creating new posts since the filename required by Jekyll is _posts/YYY-MM-DD-slug-of-the-post.md.
Jekyll is a static site generator.
Twitter Bootstrap is a HTML/CSS/JS framework that allows you to quickly create the most common GUI elements in your browser, like menu bars, tabs, buttons, etc.
Jekyll Bootstrap is a collection of turn-key Jekyll themes for Github pages, which are all based on the Twitter Bootstrap framework.
Note that Jekyll Bootstrap is no longer maintained. Therefore, these themes might not work as expected, because Github periodically upgrades their Jekyll version.
Jekyll is a compiler like for C++ or VB.NET. Jekyll-bootstrap is a open source project with Hello World website made using twitter bootstrap library (this is jquery library to make site responsive - adjust to screen size).
Now you can have your own site structure and use twitter bootstrap in any jekyll post or page as shown here. So don't go for 3rd party project where you've to spent time digging into code.