Skip to content

Instantly share code, notes, and snippets.

@btfak
Created May 26, 2016 09:41
Embed
What would you like to do?
How to use Hexo and deploy to GitHub Pages

How to use Hexo and deploy to GitHub Pages

1. Install Hexo

$ sudo npm install -g hexo-cli

$ hexo -v
hexo-cli: 0.1.9
os: Darwin 14.3.0 darwin x64
http_parser: 2.3
node: 0.12.7
v8: 3.28.71.19
uv: 1.6.1
zlib: 1.2.8
modules: 14
openssl: 1.0.1p

2. Create a project for your GitHub Pages

$ hexo init yt8yt.github.io
INFO  Copying data to ~/***/yt8yt.github.io
INFO  You are almost done! Don't forget to run 'npm install' before you start blogging with Hexo!

$ cd yt8yt.github.io

$ npm install

3. Run a test server for your page on Mac

$ hexo server
INFO  Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.

4. Set information for your new blog

https://hexo.io/docs/configuration.html

$ vi _config.yml

~~~~~~~~~~~~~~~~~~ _config.yml ~~~~~~~~~~~~~~~~~~
# Site
title: yt8yt's note
subtitle:
description: yt8yt's personal blog
author: yt8yt
language:
timezone: Japan

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yt8yt.github.io/
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

5. Set information to use Git

https://github.com/hexojs/hexo-deployer-git

$ npm install hexo-deployer-git --save
$ vi _config.yml

~~~~~~~~~~~~~~~~~~ _config.yml ~~~~~~~~~~~~~~~~~~
# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: git@github.com:yt8yt/yt8yt.github.io.git
  branch: master

6. Set "watch" before starting your work

"watch" command can monitor your files.
https://hexo.io/docs/generating.html

$ hexo generate --watch

7. Create a new post file

$ hexo new first-post
INFO  Created: ~/***/yt8yt.github.io/source/_posts/first-post.md

8. Edit the above file with Markdown or Hexo's Helper

Hexo's Helper
https://hexo.io/docs/helpers.html
I use Atom with "shift + control + m" when I use Markdown :-)
https://atom.io/

9. Delete "source/_posts/hello-world.md"

It's not necessary to deploy.

10. Deploy your new blog!!

https://hexo.io/docs/deployment.html

$ hexo clean
$ hexo deploy

After writting the above command, you can see your new blog on GitHub Pages.
http://******.github.io/

11. Change your blog theme

https://github.com/hexojs/hexo/wiki/Themes

For instance, How to use the following theme.
https://hexo.io/hexo-theme-light/

## Install it
$ cd yt8yt.github.io
$ git clone git://github.com/tommy351/hexo-theme-light.git themes/light

## Update the above files
$ themes/light
$ git pull

## Set information to use the theme
$ cd yt8yt.github.io
$ vi _config.yml

~~~~~~~~~~~~~~~~~~ _config.yml ~~~~~~~~~~~~~~~~~~
# Extensions
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
theme: light

12. Create a new page file

https://hexo.io/docs/writing.html

$ hexo new page aboutme
INFO  Created: ~/***/yt8yt.github.io/source/aboutme/index.md

$ cd source/aboutme/

$ vi index.md

13. Use "Read More"

Write <!-- more --> in your articles.

14. Use Plugins

https://github.com/hexojs/hexo/wiki/Plugins

@aginanjar
Copy link

Awesome, thanks for sharing. (y)

@thirdgen88
Copy link

Agreed, covers all the aspects you need! Thanks!

@karthikkrishnadev
Copy link

Thank you so much! Works like a charm.

@CodeCanna
Copy link

Okay its not working for me...I must have missed something somewhere. I followed the directions but its not working. I commited and pushed the files to github the traditional way prior to finding these instructions, should I clean out the repo and try again?

@shengyu
Copy link

shengyu commented Jun 5, 2017

Thanks for sharing, it's really helpful.

@rankobp
Copy link

rankobp commented Jun 18, 2017

Thanks!

@gnehz972
Copy link

best hexo & github page tutorial

@agonzalez0515
Copy link

This is so good! First time using Hexo and this made it so easy.

@KINGSABRI
Copy link

KINGSABRI commented Aug 21, 2017

Install nodejs, nvm on ubuntu

Install required packages for nodejs

apt update
apt install build-essential libssl-dev
apt install nodejs
apt install npm

Install nvm

wget -qO- https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash 

Install latest stable nodejs version

nvm install stable

update your profile - to find nvm path

source ~/.profile

Install hexo

npm install -g hexo-cli

Sources

@triyanarief
Copy link

thanks dude!

@wangjuanmt
Copy link

Thanks, it's very useful!

@HelloWhist
Copy link

thx

@BobHongYuChen
Copy link

thx

@ziyoushibo
Copy link

no ssh?

@fer
Copy link

fer commented Apr 10, 2018

Good stuff! Maybe worth to mention to add a CNAME under sources in order to use a custom domain.

@garyyu
Copy link

garyyu commented Apr 25, 2018

Nice and simple HowTo document~ Thanks!

@strongSoda
Copy link

vi _config.yml not working. Says vi is not an internal or external command

@ohkimchi
Copy link

Thank you so much, buddy!

@initialkommit
Copy link

Thank you. It's useful!

Copy link

ghost commented Aug 11, 2018

i changed my theme, my theme apply in local but i cannot reflect it to github page :((( even deploy many times

@Jonnypeng
Copy link

thank you.it's useful!

@yusupscopes
Copy link

Thank you! it's well explained!

@erlange
Copy link

erlange commented Jul 8, 2019

This is the most concise and useful hexo tutorial. Thanks!

@sirkaushalkumar
Copy link

This post is really helpful and awesome. Thank you for creating the piece.

@thanhdx0
Copy link

Thank you! Your post helps me a lot while I'm stuck with using Travis-CI.

@loyio
Copy link

loyio commented Apr 28, 2020

thanks,great tutorial

@devhector
Copy link

Thanks to share!! 🤙

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment