Forem: Stephen Ajulu

How to Create a Dev Environment in Windows 10: Part 1

Stephen Ajulu — Thu, 09 Jul 2020 16:08:07 +0000

Hi, guys? Long time, huh? Hope you are all doing great! and you are all safe and sound. Today i would like to help you create a development/hacking environment in Windows 10. So let’s get started with Part 1: First Installation.

First you’ll need to make sure you have a Windows 10, updated to 10th May 202 version(Windows 10, Version 2004, Build 19041 or higher).

Now i would like you to install the Windows Subsystem for Linux v1 and 2.

Here’s the installation:

WSL1

Before installing any Linux distributions on Windows, you must enable the “Windows Subsystem for Linux” optional feature.

Open PowerShell as Administrator and run:

dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart

To only install WSL 1, you should now restart your machine and move on to Install your Linux distribution of choice, otherwise wait to restart and move on to update to WSL 2. Read more about Comparing WSL 2 and WSL 1.

WSL2

To update to WSL 2, you must meet the following criteria:

Running Windows 10, updated to version 2004, Build 19041 or higher.
Check your Windows version by selecting the Windows logo key + R, type winver, select OK. (Or enter the ver command in Windows Command Prompt). Please update to the latest Windows version if your build is lower than 19041. Get Windows Update Assistant.

Enable the ‘Virtual Machine Platform’ optional component

Before installing WSL 2, you must enable the “Virtual Machine Platform” optional feature.

Open PowerShell as Administrator and run: PowerShell

dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart

Restart your machine to complete the WSL install and update to WSL 2.

Set WSL 2 as your default version

Run the following command in PowerShell to set WSL 2 as the default version when installing a new Linux distribution: PowerShell

wsl --set-default-version 2

You might see this message after running that command: WSL 2 requires an update to its kernel component. For information please visithttps://aka.ms/wsl2kernel. Please follow the link (https://aka.ms/wsl2kernel) and install the MSI from that page on our documentation to install a Linux kernel on your machine for WSL 2 to use. Once you have the kernel installed, please run the command again and it should complete successfully without showing the message.

Note

The update from WSL 1 to WSL 2 may take several minutes to complete depending on the size of your targeted distribution. If you are running an older (legacy) installation of WSL 1 from Windows 10 Anniversary Update or Creators Update, you may encounter an update error. Follow these instructions to uninstall and remove any legacy distributions.

If wsl --set-default-version results as an invalid command, enter wsl --help. If the --set-default-version is not listed, it means that your OS doesn’t support it and you need to update to version 2004, Build 19041 or higher.

Install your Linux distribution of choice

Open the Microsoft Store and select your favorite Linux distribution. The following links will open the Microsoft store page for each distribution:

For a development environment i recommend Ubuntu and for Hacking i recommend Kali Linux. But feel free to choose any you like. Linux is linux and we will be working mostly on the terminal.

From the distribution’s page, select “Get”.

Set up a new distribution

The first time you launch a newly installed Linux distribution, a console window will open and you’ll be asked to wait for a minute or two for files to de-compress and be stored on your PC. All future launches should take less than a second.

You will then need to create a user account and password for your new Linux distribution.

Set your distribution version to WSL 1 or WSL 2

You can check the WSL version assigned to each of the Linux distributions you have installed by opening the PowerShell command line and entering the command (only available in Windows Build 19041 or higher): wsl -l -v PowerShell

wsl --list --verbose

To set a distribution to be backed by either version of WSL please run: PowerShell

wsl --set-version <distribution name> <versionNumber>

Make sure to replace with the actual name of your distribution and with the number ‘1’ or ‘2’. You can change back to WSL 1 at anytime by running the same command as above but replacing the ‘2’ with a ‘1’.

Additionally, if you want to make WSL 2 your default architecture you can do so with this command: PowerShell

wsl --set-default-version 2

This will set the version of any new distribution installed to WSL 2.

Now we need a good terminal emulator application to manage the OS you’ve installed. I recommend Hyper and Windows Terminal. I use Hyper.

If you are a beginner go over here to learn about basic terminal commands: Terminal Commands.

That’s the end of part 1. Part 2: Coming Soon

Resources for Building a Beautiful Progressive JAMstack Blog

Stephen Ajulu — Mon, 06 Apr 2020 10:13:45 +0000

Hey guys? We are back again this time i want to share with you the tools i used to build this project. I would like to thank the creators and team behind these tools. I use these tools regularly in personal and client projects. But they contributed a great deal to this project. Even though i used a theme. Part 3 is coming soon and you may see UI changes hence the reason i reserved that for last. If you haven’t see part 1 and 2 i suggest you do.

Building a Beautiful Progressive JAMstack Blog Part 1

&

Building a Beautiful Progressive JAMstack Blog Part 2

Part 1 and Part 2

STATIC SITE GENERATOR: HUGO

