前言

本文将介绍如何免费搭建一个博客。
关于博客的作用：

博客首先是为自己服务的，自己的读书笔记，想法都可以往上面写，好记性不如烂笔头，很多时候一些技术代码、命令行忘记的时候，都可以到自己博客上去找，因为知道自己记过。
你在写代码过程中一定会曾经解决某些问题，这些问题在网上不太容易找到解决方案，那么你就可以写写你的解决过程，对别人可能会有帮助的。
关于某些技术的分享

Hexo

认识hexo

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。支持直接推送到GitHub Pages线上使用，分页（子站）采用其他repo的gh-pages分支作为网页储存空间，简单易懂。

特性

-风一般的速度
Hexo基于Node.js，支持多进程，几百篇文章也可以秒生成。
-流畅的撰写
支持GitHub Flavored Markdown和所有Octopress的插件。
-扩展性
Hexo支持EJS、Swig和Stylus。通过插件支持Haml、Jade和Less。

Github

首先了解下git：
Git是一个开源的分布式版本控制系统，用以有效、高速的处理从很小到非常大的项目版本管理。
Git是Linux创始人 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。
GitHub是一个利用Git进行版本控制、专门用于存放软件代码与内容的共享虚拟主机服务。它由GitHub公司（曾称Logical Awesome）的开发者Chris Wanstrath、PJ Hyett和Tom Preston-Werner使用Ruby on Rails编写而成。
事实上已经成为了世界上最大的代码存放网站和开源社区。

GitHub通常用于软件开发，还支持以下格式和功能：

文档：包括自动生成的、采用类Markdown语言的README文件
问题追踪系统（同时可用于功能需求）
Wiki
GitHub Pages支持用户通过软件仓库创建静态网站或静态博客
任务列表
可视化的地理位置分析
预览3D渲染文件。预览功能通过WebGL和Three.js实现。
预览Photoshop的PSD文件，甚至可以比较同一文件的不同版本

我们这里使用的就是github pages，这个项目是给开发者建立一个私人页面，上面用来分享新颖的想法和自己写的代码，而且最主要的是，这个是免费而且没有空间流量限制的。

注册github

进入github官网注册账号。

创建仓库

成功注册后，在这里创建仓库。

这个新仓库就将是存放你即将拥有的博客的地方。

注意你的仓库名不能随便取，这样会导致github混乱，取名的格式应该为“用户名.github.io”
例如我的用户名geekdoe，仓库名为geekdoe.github.io。

安装部署

安装Git

Windows下请下载并安装git
作用：把本地的hexo代码提交到github上去。

安装Node.js

点击Node.js 下载。
作用：hexo运行环境，用来创建hexo博客框架。

安装Hexo

运行环境安装玩以后，下面就进入正题了。
安装前先介绍几个hexo常用的命令,#后面为注释。


hexo g   #完整命令为hexo generate,用于生成静态文件
hexo s   #完整命令为hexo server,用于启动服务器，主要用来本地预览
hexo d   #完整命令为hexo deploy,用于将本地文件发布到github上
hexo n   #完整命令为hexo new,用于新建一篇文章
hexo clean   #清除生成的文件

安装很简单，在任意位置右键看到Git Bash Here。
打开git命令窗口，输入
npm install -g hexo

安装完成后，根据自己喜好建立目录（如F:\hexo），进入目录右键Git Bash Here，打开命令窗口输入：
hexo init

Hexo 即会自动在目标文件夹建立网站所需要的所有文件。
安装依赖包
npm install

新建完成后，指定文件夹的目录如下：

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

下面可以简单的查看一下效果，输入命令：
hexo s

然后用浏览器访问http://localhost:4000，应该能看到默认的效果了（自带主题landscape）。

部署到Github

本地环境搭建好以后，就该发布到互联网，让别人可以访问，我们选择github pages。
编辑全局配置文_config.yml(在F:\hexo下)。部署时，把下面的geekdoe都换成你的账号名。


deploy: 
  type: git
  repository: git@github.com:geekdoe/geekdoe.github.io.git
  branch: master

注：上面是SSH方式的配置，https方式要把url换成https://github.com/imwillxue/imwillxue.github.io.git。
如果你是第一次使用Github或者是已经使用过，但没有配置过SSH，则可能需要配置一下,方便以后push代码。

在Git Bash输入以下指令（任意位置点击鼠标右键），检查是否已经存在了SSH keys。
ls -al ~/.ssh
如果不存在就没有关系，如果存在的话，可以直接删除.ssh文件夹里面所有文件。输入以下指令（邮箱就是你注册Github时候的邮箱）
ssh-keygen -t rsa -C "wxcdoe@gmail.com"
回车，出现提示让你输入的时候直接回车就行了。

之后找到用户目录下.ssh文件夹，打开id_rsa.pub文件，复制里面的内容。

打开github网页找到右上角setting，进去点SSH keys，新建一个SSH。

回到控制台输入测试命令。
ssh -T git@github.com
之后会提示连接成功，第一次连可能会警告，输入yes就行了，然后提示连接成功。

