Hexo – How to install Hexo on Mac with github pages

 

1. Install node.js and git

  • Install node.js from nodojs.org or by npm (package manager)
  • Install git from git-scm.com

2. Setup Github and ssh keys

Check your local ssh keys

$ cd ~/. ssh

If it reports: No such file or directory, you are using git for the first time.

Generate new ssh key

$ ssh-keygen -t rsa -C "email@host.com"

it will show

Generating public/private rsa key pair....
Enter passphrase... # enter your passphrase
Enger same passphrase again: #enter it again

Add the ssh key to github

Add the key in .ssh/id_rsa.pub file to your github account

Test

$ ssh -T git@github.com

If succeed, it should show

The authenticity of host 'github.com' can't be established.
RSA key fingerprint is xxxx
Are you sure you want to continue connecting (yes/no)? # yes

Finally, it shows

You've successfully authenticated, but GitHub does not provide shell access.

Setup user account

$ git config --global user.name "username"
$ git config --global user.email "email@host.com"

<!– more –>

3. Install Hexo on mac

Install Hexo on your mac

npm install hexo-cli --save
npm install hexo --save

Init Hexo to a dir

Create a dir to hold Hexo for blogging, and Hexo will generate all static files automatically to that dir

$ cd your_dir
$ hexo init

Start Hexo

$ hexo g
$ hexo s

Deploy Hexo to github

Before running this, you need to look at the later section of how to configure Hexo

$ hexo deploy

It may shows the following error:

ERROR Deployer not found: github

That's because you don't the deployer plug. Install one by running

$ npm install hexo-deployer-git --save

One problem I ran into is, once when I ran the above command, console reported some weird errors complaining about headers. After a while, I figured out I typed Chinese's '-' instead of English's '-'…

Feed

$ npm install hexo-generator-feed --save

And add the following to Hexo's _config.yml file

#Feed Atom
feed:
type: atom
path: atom.xml
limit: 20
hub:

<h2></h2>
<!–more–>
<h2>SEO</h2>

$ npm install hexo-generator-sitemap --save
$ npm install hexo-generator-baidu-sitemap --save

And add the following to Hexo's _config.yml file

#sitemap
sitemap:
path: sitemap.xml
baidusitemap:
path: baidusitemap.xml

Hexo theme – next

git clone https://github.com/iissnan/hexo-theme-next themes/next

Shortcut

npm install hexo --save
npm install hexo-cli --save
npm install hexo-deployer-git --save
npm install hexo-generator-feed --save
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save
npm install hexo-generator-search --save
git clone https://github.com/iissnan/hexo-theme-next themes/next

My Hexo template

  • Keep in mind that Hexo and Next will both evolve. So next time when setting up config, be cautious and not to just copy and past the following config files.

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site
title: Bowen's blog
subtitle: keep learning – learning notes and blogs
description: keep learning – learning notes and blogs
author: Bowen
email:
language: en
timezone:
# Avatar
avatar: /avatar/avatar.jpg
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child&#039; and root as '/child/'
url: https://phoenixjiangnan.github.io
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:
# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
enable: true
line_number: false
auto_detect: false
tab_replace:

# Category & Tag
default_category: uncategorized
category_map:
tag_map:
# Archives
## 2: Enable pagination
## 1: Disable pagination
## 0: Fully Disable
archive: 2
category: 2
tag: 2
# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss
# Disqus
disqus_shortname: bowensgithubblog
# Markdown
## https://github.com/chjj/marked
markdown:
gfm: true
pedantic: false
sanitize: false
tables: true
breaks: true
smartLists: true
smartypants: true
#sitemap
sitemap:
path: sitemap.xml
baidusitemap:
path: baidusitemap.xml
#Feed Atom
feed:
type: atom
path: atom.xml
limit: 20
hub:
# Pagination
## Set per_page to 0 to disable pagination
per_page: 20
pagination_dir: page
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next
# Plugins
# exclude_generator:
# Plugins:
# – hexo-generator-feed
# – hexo-generator-sitemap
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repository: https://github.com/phoenixjiangnan/phoenixjiangnan.github.io.git
branch: master

My Next template

The config file is /Hexo/themes/next/_config.yml

# ---------------------------------------------------------------
# Site Information Settings
# ---------------------------------------------------------------

# Put your favicon.ico into `hexo-site/source/` directory.
favicon: /favicon.ico