THEME: HUGO VERSION OF NARATIVE’S NOVELA

HOST: GITHUB

CONTINUOUS DEPLOYMENT: NETLIFY

DOMAIN NAME: NAMECHEAP

HEADLESS GIT BASED CMS: FORESTRY CMS

MANIFEST, ICONS AND BASIC SERVICE WORKER GENERATOR: PWASTARTER

PWA SCRIPTS(WEB SHARE, PUSH NOTIFICATIONS): PWABUILDER

PERFORMANCE TESTING: PAGESPEED INSIGHTS & GTMETRIX

SCREENSHOT TOOL: FIREFOX SCREENSHOT

COMMENTS: UTTERANCES

IMAGE CONVERSION TOOL: FILE CONVERTER

IMAGE OPTIMIZATION & COMPRESSION: FILE OPTIMIZER

NEWSLETTER TOOL: FORMSPREE

SECURITY, CACHING AND MORE: CLOUDFLARE

CODE EDITOR: VISUAL STUDIO CODE

Go check out these awesome blogs for more awesome content:

Building a Beautiful Progressive JAMstack Blog Part 2: Day 4 to 7

Stephen Ajulu — Sun, 05 Apr 2020 12:36:58 +0000

Hey guys? Welcome to Part 2 of building the beautiful, fast, SEO optimized, progressive JAMstack blog.

If you didn’t check out part 1, kindly go do so here: https://ajulusthoughts.wordpress.com/2020/03/31/building-a-beautiful-progressive-jamstack-blog-part-1/

So we are continuing with Part 2.

Shall we begin?

Day 4

Nothing much to do so i did a bit of research

DAY 5

Here’s where the knowledge of Day 4 come to play.

