DEV Community: Olivier

🎉 Deno: 1.0 officially scheduled on May, 13! Review of the features

Olivier — Fri, 08 May 2020 23:24:20 +0000

🤠 Introduction

It all started 2 years ago, Ryan Dahl, the creator of Node.js gave a talk at the JSConf 2018 "10 Things I Regret About Node.js":

It was actually 7 things 🙃he regrets about Node.js:

Not sticking with Promises: he added them in June 2009 but removed them in February 2010, with Promises in Node.js, It could have sped up the delivery of a standard on async/await
Security: Node process has wide access including system calls, network, disk I/O
The build system: You need GYP for compiling native C library and link it to Node.js modules, Chrome used to use GYB but now Node is the sole user
package.json: it includes unnecessary information such as LICENCES and repository - also it uses a centralized repository for modules
node_modules: maybe the worse for him, resolution is complex, folder size is frequently huge...
require without extension: the module load has to guess the extension and this is not how browser works
index.js: it complicates the module loading system

🌈 Deno was born

With all the things learned by building Node.js, Ryan came up with a new idea named Deno:

A secure runtime for JavaScript and TypeScript.
Deno aims to provide a productive and secure scripting environment for the modern programmer. It is built on top of V8, Rust, and TypeScript.

Instead of using C++ as in Node.js, It's built on top of Rust and It uses Tokio under the hood. It brings many of the best open-source technologies together.

🎉 Deno 1.0 - Release scheduled on May 13

So after almost 2 years, the API has been officially frozen and the launch of the 1.0 is scheduled on May 13. It addresses the design flaws that Ryan talked about in his lecturez.

Getting started 🙌

To install Deno, here are the instructions:

Using Shell:

curl -fsSL https://deno.land/x/install/install.sh | sh

Or using PowerShell:

iwr https://deno.land/x/install/install.ps1 -useb | iex

Using Homebrew (macOS or Linux):

brew install deno

Using Chocolatey (Windows):

choco install deno

See deno_install for more installation options.

What's in the 1.0 release ? 👀

Deno 1.0 comes fully loaded with many useful features for modern development. In the following section we are going to cover all the greatest features coming in the new release.

Supports TypeScript out of the box

Well, everything is in the title. You can also bring your own tsconfig.json by using the following command:

deno run -c tsconfig.json [program.ts]

Security by design

Programs run with no permissions by default and if the code needs permissions will be alerted.

You need to use command-line options to tell Deno what permissions the program needs. By running deno run -h you will see the full list of permissions:

-A, --allow-all                    Allow all permissions
    --allow-env                    Allow environment access
    --allow-hrtime                 Allow high resolution time measurement
    --allow-net=<allow-net>        Allow network access
    --allow-plugin                 Allow loading plugins
    --allow-read=<allow-read>      Allow file system read access
    --allow-run                    Allow running subprocesses
    --allow-write=<allow-write>    Allow file system write access
    --cached-only                  Require that remote dependencies are already cached
    --cert <FILE>                  Load certificate authority from PEM encoded file
-c, --config <FILE>                Load tsconfig.json configuration file
-h, --help                         Prints help information
    --importmap <FILE>             UNSTABLE: Load import map file
    --inspect=<HOST:PORT>          activate inspector on host:port (default: 127.0.0.1:9229)
    --inspect-brk=<HOST:PORT>      activate inspector on host:port and break at start of user script
    --lock <FILE>                  Check the specified lock file
    --lock-write                   Write lock file. Use with --lock.
-L, --log-level <log-level>        Set log level [possible values: debug, info]
    --no-remote                    Do not resolve remote modules
-q, --quiet                        Suppress diagnostic output
-r, --reload=<CACHE_BLACKLIST>     Reload source code cache (recompile TypeScript)
    --seed <NUMBER>                Seed Math.random()
    --unstable                     Enable unstable APIs
    --v8-flags=<v8-flags>          Set V8 command line options. For help: --v8-flags=--help

ECMAScript modules built-in

Deno does not support require(), It uses ES Modules:

import * as log from "https://deno.land/std/log/mod.ts";

