DEV Community

rabehasy
rabehasy

Posted on

Create a blog in nodejs using Hexo

#node #hexo #markdown

Hexo

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:

  • git
  • heroku
  • netlify
  • rsyncSFTP
  • SFTP.

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

Installation

Prerequisites

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

  • nodejs

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:

node -v
v12.4.0
Enter fullscreen mode Exit fullscreen mode

Installation of Hexo

We install hexo-cli in global

npm i hexo-cli -g
Enter fullscreen mode Exit fullscreen mode

Return from the console

+ hexo-cli@2.0.0
Enter fullscreen mode Exit fullscreen mode

Create a Hexo application in a blognodejs folder

hexo init blognodejs
Enter fullscreen mode Exit fullscreen mode

We go into this folder and set up the dependencies.

cd blognodejs/
npm install
Enter fullscreen mode Exit fullscreen mode

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.

hexo generate
Enter fullscreen mode Exit fullscreen mode

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

hexo generate --watch
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode

To view the list of existing URLs.

hexo list page
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.

mkdir -p source/_data
Enter fullscreen mode Exit fullscreen mode

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

touch source/_data/menu.yml
Enter fullscreen mode Exit fullscreen mode

which will contain the following code.

Accueil: /
Photos: /photos/
Articles: /archives/
Enter fullscreen mode Exit fullscreen mode
  • 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

<% for (var link in site.data.menu) { %>
<a href="<%= site.data.menu[link] %>"> <%= link %> </a>
<% } %>
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

hexo server
Enter fullscreen mode Exit fullscreen mode

hexo-lazyload-image

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

We install

npm install hexo-lazyload-image --save
Enter fullscreen mode Exit fullscreen mode

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

lazyload:
  enable: true
  onlypost: false
  loadingImg: # eg ./images/loading.gif
Enter fullscreen mode Exit fullscreen mode

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

hexo server
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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') }}"
Enter fullscreen mode Exit fullscreen mode

Then let’s start the deployment

hexo clean && hexo deploy
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

* 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/

Top comments (1)

Collapse
 
epsi profile image
E.R. Nurwijayadi •

I wrote an article series about hexo in my blog with source repository available for anyone in needs of working example.

epsi-rns.gitlab.io/ssg/2019/05/01/...

Read next

shafayeat profile image

Promises in JavaScript, A Guide for 2024

Shafayet Hossain -

codewithshahan profile image

Your First Backend Application using Node.js

Programming with Shahan -

jagroop2001 profile image

Building a Real-Time Chat Application with Socket.io, Express, React.js, and Chakra UI (Vite Setup)

Jagroop Singh -

imsushant12 profile image

Node.js Streams: What, Why, and How to Use Them

Sushant Gaurav -