# Set default keywords (Use a comma to separate)
keywords: "Hexo, welcome to Bowen's blog"

# Set rss to false to disable feed link.
# Leave rss as empty to use site's feed link.
# Set rss to specific value if you have burned your feed already.
rss:

# Specify the date when the site was setup
#since: 2015

# Canonical, set a canonical link tag in your hexo, you could use it for your SEO of blog.
# See: https://support.google.com/webmasters/answer/139066
# Tips: Before you open this tag, remeber set up your URL in hexo _config.yml ( ex. url: http://yourdomain.com )
canonical: true
# ---------------------------------------------------------------
# Menu Settings
# ---------------------------------------------------------------

# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash (/archives -> archives)
menu:
home: /
about: https://phoenixjiangnan.github.io/about
archives: https://phoenixjiangnan.github.io/archives
categories: https://phoenixjiangnan.github.io/categories
tags: https://phoenixjiangnan.github.io/tags
#commonweal: /404.html
# Enable/Disable menu icons.
# Icon Mapping:
# Map a menu item to a specific FontAwesome icon name.
# Key is the name of menu item and value is the name of FontAwsome icon. Key is case-senstive.
# When an question mask icon presenting up means that the item has no mapping icon.
menu_icons:
enable: true
#KeyMapsToMenuItemKey: NameOfTheIconFromFontAwesome
home: home
about: user
categories: th
tags: tags
archives: archive
commonweal: heartbeat
# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

# Schemes
scheme: Muse
#scheme: Mist
#scheme: Pisces
# ---------------------------------------------------------------
# Font Settings
# - Find fonts on Google Fonts (https://www.google.com/fonts)
# - All fonts set here will have the following styles:
# light, light italic, normal, normal intalic, bold, bold italic
# - Be aware that setting too much fonts will cause site running slowly
# - Introduce in 5.0.1
# ---------------------------------------------------------------
font:
enable: true

# Uri of fonts host. E.g. //fonts.googleapis.com (Default)
host:

# Global font settings used on <body> element.
global:
# external: true will load this font family from host.
external: true
family: Lato

# Font settings for Headlines (h1, h2, h3, h4, h5, h6)
# Fallback to `global` font settings.
headings:
external: true
family:

# Font settings for posts
# Fallback to `global` font settings.
posts:
external: true
family:

# Font settings for Logo
# Fallback to `global` font settings.
# The `size` option use `px` as unit
logo:
external: true
family:
size:

# Font settings for <code> and code blocks.
codes:
external: true
family:
# ---------------------------------------------------------------
# Sidebar Settings
# ---------------------------------------------------------------
# Social Links
# Key is the link label showing to end users.
# Value is the target link (E.g. GitHub: https://github.com/iissnan)
#social:
#LinkLabel: Link
# Social Links Icons
# Icon Mapping:
# Map a menu item to a specific FontAwesome icon name.
# Key is the name of the item and value is the name of FontAwsome icon. Key is case-senstive.
# When an globe mask icon presenting up means that the item has no mapping icon.
social_icons:
enable: true
# Icon Mappings.
# KeyMapsToSocalItemKey: NameOfTheIconFromFontAwesome
GitHub: github
Twitter: twitter
Weibo: weibo
# Sidebar Avatar
# in theme directory(source/images): /images/avatar.jpg
# in site directory(source/uploads): /uploads/avatar.jpg
#avatar:
# Table Of Contents in the Sidebar
toc:
enable: true

# Automatically add list number to toc.
number: true
# Creative Commons 4.0 International License.
# http://creativecommons.org/
# Available: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
#creative_commons: by-nc-sa
#creative_commons:
sidebar:
# Sidebar Position, available value: left | right
position: left
#position: right

# Sidebar Display, available value:
# - post expand on posts automatically. Default.
# - always expand for all pages automatically
# - hide expand only when click on the sidebar toggle icon.
# - remove Totally remove sidebar including sidebar toggler.
display: post
#display: always
#display: hide
#display: remove
# Blogrolls
#links_title: Links
#links_layout: block
#links_layout: inline
#links:
#Title: http://example.com/
# ---------------------------------------------------------------
# Misc Theme Settings
# ---------------------------------------------------------------