The package management is super simple, just provide the URL of what you want to use. As the URL may change, for security purposes, by using a lock file (using the --lock command line flag) you can ensure you're running the code you expect to be.

Super simple package management

Deno does not use npm. It uses modules referenced as URLs or file paths:

import { serve } from "https://deno.land/std@v0.42.0/http/server.ts";

const s = serve({ port: 8000 });

for await (const req of s) {
  req.respond({ body: "Hello World\n" });
}

You can specify version of the package in directly in the URL. For example https://deno.land/std@v0.42.0/http/server.ts.

Also, Deno offers a built-in dependency inspector (deno info).

Use `deps.ts` instead of `package.json`

The Deno convention for dependency management is using a unique file called deps.ts for storing all the dependency. For example, we can look at the deps.ts of oak, the popular middleware framework for Deno's http server inspired by Koa:

// Copyright 2018-2020 the oak authors. All rights reserved. MIT license.

// This file contains the external dependencies that oak depends upon

export {
  HTTPOptions,
  HTTPSOptions,
  Response,
  serve,
  Server,
  ServerRequest,
  serveTLS,
} from "https://deno.land/std@v1.0.0-rc1/http/server.ts";
export {
  Status,
  STATUS_TEXT,
} from "https://deno.land/std@v1.0.0-rc1/http/http_status.ts";
export {
  Cookies,
  Cookie,
  setCookie,
  getCookies,
  delCookie,
} from "https://deno.land/std@v1.0.0-rc1/http/cookie.ts";
export {
  basename,
  extname,
  join,
  isAbsolute,
  normalize,
  parse,
  resolve,
  sep,
} from "https://deno.land/std@v1.0.0-rc1/path/mod.ts";
export { HmacSha256 } from "https://deno.land/std@v1.0.0-rc1/util/sha256.ts";
export { assert } from "https://deno.land/std@v1.0.0-rc1/testing/asserts.ts";
export {
  contentType,
  lookup,
} from "https://deno.land/x/media_types@v2.0.0/mod.ts";

