SERVICE 三月 03, 2017

nodejs+hexo github+Netlify

文章字数 14k 阅读约需 12 mins. 阅读次数 0

github 部署 hexo 备忘

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

必要配置

GitHub Pages

Git

Hexo

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
$ brew update
$ brew install node
$ node -v
$ sudo npm install npm -g
$ npm -v
$ npm install -g hexo-cli

搭建方法

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

$ hexo init blog
$ cd blog
$ npm install
$ hexo generate
$ hexo server

主题

部署

  • _config.yml:
deploy:
  type: git
  repo: 对应仓库的SSH地址(可以在GitHub对应的仓库中复制)
  branch: 分支(User Pages为master,Project Pages为gh-pages)
  • 安装插件,使Hexo部署到GitHub:
$ npm install hexo-deployer-git --save
  • 执行部署:
$ hexo generate
$ hexo deploy
  • 访问:username.github.io

hexo常用命令

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 #监视文件变动

完成后部署

两个命令的作用是相同的
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文件建立日期

设置文章摘要

以上是文章摘要 <!--more--> 以下是余下全文

写作

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,添加如下代码:

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

使用 Netlify 持续集成

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

NetlifyTravis 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生成插件

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文件中添加

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

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

# Scroll percent label in b2t button
scrollpercent: true

创建分类页面

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

  1. 新建一个页面,命名为 categories 。命令如下:
 hexo new page categories
  1. 编辑刚新建的页面,将页面的类型设置为 categories ,主题将自动为这个页面显示所有分类。
 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
  1. 在菜单中添加链接。编辑主题的 _config.yml ,将 menu 中的 categories: /categories 注释去掉,如下:
 menu:
   home: /
   categories: /categories
   archives: /archives
   tags: /tags

添加添加RSS

  1. 切换到Blog文件夹(hexo init的文件夹)下
cd [Blog]
  1. 安装Hexo插件
 npm install --save hexo-generator-feed
  1. 安装成功之后,编辑Blog/_config.yml文件,在文件末尾添加
# Extensions
## Plugins: http://hexo.io/plugins/
plugins: hexo-generate-feed
  1. 配置主题_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 //注意:有一个空格
  1. 之后,终端输入hexo s查看效果
hexo s

置顶文章

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

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

域名

待填充


0%