The Road to the First Blog
Tags: webdev, hugo, netlify, devblog
Published: 2020-06-17 22:26:50

## Introduction

After doing some pet projects here and there, learning the basics of git and GitHub, I started to think what I could do as a little pet project to publish on the web, no matter how small.

A friend of mine suggested I should try to create a blog using a static site generator like [Jekyll](https://jekyllrb.com/), [Hexo](https://hexo.io/), [Hugo](https://gohugo.io/), [Gatsby](https://www.gatsbyjs.org/) etc. Then it occurred to me that I should write a blog documenting my learning process.

With that in mind, let us get started.

In the past, I’ve made a couple of WordPress websites and for this project I was leaning towards that, but it felt like overkill for a pet project, and I also wanted to experiment with something that I haven’t touch before.
I wanted a simple site generator that was not dependent of a JavaScript library like React, or a framework like Angular or Vue, my search led me to Hugo.

---

## Hugo

![Hugo logo](https://dev-to-uploads.s3.amazonaws.com/i/eixlhp8g040qg229312y.png)

>“Hugo is a general-purpose website framework. Technically speaking, Hugo is a static site generator. Unlike systems that dynamically build a page with each visitor request, Hugo builds pages when you create or update your content. Since websites are viewed far more often than they are edited, Hugo is designed to provide an optimal viewing experience for your website’s end users and an ideal writing experience for website authors”.

### Features

* [Extremely fast](https://github.com/bep/hugo-benchmark) build times
* Renders changes on the fly with [LiveReload](https://gohugo.io/getting-started/usage/) as you develop
* [Powerful theming](https://gohugo.io/themes/)
* [Host your site anywhere](https://gohugo.io/hosting-and-deployment/)
* Straightforward [organization for your projects](https://gohugo.io/getting-started/directory-structure/), including website sections
* Customizable [URLs](https://gohugo.io/content-management/urls/)
* Support for configurable [taxonomies](https://gohugo.io/content-management/taxonomies/), including categories and tags
* Automatic [table of contents](https://gohugo.io/content-management/toc/) generation
* [Dynamic menu](https://gohugo.io/templates/menus/) creation
* [Pretty URLs](https://gohugo.io/content-management/urls/) support
* [Permalink](https://gohugo.io/content-management/urls/#permalinks) pattern support

For the full list of features, click [here](https://gohugo.io/about/features/).

With that in mind, and my curiosity picked, I installed Hugo following these [instructions](https://gohugo.io/getting-started/installing/), after that, I looked up a theme, and choose one called [hyde-hyde](https://themes.gohugo.io/hyde-hyde/), then a couple of minutes later and some tinkering, I have this:

![Picture of the first website run](https://dev-to-uploads.s3.amazonaws.com/i/wkklbwbrit28b2ydkbih.png)

GREAT! I have something working on my machine, I will add some more customization like a profile picture, a little description, social links etc. this looks really promising. Before editing some of the CSS, I decided that I want to deploy the site to the web, my choice for this was **Netlify**.

---

## Deployment

Before Netlify can do anything, I need to create a Git repository on a Git hosting solution like GitHub. How Git and GitHub works is out of the scope of this post, but if you want to know more about Git you can click the following [link](https://git-scm.com/), and for GitHub you can go [here](https://github.com/). With the project now on GitHub, we can go to Netlify and start the deployment process.

[Netlify](https://www.netlify.com/) is a web host that offers a simple way to deploy sites on the web with the always loved git workflow. I registered using my GitHub account, in the Netlify console I clicked **“new site from git”**, I choose GitHub, but it also supports GitLab and Bitbucket, configured some basic deployment settings and hit publish, a couple of minutes later, my very basic site was deployed successfully on Netlify, with Continuous Delivery(CD) already set up, this means that every time I push a change to my master branch on GitHub, Netlify will deploy automatically the changes to the website, this is awesome for a blogging website. For more info on how to deploy on Netlify you can go to the Netlify [documentation](https://docs.netlify.com/site-deploys/create-deploys/#deploy-with-git).

Now, let’s create our first blog post, I will run the following command on my terminal:
```
    hugo new web/0001-test/index.md
```
We will have the following structure inside our **content** folder

```markdown
    .
    └── content
        └── web
        |    └── 0001-test
        |           └── index.md
```

index.md is the file we will work on. By default, Hugo comes with a default.md in the archetypes folder, this will be use when you create a new file using the command we used previously. Since I did setup some archetype for my content, here is how my index.md looks like.

```yaml
    ---
    title: "0001 Test"
    slug: "0001 Test"
    date: 2020-06-10T14:20:53-04:00
    tags : [
        "Web"
    ]
    categories : [
        "Web Development"
    ]
    layout: post
    type:  "web"
    highlight: true
    draft: true
    ---
```
I will type some text and just below the end of the front matter

```markdown
    # Hello World!!!
```

Now, the moment of truth

**Homepage View**
![Homepage with post](https://dev-to-uploads.s3.amazonaws.com/i/461vvbfhnbtl4fkaguqe.png)

**Post View**
![Post page with hello world text](https://dev-to-uploads.s3.amazonaws.com/i/akhio1g9tc47mmkapdhm.png)

**Note:** if you check on top of your index.md, you will notice the following
```draft: true``` this means that the content will not be displayed on the website if you deploy it right now. To change this, just replace ```draft: true``` with ```draft: false```

---

## Organization

Before we wrap up, let’s talk about Hugo content organization, Hugo supports content nested at any level, however the top levels `(i.e. content/<DIRECTORIES>)` are special in Hugo and are considered the content type used to determine layouts etc. Knowing this, I did the following structure:

```markdown
    .
    └── content
        └── web
        |    └── <PostDirectory>
        |           └── index.md
        └── mobile
        |    └── ...
        |
        └── gamedev
        |    └── ...
        | ...
```
### Why I did it this way?

First of all, I wanted to leverage the power of Hugo archetypes, second, since I’ll be touching different topics about programming, I split the content in broad categories, like web development, mobile development, game development etc. this helps me with my file organization while also giving me room to grow.

---

## Closing thoughts

This journey has been very fun, I created a little blog site in a couple of days, deployed it through Netlify, while I also wrote my first blog post ever documenting my steps and a bit of my struggles, learned a lot about static site generators, deployment experience through Netlify, Markdown file editing, and a bit of wizardry with the terminal, all and all, a cool experience.

Hope to see you around for my next post.