2016-12-28

Hexo + Github-Pages 从零开始搭建个人博客

经过各种找资料，踩过各种坑，终于搭建好了个人博客，安装hexo是3.2.2版本，hexo不同的版本，配置稍微有些不一样。由于本人使用的是Mac，下面的都是针对Mac的，Windows下的配置类似。

Hexo

hexo是一个基于Node.js的简单，快速，强大的静态博客框架,可以方便的生成静态网页托管在github上，作者是来自台湾的 Tommy Chen。特点：

不可思议的快速 ─ 只要一眨眼静态文件即生成完成
支持 Markdown
仅需一道指令即可部署到 GitHub Pages 和 Heroku
已移植 Octopress 插件
高扩展性、自订性
兼容于 Windows, Mac & Linux
配置环境

1.安装Node.js ,用来生成静态页面的。到Node.js官网下载相应平台的最新版本，一路安装即可。npm是随同Node.js一起安装的包管理工具，能解决Node.js代码部署上的很多问题

2.安装Git，把本地的hexo内容提交到github上去，需要和Hexo建立连接，下面会有说到

3.申请GitHub,是用来做博客的远程创库、域名、服务器之类的,github账号没有的话直接申请就行了，跟一般的注册账号差不多，SSH Keys，看你自己了，可以不配制，不配置的话以后每次对自己的博客有改动提交的时候就要手动输入账号密码，配置了就不需要了，怎么配置我就不多说了，网上有很多教程

安装Hexo

Node和Git都安装好后，即可开始安装Hexo 具体可以查看Hexo中文文档

1	$ npm install -g hexo

这里可能安装失败，可能权限不够，在命令前加 sudo。
安装成功以后,就可以创建blog。首先创建一个文件夹,如MyBlog,这是你的博客根目录，用于存放hexo的配置文件,然后进入MyBlog里初始化Hexo。

1	$ hexo init

需要等待一段时间，成功后会显示：INFO Start blogging with Hexo! 这时的MyBlog 目录下有以下这些文件

.
├── _config.yml
├── node_modules
├── package.json
├── source
├── scripts
├── scaffolds
|   ├── drafts
|   ├── posts
|   └── page
└── themes

_config.yml：全局配置文件，大多数的设置都在这里 配置项都需要空一格
node_modules: node的一些模块组件
package.json：应用程序数据，指明hexo的版本等信息，类似于一般软件中的关于按钮
scaffolds：layout模板文件目录，其中的md文件可以添加编辑 drafts：草稿文章 posts：发布文章
scripts：扩展脚本目录，这里可以自定义一些javascript脚本
source：文章源码目录，该目录下的markdown和html文件均会被hexo处理。该页面对应repo的根目录，404文件、favicon.ico文件，CNAME文件等都应该放这里，该目录下可新建页面目录
themes：主题文件目录

_config.yml 用到的比较多

# Hexo Configuration
 ## Docs: https://hexo.io/docs/configuration.html
 ## Source: https://github.com/hexojs/hexo/
 # Site 站点信息:定义标题,作者,语言
 title: 这里是你博客的标题
 subtitle: 子标题
 description: 个人介绍
 author: 笔名
 language: zh_CN 
 timezone: Asia/Shanghai
 # URL Url访问路径
 ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
 url: http://yoursite.com
 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: 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
 pagination_dir: page
 # Extensions   插件和皮肤:换皮肤,安装插件
 ## Plugins: https://hexo.io/plugins/
 ## Themes: https://hexo.io/themes/
 theme: landscape 默认主题
 # Deployment   部署配置:github发布,type类型为git
 ## Docs: https://hexo.io/docs/deployment.html
 deploy:
 type:

接下来就是配置_config.yml，以及一些 Hexo 指令操作

Hexo常用命令

hexo new postName       #新建文章 在source/_posts 下生成
hexo new page pageName  #新建页面 在source/pageName 下生成
hexo deploy             #将.deploy目录部署到GitHub 简写指令：hexo d 
hexo generate           #生成静态页面至public目录 简写指令：hexo g 
hexo server             #开启预览访问端口（默认端口4000，'ctrl + c'关闭server）简写指令hexo s 
hexo clean              #清除所有静态页面和缓存数据

默认在source/_posts 存在了hello-world.md 可以直接输入 hexo generate 生成静态网页
这时目录下多了 public 这是生成静态网页内容目录。可以输入 hexo clean 清除

生成静态网页后，就能启动本地服务，可以进行文章预览调试，输入 hexo server 默认是4000端口，在服务器启动期间，Hexo 会监视文件变动并自动更新，您无须重启服务器。如果是第二次会提示，Port 4000 has been used. Try other port instead 这时可以输入指定的端口 hexo server －p xxxx 如 7681 输出：

1 2	INFO Start processing INFO Hexo is running at http://localhost:7681/. Press Ctrl+C to stop.

浏览器输入http://localhost:7681 就可以预览页面

屏幕快照 2016-12-28 下午1.53.15.png

