Here's how to set up a Hexo blog using GitHub and Vercel.
Why Hexo?
Hexo is a great way to make a blog. A lot of people use it instead of WordPress because it's fast, stable, and you can host it for free. Plus, there's almost nothing to maintain.
You can read more about it here. If you'd rather use Hugo, most of this still applies.
The plan
You keep your blog files on GitHub, and Vercel automatically deploys them when you push an update.
Getting started
Step 1: Make your accounts
First, get a GitHub account. Then sign up for Vercel, and connect them together.
Step 2: Create a repo
Click the button below to create a new Hexo blog on Vercel:
Set the Git Scope to your GitHub username. Name the REPOSITORY NAME whatever you want, and keep it Private for security.
When you're done, hit Create. You'll now have a "vercel.app" domain, which is great for testing.
Vercel is now linked to your GitHub repo. Whenever you make a change, Vercel will automatically deploy it.
If you want to keep the blog for a while, you should get your own domain, e.g. from Spaceship.
Step 3: Run it locally
You don't want to test changes live. You want to run them on your computer first.
Getting the tools
First, you need Git and Node.js. Download them from their official sites: Git and Node.js.
To check if they installed right, open Terminal (if you're on a Mac) or Git Bash (if you're on Windows) and type:
$ node -v $ npm -v$ node -v $ npm -v
If it prints out version numbers, you're good.
Installing Hexo
Now install Hexo by running:
$ pnpm install -g hexo$ pnpm install -g hexo
When it's done, you'll see the Hexo version number.
Pushing changes to GitHub
You have two options for pushing changes: the command line (Git) or GitHub Desktop. GitHub Desktop is much easier.
Option 1: GitHub Desktop
Download it from GitHub Desktop.
Log in with your GitHub account, and you'll see this screen:
Click Add in the corner, pick Clone repository, find the repo you just made, and hit Clone.
You'll see where it saved the folder under Local Path.
Option 2: Git
Install Git from git-scm.com.
Open Terminal or Git Bash and check that it works:
$ git -v$ git -v
If you see a version number, it works.
Next, you need to set up an SSH key so GitHub knows who you are. Run the following command:
$ ssh-keygen -t rsa -C "your email address"$ ssh-keygen -t rsa -C "your email address"
Just hit enter three times. It'll show you where it saved your key.
Find the file called id_rsa.pub, open it in a text editor, and copy everything inside.
Go to GitHub, navigate to Settings -> SSH and GPG keys -> New SSH key (or click here).
Paste your key into the Key box, give it a title, and click Add SSH Key.
Now tell Git your name and email:
$ git config --global user.name "your GitHub username" $ git config --global user.email "your GitHub registered email address"$ git config --global user.name "your GitHub username" $ git config --global user.email "your GitHub registered email address"
To check if it worked, run:
$ ssh -T git@github.com$ ssh -T git@github.com
Type yes if it asks. If it says something like:
Hi [your GitHub username]! You've successfully authenticated, but GitHub does not provide shell access.Hi [your GitHub username]! You've successfully authenticated, but GitHub does not provide shell access.
...then you're good.
Getting the files
Go to your GitHub repo, click Code, and copy the SSH link.
Go to the folder where you want your blog to live, and run:
$ git clone [paste your link here]$ git clone [paste your link here]
Using Hexo
If you want to read more about what Hexo can do, their docs are pretty good.
Step 1: Install a theme
Find a theme you like on GitHub and follow its README to install it.
I made one myself called hexo-theme-redefine. You can check it out here.
Step 2: Add plugins
You can find plugins on the Hexo site or on GitHub. Just follow their setup instructions.
For example, you'll probably want a sitemap generator, like hexo-generator-sitemap.
Wrapping up
Any questions? Feel free to reach out at contact@ohevan.com.
0 reads