Create a blog in nodejs using Hexo

is a framework built with nodejs to create a blog quickly and easily. Like wordpress or other blog platforms, articles and content are not stored in databases but the form of files written with the markdown language. These Markdown files will then be compiled into html files.

Like any application nodejs, there are several commands to create a page, a post, a category, generate static files, deploy on a server:

If you want to change platforms — for example from wordpress, Jekyll, octopress, joomla to Hexo or import an rss stream, this is also possible.

Prerequisites

Let’s install nodejs if it’s not already done.

If not done yet, the installation is very simple. On Windows, go to sur https://nodejs.org/en/ and download the installer.

We then check the correct node installation by typing this in the console:

Installation of Hexo

We install hexo-cli in global

Return from the console

Create a Hexo application in a blognodejs folder

We go into this folder and set up the dependencies.

cd blognodejs/ npm install

We want to immediately generate static files (.html, css, javascript) in the public folder. It is the contents of this folder that will need to be sent in an FTP space for the blog to be accessible via a URL. Just run this command.

If we wanted to automatically generate . html files after their creation/modification — we add the parameter -watch

Before deploying the blog to a production server, let’s first observe the local rendering.

Hexo has a server that allows us to see this easily. All you have to do is run:

hexo server --draft --open

The parameter is:

• — draft allows displaying drafts (because they are hidden by default)
• — open launches browser and opens http://localhost:4000 when the server is ready

If the 4000 port is already used by another instance, you can choose another port by passing the -p parameter like this

hexo server -p 4500 INFO Start processing INFO Hexo is running at http://localhost:4500 . Press Ctrl+C to stop.

To view the list of existing URLs.

Here is the return of this order

INFO Start processing Date Title Path 2019-06-21 About me about/me.md 2019-06-21 Bonjour bonjour.md 2019-06-21 Bonjour Miary hello/miary.md

A little sneak peeks at the blog.

We now want to display a dynamic menu on all the pages of the blog.

Let’s create a case file.

And let’s add a menu.yml file to this folder.

touch source/_data/menu.yml

which will contain the following code.

Accueil: / Photos: /photos/ Articles: /archives/

• Left (of the “:”): the menu title
• Right (from “:”): Destination URL

Display these menus on all pages. To do this, modify/themes/landscape/layout/_partial/header.ejs and add

Here is the result

Plugins

As in wordpress, it is possible with Hexo to install plugins to add useful features to our needs.

We would need the following plugins at first:

• hexo-browsersync
• hexo-lazyload-image
• hexo-wordcount

hexo-browsersync

Because we don’t want to refresh the page every time we make a change, we’ll let the browser do that. We need to install the next package.

npm install hexo-browsersync --save

Stop the server again by doing ( CTRL+C) then run it again via the following command:

hexo-lazyload-image

Allows presenting a loading icon before the actual display of an image.

We install

npm install hexo-lazyload-image --save

In the/_config.yml file, add the plugin parameters

lazyload: enable: true onlypost: false loadingImg: # eg ./images/loading.gif

Stop the server again by doing ( CTRL+C) then run it again via the following command:

And from there, a loading icon appears before presenting the image.

hexo-wordcount

Allows adding useful information to a post for example the number of words, the estimated reading time.

We install

npm install hexo-wordcount --save

Deployment

We finished writing our first post. It’s time to send this to a server because the article needs to be read fairly quickly.

We need to make a few changes before we launch the deployment.

In our case, we will push ( git push) the source code on Gitlab . Then a Webhook will contact our server to pull ( git pull) commits.

Let’s install the hexo-deployer-git plugin to deploy via git

npm install hexo-deployer-git --save

Let’s change the/_config.yml file and add this

deploy: type: git repo: git@gitlab.com:miary/hexo.git branch: prod message: # messg laisser vide - par défaut "Site updated: {{ now('YYYY-MM-DD HH:mm:ss') }}"

Then let’s start the deployment

hexo clean && hexo deploy

Return

INFO Deleted database. INFO Deleted public folder. INFO Start processing INFO Files loaded in 575 ms INFO Generated: index.html INFO Generated: archives/index.html ... INFO 17 files generated in 1.39 s

* Bonus

Write in Markdown

As stated above, pages must follow the Markdown format. It is not easy at first to learn this language although it is practical and simple when you get used to it.

A free online tool wysiwyg (What You See Is What You Get) exists to help us write Markdown. This tool is called stackedit .

Markdown Plugins

I mainly use PHPSTORM as IDE. I have added 2 plugins that help me write Markdown:

• Markdown Navigator : Markdown editor more complete than the default editor offered by the software. Additional toolbars allow you to: add links, tables, bulleted lists…
• Paste Image To Markdown Allows to add a copied image and save this image in a specific folder.

Bookmarks and Webography

Source of this article: https://miaryrabs.madatsara.com/2019/06/23/en-nodejs-blog-powered-hexo/

Originally published at https://dev.to on June 28, 2019.