🔵 Blogging on Replit with Hexo
🔵 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 close
s, 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
- Create a post using the shell with
./node_modules/.bin/hexo new post "Sample Post"
. Then, I output the contents of the file withcat ~/source/_posts/Sample-Post.md
- Create the actual markdown file inside of
source/_posts/
- 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 🙂
Thank you so much. It looks great with lots of information.
This is really cool! You should make it into a template ;)
To Open the terminal the shortcut is " Ctrl + Shft + S "
🙂🙂🙂🙂🙂🙂🙂🙂🙂🙂🙂🙂🙂🙂🙂🙂🙂🙂🙂🙂🙂🙂🙂🙂🙂🙂🙂🙂
This is really cool! I'm gonna boost it on social. :3
@katyadee awesome - thanks!
Maybe create a python version?
@PYer Hmm. Yeah I just tried to do that. The thing is, the Python ones that I've tested have to output their files to the file system before they start the server. Pelican, Nikola, and Hyde all seem to do this, which is no good. Because at the moment, as you know, replit's file system isn't completely reliable.
@eankeen yeah