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

pic

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

这首歌存在吗?

不管是否有人看 我终究还是要写的

Environment

Required

  • OS X
  • 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/Joe/_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

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

$ 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

如果出现标签和分类页面的统计数据不正确的情况,按照以下步骤更新数据:

  1. 删除站点目录下的 db.json 文件
  2. 执行 hexo clean
  3. 重新生成 hexo g

Avatar & Favicon

头像文件 default_avatar.jpg 放入

~/Desktop/Joe/themes/next/source/iamges

favicon 文件 favicon.ico 放入

~/Desktop/Joe/themes/next/source

如果想用外部地址,配置Avatar请在

~/Desktop/Joe/_config.yml

中加入

avatar: http://7xkgg5.com1.z0.glb.clouddn.com/Avatar/JUGG.jpg

配置favicon.ico请在

~/Desktop/Joe/themes/next/_config.yml

中修改

favicon: http://7xkgg5.com1.z0.glb.clouddn.com/Avatar/favicon.ico

Custom Variables

~/Desktop/Joe/themes/next/source/css/_custom/custom.styl

中可以配置一些自定义变量,以达到修改样式的目的。下方列举其中几个变量:

$font-family-headings = "Microsoft YaHei", Verdana, sans-serif // 修改标题字体

$font-family-base = "Microsoft YaHei", Verdana, sans-serif // 修改文章基本字体

$content-desktop = 700px  // 修改文章内容的默认宽度

$font-family-monospace = Menlo,Monaco,"Courier New",monospace    //    修改代码块部分的字体

First Blog

$ cd ~/Desktop/Joe

$ hexo new firstblog

~/Desktop/Joe/source/_posts

下生成 firstblog.md 文件并编辑

# 文章题目

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

# 所属分类

categories:

- Web

# 标签(多个标签如下所示)

tags:

- Hexo

- GitHub

- Disqus

<!-- more --> 以上为文章列表显示摘要部分

正文书写参考 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

hexo-generator-feed

便于RSS订阅

$ cd ~/Desktop/Joe

$ npm install hexo-generator-feed --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

Addition

常用指令

$ hexo server

$ hexo generate

$ hexo deploy

可以简写成

$ hexo s

$ hexo g

$ hexo d

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

$ hexo d -g

开启你的美妙Blog之旅吧!