在GitHub上搭建基于Hexo的静态Blog

pic
pic

如果一只鸟在周围没有任何生物的情况下唱了一首歌 后来她死了
这首歌存在吗?

Environment

Required

  • OS X

    此教程基于 OS X ,Windows 用户仅供部分参考

  • HomeBrew
  • Node.js
  • Git
  • Hexo
  • GitHub account
  • Disqus account 或多说账户

Optional

  • Swiftype account
  • 百度统计账户
  • 域名
  • DNSPod account

Installation

HomeBrew

打开你的 Terminal 或 iTerm ,输入

$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Git & Node.js

Terminal 输入

$ brew install git

安装完成后再输入

$ brew install node

npm 会跟 node 一同装好

Hexo

Terminal 输入

$ npm install -g hexo-cli

至此安装完毕

Setup

Initialize

以创建于 ~/Desktop/Joe 为例

$ hexo init ~/Desktop/Joe
$ cd ~/Desktop/Joe
$ npm install

项目结构如下:

.
├── _config.yml
├── package.json
├── scaffolds
├── scripts
├── source
|   ├── _drafts
|   └── _posts
└── themes

Configuration

yaml 语法严谨,千万不要忘记空格!

打开~/Desktop/Blog/_config.yml
填入以下内容

# 博客名称
title: Joe's Room

# 描述
description: 井蛙语海 夏虫语冰

# 作者
author: Joe

# 博客语言
language: zh-Hans

# 博客地址
url: http://joehill.me

#主题名称
theme: next

# 多说
duoshuo_shortname: your-duoshuo-shortname

# Disqus 帐号(多说 Disqus 二选一)
disqus_shortname: your-disqus-shortname

##增加以下内容##

# 社交链接,将在侧栏中显示
social:
  GitHub: your-github-url
  Twitter: your-twitter-url
  Weibo: your-weibo-url
  DouBan: your-douban-url
  ZhiHu: your-zhihu-url

# ID 为百度统计提供脚本中 hm.js? 后字符串,非百度统计帐号
baidu_analytics: 41f2ac3e7c22ef73312321800c11b369

# 站点起始时间
since: 2011

# swiftype 站内搜索
swiftype_key: EKNBn-kdy2Bpu7SQLsGp

# 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

Theme

本文推荐使用 next 主题,下文仅以 next 为例。

Installation

$ cd ~/Desktop/Joe
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

Configuration

_config.yml

打开~/Desktop/Blog/themes/next/_config.yml

# 控制主题导航栏显示内容
menu:
  home: /
  categories: /categories
  archives: /archives
  tags: /tags

# 设置为紧凑型主题
scheme: Mist

Navi

目前导航栏中「分类」和「标签」是无法正常显示的

$ cd ~/Desktop/Joe
$ hexo new page tags
$ hexo new page categories

会在 ~/Desktop/Joe/source 下创建 tagscategories 目录
编辑 ~/Desktop/Joe/source/tags/index.md

# 设置当前 page 类型为 tags
type: "tags"

# 设置当前页评论关闭
comments: false

编辑 ~/Desktop/Joe/source/categories/index.md

# 设置当前 page 类型为 categories
type: "categories"

# 设置当前页评论关闭
comments: false

Avatar & Favicon

头像文件 default_avatar.jpg 放入 ~/Desktop/Joe/themes/next/source/iamges 目录下

favicon 文件 favicon.ico 放入 ~/Desktop/Joe/themes/next/source

First Blog

$ cd ~/Desktop/Joe
$ hexo new firstblog

~/Desktop/Joe/source/_posts 下生成 firstblog.md 文件
编辑 firstblog.md

# 文章题目
title: 在GitHub上搭建基于Hexo的静态Blog

# 所属分类
categories:
- Web

# 标签(多个标签如下所示)
tags:
- Hexo
- GitHub
- Disqus

`` 以上为文章列表显示摘要部分
正文书写参考 Markdown 语法

Generate

$ cd ~/Desktop/Joe
$ hexo generate    //   生成静态文件
$ hexo server      //   启动本地服务器

访问 http://localhost:4000 即可访问blog

Hexo Plugins

Hexo 为我们提供了很多 Plugins ,让我们可以更专注于博客的内容书写

hexo-deployer-git

用于git部署

$ cd ~/Desktop/Joe
$ npm install hexo-deployer-git --save

hexo-generator-sitemap

生成sitemap便于搜索引擎抓取

$ cd ~/Desktop/Joe
$ npm install hexo-generator-sitemap --save

Deployment

只在本地可以看博客怎么会是我们的终极目的,下一步我们要将 blog 部署到 github 的仓库中

Repository

登录 GitHub 账户,新建一个 repository

Repository name 起成 name.github.io

_config.yml

打开 ~/Desktop/Blog/_config.yml

# 部署信息
deploy:
  type: git
  # https://github.com/GitHubName/RepositoryName.git
  repo: https://github.com/Joe-Hill/joe-hill.github.io.git
  branch: master

Go!

$ cd ~/Desktop/Joe
$ hexo deploy

访问 https://RepositoryName (如 https://joe-hill.github.io)
即可访问Blog

Domain name Resolution

如果你拥有一个域名,比如 joehill.me 可以将其解析到你的Blog上
以域名joehill.me,DNS解析万网为例

创建一个 A 记录,主机记录为 @ ,解析线路选择默认,记录值为 103.245.222.133

~/Desktop/Joe/source 下创建无扩展名内容为 joehill.me 文件 CNAME

$ cd ~/Desktop/Joe
$ hexo generate
$ hexo deploy

等待解析成功,既可访问http://joehill.me

Tips

常用指令

$ hexo server
$ hexo generate
$ hexo deploy

可以简写成

$ hexo s
$ hexo g
$ hexo d

那么静态化 + 部署就可以写成

$ hexo d -g

开启你的美妙Blog之旅吧!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,524评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,869评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,813评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,210评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,085评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,117评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,533评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,219评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,487评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,582评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,362评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,218评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,589评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,899评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,176评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,503评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,707评论 2 335

推荐阅读更多精彩内容