(Source: https://github.com/oakserver/oak/blob/master/deps.ts)

JSDoc built-in with `deno doc`

We strive for complete documentation. Deno has JSDoc built-in so you can use write JSDoc comments in files.

Test runner with `Deno.test()`

std/testing/asserts.ts module provides range of assertion helpers:

equal()
assert()
assertEquals()
assertNotEquals()
assertStrictEq()
assertStrContains()
assertMatch()
assertArrayContains()
assertThrows()
assertThrowsAsync()
unimplemented()
unreachable()

For example:

import { assertEquals } from "https://deno.land/std/testing/asserts.ts";

Deno.test({
  name: "testing example",
  fn(): void {
    assertEquals("world", "world");
    assertEquals({ hello: "world" }, { hello: "world" });
  },
});

(Source: https://github.com/denoland/deno/tree/master/std/testing)

Run deno test file.spec.ts:

Compile file.spec.ts
Download https://deno.land/std/testing/asserts.ts
Download https://deno.land/std/fmt/colors.ts
Download https://deno.land/std/testing/diff.ts
running 1 tests
test testing example ... ok (9ms)

test result: ok. 1 passed; 0 failed; 0 ignored; 0 measured; 0 filtered out (9ms)

Formatting with `deno fmt <files>`

It is provided by dprint, an alternative to the famour Prettier.

Compiling and bundling with `deno bundle`

It is currently marked as unstable. So use it at your own risk.

Debugger `deno run -A --inspect-brk fileToDebug.ts`

With this you can open the Chrome debugger (chrome://inspect) and start inspect the process!

Reviewed (audited) Standard library

The standard library is garanteed to work with Deno, they do not have external dependencies and they are reviewed by the Deno core team. Modules are tagged in accordance with Deno releases, so version v0.4.0 of a standard library is garanteed to work with Deno v0.4.0.

List of modules:

Usage of W3C web standards

Deno provides the following W3C web standards APIs:

Request
Response
addEventListener
atob
btoa
ReadableStream
clearInterval
clearTimeout
dispatchEvent
fetch
queueMicrotask
removeEventListener
setInterval
setTimeout
AbortSignal
Blob
File
FormData
Headers
URL
URLSearchParams
console
isConsoleInstance
location
onload
onunload
self
window
AbortController
CustomEvent
DOMException
ErrorEvent
Event
EventTarget
MessageEvent
TextDecoder
TextEncoder
Worker
ImportMeta
Location

Example: Build a simple HTTP Server using Deno 🚀

import { Application } from "https://deno.land/x/oak/mod.ts";

const app = new Application();

// Logger
app.use(async (ctx, next) => {
  await next();
  const rt = ctx.response.headers.get("X-Response-Time");
  console.log(`${ctx.request.method} ${ctx.request.url} - ${rt}`);
});


// Hello World!
app.use((ctx) => {
  ctx.response.body = "Hello World!";
});

await app.listen({ port: 8000 });

Let's run it using deno server.ts:

Compile file:///.../server.ts
Download https://deno.land/x/oak/mod.ts
Download https://deno.land/x/oak/application.ts
Download https://deno.land/x/oak/context.ts
Download https://deno.land/x/oak/cookies.ts
Download https://deno.land/x/oak/httpError.ts
Download https://deno.land/x/oak/middleware.ts
Download https://deno.land/x/oak/request.ts
Download https://deno.land/x/oak/response.ts
Download https://deno.land/x/oak/router.ts
Download https://deno.land/x/oak/send.ts
Download https://deno.land/x/oak/types.ts
Download https://deno.land/x/oak/deps.ts
Download https://deno.land/x/oak/keyStack.ts
Download https://deno.land/x/oak/tssCompare.ts
Download https://deno.land/std@v1.0.0-rc1/http/server.ts
Download https://deno.land/std@v1.0.0-rc1/http/http_status.ts
Download https://deno.land/std@v1.0.0-rc1/http/cookie.ts
Download https://deno.land/std@v1.0.0-rc1/path/mod.ts
Download https://deno.land/std@v1.0.0-rc1/util/sha256.ts
Download https://deno.land/std@v1.0.0-rc1/testing/asserts.ts
Download https://deno.land/x/media_types@v2.0.0/mod.ts
Download https://deno.land/std@v1.0.0-rc1/encoding/utf8.ts
Download https://deno.land/std@v1.0.0-rc1/io/bufio.ts
Download https://deno.land/std@v1.0.0-rc1/util/async.ts
Download https://deno.land/std@v1.0.0-rc1/http/io.ts
Download https://deno.land/std@v1.0.0-rc1/io/util.ts
Download https://deno.land/std@v1.0.0-rc1/path/win32.ts
Download https://deno.land/std@v1.0.0-rc1/path/posix.ts
Download https://deno.land/std@v1.0.0-rc1/path/constants.ts
Download https://deno.land/std@v1.0.0-rc1/path/common.ts
Download https://deno.land/std@v1.0.0-rc1/path/constants.ts
Download https://deno.land/std@v1.0.0-rc1/path/interface.ts
Download https://deno.land/std@v1.0.0-rc1/path/glob.ts
Download https://deno.land/std@v1.0.0-rc1/path/globrex.ts
Download https://deno.land/std@v1.0.0-rc1/path/utils.ts
Download https://deno.land/std@v1.0.0-rc1/fmt/colors.ts
Download https://deno.land/std@v1.0.0-rc1/testing/diff.ts
Download https://deno.land/std@v1.0.0-rc1/textproto/mod.ts
Download https://deno.land/std@v1.0.0-rc1/bytes/mod.ts
Download https://deno.land/std@v1.0.0-rc1/datetime/mod.ts
Download https://deno.land/x/media_types@v2.0.0/db.ts
Download https://deno.land/x/media_types@v2.0.0/deps.ts
Download https://deno.land/std@v0.42.0/path/mod.ts
Download https://deno.land/std@v0.42.0/path/win32.ts
Download https://deno.land/std@v0.42.0/path/posix.ts
Download https://deno.land/std@v0.42.0/path/constants.ts
Download https://deno.land/std@v0.42.0/path/common.ts
Download https://deno.land/std@v0.42.0/path/constants.ts
Download https://deno.land/std@v0.42.0/path/interface.ts
Download https://deno.land/std@v0.42.0/path/glob.ts
Download https://deno.land/std@v0.42.0/path/globrex.ts
Download https://deno.land/std@v0.42.0/path/utils.ts
Download https://deno.land/std@v0.42.0/testing/asserts.ts
Download https://deno.land/std@v0.42.0/fmt/colors.ts
Download https://deno.land/std@v0.42.0/testing/diff.ts
Download https://deno.land/x/oak/encoding.ts
Download https://deno.land/x/oak/isMediaType.ts
Download https://deno.land/x/oak/mediaType.ts
Download https://deno.land/x/oak/mediaTyper.ts
Download https://deno.land/x/oak/util.ts
Download https://deno.land/x/oak/pathToRegExp.ts
error: Uncaught PermissionDenied: network access to "127.0.0.1:8000", run again with the --allow-net flag
    at unwrapResponse ($deno$/ops/dispatch_json.ts:43:11)
    at Object.sendSync ($deno$/ops/dispatch_json.ts:72:10)
    at Object.listen ($deno$/ops/net.ts:51:10)
    at listen ($deno$/net.ts:164:18)
    at Application.serve (server.ts:261:20)
    at Application.listen (application.ts:106:31)
    at server.ts:18:11

Let's add the missing permission deno --allow-net server.ts:

$ curl http://127.0.0.1:8000
Hello World!

You are now ready for the upcoming release of Deno 1.0 - Stay tuned 😍 Please leave me comment if you've liked this article! You can also follow me on Twitter @loverdeolivier 🙌

This article was originally posted on my blog olivier.codes - https://olivier.codes/2020/05/08/Deno-1-0-officially-scheduled-on-May-13-Review-of-the-features/

ES2020: Summary of new features & examples 🔥

Olivier — Sun, 12 Apr 2020 15:57:20 +0000

In this article, we’re going to review some of the latest and greatest features coming with ES2020. 🔥

🤠 Getting started

We are going to test these features in a Node.js environment using Babel.

Method #1: creating a project from scratch

Start by creating a new project:

$ mkdir es2020-tests
$ yarn init

Now add @babel/cli @babel/core @babel/node @babel/preset-env dependencies:

$ yarn add --dev @babel/cli @babel/core @babel/node @babel/preset-env

Create a .babelrc file:

{
    "presets": ["@babel/preset-env"]
}

Method #2: clone the source code repository

You can also clone the following GitHub repository that includes the setup and source code of the examples in this article.

$ git clone git@github.com:olivierloverde/es2020-examples.git
$ yarn install

🤖 The ES2020 features

Private variable in Class

You can now declare a private variable in a class by using a hastag #. If a private variable is called outside of its class It will throw a SyntaxError.

class MyClass {
    #privateVariable = "Hello private world"

    helloWorld() { console.info(this.#privateVariable) }
}

const myClass = new MyClass()
myClass.helloWorld() // works
console.info(myClass.#privateVariable) // SyntaxError: Private field '#privateVariable' must be declared in an enclosing class

Source on GitHub

BigInt

There was a limitation on largest possible integer because of how Javascript represented number internally (it is using a 64-bit floating point, see IEE 754.

const maxInteger = Number.MAX_SAFE_INTEGER;

console.info(maxInteger); // 9007199254740991
console.info(maxInteger + 1); // 9007199254740992
console.info(maxInteger + 2); // 9007199254740992 ??
console.info(maxInteger + 3); // 9007199254740994
console.info(maxInteger + 200); // 9007199254741192 ??
console.info(maxInteger * 200); // 1801439850948198100 ??

Source on GitHub

Now there is a native solution, BigInt is a built-in object that provides a way to represent whole numbers larger than 2⁵³ — 1, which is the largest number in JS number).

You can create a BigInt by:

creating a BigInt object: const value = BigInt(500)
appending a n to a number: const value = 500n

For the moment, it cannot be used with methods in the built-in Math object and cannot be operated with Number. Bitwise operators are supported except >>> because all BigInts are signed.

// Using BigInt
const maxIntegerBigInt = BigInt(maxInteger);
console.info(maxIntegerBigInt); // 9007199254740991n
console.info(maxIntegerBigInt + 1n); // 9007199254740992n
console.info(maxIntegerBigInt + 2n); // 9007199254740993n 
console.info(maxIntegerBigInt + 3n); // 9007199254740994n 
console.info(maxIntegerBigInt + 200n); // 9007199254741191n
console.info(maxIntegerBigInt * 200n); // 1801439850948198200n

Source on GitHub

Promise.allSettled()

Promise.allSettled takes an array of Promise object as argument and waits that all promises settle to return the corresponding result as an array of objects {status, ?value, ?reason}.

const resolvingPromise1000ms = new Promise((resolve, reject) => setTimeout(resolve, 1000));
const rejectingPromise2000ms = new Promise((resolve, reject) => setTimeout(reject, 2000));

const timeCheckpoint = Date.now();
Promise.allSettled([
    resolvingPromise1000ms, 
    rejectingPromise2000ms
]).then(data => {
    const elapsedTimeInMS = Date.now() - timeCheckpoint;
    console.info(`Promise.allSettled resolved after ${elapsedTimeInMS}ms`)
    console.info(data)
});

/*
Promise.allSettled resolved after 2006ms // ? not sure why we have 6ms
[
  { status: 'fulfilled', value: undefined },
  { status: 'rejected', reason: undefined }
]
*/

Source on GitHub

Nullish Coalescing Operator

When you use || operator, it returns the first argument to be true. However, sometimes you a default value considered as false such as 0 or "". To avoid it we can use the nullish coalescing operator ?? like below:

let object = {
    car: {
        speed: 0,
        name: ""
    }
};

console.info(object.car.speed || 90); // 90
console.info(object.car.speed ?? 90); // 0

console.info(null || true); // true
console.info(null ?? true); // true

console.info(undefined || true); // true
console.info(undefined ?? true); // true

console.info(0 || true); // true
console.info(0 ?? true); // 0

console.info("" || true); // true
console.info("" ?? true); // ""

console.info([] || true); // []
console.info([] ?? true); // []

console.info({} || true); // {}
console.info({} ?? true); // {}

console.info(true || "hey"); // true
console.info(true ?? "hey"); // true

console.info(false || true); // true
console.info(false ?? true); // false

Source on GitHub

Optional Chaining Operator

Let's take the following object as an example:

let person = {
    name: "John",
    age: 20
};

Let's say we want to access a property on this object that we are not sure to have, we usually do:

if (person.city !== undefined &&  person.city.locale !== undefined) {
    const cityLocale =  person.city.locale;
}

This ensures the program does not throw any "error cannot read property name of undefined".

Now with the optional chaining operator, we can be more concise:

console.info(person?.city?.locale);

Source on GitHub

Dynamic Import

Dynamic import() returns a promise for the module namespace object of the requested module. Thus, we can now use the import() function with the await keyword and assign the module namespace object to a variable dynamically.

const print = (value) => console.info(value);

export { print };

Source on GitHub

const doPrint = async (value) => {
    const Print = await import('./print.js');

    Print.print(value)
};

doPrint('Dynamic import works !');

Source on GitHub

String.prototype.matchAll

String.prototype.match gives an array of all matches between a string and a regexp.

For example:

const re = /(Mister )\w+/g;
const str = 'Mister Smith with Mister Galladon';
const matches = str.matchAll(re);

console.info(matches); // Object [RegExp String Iterator] {}
console.info(Array.from(matches));
/*
[
  [
    'Mister Smith',
    'Mister ',
    index: 0,
    input: 'Mister Smith with Mister Galladon',
    groups: undefined
  ],
  [
    'Mister Galladon',
    'Mister ',
    index: 18,
    input: 'Mister Smith with Mister Galladon',
    groups: undefined
  ]
]
*/

Source on GitHub

You are now ready to use these new ES2020 features! Please leave me comment if you've liked it! 🙌

This article was originally posted on my blog olivier.codes - https://olivier.codes/2020/04/12/ES2020-Summary-of-new-features-with-examples/

JAMstack: create a blog in 5min with automatic deployment using Hexo, GitHub Pages and GitHub Actions

Olivier — Sun, 29 Mar 2020 00:15:58 +0000

Introduction

In this article, we are going to use the JAMSTACK and GitHub services in order to build and deploy a blog in 5 minutes and for free. We will also make the deployment automatic (for free too !).

Overview of the stack

The JAMSTACK

Fast and secure sites and apps delivered by pre-rendering files and serving them directly from a CDN, removing the requirement to manage or run web servers.

Source: https://jamstack.org/

The general idea behing the JAMSTACK is to use a tool for pre-compiling all the pages of a website (a blog in our case) during build time and push it directly to a static server (such as Github Pages, a CDN, a S3 bucket, etc.). The tool will re-build the entire website everytime something change (new post blog for example).

What is Hexo?

We will use Hexo as our main generating tool:

A fast, simple & powerful blog framework

Hexo provides a simple CLI for creating a blog. The CLI has the following features:

Creating a new page hexo new page "about"
Creating a new blog post hexo new post "Hello world"
Generating the static source hexo generate
Clean the static source hexo clean

GitHub Pages

We will use GitHub Pages for hosting our website:

We can use a custom domain (cost 10$ on Gandi)
Or we can use the domain offered by GitHub: https://.github.io

GitHub Actions

We will use GitHub Actions so that any changes made to the Git Repository will trigger automatically a build of our blog and push it to GitHub Pages.

Getting started

Setting up Hexo and repo

First, clone Hexo and install it locally:

$ npm install -g hexo-cli
$ hexo init <folder>
$ cd <folder>
$ yarn install

Create a .gitignore file:

.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/

If you have a personal domain name, create a new empty GitHub repository named <yourdomain> (e.g: olivier.codes)

If you do not have a domain name, GitHub offers free .github.io subdomain. You will need to use your username: <username>.github.io as name for your GitHub repository.

The repository must be public in order to use GitHub Pages for free.

Now link your local directory with the new GitHub repository:

$ cd <folder>
$ git init
$ git remote add origin remote repository <URL>

Verify the new remote URL:

$ git remote -v

If you have used a personal domain name, you need to create a file named CNAME in source. It will be important for the deployment phase to GitHub Pages. The CNAME file should have the domain used in it :

olivier.codes

Push all codes to the repository:

$ git add -A
$ git commit -am 'First commit: Init Hexo'
$ git push

You can now see your blog locally at http://localhost:4000 by running: hexo server

You can build the static assets by running: hexo generate, it will create a public folder with all the pre-compiled files. We now need to generate the files automatically on each push and push the generated files to GitHub Pages so it's live online.

Setting up automatic build

Let's use GitHub Actions for automating the build step on every push to the git repository.

GitHub Actions are defined by Workflow YAML file describing what to do and when to do it.

Our YAML file should have the following steps:

Start a linux distribution (such as ubuntu)
Install Nodejs LTS
Load yarn cache if any (used for speeding up build time when yarn.lock do not changes)
Install yarn dependencies (and use cache if any)
Clean Hexo
Generate Hexo files
Push files to GitHub Pages

Create a file for the workflow, it must bbe in .github/workflows:

$ touch .github/workflow/main.yml

Edit main.yml and add:

name: Build and deploy
on: [push]
jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
        matrix:
            node-version: [12]
    steps:
        - uses: actions/checkout@v1
        - name: Use Node.js ${{ matrix.node-version }}
          uses: actions/setup-node@v1
          with:
              node-version: ${{ matrix.node-version }}
        - name: Get yarn cache directory path
          id: yarn-cache-dir-path
          run: echo "::set-output name=dir::$(yarn cache dir)"
        - uses: actions/cache@v1
          with:
              path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
              key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
              restore-keys: |
                  ${{ runner.os }}-yarn-
        - name: Install Dependencies
          run: yarn install --frozen-lockfile
        - name: Hexo Clean
          run: ./node_modules/.bin/hexo clean
        - name: Hexo Generate
          run: ./node_modules/.bin/hexo generate
        - name: Deploy to Github Pages
          uses: peaceiris/actions-gh-pages@v2.1.0
          env:
            ACTIONS_DEPLOY_KEY: ${{ secrets.DEPLOY_GH_KEY }}
            PUBLISH_BRANCH: gh-pages
            PUBLISH_DIR: ./public

Every push on master will trigger this GitHub Action, it will generate the files and push it to gh-pages branche on the repository.

The newly created workflow needs a deploy key to be enable to push generated files to gh-pages branche. The deploy key will be available to the workflow by using a GitHub Secret.

We need to create a RSA key pairs for the deploy key:

ssh-keygen -t rsa -b 4096 -C "<youremail>@gmail.com"

Go to your repository on GitHub
Go to Settings section
Go to "Deploy keys" sub-section
Add a new key by pasting the content of id_rsa.pub

Now, let's create the secret for our workflow:

Go to your repository on GitHub
Go to Settings section
Go to "Secret" sub-section
Create a new secret button
Use the following name: DEPLOY_GH_KEY as key
Use the content of id_rsa file (the secret key this time) as value

We have :

Created a complete hexo setup
Created a deploy key, saved it in GitHub using the public key
Declared the corresponding private key in our secrets
Created a workflow to automatically generate files on every git push and push them to gh-pages branche

Let's test our new setup:

$ git add -A
$ git commit -am 'Devops: Add build automation'
$ git push

You should now see the workflow running for the new commit:

Or in Actions section:

The workflow should pass, indicating a that files have been generated and push to the branche.

Setting up GitHub Pages

Our gh-pages branche will be the home of our GitHub Pages.

Let's configure GitHub Pages:

Go to your repository on GitHub
Go to Settings section
Go to Options sub-section
Scroll down to GitHub Pages
Select gh-pages in source
Optionnaly, fill your custom domain if you have any and enforce HTTPS

It is now LIVE ! Go to your custom domain or go to <username>.github.io

Summary

You now have a fully working blog, deployed automatically everytime you push something on git!

You can find more information about Hexo (adding theme, plugins, etc.) directly in their doc: https://hexo.io/docs/

Full source code for this article is available here: https://github.com/olivierloverde/olivier.codes

Happy blogging!

It was my first dev.to post, I hope you liked it! :-)

This article was originally posted on: https://olivier.codes/2020/03/28/Jamstack-create-a-scalable-blog-in-5-minutes-for-free-and-with-automatic-deployment-using-Hexo-Github-Pages-and-Github-Actions/

DEV Community: Olivier

🎉 Deno: 1.0 officially scheduled on May, 13! Review of the features

🤠 Introduction

🌈 Deno was born

🎉 Deno 1.0 - Release scheduled on May 13

Getting started 🙌

What's in the 1.0 release ? 👀

Supports TypeScript out of the box

Security by design

ECMAScript modules built-in

Super simple package management

Use deps.ts instead of package.json

JSDoc built-in with deno doc

Test runner with Deno.test()

Formatting with deno fmt <files>

Compiling and bundling with deno bundle

Debugger deno run -A --inspect-brk fileToDebug.ts

Reviewed (audited) Standard library

Usage of W3C web standards

Example: Build a simple HTTP Server using Deno 🚀

ES2020: Summary of new features & examples 🔥

🤠 Getting started

Method #1: creating a project from scratch

Method #2: clone the source code repository

🤖 The ES2020 features

Private variable in Class

BigInt

Promise.allSettled()

Nullish Coalescing Operator

Optional Chaining Operator

Dynamic Import

String.prototype.matchAll

JAMstack: create a blog in 5min with automatic deployment using Hexo, GitHub Pages and GitHub Actions

Introduction

Overview of the stack

The JAMSTACK

What is Hexo?

GitHub Pages

GitHub Actions

Getting started

Setting up Hexo and repo

Setting up automatic build

Setting up GitHub Pages

Summary

Use `deps.ts` instead of `package.json`

JSDoc built-in with `deno doc`

Test runner with `Deno.test()`

Formatting with `deno fmt <files>`

Compiling and bundling with `deno bundle`

Debugger `deno run -A --inspect-brk fileToDebug.ts`