Considering moving from WordPress to Jekyll: What goes where? - mercurial

I'm trying to figure out what would be required to move my current blog from WordPress to Jekyll, as MySQL is really too complex for my taste at this point. I've read the docs on GitHub about Configuration, Usage etc, but Installation is less clear.
I assume that since posts, layouts and other files are kept locally, that the required Ruby gems are as well? At the same time, I've seen others talk about installing to a web host (Dreamhost in my case), which would be ideal, but I'm still not sure.
Also, I'm using Mercurial instead of Git for SCM, so I would probably need to make sure I can use something like Hg-Git to help deploy things. Any help would be greatly appreciated!

I think your question can be answered from two standpoints: 1) How to get Jekyll up and running and 2) How to get your current Wordpress content into jekyll. Here's answers to get you started with each in turn.
Part 1 - Getting Jekyll Up and Running
The first thing to realize is that Jekyll is designed to generate a set of static HTML files that can be served from basically any web server without the need for PHP, Ruby, Perl or any other dynamic server side processing.
Of course, Jekyll uses Ruby, so you have to have that running wherever you do the file generation. While that could be on the same server that serves the file the important point is that it doesn't have to be. For example, all of these are valid workflows for posting with Jekyll:
Create raw files on your personal machine, run Jekyll there to generate the static HTML files and then transfer them to your remote web server for the world to see.
Run Jekyll directly on your server doing all editing and creation of raw files there to have Jekyll process them for serving by the web server software on that machine.
Run Jekyll on your server machine, but edit the raw files on your local machine and push them to the server when you are ready to post. The Jekyll engine will take the raw files and do the static HTML file generation on the server itself.
People also have much more complex setups that allow them to post from either their laptops, their phones and the server itself and get everything synced up across the board via Dropbox. You can get as creative as you want with that, but I think the simplest one to get started with is the first one. Edit your raw files locally, run Jekyll locally and then transfer the resulting HTML files to your web server when you're ready for them to go live.
Installing Jekyll Locally
Obviously, you'll need Jekyll installed on your local machine for this. Directions for that can be found on the Github page. For myself, running Mac OS X 10.6, the following commands got me setup.
sudo gem install rubygems-update
sudo update_rubygems
sudo gem update
sudo gem update --system
sudo gem install rails
sudo gem install maruku
sudo gem install jekyll
Note: I don't think you actually need rails, but those are the steps I went through and they worked for me
Setting Up To Use Jekyll
Once you have Jekyll on your machine, getting a basic site setup is relatively simple. Create the following structure in an empty directory:
Directories:
_layouts
_posts
_site
Files and their content:
_config.yml
safe: false
auto: false
server: false
server_port: 4000
base-url: /
source: .
destination: ./_site
plugins: ./_plugins
future: true
lsi: false
pygments: false
markdown: maruku
permalink: date
maruku:
use_tex: false
use_divs: false
png_engine: blahtex
png_dir: images/latex
png_url: /images/latex
rdiscount:
extensions: []
kramdown:
auto_ids: true,
footnote_nr: 1
entity_output: as_char
toc_levels: 1..6
use_coderay: false
coderay:
coderay_wrap: div
coderay_line_numbers: inline
coderay_line_numbers_start: 1
coderay_tab_width: 4
coderay_bold_every: 10
coderay_css: style
This is the default configuration setup for Jekyll. You can get away without this file, but it throws a warning when the process runs that it can't find the file. So, I'd go ahead and set it up. It also makes it much easier to mess around with stuff instead of sending arguments to jekyll on the command line.
_layouts/default.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Jekyll Site</title>
</head>
<body>
<!-- This will be replaced with your content -->
{{ content }}
{{ site.posts }}
</body>
</html>
The {{ content }} string will be replaced by the processed content of the "index.md" file listed below. The {{ site.posts }} string will be replaced by a reverse chronological listing of the files in the "_posts" directory. GitHub has a full list of the template code snippets.
_posts/2011-07-29-my-first-jekyll-post.md
---
layout: default
---
# My first Jekyll post.
This is the content from 2011-07-29-my-first-jekyll-post.md
index.md
---
layout: default
---
# My Jekyll site
This is the content from index.md
It's worth pointing out here that you could use .html or .textile files instead of .md versions. As long as the had the YAML Front Matter, which is the first three lines consisting of the dashes and "layout: default", they will be processed by Jekyll.
Generating Static Files With Jekyll
Now that your starting file and directory structure is setup, simply bring up your command prompt, go to the directory where you create the index.md file and run the command jekyll. Assuming everything went well, you should see a short log of the process and you'll have two HTML files now sitting under:
_site/index.html
and
_site/2011/07/29/my-first-jekyll-post.html
It's worth pointing out Markdown (.md) files for the raw file source. You can also use .textile or .html as well.
Transferring/Deploying Files.
The last step with this approach is simply to use FTP or rsync to push the files up to the root of your web server and share them with the world. Since they are flat HTML, it should be quick and painless getting pretty much any hosting provide ready to go for them.
(In your question you mention Git and Mercurial. You can use either to do version control and/or deploy your raw files as well as the static HTML files the Jekyll generates, but neither is required for Jekyll to run or to transfer your files. It's all about how you want to setup the deployment process.)
Part 2 - Migrating Data From WordPress
Everything above has been about using Jekyll itself starting effectively from scratch. If you have been using WordPress (or any other engine for that matter) and want to keep the pages and posts you generated there, you'll need to migrate them from WordPress to Jekyll.
The basic idea is that you would move your posts and pages into corresponding locations inside the Jekyll directory and let it take over from there. I would start your research on that topic on the Jekyll Blog Migrations page.
(On a personal note, my first attempt at a WordPress migration didn't work out of the box. I haven't had a chance to jump back into it to get it going, but I'm committed to making it work. Moving to a much simpler static site that reduces the potential security issues, loads faster and is easier to maintain is totally worth having to deal with a migration for me.)

After you installed jekyll, you can try this wordpress plugin https://github.com/benbalter/wordpress-to-jekyll-exporter

As I understand it, Jekyll produces static HTML sites. Of course Jekyll consists of some Ruby software, but that's something you can run on any computer (e.g. your home computer rather than the web server). This way, your web hosting needs can be satisfied by simple static systems such as Github Pages. Now, Github can handle the Jekyll invocation for you automatically, but in general the idea is to upload static HTML to dumb web servers.
I don't think there's any need to use Git specifically with Jekyll-created sites—I'm sure even FTP would be fine.

Related

jekyll on github pages ignores custom layout

I'm trying to clone the repo https://github.com/TowerofHanoi/towerofhanoi.github.io on my GitHub, based on the website https://toh.necst.it and publish it on a new GitHub pages instance. I'm doing this to check that a new article is well formatted for publication.
I'm having trouble generating the website on GitHub pages, the site is somehow bad: https://mencucci.github.io/towerofhanoi.github.io/ (my repo: https://github.com/Mencucci/towerofhanoi.github.io).
Locally on my Ubuntu machine, I can get the site to render properly with the following commands:
bundle init
bundle add jekyll
rm -rf \_site && bundle exec jekyll serve --verbose
I couldn't get the remote to build properly.
I tried:
adding a valid theme (no changes)
using a custom build action (no changes)
I noticed a difference in the logs: local, and github. The local log references the /_layout directory, but the remote one does not. Maybe it doesn't "see" the theme?
Thank you for your time
Figured it out, my main issue was that I was running the site using the default url, which hosts the site at <username>.github.io/<repo_name>. Some hard coded elements assumed that the site be hosted at domain root instead. I solved my issue by using a custom domain, which mapped the to the base domain (empty path).

Jekyll site variables not rendering in includes or layouts

I'm working on a Jekyll site with GitHub Pages and have found that {% include myinclude.html %} liquid works just fine inside _includes and _layout files. However, when adding elements to the _config.yml such as author : myusername and attempting to use them either in the _layouts/default.html or _includes/myinclude.html as {{ site.author }}, the resulting text is just blank. To note, these changes are not committed or pushed and I'm using a local jekyll instance installed on the Linux Subsystem for Windows.
Outside of _includes and _layout in my actual pages the site variables work just fine. Why would the site variables not be displayed? At the moment I have to place the actual values back into the page.
The above is the intended behaviour, every change to _config.yml needs the development server to be restarted to process new settings.
The configuration file can't be re-read when using watch, because it
contains things like source and destination. It could only work if it
were actually like running jekyll build multiple times
source
With the assumption that edits to the _config.yml would update automatically, as Jekyll does for edits to other files, I had not restarted the jekyll instance I originally started. Simply closing the Jekyll instance and starting it back up, with bundle exec jekyll serve in my case, read the updated config file and the {{ site.variables }} appeared and showed correctly as I expected.
Any changes to the _config.yml require restarting the Jekyll instance.

jekyll not generating index.html

I have been using Jekyll for my blog and it has been working fine. Now I am trying to add new posts from a computer running Ubuntu 14.04 and Jekyll 2.4.0. The problem is that, only on this computer, it does not generate index.html in _site.
I can't find anything in the documentation that helps, and in any event, I'm using git so I have the same configuration on all of my machines.
So the question is: How does one turn off generation of index.html in Jekyll, and how can it be turned back on?
[Update: I did gem uninstall jekyll followed by gem install jekyll, rebuilt the site, and everything works fine. The original install must not have completed properly.]
To turn generation off you can remove this file. Or to use static index.html file remove markdown section enclosed with double triple --- in header (in this case static index.html will be parsed). Also mention filename it in exclude: section of _config.yml to avoid copying to _site folder.

Site Not Generating New Files

My jekyll site is generating files fine on my computer but is not working at all on the server; I can edit the _site folder to make the changes happen, but it won't generate on the server. I am running jekyll --server with no errors. Any suggestions?
My _config.yml file is:
server: false
permalink: /:year/:title/
Are you running any plugins? Unless you have a server that can run Ruby, plugins won't run anywhere besides locally. GitHub doesn't allow Ruby to be run for security reasons.
I'm surprised it's generating fine locally, since you should probably have server:true. More info on your server setup would be helpful if this doesn't solve your issues.

How can I setup Jekyll for a blog with a large image directory, so as to avoid duplicating that directory in the generated site?

I'm considering Jekyll for a site I'm putting together that will be a blog with lots of images (and other larg-ish media files). It's easy enough to to make a directory for images and then link to them as needed in the posts. But, as I understand it, when the site is generated, all the image data will be duplicated into the generated _site directory that holds the static files. Each time the site is generated the _site directory is emptied, and repopulated with the static version of the site.
Is there any way to, for example, drop a symlink to the images directory inside the site directory, and then maybe have jekyll ignore it when the static files are generated?
Or is there another way to go about this that makes more sense?
Assuming you are running on an apache web server, you can setup an Alias directive to serve images from a directory outside of the normal docroot. You need access to edit the VirtualHosts config or some other ability to create aliases directives (e.g. via a control panel).
For an example of how this would work, let's say you are storing your jekyll files under a directory called "/web/jekyll". To get your images directory do the following:
Add an "_images" directory along with your basic jekyll tree. Ending up with something like:
_config.yml
_images/
_layouts/
_posts/
_site/
index.md
Update your apache config to add the Alias directive like:
Alias /images /web/jekyll/_images
Reload the apache config and run jekyll to build the site.
Since the image directory name starts with an underscore, jekyll won't push/copy it to the output _site during the build. Apache will happily serve most files from your _site directory as normal, but when it sees something like "http://jekyll/images/test.jpg", instead of looking for the file under "/web/jekyll/_site/_images/test.jpg", it'll serve it from "/web/jekyll/_images/test.jpg".
Incidentally, I like a little more separation of the source content and output content than jekyll defaults to. So, I setup my directory structure as follows:
/web/jekyll/html/
/web/jekyll/images/
/web/jekyll/source/
/web/jekyll/source/_config.yml
/web/jekyll/source/_layouts
/web/jekyll/source/_posts
/web/jekyll/source/index.md
With the following option set in _config.yml
destination: ../html
And the apache alias directive setup with:
Alias /images /web/jekyll/images
Jekyll is run in the "/web/jekyll/source" directory, but output is sent to the "/web/jekyll/html" dir. Similar to the first example, calls to "http://jekyll/images/test.jpg" are served from "/web/jekyll/images/test.jpg". This setup doesn't really make a difference from a site serving perspective. I just like the cleaner separation between the raw source files, the fully baked output files and the images which work via the alias.
Correct, the first part of the jekyll command removes everything in the destination directory. The problem with that is the symlinks must be manually created again. So next, go ahead and create a script that does this each time.
Be sure that:
exclude: [jekyll, css, img] in the _config.yml file
linux: The ";" symbol runs first, second, third.. commands.
script: A file named jekyll with executable permissions containing
jekyll;
ln -s /var/www/css /var/www/_site/css;
ln -s /var/www/img /var/www/_site/img;
Finally run (./jekyll) that program instead of jekyll.
-Dan
Make a project page for the images.
Set up directory structure
/home/git/svnpenn.github.io
/home/git/img
Run Jekyll
# We cant add the symlink until after jekyll is done. We will remove the
# site folder and wait for it to rebuild.
rm -r _site
jekyll --server &
while [ ! -f _site/index.html ]
do
sleep 1
done
ln -s ../images _site/images
Note I was using this because I thought it would help publish time on GitHub
pages. It does not. GitHub can take 1-10 minutes to publish depending on the
server.
I know this has already been answered, but I went a slightly different route. I hosted all of my images in a public directory on Dropbox and use grunt to generate a manifest of the images. It keeps my repository small because the images don't get checked in. I detailed it a while back in a blog post.