这是正常的情况，可能中间会有一些错误提示

Hexo Server 错误

Hexo 3.0 把服务器独立成了个别模块，您必须先安装 hexo-server才能使用，需要执行命令：

1	$ npm install hexo-server --save

页面显示白板和Cannot GET

原因：

由于2.6以后就更新了，我们需要手动配置些东西，我们需要输入下面三行命令，看情况添加 sudo

1	$ npm install hexo-renderer-ejs --save

1	$ npm install hexo-renderer-stylus --save

1	$ npm install hexo-renderer-marked --save

部署到github

在github建立与你用户名对应的仓库，仓库名必须为【your_user_name.github.io】。然后建立关联

安装 hexo-deployer-git

1	npm install hexo-deployer-git --save

在 _config.yml 配置文件中修改参数,在文件最下面，一个正确的部署配置中至少要有 type 参数，例如：

type: git
repo: <repository url> 库（Repository）地址
branch: [branch] 分支名称。如果您使用的是 GitHub 或 GitCafe 的话，程序会尝试自动检测。
message: [message] 自定义提交信息 (默认为 Site updated: {{ now('YYYY-MM-DD HH:mm:ss') }})

Hexo 提供了快速方便的一键部署功能，让您只需一条命令就能将网站部署到服务器上。

1	hexo deploy

执行这条命令后会生成一个隐藏文件夹.deploy_git ,可以输入ls -a 打开查看，hexo会将生成的public文件夹复制到.deploy_git文件夹中

文章

sources/_posts 目录下打开默认的Hello－Word.md,文章一般头部格式：

title: xxxx                    #文章的标题，这个才是显示的文章标题，其实文件名不影响
date: 2015-09-01 20:33:26      #用命令会自动生成，也可以自己写，所以文章时间可以改
categories: xxx                #自定义文章的分类
tags: xxx                      #tag，为文章添加标签，方便搜索
 ---

注意点

如果在博客文章列表中，不想全文显示，可以增加 , 后面的内容就不会显示在列表。
Markdown标题标准写法写法需要在”#”和后面字符之间加一个空格，如果不加空格有些引擎就解析不了

Markdown

Windows下可以使用 MarkdownPad2
Mac 建议使用 Mou 这款免费且十分好用的 Markdown 编辑器
Web 端上，推荐简书这款产品
插件
可以在package.json中查看已经安装的插件

添加RSS

1	$ npm install hexo-generator-feed --save

然后，到博客目录 /public 下，会有atom.xml生成再到_config.yml 里配置一下

feed:
     type: atom      #type 表示类型, 是 atom 还是 rss2.
     path: atom.xml  #path 表示 Feed 路径
     limit: 20       #limit 最多多少篇最近文章

添加Sitemap

Sitemap 的提交主要的目的，是要避免搜索引擎的爬虫没有完整的收录整个网页的内容，所以提交 Sitemap 是能够补足搜索引擎的不足，进而加速网页的收录速度，达到搜寻引擎友好的目的。

hexo-generator-sitemap

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

同样在_config.yml 里配置一下

1
2
3

sitemap:
    path: sitemap.xml
    #path 表示 Sitemap 的路径. 默认为 sitemap.xml.

对于国内用户还需要安装插件 hexo-generator-baidu-sitemap, 顾名思义是为百度量身打造的. 安装

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

然后在_config.yml里配置一下

1 2	baidusitemap: path: baidusitemap.xml

添加搜索

1	$ npm install hexo-generator-search

其他插件

Plugins·hexojs/hexo

主题

默认的是landscape，这里有大量的主题列表

安装喜欢的主题

1	$ git clone <repository> themes/themeName

需要在_config.yml 中更改theme: themeName 更改主题后需要重新 hexo g 生成页面
在主题的_config.yml文件里面可以修改头像，友情链接等等，配置需要展示的页面元素，一般里面都会有介绍

在Hexo中，默认使用的评论是国外的Disqus,不过因为国内的”网络环境”问题，我们改为国内的多说评论系统。
需要设置 short_name:字段，这个字段为你多说填写的站点名字，比如我的域名：chenao0727github.duoshuo.com，那么我的short_name: chenao0727github

404页面

GitHub Pages 自定义404页面非常容易，直接在根目录下创建自己的404.html就可以。但是自定义404页面仅对绑定顶级域名的项目才起作用，GitHub默认分配的二级域名是不起作用的，使用hexo server在本机调试也是不起作用的。

统计

因Google Analytics偶尔被墙，故国内用百度统计

最新的统计服务已经开放，两行代码轻松搞定，你可以直接使用：不蒜子

Title:Hexo + Github-Pages 从零开始搭建个人博客

Author:Chen Ao

Created:2016-12-28, 09:25:35

Updated:2016-12-28, 16:43:24

Full URL:http://ChenAo0727.github.io/2016/12/28/hexo/

License: "CC BY-NC-SA 4.0" Keep Link & Author if Distribute.