Nodejs+hexo github+Netlify

2017-03-03 Service

github 部署 hexo 备忘

hexo官网：https://hexo.io/zh-cn/

必要配置

GitHub Pages

GitHub下创建仓库命名为:username.github.io
User Pages 与 Project Pages的区别: https://help.github.com/articles/user-organization-and-project-pages/

Git

GitHub Desktop: https://desktop.github.com/
Git - 关于版本控制
Git - 初次运行 Git 前的配置
Setting your email in Git: https://help.github.com/articles/setting-your-email-in-git/
Keeping your email address private: https://help.github.com/articles/keeping-your-email-address-private/
Generating SSH keys: https://help.github.com/articles/generating-ssh-keys/

Hexo

Homebrew

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

node.js

1
2
3

$ brew update
$ brew install node
$ node -v

1 2	$ sudo npm install npm -g $ npm -v

Hexo

1	$ npm install -g hexo-cli

搭建方法

Hexo 官方文档: https://hexo.io/zh-cn/docs/

1	$ hexo init blog

$ cd blog

1	$ npm install

1	$ hexo generate

1	$ hexo server

主题

部署

_config.yml：

deploy:
  type: git
  repo: 对应仓库的SSH地址（可以在GitHub对应的仓库中复制）
  branch: 分支（User Pages为master，Project Pages为gh-pages）

安装插件，使Hexo部署到GitHub：

1	$ npm install hexo-deployer-git --save

执行部署：

1 2	$ hexo generate $ hexo deploy

访问：username.github.io

hexo常用命令

1
2
3

npm install hexo -g #安装  
npm update hexo -g #升级  
hexo init #初始化

简写

hexo n "我的博客" == hexo new "我的博客" #新建文章 hexo p == hexo publish hexo g == hexo generate #生成 hexo s == hexo server #启动服务预览 hexo d == hexo deploy #部署

服务器

hexo server #Hexo 会监视文件变动并自动更新，您无须重启服务器。 hexo server -s #静态模式 hexo server -p 5000 #更改端口 hexo server -i 192.168.1.1 #自定义 IP

hexo clean #清除缓存网页正常情况下可以忽略此条命令 hexo g #生成静态网页 hexo d #开始部署

监视文件变动

hexo generate #使用 Hexo 生成静态文件快速而且简单 hexo generate --watch #监视文件变动

完成后部署

1
2
3

两个命令的作用是相同的
hexo generate --deploy
hexo deploy --generate

hexo deploy -g hexo server -g

草稿

hexo publish [layout] <title>

模版

hexo new "postName" #新建文章 hexo new page "pageName" #新建页面 hexo generate #生成静态页面至public目录 hexo server #开启预览访问端口（默认端口4000，'ctrl + c'关闭server） hexo deploy #将.deploy目录部署到GitHub

hexo new [layout] <title> hexo new photo "My Gallery" hexo new "Hello World" --lang tw

变量	描述
layout	布局
title	标题
date	文件建立日期

title: 使用Hexo搭建个人博客
layout: post
date: 2014-03-03 19:07:43
comments: true
categories: Blog
tags: [Hexo]
keywords: Hexo, Blog
description: 生命在于折腾，又把博客折腾到Hexo了。给Hexo点赞。

模版（Scaffold）

hexo new photo "My Gallery"

变量	描述
layout	布局
title	标题
date	文件建立日期

设置文章摘要

以上是文章摘要  以下是余下全文

写作

hexo new page <title>

hexo new post <title>

变量	描述
:title	布局
:year	建立的年份（4 位数）
:month	建立的月份（2 位数）
:i_month	建立的月份（去掉开头的零）
:day	建立的日期（2 位数）
:i_day	建立的日期（去掉开头的零）

推送到服务器上

hexo n #写文章 hexo g #生成 hexo d #部署 #可与hexo g合并为 hexo d -g

报错

找不到git部署

ERROR Deployer not found: git

解决方法

npm install hexo-deployer-git --save

部署类型设置git

hexo 3.0 部署类型不再是 github，/_config.yml 中修改

# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:
  type: git
  repository: git@***.github.com:***/***.github.io.git
  branch: master

xcodebuild

xcode-select: error: tool 'xcodebuild' requires Xcode, but active developer directory '/Library/Developer/CommandLineTools' is a command line tools instance

npm install bcrypt

RSS不显示

安装RSS插件

npm install hexo-generator-feed --save

开启RSS功能

编辑hexo/_config.yml，添加如下代码：

1	rss: /atom.xml #rss地址默认即可

使用 Netlify 持续集成

Netlify is a unified platform that automates your code to create high-performant, easily maintainable sites and web apps.

Netlify 与 Travis CI 等等都是持续集成工具, 但是它更加关注前端, 或者说网站或者 web app 的持续集成与持续部署, 这也是它与其他持续集成工具最大的区别. 我们目前对于 Netlify 的使用也非常简单, 但是这是其他持续集成工具没有的.

优化

添加robots.txt

robots.txt是一种存放于网站根目录下的ASCII编码的文本文件，它的作用是告诉搜索引擎此网站中哪些内容是可以被爬取的，哪些是禁止爬取的。robots.txt应该放在站点目录下的source文件中，网站生成后在网站的根目录(站点目录/public/)下。

我的robots.txt文件内容如下

User-agent: *
Allow: /
Allow: /archives/
Allow: /categories/
Allow: /about/

Disallow: /vendors/
Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Disallow: /vendors/
Disallow: /fancybox/

添加sitemap

Sitemap即网站地图，它的作用在于便于搜索引擎更加智能地抓取网站。最简单和常见的sitemap形式，是XML文件，在其中列出网站中的网址以及关于每个网址的其他元数据（上次更新时间、更新的频率及相对其他网址重要程度等）。

Step 1: 安装sitemap生成插件

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

Step 2: 编辑站点目录下的_config.yml，添加

# hexo sitemap网站地图
sitemap:
path: sitemap.xml
baidusitemap:
path: baidusitemap.xml

Step 3: 在robots.txt文件中添加

1 2	Sitemap: https://jiangxin.info/sitemap.xml Sitemap: https://jiangxin.info/baidusitemap.xml

NEXT 返回顶部按钮百分比显示

1 2	# Scroll percent label in b2t button scrollpercent: true

创建分类页面

添加一个分类页面，并在菜单中显示页面链接。

新建一个页面，命名为 categories 。命令如下：

1	hexo new page categories

编辑刚新建的页面，将页面的类型设置为 categories ，主题将自动为这个页面显示所有分类。

1
2
3

title: 分类
date: 2014-12-22 12:39:04
type: "categories"

注意：如果有启用多说或者 Disqus 评论，默认页面也会带有评论。需要关闭的话，请添加字段 comments 并将值设置为 false，如：

title: 分类
date: 2014-12-22 12:39:04
type: "categories"
comments: false

在菜单中添加链接。编辑主题的 _config.yml ，将 menu 中的 categories: /categories 注释去掉，如下:

menu:
  home: /
  categories: /categories
  archives: /archives
  tags: /tags

添加添加RSS

切换到Blog文件夹（hexo init的文件夹）下

cd [Blog]

安装Hexo插件

1	npm install --save hexo-generator-feed

安装成功之后，编辑Blog/_config.yml文件，在文件末尾添加

1
2
3

# Extensions
## Plugins: http://hexo.io/plugins/
plugins: hexo-generate-feed

配置主题_config.yml文件，command+f搜索rss，在后面加上/atom.xml

# 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: /atom.xml //注意：有一个空格

之后，终端输入hexo s查看效果

hexo s

置顶文章

1 2	$ npm uninstall hexo-generator-index --save $ npm install hexo-generator-index-pin-top --save

在文章的Front-matter中添加top: true即可置顶。再添加sticky: [number]可以实现在文章标题前增加一个顶针图标，这是NexT主题原先置顶方案（已被废除）的残留。[number]为一个具体数字。扩展：设置top [num]：数字越大置顶为止越前

域名

待填充