# Custom Logo.
# !!Only available for Default Scheme currently.
# Options:
# enabled: [true/false] - Replace with specific image
# image: url-of-image - Images's url
custom_logo:
enabled: false
image:
# Code Highlight theme
# Available value:
# normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: night eighties
# Automatically scroll page to section which is under <!-- more --> mark.
scroll_to_more: true
# Automatically Excerpt. Not recommand.
# Please use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
enable: false
length: 150
# Wechat Subscriber
#wechat_subscriber:
#enabled: true
#qcode: /path/to/your/wechatqcode ex. /uploads/wechat-qcode.jpg
#description: ex. subscribe to my blog by scanning my public wechat account
# ---------------------------------------------------------------
# Third Party Services Settings
# ---------------------------------------------------------------

# MathJax Support
mathjax:
enable: false
cdn: //cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML
# Swiftype Search API Key
#swiftype_key:

# Baidu Analytics ID
#baidu_analytics:

# Duoshuo ShortName
#duoshuo_shortname:

# Disqus
#disqus_shortname:

# Baidu Share
# Available value:
# button | slide
#baidushare:
## type: button

# Share
#jiathis:
#add_this_id:

# Share
#duoshuo_share: true

# Google Webmaster tools verification setting
# See: https://www.google.com/webmasters/
#google_site_verification:
# Google Analytics
#google_analytics:

# CNZZ count
#cnzz_siteid:
# Make duoshuo show UA
# user_id must NOT be null when admin_enable is true!
# you can visit http://dev.duoshuo.com get duoshuo user id.
duoshuo_info:
ua_enable: true
admin_enable: false
user_id: 0
#admin_nickname: Author
# Facebook SDK Support.
# https://github.com/iissnan/hexo-theme-next/pull/410
facebook_sdk:
enable: false
app_id: #<app_id>
fb_admin: #<user_id>
like_button: #true
webmaster: #true

# Facebook comments plugin
# This plugin depends on Facebook SDK.
# If facebook_sdk.enable is false, Facebook comments plugin is unavailable.
facebook_comments_plugin:
enable: false
num_of_posts: 10 # min posts num is 1
width: 100% # default width is 550px
scheme: light # default scheme is light (light or dark)
# Show number of visitors to each article.
# You can visit https://leancloud.cn get AppID and AppKey.
leancloud_visitors:
enable: false
app_id: #<app_id>
app_key: #<app_key>

# Show PV/UV of the website/page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi/
busuanzi_count:
# count values only if the other configs are false
enable: false
# custom uv span for the whole site
site_uv: true
site_uv_header: <i class="fa fa-user"></i>
site_uv_footer:
# custom pv span for the whole site
site_pv: true
site_pv_header: <i class="fa fa-eye"></i>
site_pv_footer:
# custom pv span for one page only
page_pv: true
page_pv_header: <i class="fa fa-file-o"></i>
page_pv_footer:

# Tencent analytics ID
# tencent_analytics:

# Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO
baidu_push: false

#! ---------------------------------------------------------------
#! DO NOT EDIT THE FOLLOWING SETTINGS
#! UNLESS YOU KNOW WHAT YOU ARE DOING
#! ---------------------------------------------------------------

# Motion
use_motion: true

# Fancybox
fancybox: true
# Script Vendors.
# Set a CDN address for the vendor you want to customize.
# For example
# jquery: https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js
# Be aware that you should use the same version as internal ones to avoid potential problems.
vendors:
# Internal path prefix. Please do not edit it.
_internal: vendors

# Internal version: 2.1.3
jquery:

# Internal version: 2.1.5
# http://fancyapps.com/fancybox/
fancybox:
fancybox_css:

# Internal version: 1.0.6
# https://github.com/ftlabs/fastclick
fastclick:

# Internal version: 1.9.7
# https://github.com/tuupola/jquery_lazyload
lazyload:

# Internal version: 1.2.1
# http://VelocityJS.org
velocity:

# Internal version: 1.2.1
# http://VelocityJS.org
velocity_ui:

# Internal version: 0.7.9
# https://faisalman.github.io/ua-parser-js/
ua_parser:

# Internal version: 4.4.0
# http://fontawesome.io/
fontawesome:
# Assets
css: css
js: js
images: images

# Theme version
version: 5.0.1

My Post Template

The templates are in /Hexo/scaffolds/*

The Post template post.md is

---
title: {{ title }}
date: {{ date }}
categories: []
tags: []
---

 

Reference

 

 

Advertisements