• Home
  • Akiko Yokoyama
  • Contact
  • Feed
ja | en |

Re-Builded the Blog with Jekyll + Netlify + Github

Last week, I rebuilt a new Blog in a Jekyll + Forestry.io + Netlify + Github environment.

What I was able to achieve

  • To update the blog online with a CMS-like interface based on a Jekyll-based blog template, and after updating, to execute the update in conjunction with Git + Github up to publishing.

Summary: New blog configuration

  • Blogging system: Jekyll
  • CMS for blog posting: Forestry
  • Deployment: Netlify (previously Forestry)
  • Hosting: Netlify (previously AWS S3)
  • Source code repository: Github

What is Jekyll?

One of the static site generators (Static Site Generator), made of Ruby.

Jekyll is a static site generator. It takes text written in your favorite markup language and uses layouts to create a static website. You can tweak the site’s look and feel, URLs, the data displayed on the page, and more.

PrerequisitesPermalink

Jekyll requires the following:

  • Ruby version 2.4.0 or higher
  • RubyGems
  • GCC and Make Ref. Quickstart | Jekyll - Simple, blog-aware, static sites

What is Forestry.io?

Introduction
Forestry.io is a Git-backed CMS (content management system) for websites and web products built using static site generators. Forestry bridges the gap between developers and their teams, by making development fun and easy, while providing powerful content management for their teams.

What is Forestry?
The main thing to understand is that Forestry – unlike other content management systems – is entirely backed by Git. To put it simply, Forestry is an editor-friendly interface over Git. This means that developers and editors can now use the same workflow and tool set. This also means that all of your content and code always belongs to you, and is not stored in a database in the cloud out of your reach.

Advantages
Choosing to build a static site and use a Git-backed CMS comes with a multitude of advantages over the traditional Monolithic CMS:
Ref. Introduction | Forestry.io

What made me decide to rebuild

Originally, I used Jekyll + Forestry.io + AWS S3. It looked good, but I haven’t been able to update it for a while after creating it, and for the first time in two years, I got into the swing of things and created a multi-language plugin [kurtsson/jekyll-multiple-languages-plugin](https://github.com/kurtsson/jekyll- After installing the multiple-languages plugin kurtsson/jekyll-multiple-languages-plugin, I noticed that the data was not reflected in S3.

I decided to rebuild it again after the following events occurred.

  • The deployment function had been removed from the Forestry side for some time.
  • As a result of merging major customizations such as multi-language support, the contents and articles of each page are no longer reflected on the Forestry.io screen.

What I wanted to achieve

  • Easily Update. Update my blog from mobile devices etc.
  • Write in Markdown + WYSIWYG.
  • Customize CSS.

Steps to rebuild and switch a web site

  • Create a new Github repository for the blog.
  • Link the newly created Github repository to Forestry.
  • Port the settings of the old blog while running Jekyll locally * Port the CSS and layout
  • Update the Forestry configuration.
    • Configure category pages
    • Adjust blog post content.
    • Check and update settings such as Settings > Sidebar
  • Create and set up a Netlify account
  • formspree.io Make your contact form dynamic.
  • Testing
  • Netlify domain switching (DNS switching)

Ref.

  • Jekyll
    • Quickstart | Jekyll • Simple, blog-aware, static sites
    • Ruby 101 | Jekyll • Simple, blog-aware, static sites
  • Forestry.io
    • Connecting to a Source Provider | Forestry.io
    • GitHub | Forestry.io
    • Sidebar Configuration | Forestry.io
  • Netlify
    • Get started with build configuration | Netlify Docs
    • A Step-by-Step Guide: Deploying on Netlify | Netlify
user-image
Akiko yokoyama in Coding
3 minute read

Similar Posts

Actually Made This Blog Multilingual Three Years Ago

Review of the Leica Q2

Excel Tips vol.1

Setup for WSL / Windows Subsystem for Linux + Ubuntu

Setting hubot adapter slack & chatwork

user-image

Published May 26, 2021

Akiko yokoyama in Coding

Also found in

  • Coding

Share this article

Actually Made This Blog Multilingual Three Years Ago

Review of the Leica Q2

Excel Tips vol.1

Setup for WSL / Windows Subsystem for Linux + Ubuntu

Setting hubot adapter slack & chatwork

How to install and setting hubot

  • Home
  • Akiko Yokoyama
  • Contact
  • Feed