配置好以后就可以push到github了，输入命令：

hexo generate
hexo deploy

第一次hexo d可能会报错：ERROR Deployer not found:git，需要安装一下hexo-deployer-git这个插件：
npm install hexo-deployer-git --save
安装好了继续执行hexo d部署命令，就可以访问了。我的是geekdoe.github.io。
需要输入注册邮箱和用户名


git config --global user.email "wxcdoe@gmail.com"
git config --global user.name "geekdoe"

发表文章

输入命令新建一篇文章：
hexo n "文章名字"

打开F:\hexo\source_posts中新建的文章名字.md文件，我用的Notepad++。


title: 文章名字   #标题
date: 2016-08-30 22:06:012   #发表日期
categories: blog   #文章类别
tags: [文章,随笔]   #文章标签
#这里是正文，用markdown写，你可以选择写一段显示在首页的简介后，加上，在之前的内容会显示在首页，
之后的内容会被隐藏，当游客点击Read more才能看到。

Markdown

Markdown 是一种轻量级的「标记语言」，它的优点很多，目前也被越来越多的写作爱好者，撰稿者广泛使用。看到这里请不要被「标记」、「语言」所迷惑，Markdown 的语法十分简单。常用的标记符号也不超过十个，这种相对于更为复杂的HTML 标记语言来说，Markdown 可谓是十分轻量的，学习成本也不需要太多，且一旦熟悉这种语法规则，会有一劳永逸的效果。
Markdown 语法说明 (简体中文版)

NexT主题

在Hexo中有两份主要的配置文件，其名称都是config.yml。其中，一份位于站点根目录下，主要包含Hexo本身的配置；另一份位于主题目录下，这份配置有主题作者提供，主要用于配置主题相关的选项。
为了描述方便，在以下说明中，将前者称为站点配置文件，后者称为主题配置文件。

安装NexT

具体安装非常简单，你可以直接下载将文件拷贝到hexo下themes目录里，也可以在hexo目录下右键git bash通过命令：
git clone https://github.com/iissnan/hexo-theme-next themes/next
next主题会自动下载到themes目录下。

启用主题

与所有 Hexo 主题启用的模式一样。当克隆/下载完成后，打开站点配置文件，找到theme字段，并将其值更改为next。
theme: next
然后可以验证一下，打开本地服务：
hexo s
浏览器输入http://localhost:4000。
NexT 默认的 Scheme —— Muse。

配置

首先我们看看站点配置文件的配置F:\hexo\_config.yml。


# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site 网站
title: 为学   #网站标题
subtitle: 天下事有难易乎？为之，则难者亦易矣；不为，则易者亦难矣。   #网站副标题
description: 天下事有难易乎？为之，则难者亦易矣；不为，则易者亦难矣。   #网站描述
author: willxue   #您的名字
language: zh-CN   #网站使用的语言
timezone:           #网站时区。Hexo 默认使用您电脑的时区

# URL 网址
## 如果您的网站存放在子目录中，例如 http://yoursite.com/blog，则请将您的 url 设为 http://yoursite.com/blog 并把 root 设为 /blog/。
url: http://willxue.top
permalink: :year/:month/:day/:title/    #生成文件名字的格式我改成blog/:title:year:month:day/
permalink_defaults:

# Directory 目录配置
source_dir: source   #源文件夹，这个文件夹用来存放内容。
public_dir: public   #公共文件夹，这个文件夹用于存放生成的站点文件。
tag_dir: tags   #标签文件夹
archive_dir: archives   #归档文件夹
category_dir: categories   #分类文件夹
code_dir: downloads/code    #nclude code 文件夹
i18n_dir: :lang   #国际化（i18n）文件夹
skip_render:   #跳过指定文件的渲染，您可使用 glob 表达式来匹配路径。

# Writing 文章
new_post_name: :title.md   # 新建文章默认文件名
default_layout: post   # 默认布局
titlecase: false   # Transform title into titlecase
external_link: true   # 在新标签中打开一个外部链接，默认为true
filename_case: 0   #转换文件名，1代表小写；2代表大写；默认为0，意思就是创建文章的时候，是否自动帮你转换文件名，默认就行，意义不大。
render_drafts: false   #是否渲染_drafts目录下的文章，默认为false
post_asset_folder: false   #启动 Asset 文件夹
relative_link: false   #把链接改为与根目录的相对位址，默认false
future: true   #显示未来的文章，默认false
highlight:   #代码块的设置 
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:

# Category & Tag   分类和标签的设置
default_category: uncategorized   #默认分类
category_map:   #分类别名
tag_map:   #标签别名

# 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

# Pagination 分页
## Set per_page to 0 to disable pagination
per_page: 10   #每页显示的文章量 (0 = 关闭分页功能)
pagination_dir: page   #分页目录

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

feed:
  type: atom       #feed 类型 (atom/rss2)
  path: atom.xml   #rss 路径
  limit: 20        #在 rss 中最多生成的文章数(0显示所有)

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy: 
type: git 
  repository: https://github.com/imwillxue/imwillxue.github.com.git 
  branch: master

