• Converting to Jekyll from Wordpress

    Converting from Wordpress to Jekyll was pretty easy. My wordpress was self hosted, so I had access to the database info I needed to export my old site.

    Export

    I followed the Jekyll guide where you run the ruby jekyll-importer with your database info. You might need to update ruby and install the jekyll-import gem and some other dependencies, and may need sudo for some environments.

    apt-get install ruby-full
    gem install jekyll
    gem install jekyll-import
    gem install mysql2
    gem install bundler
    
    ruby -rubygems -e 'require "jekyll-import";
        JekyllImport::Importers::WordPress.run({
          "dbname"   => "",
          "user"     => "",
          "password" => "",
          "host"     => "localhost",
          "port"     => "3306",
          "socket"   => "",
          "table_prefix"   => "wp_",
          "site_prefix"    => "",
          "clean_entities" => true,
          "comments"       => true,
          "categories"     => true,
          "tags"           => true,
          "more_excerpt"   => true,
          "more_anchor"    => true,
          "extension"      => "html",
          "status"         => ["publish"]
        })'
    

    I couldn’t get this to run from the Dreamhost shell, but I had a Raspberry Pi I could run it on instead, since I didn’t want to have to run through the Windows Jekyll install process. Now I use a Docker container to build on my Windows machine instead. No install needed.

    After exporting, I was able to build the site using all the default settings and had a folder called _posts

    The wordpress posts all exported as html files containing the html from each post. Some of these might need additional jekyll plugins or include files to display properly, or some manual tweeking. In my case, a lot of the html links didn’t format correctly, and the youtube embeds didn’t display.

    cd export-folder
    jekyll new .
    bundle exec jekyll build
    

    This should create a _site folder in the current directory with the build site. Now start looking for new themes and customizing the site.

    Customize

    The first thing I did was to configure some of the settings in _config.yaml like title, email, and baseurl. I also deleted a lot of the stub pages that were exported from Wordpress. Those were just there to hold the links on my title bar, but jekyll made them into empty pages.

    After that, look for a theme or customize one. I didn’t see any premade ones I really liked so I just made some tweaks to the default minima theme. To modify the current theme, you copy the files you want to override from theme’s install to your project in a corresponding folder. As an example, Minmina has _includes/header.html, if you have your own _includes/header.html it will be used instead.

    Youtube Embeds

    One thing that was missing was the youtube video embeds I had. Using wordpress you only had to include a link to the video on it’s own line and it would automatically add the html required.

    Adding extra html for use in the markdown files is straight forward. I added an include file _includes/youtubeEmbed.html with the youtbe html inside:

    <iframe width="560" height="315" src="https://www.youtube.com/embed/" frameborder="0" allowfullscreen></iframe>
    

    And can include it in a post like this:

    <iframe width="560" height="315" src="https://www.youtube.com/embed/VcFI91r2zU4" frameborder="0" allowfullscreen></iframe>
    
    

    Use Docker for builds

    If you are on Linux/macos this might not be needed, since ruby installs are pretty easy.

    1. Install Docker for your os
    2. Share the windows folder path with your site to VirtualBox if needed
    3. Run the Docker build
      docker run -it --volume PATH_TO_PROJECT:/srv/jekyll jekyll/builder jekyll build
      
    4. If on linux/mac and not using a VM, you can cd to the jekyll folder and use $PWD instead
      docker run -it --volume $PWD:/srv/jekyll jekyll/builder jekyll build
      

    This will generate the _site, now you can either scp/ftp it to a webhost or run it locally from any http server.

    If you want to run the site from the Docker image using the jekyll server:

    docker run -it --volume /git/jekyll-temp:/srv/jekyll -p 4000:4000 --expose 4000 jekyll/builder sh -c "bundle install && bundle exec jekyll serve --host=0.0.0.0"
    

    If using VirtualBox, remember to enable port forwarding for port 4000 VirtualBox Port-Forward

    Github pages

    If you dont want to have to build anything, you can just push the git repo to git hub with a name like username.github.io and they will autodetect and build the site out for you at https://username.github.io

    It is nice to build locally first to preview the changes. Having a build setup also lets you deploy the site to any other webhost too.


  • Docker Jekyll Builder

    I created a new project on Githib docker-jekyll-builder-git for a Docker containerized Jekyll project builder that I can run on a Heroku free Dyno. I put it together for use as part of a publishing pipeline instead of relying on the Github builder. This way I can use whatever plugins I want and can scp the built _site to my existing webhost. This lets me use my existing content and avoids having to change the DNS for my domain name.

    Most of the other Jekyll builders I’ve found for Heroku rely on using either Rack or the Jekyll embedded server for serving content. Neither of these are really neccessary since it is just static content and any http server should do. You could instead use Apache or NGINX.

    Running a static blog off an app dyno seems like a waste of resources unless you really need to scale it out dynamically. The content could just as easily be hosted on any other webhost or combined with other static sites. You would also need to upgrade to at least a hobby dyno ($7/mo) to avoid dyno sleeping for 6hrs/day, and the costs will add up with several sites.

    I haven’t pushed the Docker image to Docker hub yet, but will once I’m happy with it and make things a little more flexible.

    The image requires several environment variables and these can all be configured through Heroku’s web ui. Basically it will check out a git repo, run a bundle install and jekyll build, the scp the result somewhere else. You need to set the URLs to use and and SSH key for the transfers.

    It can run as a bare docker image for use locally or on Heroku, instructions are in the readme or below. Next step is I want to make it run automatically after a push to github. I’ll make a php script on my webhost that can be hit from a webhook on Github that will then make the rest api call to Heroku and trigger a build.


    jekyll-builder-git

    Docker image to checkout a git repo, run a jekyll build, and the SCP the generated _site folder to somewhere else.

    This lets you use a short lived free Heroku one-off dyno to build a Jekyll app that is hosted somewhere else.

    Uses docker image jekyll/builder from https://github.com/jekyll/docker

    Environment Variables

    Set these variables in a run command or elsewhere:

    • GIT_HOST - Hostname for git repo
    • GIT_REPO - Path to git repo
    • SCP_HOST - Hostname for SCP destination
    • SCP_DEST - SCP Copy Destination
    • KEY - Private key for Git over SSH and SCP

    Heroku

    • Create a new app heroku create jekyll-builder
    • Push the Docker Image heroku container:push builder --app jekyll-builder
    • Create the Environment variables above in the Heroku admin console
    • Run the builder heroku run -a jekyll-builder --type builder bash build.sh

    Heroku Trigger Script

    The script run-heroku-jekyll-build.sh is an example Heroku API curl request to trigger the jekyll builder.

    • Set your app name in the APP_ID_OR_NAME variable
    • Get a Heroku API Token by running heroku auth:token
    • Set TOKEN= to the token
    • Run ./run-heroku-jekyll-build.sh to trigger a build.
    • Logs can be viewed from the Heroku Dev console log viewer. Make sure you have it up when running the build, the logs are not saved.

    Docker

    • Docker Build docker build -t jekyll-builder-git .
    • Sample Docker Run Command
      docker run \
      --rm \
      -it \
      -e "GIT_HOST=github.com" \
      -e "SCP_HOST=yoursite.com" \
      -e "GIT_REPO=https://something" \
      -e "SCP_DEST=you@yoursite.com:/path/to/dest/" \
      -e "KEY=-----BEGIN RSA PRIVATE KEY-----
      1234567890
      -----END RSA PRIVATE KEY-----"  \
      jekyll-builder-git
      

  • New site running with jekyll

    I decided to get rid of the old wordpress backed site and convert to a new one using Jekyll. The new page should be faster since it will be statically built instead of dynamic.

    Jekyll is a Ruby based static website builder. Instead of requiring a database to store content and retrieving it on every page load, Jekyll uses templates and markdown to let you build a site that is static so it requires no database and uses much less resources. Github pages use Jekll for projects hosted on their site so there are lots of resources available.


  • ESP8266 WiFiDisplay Pt2 - Panel Design and Final Build


  • Plants at the Alamo Heights Community Garden


subscribe via RSS