Start a static blog in 2021 with Hexo and Netlify
Tags: hexo, static, netlify, node
Published: 2021-01-02 07:47:31

[Hexo](https://hexo.io/) is a simple and fast blogging static site generator. If you like to work with files rather than UIs (Ex: WordPress), Hexo will be a great option for you. When working with Hexo, you'll need to use the command line and work with HTML, CSS files. So, I can say Hexo is mostly for developers who love to create their own blog easily. Hexo has a lot of themes you can select from. And, everything remains inside a GIT repository in markdown files. Hexo provides the framework to generate static HTML files combining your theme and markdown files. This is an ultimate guide on creating a blog with Hexo.

-   Setting up a Hexo blog on your local machine
-   Writing your first Hexo blog post
-   Changing Permalinks
-   Changing the theme
-   Adding comments with Hyvor Talk
-   Deploying to Netlify

Prerequisites
-------------

Before getting started, you'll need these installed on your local machine.

1.  [Node.js](https://nodejs.org/en/)
2.  [GIT](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git)

Optionally, it's always easy if you have installed a handy code editor like [VSCode](https://code.visualstudio.com/).

Setting up a Hexo Blog Locally
------------------------------

Open your terminal and install `hexo-cli` globally via npm (npm is the package manager of Node.js, which comes by default with it).

```
npm install hexo-cli
```

Then, navigate to an empty folder. Then, run the following command to install Hexo.

```
hexo init
```

This will initiate a hexo blog on the current directory. If you want to initiate hexo on a subfolder use `hexo init <folder_name>` and then navigate to that folder using `cd <folder_name>` for the next steps.

Next, run this command to finalize installing dependencies.

```
npm install
```

Finally, run the following command to start serving files.

```
hexo server
```

![](https://talk.hyvor.com/blog/wp-content/uploads/2020/11/image-7.png)

Now, you can visit your Hexo blog at http://localhost:4000. Hexo will now watch for file changes and automatically re-render the static site. You can press `Ctrl+C` to stop watching. If you want to run other commands while running `hexo server`, you'll need to use a separate terminal window.

![Hexo blog with Landscape theme](https://talk.hyvor.com/blog/wp-content/uploads/2020/11/image-8-1024x499.png)

Hexo Blog (Default Landscape Theme)

Writing Your First Hexo Blog Post
---------------------------------

First, let's take a look at Hexo file structure.

![Hexo blog folder/file structure](https://talk.hyvor.com/blog/wp-content/uploads/2020/11/image-10.png)

Hexo Blog Folder Structure

-   You'll add all of your posts inside the `source/_posts` folder. By default, hexo has created a `hello-world.md` post for us (.md stands for markdown).
-   You can have multiple themes in the themes folder. The default one is landscape.
-   `_config.yml` is responsible for all configurations in your Hexo blog. It uses [YAML](https://blog.stackpath.com/yaml/).

Creating your first blog post is pretty simple.

```
hexo new [layout] "[post title]"
```

For example,

```
hexo new post "My First Post"
```

(`post` is the default layout of Hexo, which will create a simple blog post. Therefore, you can shorten the above command as `hexo post "My First Post"`)

The above command will create a file named `My-First-Post.md` in the `source/_posts` folder. This file will look like this:

```
---
title: My First Post
date: 2021-01-01 05:45:03
tags:
---
```

Basically, when you run the above command, Hexo will automatically generate a file using the layout (`post.md` in this case) in the `scaffolds` folder.

Now, you can add any content to this new file and save.

```
---
title: My First Post
date: 2021-01-01 05:45:03
tags:
---

This is my first Hexo Blog Post!
```

![First Hexo Blog Post](https://talk.hyvor.com/blog/wp-content/uploads/2021/01/image.png)

Changing Permalinks
-------------------

`_config.yml` file contains all of the site-wide configurations. Most of these configurations are self-explanatory.

Let's see how to change the permalink format. By default, your blog posts have URLs in `:year/:month/:day/:title/` format. But, it is recommended to keep URLs short and simple for [better on-page SEO](https://talk.hyvor.com/blog/on-page-seo-checklist/).

Use the following configuration to show **only the title** in the URL.

```
permalink: :title/
```

*Note that `hexo server` does not watch for changes in `_config.yml`. Therefore, you'll need to stop the server and restart it after editing that file.*

Changing The Theme
------------------

Changing the theme of your Hexo blog is straightforward. First, choose a theme from a github repo or [Hexo themes list](https://hexo.io/themes/).

Here, I'll choose the [july theme](https://github.com/wisp-x/hexo-theme-july) by [wisp-x](https://github.com/wisp-x). First, clone the git repo to `themes/[theme_name]` folder.

```
git clone https://github.com/wisp-x/hexo-theme-july.git themes/july
```

Finally, change the theme name in `_config.yml`.

```
theme: july
```

That's all!

Adding comments with Hyvor Talk
-------------------------------

You can make your static site more engaging by [embedding comments](https://talk.hyvor.com/blog/add-embed-comments-to-your-website-using-hyvor-talk/).

> *Hyvor Talk is a privacy-focused commenting platform, which you can use to easily embed comments. We will handle everything from real-time comments to email notifications for your users.*

-   First, signup at [Hyvor Talk](https://talk.hyvor.com/) and copy the installation code.

![Hyvor Talk for Hexo - Installation Code](https://talk.hyvor.com/blog/wp-content/uploads/2021/01/image-1.png)

-   Then, you'll need to find the relevant place in your theme's layout files to paste the code -- usually after your blog content. (In `landscape` theme, it's `layout/_partial/article.ejs`). Then, paste the code there (after `</article>` tag).

![Hyvor Talk  Comments and Reactions Installed on Hexo](https://talk.hyvor.com/blog/wp-content/uploads/2021/01/image-5.png)

Reaction and Comments by Hyvor Talk

(Normally, comments are added to `post` layouts. So, search the `layout/post.[ext]` file to place the installation code)

You can change the colors of the comments section to match your branding. Visit our [homepage](https://talk.hyvor.com/) to learn more about Hyvor Talk.

Deploying Hexo Blog to Netlify
------------------------------

Compared to [Jekyll](https://talk.hyvor.com/blog/creating-a-static-site-blog-with-jekyll-and-github-pages/), [deploying Hexo to Github Pages](https://hexo.io/docs/github-pages) is complex. So, we'll use Github and Netlify (it's free for personal usage).

### Step 1: Pushing to Github

You'll need to push your code to Github before asking Netlify to build it for you.

-   Create a [new repository](https://github.com/new) in Github
-   Commit and push your code to Github

```
git add .
git commit -m "first commit"
git remote add origin https://github.com/[username]/[reponame].git
git push origin master
```

### Step 2: Set up Netlify

-   If you haven't yet, create a Netlify account at [netlify.com](http://netlify.com/)
-   Then, visit <https://app.netlify.com/start> to create a new site.

![Netlify Create New Site](https://talk.hyvor.com/blog/wp-content/uploads/2021/01/image-2.png)

After authorizing Netlify to access your Github repositories, choose the right one to build you site. Next, proceed with default settings.

![Netlify settings for a new site](https://talk.hyvor.com/blog/wp-content/uploads/2021/01/image-3.png)

Click "Deploy Site". After a few seconds, netlify will build your site and make it public.

![Public netlify hexo blog](https://talk.hyvor.com/blog/wp-content/uploads/2021/01/image-4.png)

Live site on Netlify

Conclusion
----------

If you are looking to create a blog in 2021, Hexo will be an easy option to start with. There is a lot of themes that you can choose. You can even [create your own theme](https://hexo.io/docs/themes) easily. Hexo also has [some plugins](https://hexo.io/docs/plugins) that can make your life easier. For example, [hexo-i18n](https://github.com/hexojs/hexo-i18n) plugin can be used for localization. In this article, we deployed the Hexo blog to Netlify. You can also deploy it to Github Pages, Gitlab Pages, or your own server.

If you are looking to develop your own themes/plugins, go through the [Hexo official documentation](https://hexo.io/docs/). I hope that this guide helped you start your Hexo blog. If you have any questions, feel free to comment below.