上面有注释，看完也基本没什么问题了，这些基本上不用怎么改，个性化主要还是要修改主题的配置文件F:\hexo\themes\next\_config.yml。

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

# Place your favicon.ico to /source directory.
favicon: /favicon.ico   #站标  可以放在hexo文件夹下的/source里

# Set default keywords (Use a comma to separate)
keywords: "为学,willxue,willxue.top"  #网站关键字

# 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:  #rss这里不设置 引文站点配置文件已经配置了 需要安装插件

# Specify the date when the site was setup
since: 1990  #网站时间 从xx开始 类似 1990-2016


# ---------------------------------------------------------------
# Menu Settings
# ---------------------------------------------------------------

# When running hexo in a subdirectory (e.g. domain.tld/blog)
# Remove leading slashes ( "/archives" -> "archives" )
menu: #菜单路径设置 如果hexo在二级目录放置要去掉/
  home: /
  archives: /archives #归档
  tags: /tags #标签
  categories: /categories  #分类
  about: /about #关于我
  commonweal: /404.html  #公益404


# 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.
#   When an question mask icon presenting up means that the item has no mapping icon.
menu_icons:  #icon图标
  enable: true
  # Icon Mapping.
  home: home
  about: user
  categories: th
  tags: tags
  archives: archive
  commonweal: heartbeat




# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

# Schemes  #next的三个scheme
#scheme: Muse
#scheme: Mist
scheme: Pisces



# ---------------------------------------------------------------
# Sidebar Settings
# ---------------------------------------------------------------


# Social links   #社交链接
social:
  GitHub: 
  Weibo:
  Others:

# Social Icons  #社交的图标
social_icons:
  enable: true
  # Icon Mappings
  GitHub: github
  Twitter: twitter
  Weibo: weibo


# Sidebar Avatar
# in theme directory(source/images): /images/avatar.jpg
# in site  directory(source/uploads): /uploads/avatar.jpg
# default : /images/default_avatar.jpg
avatar: http://7xrz9n.com1.z0.glb.clouddn.com/logo.png #头像


# TOC in the Sidebar  #文章自动显示目录
toc:
  enable: true

  # Automatically add list number to toc.  #目录是否自动显示数字序号
  number: false


# 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 toggle icon.
  display: post
  #display: always
  #display: hide
  #display: remove



# ---------------------------------------------------------------
# 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

# Automatically scroll page to section which is under  mark.
scroll_to_more: true

# Automatically Excerpt
auto_excerpt:
  enable: false
  length: 150

# Use Lato font
use_font_lato: true



# ---------------------------------------------------------------
# Third Party Services Settings
# ---------------------------------------------------------------

# MathJax Support
mathjax:


# Swiftype Search API Key
#swiftype_key:

# Baidu Analytics ID
#baidu_analytics:

# Duoshuo ShortName
duoshuo_shortname: imwillxue

# 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: true
  user_id: 6262178932196377345
  admin_nickname: 神


# Facebook SDK Support.
# https://github.com/iissnan/hexo-theme-next/pull/410
facebook_sdk:
  enable: false
  app_id:       #
  fb_admin:     #
  like_button:  #true
  webmaster:    #true


# Show number of visitors to each article.
# You can visit https://leancloud.cn get AppID and AppKey.
leancloud_visitors:
  enable: true
  app_id: QImiFijLSOHYufsazlBVlwLg-gzGzoHsz
  app_key: AMcYaNHy9Y5OdH42k0d4uSED


# 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: true

## 文章末尾是否显示打赏按钮
donate: 
  enable: true
  text: Enjoy it ? Donate me !  欣赏此文？求鼓励，求支持！
  alipay: 
  wechat: 


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

# Motion
use_motion: true

# Fancybox
fancybox: true

# Static files
vendors: vendors
css: css
js: js
images: images

# Theme version
version: 0.5.0

具体的配置可以参考官方文档，写的很详细。

添加菜单项

这里以添加“关于”(about)菜单项为例

在命令行里面输入：
hexo new page "about"
然后你会发现source里面多了个目录about，里面有个index.md。其实你也可以手动建立。页面的格式和文章一样。
接着把链接加上，themes/<theme_name>/_config.yml里面的menu一项，添加一行About: /about。
注：tags菜单项属性添加type: "tags",其他菜单项同理。

插件安装

多说

打开多说 ,点我要安装，登陆多说（微博或qq快捷登录），创建站点
更多配置请看官网。

菜单项取消评论栏

以”about”为例
修改about文件夹中的index.md文件，添加comments: false 关闭这个页面的多说或者 Disqus 评论。

RSS和sitemap

安装RSS和sitemap插件

npm install hexo-generator-feed --save
npm install hexo-generator-sitemap --save

开启RSS和sitemap功能，编辑站点配置文件hexo/_config.yml

feed: 
type: atom  #feed 类型 
path: atom.xml  #rss 路径 
limit: 20  #在 rss 中最多生成的文章数(0显示所有)

参考资料

Next主题官网

踢树叶

Hexo+Github 搭建独立博客

前言