🔵 Blogging on Replit with Hexo
🔵 Blogging on Replit with Hexo
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.
- Beginner experience with
- Beginner experience with markdown syntax
First, create a NodeJS repl and install the
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
You should see something like this 👇
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.
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.
Now, move all of the folders inside of
public to the parent directory. Lastly, delete the
Editing the Hexo Configuration
Before, you start, you gotta change a few things in the configuration file.
_config.yml edit the
url 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
It should look something like this 👇
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
Basically, this code creates a function called
run with the arguments
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 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.
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.
There are a few commands you'll want to know when editing or updating your blog.
Starting the development 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
For example, you can create a new post with the following
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 with
- Create the actual markdown file inside of
- 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 👇
If you want to learn more, check out the official Hexo docs.
See the repl here 👇
I hope this tutorial helped you out 🙂
@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.