Linked the Manifest.json and all the app icons/favicons to the head section as you can remember i couldn’t do this because i was using the original theme’s layout folder so the only way was to copy their layout file to mine and that wasn’t an ideal situation. So i found a solution, Netlify’s Snippet Injection tool.(oh thank you netlify) I had heard of this tool but it was back then when i was using Jekyll(another very good static site generator with thousands of themes), back then i only had 1 site deployed in netlify and i didn’t need to tool. So to continue i managed to link them successfully and the website began acting like and app.
Linked the Service Worker Register to the bottom of the body using the same Netlify Snippet Tool
Added the SEO meta tags together with the manifest.json and app icons
Added more Hugo Shortcodes and paired them with forestry snippets(since am using forestry as my CMS there’s no need to add the shortcodes manually just create a ___.snippet file in /.forestry/snippets/……. as for shortcodes they go under /layouts/shortcodes/…….. I’ll show you how to do this in just a bit.
Researched
End of Day 5

DAY 6

Added more hugo shortcodes and their respective forestry snippets
Added a json feed because ……….. why not?
Added a custom 404 page replacing Netlify’s version
Added a Comment system that uses Github Issues as the base, the comments system is called Utterances
Researched
End of Day 6

DAY 7

Did a few tweaks and hacks
Added Google Analytics
Turned all images to .webp format because of it’s compression and small file size therefore bringing the total homepage size to 432kb from 3.4mb
Resized my author image from 1124×1024 to 160×60 or something there about(cant remember the correct sizes but they near those i have mentioned)
Minified and Unified a few Javascript files
Removed Google Analytics 🤣 It was slowing down my site because of the requests it made and also privacy issues
Managed to make the PageSpeed Desktop Score 100 while Mobile is at 98 99(fluctuates)
Increase page size from 432kb to 532kb(🤣 by adding an important images that was 50 49kb each that were required for SEO)

Now to the good relationship i have discovered between hugo shortcodes and forestry snippets.

As you can see for every shortcode there’s a snippet, that’s because shortcodes usually have a small piece of code to embed in the page you want it to be activated.

So the first piece of code goes to the /layouts/shortcodes/shortcodename.html while the last one goes to .forestry/snippets/snippetname.snippet. This ensures that i don’t have to copy the last code everywhere manually, i just access them within forestry cms’s ui like this

So now instead of copying the shortcode link everywhere you can just add it as a forestry cms snippet and use it where you would like. Note: This only works if you use Forestry CMS

UNFINISHED WORK

Resize all images to a good size
SEO Optimize the site
Find a good free resource light analytic service
Copy all posts from Ajulu’s Thoughts to Ajulu’s Blog
Cache all assets
Add Web Share
Add Push Notifications
Link back to https://stephenajulu.com
Add Service Worker Version 3 that caches everything
Debug
Optimize
Make changes to ui
Release it back to the wild as Novela v3

PageSpeed Insights for blog.stephenajulu.com

Mobile Score : 98 99

TTT, First Meaningful Paint, First Contentful Paint, First CPU idle: 1.3 seconds

Desktop Score : 100

TTT, First Meaningful Paint, First Contentful Paint, First CPU idle: 0.5 seconds

Our Goal is 100 in Both

Ajulu’s Thoughts – Delivering Quality Tech, Cybersecurity & Dev Content Since November 2016

Hey Devs? Found anything wrong with this info? Kindly write your comment down below on what to change.

I will appreciate it, if you take 10 seconds of your time to check out my donations page and donate to the blog and other causes. 40% of the donation goes to buying this blog an official domain name, the rest goes to charity eg supporting children homes. Any amount received will be shown, from whom and to where it went. I will also include screenshots of inflow and outflow. So go check it out: Donations and donate! You can also buy me something via the wishing list. Thank you and have a wonderful day.

Before i go, i would like to praise and thank all my favorite tools, products and companies

Il'l do a review of each but for now i can recommend anyone to these. They are the best.

Building a Beautiful Progressive JAMstack Blog Part 1: Day 1 to 3

Stephen Ajulu — Tue, 31 Mar 2020 16:09:02 +0000

Hey guys? Today we will be building a beautiful, fast, SEO optimized, progressive JAMstack blog for free. Step by step.

Shall we begin?

Day 1

Choose The Best Static Site Generator. Weigh Pros and Cons. Research.

Choice 1: Jekyll – Built on Ruby on Rails, Very Good Community, Extensive Knowledge, Used and Endorsed by GitHub, Very Slow Build. Not good with large blogs(over 30 posts) due to slow build time. Hence not suitable. ❌
Choice 2: Gatsby – Built on React, GraphQl and Webpack, Excellent Community, Lack of Sufficient Knowledge, Used and Endorsed by Contentful, Lighting Fast Build, Good With Everything, But Not Suitable Due To Time Constraint. However Further Research to Be Done For Future Purposes. ✖️
Choice 3: Hugo – Built on Go, Excellent Community, Sufficient Knowledge, Used and Endorsed by Forestry.io, Fast Build, Very Good for Big Blogs, In fact its Built for Large Websites and Blogs. ✔️
Choice? Hugo
End of Day 1

Day 2

Find a good Hugo theme
Build the blog
Host on GitHub
Create 2 branches(Master and Test Features)
Add to netlify for continuous deployment
Assign master branch domain name: blog.stephenajulu.com
Research
End of Day 2

Day 3

Create a manifest.json
Generate favicons and app icons for Android, IOS, and Windows
Create a splashscreen
Build the “Add To Homescreen” script(a2hs.js, .min.js & .css)
Build the Service Worker(sw.js) with precache on
Upload to GitHub (110 icons, manifest.json, sw.js)
Research
End of Day 3

Now you are up to date.

The reason i documented my process here is so that anyone can learn.

I am a crappy dev, i don’t know as much js as i wish i knew.

But i believe we all have something to learn from each other.

Ask me questions in the comment section and I’ll answer them to the best of my knowledge.

I am building a Progressive JAMstack Blog.

You can view the up to date version here: https://blog.stephenajulu.com

Unfinished Work

Linking the manifest.json to the head
Adding a few meta tags for SEO
Add the Service Worker register to the bottom of the body tag
Add the Add to Homescreen below the service worker register
Add the Web Share API
Add the Push Notifications API
Link the blog back to stephenajulu.com
Debug and make sure everything works well including the service worker.
Copy all blog posts from https://ajulusthoughts.wordpress.com to https://blog.stephenajulu.com
Optimize Image Assets
Add gzip

Once all the steps are done, the blog should be able to be installed (like a native app), viewed offline (no internet thanks to the Service Worker), and when there’s internet i should be able to inform those who’ve installed it (thanks to the Push Notifications API) that there’s a new blog post, and inform them on the coming give away that is strictly reserved for them, among other things.

NOTE: I keep reiterating my personal site every year, working on a new design, using hugo as well but still haven’t assigned the domain name, so you can get the sneak peak of the new design here: https://stephenajulu.nelify.com it’s version 5. The previous versions are in the footer of https://stephenajulu.com. Now why do i do this? To learn new technologies while doing something meaningful and also to make sure my site is up-to date. Also note ajulusthoughts.wordpress.com is my sweetheart nothing would ever replace it unless it looks exactly like it and promises better performance. It took me 5 years to build this blog, i am not throwing it away. It will still be updated and will remain great, might even get it’s domain name(ajulusthoughts.com) but blog.stephenajulu.com will be more like a personal blog while this remains a brand blog.

Important things to know

A progressive web application is just a website that behaves like a native app(like the ones installed from google play store). Thanks to a service worker, the website can be accessed online because the sw caches the site. It can be installed upon visiting the website, you’ll either see a pop-up(thanks to the Add to Homescreen script) or see a home icon with a plus on it(if Firefox). Progressive Web Apps are faster than any website you’ve seen because of the cache feature. This new blog uses a headless cms: Forestry.io

Those things left should take 2 days. I run into a bit of a hiccup, an issue with the blog that needs to be fixed. Already submitted an issue via github, so it should be resolved by tomorrow. It’s the reason i didn’t complete the process today. I can’t add the scripts to the head and body section because i forgot to include the “layouts/partials/head.html” and “layouts/index.md”

I also forgot, I’ll be adding a newsletter section to every page but that’s until the above issues are fixed.

To experience PWAs, visit this link: https://tomango.co.uk

Static Site Generators, Headless CMS, JAMstack, Progressive Web Applications and Serverless are the Future!Why?

Cost effective
Lighting fast
Can be used on any device(cross platform)
No servers
Feature Rich
Can increase engagement way more than native apps and traditional websites

For security and even faster speeds, I have passed it through Cloudflare and enabled all of Netlify’s asset optimization. The site isn’t as fast as it should be due to the fact that i haven’t added the service worker register.

Also note PWAs don’t have a good desktop support yet, only Desktop Chromiums(Chrome, Brave, Opera etc) support PWAs(according to my tests, Firefox is yet to release an update with support but PWAs are fully supported by Android, Smart TVs, Smart Watches, KAIOS, Linux, Chrome OS and such. PWAs can also be uploaded to all the stores (Google Play, Microsoft, KAIOS Stores and among others)

PageSpeed Insights FOR blog.stephenajulu.com

Mobile Score : 96

TTT, First Meaningful Paint, First Contentful Paint, First CPU idle: 2 seconds

Desktop Score : 97

TTT, First Meaningful Paint, First Contentful Paint, First CPU idle: 0.7 seconds

Our Goal is 98 or 99

Sadly Day 4 will start tomorrow as i am working on fixing the hiccup we encountered myself, no response on the issue.

Click/Doubleclick/Rightclick These Images To Get A Full Screen View

Desktop/Laptop Screenshot

TABLET SCREENSHOT

Phone Screenshot

Ajulu’s Thoughts – Delivering Quality Tech, Cybersecurity & Dev Content Since November 2016

Hey Devs? Found anything wrong with this info? Kindly write your comment down below on what to change.

OwlSec Technologies design and develop fast, secure and search engine optimized progressive websites that use JAMstack or CMS based technologies e.g WordPress, Drupal and more. Making sure a business or individual has not just an online presence but also a lead generation strategy.

Get a quote: info@owlsectechnologies.co.ke

Visit our website: owlsectechnologies.co.ke

SOURCE: AJULU'S THOUGHTS

Markdown Cheatsheet

Stephen Ajulu — Thu, 21 Nov 2019 17:39:49 +0000

Headers
1
2
3
4
5
6
7
8
9
10
11
12
13
14

H1

H2

H3

H4

H5

H6

Alternatively, for H1 and H2, an underline-ish style:

Alt-H1

Alt-H2

H1
H2
H3
H4
H5
H6

Alternatively, for H1 and H2, an underline-ish style:
Alt-H1
Alt-H2
Emphasis
1
2
3
4
5
6
7

Emphasis, aka italics, with asterisks or underscores.

Strong emphasis, aka bold, with asterisks or underscores.

Combined emphasis with asterisks and underscores.

Strikethrough uses two tildes. ~~Scratch this.~~

Emphasis, aka italics, with asterisks or underscores.

Strong emphasis, aka bold, with asterisks or underscores.

Combined emphasis with asterisks and underscores.

Strikethrough uses two tildes. Scratch this.
Lists

(In this example, leading and trailing spaces are shown with with dots: ⋅)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

First ordered list item
Another item ⋅⋅* Unordered sub-list.
Actual numbers don't matter, just that it's a number ⋅⋅1. Ordered sub-list
And another item.

⋅⋅⋅You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we'll use three here to also align the raw Markdown).

⋅⋅⋅To have a line break without a paragraph, you will need to use two trailing spaces.⋅⋅
⋅⋅⋅Note that this line is separate, but within the same paragraph.⋅⋅
⋅⋅⋅(This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.)

Unordered list can use asterisks
Or minuses
Or pluses

First ordered list item
Another item
Unordered sub-list.
Actual numbers don’t matter, just that it’s a number
Ordered sub-list
And another item.You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we’ll use three here to also align the raw Markdown). To have a line break without a paragraph, you will need to use two trailing spaces. Note that this line is separate, but within the same paragraph. (This is contrary to the typical GFM line break behavior, where trailing spaces are not required.)

Unordered list can use asterisks
Or minuses
Or pluses

Links

There are two ways to create links.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

I'm an inline-style link

I'm an inline-style link with title

[I'm a reference-style link][Arbitrary case-insensitive reference text]

I'm a relative reference to a repository file

[You can use numbers for reference-style link definitions][1]

Or leave it empty and use the [link text itself].

URLs and URLs in angle brackets will automatically get turned into links.
http://www.example.com or http://www.example.com and sometimes
example.com (but not on Github, for example).

Some text to show that the reference links can follow later.

[arbitrary case-insensitive reference text]

: https://www.mozilla.org [1]: http://slashdot.org

[link text itself]

: http://www.reddit.com

I’m an inline-style link

I’m an inline-style link with title

I’m a reference-style link

I’m a relative reference to a repository file

You can use numbers for reference-style link definitions

Or leave it empty and use the link text itself.

URLs and URLs in angle brackets will automatically get turned into links. http://www.example.com or http://www.example.com and sometimes example.com (but not on GitHub, for example).

Some text to show that the reference links can follow later.
Images
1
2
3
4
5
6
7

Here's our logo (hover to see the title text):

Inline-style:

Reference-style:
![alt text][logo]

[logo]

: https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png “Logo Title Text 2”

Here’s our logo (hover to see the title text):
alt text

Inline-style:
alt text

Reference-style:
Code and Syntax Highlighting

Code blocks are part of the Markdown spec, but syntax highlighting isn’t. However, many renders – like GitHub and Markdown Here – support syntax highlighting. Which languages are supported and how those language names should be written will vary from renderer to renderer. Markdown Here supports highlighting for dozens of languages (and not-really-languages, like diffs and HTTP headers); to see the complete list, and how to write the language names, see the highlight.js demo page.
1

Inline code has back-ticks around it.

Inline code has back-ticks around it.

Blocks of code are either fenced by lines with three back-ticks

```, or are indented with four spaces. I recommend only using the fenced code blocks – they’re easier and only they support syntax highlighting.
1
2
3
4
5
6
7
8
9
10
11
12
13
14


javascript
var s = "JavaScript syntax highlighting";
alert(s);


python
s = "Python syntax highlighting"
print s



No language indicated, so no syntax highlighting.
But let's throw in a <b>tag</b>.

1
2

var s = "JavaScript syntax highlighting";
alert(s);
1
2

s = "Python syntax highlighting"
print s
1
2

No language indicated, so no syntax highlighting in Markdown Here (varies on Github).
But let's throw in a tag.
Tables

Tables aren’t part of the core Markdown spec, but they are part of GFM and Markdown Here supports them. They are an easy way of adding tables to your email – a task that would otherwise require copy-pasting from another application.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Colons can be used to align columns.

Tables	Are	Cool
col 3 is	right-aligned	$1600
col 2 is	centered	$12
zebra stripes	are neat	$1

There must be at least 3 dashes separating each header cell.
The outer pipes (|) are optional, and you don't need to make the
raw Markdown line up prettily. You can also use inline Markdown.

Markdown	Less	Pretty
Still	`renders`	nicely
1	2	3

Colons can be used to align columns.
Tables Are Cool
col 3 is right-aligned $1600
col 2 is centered $12
zebra stripes are neat $1
There must be at least 3 dashes separating each header cell. The outer pipes ( ) are optional, and you don’t need to make the raw Markdown line up prettily. You can also use inline Markdown.
Markdown Less Pretty
Still renders nicely
1 2 3
Blockquotes
1
2
3
4
5
6

Blockquotes are very handy in email to emulate reply text.
This line is part of the same quote.

Quote break.

This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can put Markdown into a blockquote.

Blockquotes are very handy in email to emulate reply text. This line is part of the same quote.

Quote break.

This is a very long line that will still be quoted properly when it wraps. Oh boy let’s keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can put Markdown into a blockquote.

Inline HTML

You can also use raw HTML in your Markdown, and it’ll mostly work pretty well.
1
2
3
4
5
6
7

Definition list: Is something people use sometimes.
Markdown in HTML: Does *not* work **very** well. Use HTML tags.

Definition list something people use sometimes. Markdown in HTML. Does not work very well. Use HTML tags.
Horizontal Rule
1
2
3
4
5
6
7
8
9
10
11
12
13

Three or more...

Hyphens

Asterisks

Underscores

Three or more…

Hyphens

Asterisks

Underscores
Line Breaks

My basic recommendation for learning how line breaks work is to experiment and discover – hit once (i.e., insert one newline), then hit it twice (i.e., insert two newlines), see what happens. You’ll soon learn to get what you want. “Markdown Toggle” is your friend.

Here are some things to try out:
1
2
3
4
5
6

Here's a line for us to start with.

This line is separated from the one above by two newlines, so it will be a separate paragraph.

This line is also a separate paragraph, but...
This line is only separated by a single newline, so it's a separate line in the same paragraph.

Here’s a line for us to start with.

This line is separated from the one above by two newlines, so it will be a separate paragraph.

This line is also begins a separate paragraph, but… This line is only separated by a single newline, so it’s a separate line in the same paragraph.

(Technical note: Markdown Here uses GFM line breaks, so there’s no need to use MD’s two-space line breaks.)
Youtube videos

They can’t be added directly but you can add an image with a link to the video like this:
1
2
3

alt="IMAGE ALT TEXT HERE" width="240" height="180" border="10" />

Or, in pure Markdown, but losing the image sizing and border:
1

[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0

JAMstack, Headless CMS and beyond! Part 1

Stephen Ajulu — Thu, 21 Nov 2019 17:36:24 +0000

Why i and many others believe JAMstack, PROGRESSIVE WEB APPS, Static Site Generators and Headless CMS are the future! PART 1.

I am sure some of you have heard or seen some of these terms before. But for those who haven’t let us start from the beginning.

During the start of the age of the internet, static site were prevalent. You had to know how to write HTML to be called a Web Developer. Back then WordPress didn’t exist. All you had was HTML, CSS and JavaScript, eventually WordPress came and promised a clean interface, no coding skills need and a whole lot of themes/templates which you could edit by yourself through their interface. Since then wordpress has pretty much become an internet ruler along side Google. But now the tide is shifting, will you shift as well.
Introducing Static Site Generators, Headless CMS and JAMstack
JAMstack

What is the JAMstack?

You may have already seen or worked on a JAMstack site! They do not have to include all attributes of JavaScript, APIs, and Markup. They might be built using by hand, or with Jekyll, Hugo, Nuxt, Next, Gatsby, or another static site generator…

The thing that they all have in common is that they don’t depend on a web server.
JAVASCRIPT

Any dynamic programming during the request/response cycle is handled by JavaScript, running entirely on the client. This could be any front end framework, library, or even vanilla JavaScript. eg Jekyll, Gatsby, Nuxtjs, Nextjs, Hugo, Hexo, Vuejs.
API

All server-side processes or database actions are abstracted into reusable APIs, accessed over HTTPS with JavaScript. These can be custom-built or leverage third-party services. eg GitHub API PI, Vero API, Google sheets API, YouTube API.
MARKUP

Templated markup should be pre-built at deploy time, usually using a site generator for content sites, or a build tool for web apps.
When is your site not built with the JAMstack?

Any project that relies on a tight coupling between client and server is not built with the JAMstack. This would include:

A single page app that uses isomorphic rendering to build views on the server at run time.
A monolithic server-run web app that relies on Ruby, Node, or another backend language.
A site built with a server-side CMS like WordPress, Drupal, Joomla, or Squarespace.

Why choose JAMstack?

Better performance – Why wait for pages to build on the fly when you can generate them at deploy time? When it comes to minimizing the time to first byte, nothing beats pre-built files served over a CDN.
Higher Security – With server-side processes abstracted into microservice APIs, surface areas for attacks are reduced. You can also leverage the domain expertise of specialist third-party services. And also with server side CMS you get a larger surface area prone to attack.
Affordable, Easier Scaling – When your deployment amounts to a stack of files that can be served anywhere, scaling is a matter of serving those files in more places. CDNs are perfect for this, and often include scaling in all of their plans.
Better Developer Experience – Loose coupling and separation of controls allow for more targeted development and debugging, and the expanding selection of CMS options for site generators remove the need to maintain a separate stack for content and marketing.

STATIC SITE GENERATORS

First, How does a static website work?

Static websites do not generate content on the fly. This means that when a users visits the page, the content that is displayed is pulled directly from a file and does not require compilation or generation prior to showing up in the browser.

A great analogy that I read over on David Walsh’s blog is to consider a static website like a newspaper. Once it’s printed, you simply open it and read it exactly as intended with no need to wait. The newspaper is already on your step, waiting to be read whenever you choose to pick it up.

This is essentially how a static site generator works. The content is usually stored in a flat file format as opposed to a database and uses templates to generate the structure of the page. This means you receive a pure HTML file when visiting the page as opposed to waiting for the database to generate it on the fly.

Site generators or Static Site Generators are a must-use build tool for modern websites. They basically make it much easier to create, build and compile a modern website. They come and all shapes and sizes, and even though HTML, CSS and Javascript always comes out the other end, the language the site generators are written in varies.

Static site generators expand on static websites to make them more appealing to developers and offer several benefits. In a nutshell, most static site generators offer the following features:
Templates

Most static site generators offer an easy means of templating a website by allowing it to be built more easily using layouts and templating engines. Jekyll, for instance, uses the Liquid templating language to process templates.
Writing Content

Most of these use Markdown as a way of writing a post or page. It is a faster than writing pure html. This way markdown is then converted to HTML.
Now to the generators

Jekyll is by far the most popular one of those generators. It’s built with Ruby and integrated into GitHub Pages. So, it’s quite popular for personal projects and/or documentation. It has a huge user base and a big directory of plugins.

Hugo is quite like Jekyll. It’s built on Go and its main point against Jekyll is its blazing fast speed. Jekyll can be quite slow when the actual site is being generated , especially when the number of posts/pages goes up.
But Hugo generates the site in a matter of seconds. There are other abstractions that make Hugo more user-friendly and easier to start with. It does not need as much configuration to create something from scratch.

Hexo is a newer addition and created with NodeJS. Advertised, and mostly used as a blog platform, it combines the extensibility of Jekyll with the speed of Hugo. (actually faster than Hugo)

Wintersmith is another one built on top of NodeJS. This one is different as it is quite minimalistic. It basically is a platform that you can customize through some plugins to your needs. It definitely requires some tweaking to make it work, but leaves more space for customization.

Gatsby is the one framework that brings the static pages to stacks nowadays. It uses React.js and Webpack to create a SPA ( Single Page Application ) with your content. It promises to remove much of the configuration needed for such an application. Doing so, it provides the developer with an easy to use solution that will, in the end, produce a modern and high-end application.
The truth is that Gatsby can be used for many other things than just a blog. Its true limit hasn’t been found yet.(As it only reached its first stable release earlier this month.) This seems to be the WordPress for static sites.
Advantages of static
1) Speed

Perhaps the most immediately noticeable characteristic of a static site is how fast it is. As mentioned above, there are no database queries to run, no templating and no processing whatsoever on every request.

Web servers are really good at delivering static pages quickly, and the entire site consists of static HTML files that are sitting on the server, waiting to be served, so a request is served back to the user pretty much instantly.
2) Version control for content

You can’t even imagine working on a project without version control anymore, can you? Having a repository where people can collaboratively work on files, control exactly who does what and rollback changes when something goes wrong is essential in any software project, no matter how small.

But what about the content? That’s the keystone of any site and yet it usually sits in a database somewhere else, completely separated from the codebase and its version control system. In a static site, the content is typically stored in flat files and treated as any other component of the codebase. In a blog, for example, that means being able to have the actual posts stored in a GitHub repository and allowing your readers to file an issue when something is wrong or to add a correction with a pull request — how cool is that?
3) Security

Platforms like WordPress are used by millions of people around the world, meaning they’re common targets for hackers and malicious attacks — no way around it. Wherever there’s user input/authentication or multiple processes running code on every request, there’s a potential security hole to exploit. To be on top of the situation, site administrators need to keep patching their systems with security updates, constantly playing cat and mouse with attackers, a routine that may be overlooked by less experienced users.

Static sites keep it simple, since there’s not much to mess up when there’s only a web server serving plain HTML pages.
4) Less hassle with the server

Installing and maintaining the infrastructure required to run a dynamic site can be quite challenging, especially when multiple servers are involved or when something needs to be migrated. There’s packages, libraries, modules and frameworks with different versions and dependencies, there’s different web servers and database engines in different operating systems.

Sure, a static site generator is a software package with its dependencies as well, but that’s only relevant at build time, when the site is generated. Ultimately, the end result is a collection of HTML files that can be served anywhere, scaled and migrated as needed regardless of the server-side technologies. As for the site generation process, that can be done from an environment that you control locally and not necessarily on the web server that will run the site — heck, you can build an entire site on your laptop and push the result to the web when it’s done.
5) Traffic surges

Unexpected traffic peaks on a website can be a problem, especially when it relies intensively on database calls or heavy processing. Introducing caching layers such as Varnish or Memcached surely helps, but that ends up introducing more possible points of failure in the system.

A static site is generally better prepared for those situations, as serving static HTML pages consumes a very small amount of server resources.

Headless CMS

A headless CMS is like a traditional CMS, but without a way to present the content being created and stored within it. It simply allows for the creation, reading, updating and deleting (CRUD) of content.

That might sound counterproductive at first, but the idea is that — thanks to the lack of a front-end delivery layer — brands can use any front-end tool they want to present the content, meaning they can deliver content beyond websites and apps, reaching any channel from kiosks to smartwatches and even inside virtual reality headsets.

A decoupled CMS works in the same way, but it throws in some handy front-end tools like templates and advanced drag-and-drop content modeling features. Hence, it has a head, it’s just decoupled from it, allowing the organization to draft in other front-end tools on an ad-hoc basis.

While headless and decoupled architecture are nothing new, the demand for this kind of solution is, as businesses look to deliver content to locations outside of the standard web browser.

Headless CMS architecture separates back-end content functions (like creation, management, and storage) from front-end functions (like presentation and delivery).

Headless CMS’ are the opposite of legacy systems like WordPress, Drupal, Joomla, etc. They are all CMS’ that traditionally have to be hosted and built together with the site every time it’s served.

A headless CMS doesn’t care where it’s serving its content to. It’s no longer attached to the frontend, and the content can be viewed on any platform.

Headless architecture is partly a response to the way web content has evolved. For a long time, most web content was delivered through a browser, often as a web page. But new connected devices are arriving all the time.

The advantages of this approach is huge, and it works with JAMstack sites that are many times faster safer and cheaper to scale than traditional sites.
Types of Headless CMS
Type: Git-based / API Driven

Here we focus on what type of CMS it fall under.

Git-based

With a git-based CMS you are pushing changes to git that then triggers a new build of your site.

Pros

Full version control on all content out of the box.
All content lives as normal text files so developers can use all the normal tools they use as a developer.
Much easier to rollback.
Is the most homogenous approach with the existing git-based workflow of most web-developers.

Cons

Not a good solution if you want several apps or sites to pull content from the same CMS.
If you have tons of content, you would in some cases want a database instead.

API-driven

A CMS that is purely API driven. It does need to run every time a site has a visitor, but it’s an external api instead of having to run it as part of your site.

For some API-driven CMS Like Contentful and Prismic, you can also just use the api in the build phase, eliminating the need for anything being build on the fly. Though that will lead to longer build times.

Pros

The best solution if you have several different apps or sites pulling the same managed content.

Cons

Not version controlled in Git.
Not as integrated in developer workflow as git-based CMS.

List of the most common

Butter CMS
Contentstack
Contentful
dotCMS
Mura
Forestry
Netlify CMS
Cloud CMS
Cockpit CMS
Core dna
Craft CMS
Zesty.io
Directus
Storyblok
GraphQL CMS
Gentics Mesh
Cosmic JS
Kentico Cloud
Prismic.io
Quintype
Sanity
Scrivito
Squidex
DNN Evoq Content
Strapi
Superdesk

My top personal favorites

Contentful
Netlify CMS
Forestry

Headless CMS, PWA, Static Site Generators ARE the Future!

And that’s the end of part 1.

Part 2, we will cover Progressive Web Apps and get deeper into Static Site Generators and Headless CMS. This was just surface level. I didn’t put them all into 1 post in order to save my reader mental and eye torture through reading a 5000 words post.

Well. That’s it for today. I would like to ask you to kindly donate to the blog. Donations are on the sidebar on your right.

Want the real post? Visit here: Ajulu's Thoughts: JAMstack, Headless CMS and Beyond

Thank you. Have a wonderful day!

Images Sources:

Bejamas.io

Contentful

Forem: Stephen Ajulu

How to Create a Dev Environment in Windows 10: Part 1

Here’s the installation:

WSL1

WSL2

Enable the ‘Virtual Machine Platform’ optional component

Set WSL 2 as your default version

Install your Linux distribution of choice

Set up a new distribution

Set your distribution version to WSL 1 or WSL 2

Resources for Building a Beautiful Progressive JAMstack Blog

STATIC SITE GENERATOR: HUGO

THEME: HUGO VERSION OF NARATIVE’S NOVELA

HOST: GITHUB

CONTINUOUS DEPLOYMENT: NETLIFY

DOMAIN NAME: NAMECHEAP

HEADLESS GIT BASED CMS: FORESTRY CMS

MANIFEST, ICONS AND BASIC SERVICE WORKER GENERATOR: PWASTARTER

PWA SCRIPTS(WEB SHARE, PUSH NOTIFICATIONS): PWABUILDER

PERFORMANCE TESTING: *PAGESPEED INSIGHTS *& GTMETRIX

SCREENSHOT TOOL: FIREFOX SCREENSHOT

COMMENTS: UTTERANCES

IMAGE CONVERSION TOOL: FILE CONVERTER

IMAGE OPTIMIZATION & COMPRESSION: FILE OPTIMIZER

NEWSLETTER TOOL: FORMSPREE

SECURITY, CACHING AND MORE: CLOUDFLARE

CODE EDITOR: VISUAL STUDIO CODE

Building a Beautiful Progressive JAMstack Blog Part 2: Day 4 to 7

Day 4

DAY 5

DAY 6

DAY 7

UNFINISHED WORK

PageSpeed Insights for blog.stephenajulu.com

Ajulu’s Thoughts – Delivering Quality Tech, Cybersecurity & Dev Content Since November 2016

Building a Beautiful Progressive JAMstack Blog Part 1: Day 1 to 3

Day 1

Day 2

Day 3

Unfinished Work

Important things to know

PageSpeed Insights FOR blog.stephenajulu.com

Click/Doubleclick/Rightclick These Images To Get A Full Screen View

Desktop/Laptop Screenshot

TABLET SCREENSHOT

Phone Screenshot

Ajulu’s Thoughts – Delivering Quality Tech, Cybersecurity & Dev Content Since November 2016

SOURCE: AJULU'S THOUGHTS

Markdown Cheatsheet

H1

H2

H3

H4

H5

H6

Alt-H1

Alt-H2

JAMstack, Headless CMS and beyond! Part 1

What is the JAMstack?

Why choose JAMstack?

STATIC SITE GENERATORS

Headless CMS

Git-based

API-driven

List of the most common

My top personal favorites

Want the real post? Visit here: Ajulu's Thoughts: JAMstack, Headless CMS and Beyond

PERFORMANCE TESTING: PAGESPEED INSIGHTS & GTMETRIX