例子:https://aquarius1993.github.io/blog/

仓库:https://github.com/Aquarius1993/blog

(前提是已经安装Xcode和git)

1. 安装

npm install -g hexo

2. 创建项目

hexo init nodejsHexoBlog

3. 进入项目,创建新笔记

hexo new 'Mac 前端环境配置'

4. 启动,在 localhost:4000 打开

hexo server

5. 发布到Github
  1). 静态化处理

hexo generate || hexo g

  2). 发布
    (1). 在Github上新建一个项目(同名)
    (2). 编辑全局配置文件: _config.yml,找到url,设置url和root,deploy部分,设置Github的项目地址

url: https://github.com/Aquarius1993/nodeHexoBlog.github.io
root: /nodeHexoBlog.github.io
deploy:
type: git
repo: git@github.com:Aquarius1993/nodeHexoBlog.github.io.git

    (3). 安装hexo-deployer-git插件

npm install hexo-deployer-git --save

    (4). 进行命令行部署

hexo deploy || hexo d

  3). 发布之后的修改只需

hexo clean
hexo g
hexo d

6. 更换主题(以pacman为例)
  1. 下载主题

git clone https://github.com/A-limon/pacman.git themes/pacman

  2. 更改项目根目录下的_config.yml文件

theme: pacman

  3. 更新pacman主题

cd themes/pacman
git pull

  4. 更改pacman的_partial/layout/pacman/header.ejs,不然导航栏的链接地址错误

<nav class="animated">
<ul>
<% for (var i in theme.menu){ %>
<li>
<a href="<%- url_for(theme.menu[i]) %>"><%= i %></a></li>
<% } %>
<li>
........

  5. 加评论功能,修改pacman的_config.yml文件

duoshuo:
enable: true ## duoshuo.com
short_name: ## duoshuo short name.

  

7. 使用swiftype插件实现搜索

