Building tech NoSaM to share skills - Part 1

These post/s will focus on how I got the website up and running using Jekyll and GitHub pages. In the next post I will speak about the challenges of implementing an automated deployment process.

This was originally going to be 1 post but I have gotten a bit carried away so we will be having some more fun with more posts. Think I may turn this into a star wars trilogy thing start in the middle go to the beginning and then jump to the end. Or Machete it up

What I wanted to achieve in building the website

So going into building the website I had a few goals that I wanted to achieve:

• Website need to use my custom domain, nosam.co.za
• I wanted to use markdown to create the blog posts
• Website needed to be as cost effective as possible (read free)
• I wanted to have the ability to add new blog post from anywhere
• I wanted to separate where the website and post are created and where the website is hosted.
  • This was mainly because the github pages repo is made public to host the website
• Website needed to be easier to update and deploy

So with these requirements I need to make some technology choices.

Choosing the tech

Custom Domain

So I have already domain but did not want to take over the whole domain, so that is where the subdomain comes in. Subdomains create a child domain of the parent domain and are consider a seperate site, essentially a partition of the main domain. Adding a subdomain will depend on your hosting provider but a couple things to remember you will need to update your DNS settings if you are redirecting to the subdomain like I have done to GitHub pages. You will also need to understand the difference between a subdomain and a subdirectory, check out below. I had a few DNS entries that were conflicting with the https settings, so had to correct that as well. And remember any changes to DNS might take a few hours to be completed, so make changes and then only do next steps after an hour or two

Cloud Flare - Updated June 2021

So discovered that CloudFlare has a free options and it takes the management of the dns records to another level. It makes it so much more simpler and they guide you through the process of replaces a few options. It will even import the dns records in for you and then you can add the rest of the records as required. CloudFlare - Plans

Here is a great article on the difference between a subdomain and a subdirectory, sub - domain vs directory

Markdown

So every GitHub repo has a readme file that is written in Markdown. Markdown is created to be as readable as possible and is a text-to-HTML conversion tool, you can read more about it here. I really enjoy the simplicity of writing in Markdown and the formatting of the document. All Microsoft’s documentation is or is getting converted to Markdown, this includes their learning and training sites. Some of the functionality I will be using Markdown for:

• The creation of the blog post and the static pages
• Using code snippets and other formatting options (like this list)
• The conversion of Markdown into HTML Website

Useful references

• CommonMark
• Writing on GitHub

Text to HTML Converter

Now that I have the language I will be writing in, I need a tool or process to be able to convert the documents into HTML. I choice Jekyll, I played around with a few options but Jekyll won and I’ll go through why but not going to touch on the other tools and processes besides maybe sharing links.

Jekyll

So as per Jekyll’s website, it is Simple, Static and Blog-aware and that ticked the boxes for me.

1
2
3
4
gem install bundler jekyll
jekyll new myawesomesite
cd myawesomesite
bundle exec jekyll serve

The above code is all you need to get a website up and running.

So I followed the step by step tutorial for getting the website up and running. I then went and tweaked a few things to my personal preference. There are tons of templates that can be used, I won’t be using them as I will be learning and evolving the site as I go.

Hosting and Code Repo

This one is pretty simple as I actually started here and then research the other topics. You can host a website for free on GitHub with GitHub Pages. I set this up with the custom domain and https. I also worked through building the website from a seperate repo, this way I can edit these documents and save other research before I publish the website. Check out GitHub Pages if you want to get a website up and running quickly and for free……

Code Editor - Magic Maker

So to be able to create content anywhere I need an editing tool that can be used for updating the Jekyll files and for creating blog posts. Enter….

Visual Studio Code

Visual Code has grown into a IDE powerhouse. There are multiple extensions that can be installed to work with a variety of coding languages and which I will cover in a different post it runs on Raspberry Pi

We are done choosing the tech let’s build a website

In the next post I will speak about getting up and running with Jekyll (few challenges encountered), working with VS Code, securing the Raspberry PI and using it as a build server. That may be more than one post can handle.

This page was last updated at 2021-06-25

If you don't agree with the content on this page, please click here