From: [email protected]
Date: 2016-11-06
Subject: Migrating From WordPress to Jekyll -- Part 2

In  part 2 of this article, I go over the process I used to migrate
my blog from WordPress.com to a static Jekyll site hosted on Amazon
S3.  Check  out part 1[1] to learn more about the benefits and pit-
falls that come with it.

This guide assumes that you have (or want  to  develop)  a  working
knowledge of ix environments, and have (or want to develop) Google-
fu skills needed to solve problems on your  own.  You  will  almost
certainly run into problems -- that's life.

Install Jekyll

Installing  Jekyll  on  OSX  or one of the ix variants is a breeze,
just follow the instructions at Jekyllrb.com[2]. Jekyll is not  of-
ficially supported on Windows, but installation is possible[3].

Create Your Site

Once  Jekyll  is  installed,  you will need to create a folder that
will hold all your files. This can be easily done by typing `jekyll
new  _sitename_`  at the command line. Alternatively, you can down-
load a theme and start with that.

Select a Theme

Jekyll comes with a default theme, but you might want to use a dif-
ferent   one.   There   are   a  variety  of  themes  available  at
jekyllthemes.org[4], JekyllThemes.io[5], and other  places.  In  my
case, I copied the theme folder to my home directory instead of us-
ing `jekyll new`. Then I tried `jekyll serve` to test  it  out.  At
first  it  didn't  work  and I found that I had to remove a default
value for baseurl in _config.yaml, setting it to null. If  you  al-
ready have a site folder with a theme and post content and you want
to change your theme, it's probably best to create a new site fold-
er  and  copy your content over rather than try to update the theme
in place.

Migrate Your Content

Now that you have your site folder in place  and  have  selected  a
theme,  you will need to populate your _posts folder with your con-
tent. Before I migrated, I had only a handful of posts,  so  I  was
able  to  migrate them manually without much trouble. I just copied
the text from my posts at Wordpress.com and pasted each post into a
separate  file  in my _posts folder. Then I edited each post to add
YAML front matter and markdown formatting. If you  have  a  lot  of
posts,  it  may  be worth the effort to seek out an automated solu-
tion. Like this[6]. Use `jekyll build` to build  your  static  site
and  `jekyll  serve` to test it on your local machine.  Building is
where I ran into the most problems until I read  that  Jekyll  pro-
cesses  files above your _site folder, and I had some junk in there
that Jekyll didn't know how to process.

Tweak Your CSS

You've installed Jekyll, set up a theme, and  added  your  content.
Use  `jekyll  serve` to see how it all looks on your local machine.
Now is a good time to tweak the style to suit your tastes. I  found
that the theme I selected used some fonts that looked oddly grainy.
I paid a visit to Google Fonts[7] to select some new fonts. I added
the  embed code to my theme's HTML templates. Then I hunted through
the CSS in my theme and replaced the font-family values with  those
provided  by  Google Fonts. I also made some changes to font weight
values because the defaults didn't provide enough contrast  between
regular and bold text.

Configure Amazon S3

This  can  be tedious, but AWS provides excellent S3 Setup Instruc-
tions[8] Amazon Simple Storage  Service  (S3)  lets  you  configure
storage buckets that can be made accessible via a web browser. This
means that you can upload a set of static files and anyone with  an
internet connection will be able to view them. As I write this, AWS
offers a 12-month trial period for new accounts.  After  the  trial
period ends, you will pay for storage volume and throughput.  In my
experience, I pay less than a dollar per month. Your cost could  be
higher  if  you  have  a  lot of data to store (e.g. images, audio,
video, Photoshop files), or you have a lot of  site  traffic.   AWS
provides  tools that help you predict and control costs. I disabled
logging for my site so that I wouldn't have to  deal  with  growing
hosting costs as a result of expanding log data. Unless you want or
need to process your own log files, I suggest setting up  something
like Google Analytics.

Configure DNS with Route53

Associate  a  domain  name  with your website[9].  Technically, you
don't need to do this to have a static site hosted on S3, but  hav-
ing  a  custom  domain  will make it easier for others to find your
site. You can register a domain using Route 53, or  another  regis-
trar like Namecheap[10]. After I set up Route 53 for my S3 buckets,
I added the nameservers provided by AWS to my custom DNS configura-
tion  at  my  registrar.  In the past, I've seen DNS updated within
minutes, but this time I had to actually wait for 48 hours for  the
DNS caches to expire.

Set Up Google Analytics

I  set  up Google Analytics for my static site so that I would have
some visibility into site traffic. There is a guide to using Google
Analytics over at michealsoolee.com[11]. The Google Analytics dash-
board does not respond instantly to site traffic, so give it a  day
or two before expecting to see data in there.

Upload Your Content

The process for updating your site now looks like this:

 1.  Update  content  on your local machine and test using `jekyll
build` and `jekyll serve`.
 2. When you're happy with how it looks  on  your  local  machine,
open  up  your  AWS dashboard, go to S3, and upload the contents of
your _site folder to the root of your root domain bucket.
 3. Load the production site to make sure it's working.

Now that everything has been set up, you should be able  to  access
your site using the hostname associated with your S3 bucket through
Route 53. You may have to wait a couple days for DNS caches to  ex-
pire before this works.

That's it! To reduce the amount of data being transferred each time
you upload your site, leave out images  or  other  large  files  if
there have been no changes. Keep large files in their own folder so
that they can easily be omitted from the upload. For further  read-
ing, check out How does Jekyll work?[12] over at bytesandwich.

[1]: /play/2016/11/02/wordpress-to-jekyll-part-1.html
[2]: http://jekyllrb.com
[3]: https://jekyllrb.com/docs/windows/
[4]: http://jekyllthemes.org/
[5]: https://jekyllthemes.io/
[6]: https://domchristie.github.io/to-markdown/
[7]: htt://fonts.google.com
[8]: http://docs.aws.amazon.com/gettingstarted/latest/swh/getting-started-create-bucket.html
[9]: http://docs.aws.amazon.com/gettingstarted/latest/swh/getting-started-configure-route53.html
[10]: http://namecheap.com
[11]: https://michaelsoolee.com/google-analytics-jekyll/
[12]: https://www.bytesandwich.com/jekyll/software/blogging/2016/09/14/how-does-jekyll-work.html

You are viewing proxied material from sdf.org. The copyright of proxied material belongs to its original authors. Any comments or complaints in relation to proxied material should be directed to the original authors of the content concerned. Please see the disclaimer for more details.