1. [注册swiftype](https://app.swiftype.com/users/sign_up)
2. create a search engine
3. install Search ----> Search Field,修改保存,复制一下框里的代码,待会用

4. 返回install Search,点击 Active Swiftype,复制一下框里的代码,待会用

5. pacman主题下的_config.yml文件在末尾添加如下代码:

swift_search:
enable: true

6. 在项目的source目录下建立一个search文件夹,里面新建一个index.md,再写上如下代码

layout: search
title: search
----  

7. 在pacman\layout\_partial目录下的header.ejs的

<% if	(theme.google_cse&&theme.google_cse.enable){ %>
<form class="search" action="<%- config.root %>search/index.html" method="get" accept-charset="utf-8">
<label>Search</label>
<input type="text" id="search" autocomplete="off" name="q" maxlength="20" placeholder="<%= __('search') %>" />
</form>

<% } else { %>
<form class="search" action="//google.com/search" method="get" accept-charset="utf-8">
<label>Search</label>
<input type="text" id="search" name="q" autocomplete="off" maxlength="20" placeholder="<%= __('search') %>" />
<input type="hidden" name="q" value="site:<%- config.url.replace(/^https?:\/\//, '') %>">
</form>
<% } %>

之间添加

<% }else if	(theme.swift_search&&theme.swift_search.enable){ %>
<form class="search" action="<%- config.root %>search/index.html" method="get" accept-charset="utf-8">
<label>Search</label>
图一中复制的代码  

8. 用以下代码覆盖pacman\layout\_partial目录下的search.ejs

<% if(theme.swift_search.enable) { %>
<div id="container" class="page">
<div id="st-results-container" style="width:80%">正在加载搜索结果,请稍等。</div>
<style>.st-result-text {
background: #fafafa;
display: block;
border-left: 0.5em solid #ccc;
-webkit-transition: border-left 0.45s;
-moz-transition: border-left 0.45s;
-o-transition: border-left 0.45s;
-ms-transition: border-left 0.45s;
transition: border-left 0.45s;
padding: 0.5em;
}
@media only screen and (min-width: 768px) {
.st-result-text {
padding: 1em;
}
}
.st-result-text:hover {
border-left: 0.5em solid #ea6753;
}
.st-result-text h3 a{
color: #2ca6cb;
line-height: 1.5;
font-size: 22px;
}
.st-snippet em {
font-weight: bold;
color: #ea6753;
}</style>
图二复制的代码
<% }
%>

9. 打开pacman\layout\_partial目录下的footer.ejs,在script标签结束之前添加一开始拷贝图二复制的代码.

hexo部署Github博客的更多相关文章

  1. 使用Hexo搭建github博客步骤,超简便

    categories: 工具 tags: git Windows 搭建博客 你只需要node环境和一个github账号就可以开工啦! 本教程适合于Windows环境,Mac教程也大同小异 利用hexo ...

  2. 使用Hexo搭建GitHub博客(2018年Mac版)

    关于本文 本文仅记录自己学习搭建Hexo博客之时,搭建过程中掉坑的历程总结,对零基础起步的观众朋友可能缺乏某些基础技术的指导,请优先食用下述两篇优质教程: [2018更新]小白独立搭建博客-Githu ...

  3. ubuntu上部署github博客,利用hexo

    安装Node.js三种安装方法,前两种是我安装过的,后一种是 Google 到的. #####①:apt-get 安装在 终端 输入 nodejs 或者 npm ,如果没有安装会提示你进行安装,命令如 ...

  4. Linux下使用Hexo搭建github博客

    找到一篇靠谱的博客,备份一下: ---------以下原文------------------ Nodejs安装 因为hexo是基于nodejs的应用,所以要先安装nodejs才可以.我这里以Ubun ...

  5. 使用hexo创建github博客

    前言 前面说过,之前用wordpress辛辛苦苦搭建的博客,因为服务器和域名的问题挂掉了.后来发现github也能够搭建自己的博客,不需要去关心主机域名的问题,而且还能使用Markdown来写博客,就 ...

  6. 转:20分钟教你使用hexo搭建github博客

    注册Github账号 这里我们就不多讲了,小伙伴们可以点击这里,进入官网进行注册. 创建仓库 图片来自Github 登录账号后,在Github页面的右上方选择New repository进行仓库的创建 ...

  7. 使用hexo搭建github博客

    Win7系统已经安装了node.js和npm npm install -g hexo-cli 全局安装hexo客户端 hexo init blog 在喜欢的位置初始化blog目录 cd blog np ...

  8. 基于Hexo搭建个人博客网站

      ## 准备工作 首先下载[nodejs](https://nodejs.org/en/download/),一路next安装即可.验证是否安装成功: ```bash node -v # 输出 v1 ...

  9. 使用Hexo搭建个人博客并部署到GitHub或码云上全过程

    一.前言 如上图所示:GitHub有Github Pages,而码云也有码云 Pages 1.Github Pages或Gitee Pages是什么呢? Github Pages或者Gitee Pag ...

随机推荐

  1. 关于Java -cp引用jar是否支持通配符

    其实是支持的: JDK6支持java -cp后面跟通配符'*',试了一下发现还是需要注意: 错误方式(Wrong way): java  -cp /data/apps/lib/*.jar com.ch ...

  2. python sklearn.cross_validation 模块导入失败

    参考链接: https://blog.csdn.net/Jae_Peng/article/details/79277920 解决办法: 原来在 cross_validation 里面的函数都放在 mo ...

  3. The SO_REUSEPORT socket option

    One of the features merged in the 3.9 development cycle was TCP and UDP support for the SO_REUSEPORT ...

  4. PMP第一章:引论

    项目是为创造独特的产品,服务或成果而进行的临时性的工作. 项目的临时性是指项目有明确的起点和终点. 项目旨在推动组织从一个状态(当前状态)转到另一个状态(将来状态),从而达成特定目标. 项目管理就是将 ...

  5. emmet常用指令组合

    emmet的应用   1.生成html(需要先将文件命名为.html后缀) !+tab,html:5+tab   2.生成meta utf meta:utf+tab   3.生成meta viewpo ...

  6. nodejs中mysql断线重连

    之前写了个小程序Node News,用到了MySQL数据库,在本地测试均没神马问题.放上服务器运行一段时间后,偶然发现打开页面的时候页面一直处于等待状态,直到Nginx返回超时错误.于是上服务器检查了 ...

  7. [spring]Bean注入——在XML中配置

    Bean注入的方式有两种: 一.在XML中配置 属性注入 构造函数注入 工厂方法注入 二.使用注解的方式注入@Autowired,@Resource,@Required 本文首先讲解在XML中配置的注 ...

  8. JS正则表达式入门,看这篇就够了

    前言 在正文开始前,先说说正则表达式是什么,为什么要用正则表达式?正则表达式在我个人看来就是一个浏览器可以识别的规则,有了这个规则,浏览器就可以帮我们判断某些字符是否符合我们的要求.但是,我们为什么要 ...

  9. 值类型的TryParse

    值类型(Struct(如:DateTime).基本类型(如:double).枚举类型)的TryParse方法,通常可使用该方法将“字符串”转换为当前类型,并out出.比如:日期格式的字符串   转换为 ...

  10. 网页上播放音频、视频Mp3,Mp4

    昨天在处理网页上播放音频mp3,视频mp4上用了一天的时间来比较各种方案,最终还是选择了HTML5的 标签,谷歌浏览器.IE浏览器对标签的支持都很好,火狐上需要安装quicktime插件,效果比较差. ...