Yet Another Technical Blog: November 2017

Monday, November 6, 2017

World's smallest hugo site

I have been playing with Hugo for a while and it is

easy to set up
fast
flexible
well-documented

Here's how to create a tiny single-page website using Hugo.

Generate the source code to the site

Create a directory for the source code, and give this command

hugo new site <directory-name>

Add some basic customization

Go to the source code directory and open up config.toml and edit any field you want to. If you don't it is fine. Generally I disable unnecessary stuff like RSS feeds etc, so I add

disableKinds = ["RSS"]

I also want to control where the generated website goes, so I add

publishDir = <directory-path-within-quotes>

Create the html page

Here is a simple html page for starters


<html>
  <head>
    <title>
      Home page of XYZ

    </title>
  </head>
  <body>
    Nothing of importance at the moment
  </body>
</html>

Save it to layouts/index.html

Generate the site

The command is, simply

hugo

That's it. Your website is generated in the output directory 'public' or the value of the variable publishDir if you changed it.

Notes

I know that this is probably not the prescribed way of using a static site generator. Most people are talking about a separation of concerns, where your theme and layout are not connected with your content. I feel that that should not be the only way to create websites. It is possible for content and layout to be mixed for very small sites. Or when you start building the site. Later on you can gradually move the content out and create a stand-alone layout.

Sunday, November 5, 2017

World's smallest electron app

Electron seems to be a very easy-to-setup system if you already have node.js and npm. I could get a small app running even on Windows. Here's what you do.

Create a package.json file

You can use 'npm init' for this, or just your text editor. The example I can give is


{
  "name": "electron1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "electron .",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "~1.7.8"
  }
}

Create an index.html file

This will be the default screen of the app. The example I can give is


<html>
  <body>
    <h1>
Ha!</h1>
</body>
</html>

Create a index.js file

This will be the code behind the app. The example I have is


var electron = require('electron')
var app = electron.app

var path = require('path')
var url = require('url')

let mainWindow


function createWindow () {
  // Create the browser window.
  mainWindow = new electron.BrowserWindow({width: 800, height: 600})

  // and load the index.html of the app.
  mainWindow.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  }))
 
    // Emitted when the window is closed.
  mainWindow.on('closed', function () {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null
  })
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)

Launch the app

There is a one-time command you need to execute:

npm install

After that is done you can launch your app using

npm start

Credits

This is nothing but a reduced version of the Electron quick-start app