As part of my trying out a load of new things drive in 2019 (more on that later) I thought I would try Jekyll out.

I don’t want to use Wordpress anymore, it was convenient to pay for a site on Wordpress.com but I’m not learning anything new and it’s cheaper to host a Jekyll site myself. I could host a Wordpress install myself, but that’s a lot of hassle, I’d get constantly attacked by bots, you’d need a MySQL database, many, many things to consider.

Instead, with Jekyll I can write in markup (which I love) andthe idea of the super fast static site is very appealing.

So here I am, Jekyll’s showing up all over the place, it sounds great, so I’m giving it a go.

The short story

Once I had my Ubuntu Digital Ocean Droplet setup and I’d got a basic understanding of NGINX, I just Googled “jekyll ubuntu nginx”, roughly followed the guide (with some tweaks) I found and I had the template basic template showing within a few minutes.

The long story

I already had my Digital Ocean Droplet setup to serve my very basic Willshaw Media site, so I was sorted for hosting.

So after googling “jekyll ubuntu nginx” I hit the Jekyll Guide that came up in the search results, skim read the article, ignored the deployment capistrano stuff and guessed a couple of things and bodged my way through a load of stuff.

Basically, I couldn’t remember how I got it working - that Digital Ocean guide helped but I looked through my Linux history and found I’d done a lot of other things as well as what was in that guide.

So I’ve grabbed the history, edited it, and here’s the anotated version of my commands to get a Jekyll site running

Commands to follow

I’m doing this from a fresh Digital Ocean droplet/server using Ubuntu 16.04.

This is all assuming you’re using nginx and hosting your sites from /var/www/ There would be very little difference hosting this on apache and from a different directory.

I also prefer to use vi, but obviosuly nano works just as well.

# make a new directory to host your site
cd /var/www
mkdir new-jekyll-site
cd new-jekyll-site

# install ruby and jekyll, if you don't already have it (you might need to update your server first)
sudo apt update
sudo apt install ruby jekyll

# double check you're still in the right place (pwd should show /var/www/new-jekyll-site)
pwd

# create a new jekyll project, in the current directory (that's that the . means) and build it to create the html
jekyll new .
jekyll build

# we need to set up nginx host to show the site
cd /etc/nginx/sites-available/
# do one of the following
# create a new config file if you have a url for your site
sudo vi new-jekyll-site

# a new file needs to contain the following (add a servername if you have one, ignore it if you don't):
server {
        listen 80;
        listen [::]:80;
        server_name jekyll.example.com;

        root /var/www/new-jekyll-site/_site/;
        index index.html;

        location / {
                try_files $uri $uri/ =404;
        }
}

#... or edit the default file and change the location of the files to serve for the IP
sudo vi default

# you'll need to change the root in the default file to point to the jekyll site
root /var/www/new-jekyll-site/_site/;

# whichever change you choose, make sure nginx is happy with this and if you made a new config create a sites-enabled symlink and reload
sudo nginx -t
sudo ln -s /etc/nginx/sites-available/new-jekyll-site /etc/nginx/sites-enabled/
sudo systemctl reload nginx

Now visit http://YOURIP (without the :4000) or the url your put in server_name and you should see your basic jekyll site!

Pushing to github

If you want to go forward from this point to work on your blog elsewhere, then push the content to github (or bit bucket or where ever else you back up your work)

From there you can add new Markdown files, change styles etc, then you just pull the changes back to your server, run jekyll build and it will update the live site

# initialise the git repo and add all content
git init .
git add .

# update the .gitignore file, you don't want to commit everything
vi .gitignore

# you want it to contain the following
_site
.sass-cache/
.jekyll-cache/
.jekyll-metadata

# make sure you've configured yourself as a user
git config --global user.email "you@example.com"
git config --global user.name "You"

# commit the changes
git commit -m "Initial commit - basic jekyll site"
  
# add a new git remote (make sure this repo exists in your account)
git remote add origin git@github.com:YourGithubUser/new-jekyll-site.git origin

# push the chages
git push origin master

Your jekyll blog should now be backed up on Github

Making some changes

I’m not going to go into great detail into how to change the site (mostly because I’m still learning it) but the main thing to look at is the .md files in the _posts directory.

Go into one of those, edit, rebuild the site, refresh the page and you’ll see your changes. Commit them, push to github, YOU’RE BLOGGING!

# go to the _post directory
cd /var/www/new-jekyll-site/_posts

# update the default post - it'll change to match the date you installed
vi 2019-04-16-welcome-to-jekyll.markdown

# rebuild the blog (you need to do this from the root)
cd ..
jekyll build

# reload your browser, you'll see your changes!

# next, save your changes, and push to github
git add .
git commit -m "I did a blog"
git push origin master

Further thoughts

I love writing in Markdown so much. It just makes me so happy and the default style handles it so well.

I’m sure there are some lovely themes out there, I’ll have a look and see if I can find one eventually, but I’m enjoying using the scss out of the box - I really like scss and this is a bonus learning experience for me.

The tags, they’re a lot more like html than I realise, in fact they’re alot like cfml which I am very used to.

<ul>
    # this reminds me of <cfif>
    {% if site.github_username %} 
        <li>
            # this is just like cfinclude
            {% include icon-github.html username=site.github_username %} 
        </li>
    {% endif %}

    {% if site.twitter_username %}
        <li>
            {% include icon-twitter.html username=site.twitter_username %}
        </li>
    {% endif %}
</ul>

The curly braces for outputting variables is great, just like Angular/Vue and other similar front end libraries.

<div class="footer-col footer-col-3">
    <p>{{ site.description }}</p>
</div>

Thanks to this Stack Overflow post for showing me how to do the above, with the raw tag: Stack Overflow

{% raw %}