How to build a static HTML blog in 10 minutes with squido
Tags: javascript, webdev, beginners, tutorial
Published: 2021-11-26 09:26:24

Static websites built using [Jamstack](https://jamstack.org/) architecture offer a way to create a modern website with incredible performance, cheap to host, and easy to maintain. You can see move benefits of Static HTML websites [here](https://blog.squido.org/why-static-html/).

Today we will be using [squido](https://squido.org) to build a static HTML blog in less than 10 minutes showing all the steps needed to get going.

There are many static website generators but none as easy-to-use as featured packed by default as [squido](https://squido.org).

## Getting started

Things you will need:

- [Git](https://git-scm.com/downloads) installed.
- [Node.js](https://nodejs.org/en/download/) installed.
- A text editor, like [Visual Studio Code](https://code.visualstudio.com/download).

Open your Terminal and install [squido](https://squido.org) globally:

``` bash
# npm i -g https://github.com/mrvautin/squido.git
```

Speed things up by cloning the example blog Git repository:

``` bash
# git clone https://github.com/mrvautin/squido-blog-example my-blog
```

## Building

Enter your new blog directory:

``` bash
# cd my-blog
```

Build your blog:
Note: The serve command creates a local web server to view your new blog. The `-b` flag is to build, the `-w` is to watch for changes and rebuild if needed and the `-c` flag is to clean old files. 

``` bash
# squido serve -b -w -c
```

You can now view your blog by opening the following URL in a browser:

``` bash
http://localhost:4965
```

You should see:

![squido demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ojb3hsnsg5ljeqk284m1.png)

If you open up your new blog directory in a text editor, you should see:

![squido directory structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iejpda65hwt5au79x535.png)

- **build:** This is the generated directory that will contain your blog HTML files
- **source:** The actual source files used to generate your blog
- **content:** Contains the javascript, CSS, and image files for your blog
- **layouts:** Contains the layout file which has the basic structure
- **posts:** Contains the markdown files which contain the actual content of your blog posts/pages
- **404.hbs**, **index.hbs**, **page.hbs**, **post.hbs**, **tag.hbs**: Are all template files used to drive the layout of those pages
- **config.js:** Contains the config of your blog, including name, description, URL, pagination, and more

Let's clear out the old `lorem ipsum` example markdown files from the `/source/posts` folder by selecting, right-clicking and `Delete`:

![delete demo posts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6co8ksxl6letkcu98hqt.png)

Then create a new file called `hello-world.markdown` in the `/source/posts` folder with the following text:

``` yaml
---
title: Hello world
permalink: hello-world
description: Hello world
date: '2021-06-16 19:17:00'
tags: 
  - hello
  - world
---

## Hello world
```

Your blog will automatically rebuild and refreshing your browser will look like this:

![hello world demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/43ebwhl1twcspbp2jt9o.png)

You can now edit the templates with your custom layout, change the logo, add your CSS colors later. 

## Deployment

Back in your terminal, initialize your local Git repository:

``` bash
# git init
```

Create a new [Github](https://github.com) repository to make deploying your blog even easier: Visit [Github](https://github.com).

Jump back into your Terminal and link your new [Github](https://github.com) repository to your local one. 
First, run a Git status:

``` bash
# git status
```

You will see this:

![Netlify deploy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4isrntpahn0b9uidz8dk.png)

This shows all our deletions and our new `hello-world.markdown` file. 

Add the changes:

``` bash
# git add .
```

Create your first Commit:

``` bash
# git commit -m "Init"
```

Change the branch to main:

``` bash
# git branch -M main
```

Add your remote [Github](https://github.com) repository:

``` bash
# git remote add origin git@github.com:<username>/my-blog.git
```

Push your changes:

``` bash
# git push -u origin main
```

## Deploy to Netlify

[Netlify](https://netlify.com) is a specialty static website host which will allow you to host your blog for free in a matter of minutes. There is no server management or complicated setup. 

After you have created a [Netlify](https://netlify.com) account, click the `New site from Git` button:

![Netlify deploy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rodnrq0mq91qeebuqzrs.png)

Select [Github](https://github.com) from the `Continuous deployment` section. Authorize [Github](https://github.com), and select your `my-blog` repository. Change the Publish directory to `/build`. Click `Advanced` and set a new variable `NODE_ENV` to `production`. Finally, click the `Deploy site` button.

The result should look like this:

![Netlify deploy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wgir9wcgod8y7rsjwe5d.png)

You will have to wait a few seconds to a minute for your blog to deploy. You can then view your blog by clicking the link:

![Netlify deploy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s4iip4h4pn4l9fs2c91g.png)

You can finish here. However, by clicking `Domain settings` you can set up your own custom domain you have purchased from a domain register. 

Click Add custom domain and follow the steps to set up your DNS records to point to your new [Netlify](https://netlify.com) blog. 

There are other [deployment options](https://docs.squido.org/deployment-and-hosting/) on the [squido](https://squido.org) [documentation](https://docs.squido.org/). There is also other help and guides on [customizing](https://docs.squido.org/configuration/) your blog over on the squido [documentation](https://docs.squido.org/).