Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>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.</p> <h1>Part 1 - Getting Jekyll Up and Running</h1> <p>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. </p> <p>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:</p> <ol> <li><p>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.</p></li> <li><p>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. </p></li> <li><p>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.</p></li> </ol> <p>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. </p> <h2>Installing Jekyll Locally</h2> <p>Obviously, you'll need Jekyll installed on your local machine for this. Directions for that can be found <a href="https://github.com/mojombo/jekyll/wiki/Install" rel="noreferrer">on the Github page</a>. For myself, running Mac OS X 10.6, the following commands got me setup. </p> <pre><code>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 </code></pre> <p><em>Note: I don't think you actually need rails, but those are the steps I went through and they worked for me</em></p> <h2>Setting Up To Use Jekyll</h2> <p>Once you have Jekyll on your machine, getting a basic site setup is relatively simple. Create the following structure in an empty directory:</p> <p><strong>Directories:</strong></p> <ul> <li>_layouts</li> <li>_posts</li> <li>_site</li> </ul> <p><strong>Files and their content:</strong></p> <ul> <li><p>_config.yml</p> <pre><code>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 </code></pre> <p>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. </p></li> <li><p>_layouts/default.html</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;My Jekyll Site&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;!-- This will be replaced with your content --&gt; {{ content }} {{ site.posts }} &lt;/body&gt; &lt;/html&gt; </code></pre> <p>The <code>{{ content }}</code> string will be replaced by the processed content of the "index.md" file listed below. The <code>{{ site.posts }}</code> string will be replaced by a reverse chronological listing of the files in the "_posts" directory. GitHub has a <a href="https://github.com/mojombo/jekyll/wiki/Template-Data" rel="noreferrer">full list of the template code snippets</a>. </p></li> <li><p>_posts/2011-07-29-my-first-jekyll-post.md</p> <pre><code>--- layout: default --- # My first Jekyll post. This is the content from 2011-07-29-my-first-jekyll-post.md </code></pre></li> <li><p>index.md</p> <pre><code>--- layout: default --- # My Jekyll site This is the content from index.md </code></pre></li> </ul> <p>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.</p> <h2>Generating Static Files With Jekyll</h2> <p>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 <code>jekyll</code>. Assuming everything went well, you should see a short log of the process and you'll have two HTML files now sitting under:</p> <pre><code>_site/index.html and _site/2011/07/29/my-first-jekyll-post.html </code></pre> <p>It's worth pointing out Markdown (.md) files for the raw file source. You can also use .textile or .html as well. </p> <h2>Transferring/Deploying Files.</h2> <p>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. </p> <p>(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.)</p> <h1>Part 2 - Migrating Data From WordPress</h1> <p>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. </p> <p>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 <a href="https://github.com/mojombo/jekyll/wiki/Blog-Migrations" rel="noreferrer">Jekyll Blog Migrations page</a>.</p> <p>(<em>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.</em>) </p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload