🔵 Blogging on Replit with Hexo

This file cannot be displayed: https://storage.googleapis.com/replit/images/1556732510266_05cd68a7026409853570708f1fb896a4.pn

If you've ever wanted to create a blog, you might have heard of static site generators like Jekyll, Hugo, and Hexo. In a nutshell, they transform any blog posts you've written in markdown to a complete website.

I'll show you how to get started with Hexo on replit. It's super simple.

If you just want to fork a working example, see the repl below and follow the "After forking" steps. But if you want to follow along and create it yourself, follow the "preliminary steps" 😉. You may have to fork the project if replit doesn't update files properly.

Prerequisites

• Beginner experience with npm / nodeJS
• Beginner experience with markdown syntax

Preliminary Steps

Installing Hexo

First, create a NodeJS repl and install the hexo package.

This file cannot be displayed: https://storage.googleapis.com/replit/images/1556645287196_0ac926adaf2bae5becfecba3550c71e2.pn

After adding Hexo, make sure you click run so the npm dependencies download.

Initializing a Hexo Project

Open the terminal with Ctrl + Shft + P (or F1) (make sure the file editor window is selected while doing this). Then, make sure you have the Hexo package by typing

./node_modules/.bin/hexo

You should see something like this 👇
This file cannot be displayed: https://storage.googleapis.com/replit/images/1556700126856_0a605a84489fa04e4cab5373daa75920.pn

On replit, we cannot install global npm dependencies. Because of this, we have to type ./node_modules/.bin/hexo instead of hexo whenever we want to do some Hexo command.

Once you know you have Hexo properly installed, initialize a Hexo project. I called it public, but it really doesn't matter what you call it.

./node_modules/.bin/hexo init public

Now, wait until the generated folders show up in the file tree. If the files never generate, you may want to consider forking my repl (which is down below), which has all the necessary files.

This file cannot be displayed: https://storage.googleapis.com/replit/images/1556697810866_b03db9c8cfa185ed1c6fca707255bfb4.pn

Now, move all of the folders inside of public to the parent directory. Lastly, delete the public folder.

Editing the Hexo Configuration

Before, you start, you gotta change a few things in the configuration file.

This file cannot be displayed: https://storage.googleapis.com/replit/images/1556721243012_3142b70dbb9f030036a56dc5a897adac.pn

In your _config.yml edit theurl and parameter. Be sure to change the url to the url that shows up in the website preview area (denoted by red arrow).

Starting the Hexo Server

Starting the Hexo server enables you to preview your website as you're editing it.

To start it, just type the following in the shell

./node_modules/.bin/hexo server

It should look something like this 👇

This file cannot be displayed: https://storage.googleapis.com/replit/images/1556698479604_369ccb7534ac41eed5500c8cdc7b7e28.pn

But you may notice one large problem with this method. If someone visits you're repl, they'll have to type ./node_modules/.bin/hexo server just to see your blog.

We can fix this by making our index.js file automatically invoke the command./node_modules/.bin/hexo server in the shell. That way, when the user clicks "start", they'll see your blog 😄

To do this, put the following in your index.js

// Starts Hexo Development Server
let spawn = require('child_process').spawn;

let run = (cmd, args) => {
  child = spawn(cmd, args);

  child.stdout.on('data', data => process.stdout.write(data.toString()));
  child.on('close', code => console.log(`Child process exited with code ${code}.`));
};

run('./node_modules/.bin/hexo', ['server']);

Basically, this code creates a function called run with the arguments cmd and args. In this run function, a child process is spawned. Think of this child process as some process that's running a command (ex. ./node_modules/.bin/hexo server). Whenever the process has received some data it logs it to the console. When the process closes, it logs that event to the console also.

Now, after clicking on "run", your development server will start 😄. Be sure to refresh the site every time you want to make changes! Now read "Using Hexo" for more information.

After Forking

After you've forked my repl, you've basically almost done. Now, just change the url parameter in the _config.yml file so it matches yours.

This file cannot be displayed: https://storage.googleapis.com/replit/images/1556721243012_3142b70dbb9f030036a56dc5a897adac.pn

Now you can start writing a blog! Hit "run" to start your blog and refresh the page every time you want your changes to show! Now read [Using Hexo](## Using Hexo) for more information.

Using Hexo

There are a few commands you'll want to know when editing or updating your blog.

Starting the development server

./node_modules/.bin/hexo server

This starts the development server. If you followed this tutorial, you shouldn't have to type it in via the command line interface. Also, whenever you refresh the page, the website will automatically update. This is because replit automatically saves your files after you finish typing.

Creating a new page

./node_modules/.bin/hexo new <layout> <title>

For example, you can create a new post with the following

./node_modules/.bin/hexo new post "My Hexo Post"

However, sometimes, the posts you create within the shell won't pop up in the replit file viewer. As a workaround (for example), I

1. Create a post using the shell with ./node_modules/.bin/hexo new post "Sample Post". Then, I output the contents of the file with cat ~/source/_posts/Sample-Post.md
2. Create the actual markdown file inside of source/_posts/
3. Copy the output of what you got in step 1, and paste it in the text editor

You can see the steps laid out below 👇

This file cannot be displayed: https://storage.googleapis.com/replit/images/1556757274199_6681ff8df87b7eea71a21a0dcaae83ad.pn

If you want to learn more, check out the official Hexo docs.

See the repl here 👇

https://repl.it/@eankeen/hexo-blog

I hope this tutorial helped you out 🙂