Hexo+Github pages折腾记

原创 2016年09月06日 16:30:01

如果时间可以静止,我希望就停在此刻。

前言

博主之前也有折腾wordpress和jekyll可对于一个前端er来说,wordpress让人没法尽兴,因为不知道该如何添加自己的代码。而jekyll就太麻烦了每一次都需要重新提交,而且样式也不是很丰富,简直就和鸡肋一般。食之无味,弃之可惜。

之前有听说过Hexo这个博客框架,但一直没时间给自己搭一个,其实平时也有注意到很多大牛的博客是很绚丽的,却不知道那就是Hexo。说干就干,历时一整天,踩坑无数,终于变成了博主想要的样子。放个链接Damonare的个人博客如果你也想要一个和博主一样的博客,那就继续看下去吧。

  • 博主系统Window7,搭建博客主题Yilia。下面记录博主搭建的整个过程。

git和github

  • 想搭建一个博客的应该大多数都是程序员吧,那么github账号应该是一定有的了。你要是实在清新脱俗到连个github账号也没有,不用担心,给你个外链Github,账号设置然后添加SSH,这样你之后输入hexo命令的时候就不用一次次输入密码了,关于如何注册github和添加SSH,这里需要提醒一点,github账号最好都是小写字母,不然容易解析错误,还有邮箱,尽量别用国内的邮箱,很容易出问题了,比如你git提交的贡献不被记录。
  • Git身为程序员给他应该是会用的吧。好吧假设你不会使用git和github给你个外链看这里

Hexo

  • 好的,现在你有了github和git了,也配置好了,那么就需要在github新建一个仓库了,

    这里写图片描述

    注意:这里的仓库名称要和你的username对应

  • Node安装

Node可以去官网下载,或是在国内下载,由于众所周知的原因,这里放一个nodejs.cn的链接
Node内置npm包,我们之后就可以打开node命令行使用npm进行安装一些依赖,如果觉得太慢,可以使用淘宝镜像cnpm

  • Hexo安装

好的,现在我们Node,git,github都弄好了,现在可以本地化一个hexo了,新建hexo文件夹,任意盘下都可以,然后命令行执行命令:

npm install hexo -g  #-g表示全局安装, npm默认为当前项目安装

如果遇到错误:

{ [Error: Cannot find module './build/Release/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }
{ [Error: Cannot find module './build/default/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }
{ [Error: Cannot find module './build/Debug/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }

改用下面的命令安装:

npm install hexo --no-optional

好的,现在hexo也就绪了,hexo命令:

cd ~/git
hexo init hexo  #执行init命令初始化到你指定的hexo目录
cd hexo
npm install    #install before start blogging
hexo generate       #自动根据当前目录下文件,生成静态网页
hexo server         #运行本地服务

浏览器输入http://localhost:4000就可以看到效果。
浏览目录

├── .deploy       #需要部署的文件
├── node_modules  #Hexo插件
├── public        #生成的静态网页文件
├── scaffolds     #模板
├── source        #博客正文和其他源文件, 404 favicon CNAME 等都应该放在这里
|   ├── _drafts   #草稿
|   └── _posts    #文章
├── themes        #主题
├── _config.yml   #全局配置文件
└── package.json

添加博文

hexo new "postName"  #新建博文,其中postName是博文题目

如果不想博文在首页全部显示, 并能出现阅读全文按钮效果, 需要在你想在首页显示的部分下添加

<!--more-->

这点和wordpress是一样的

Hexo Yilia主题配置

cd ~/git/hexo
git clone git@github.com:litten/hexo-theme-yilia.git themes/yilia

在./_config.yml,修改主题为yilia
theme: yilia

Hexo 主题

查看本地效果

hexo g
hexo s

完整配置信息如下:

# Site #站点信息
title: blog Name #标题
subtitle: Subtitle #副标题
description: my blog desc #描述
author: me #作者
language: zh-CN #语言
timezone: Asia/Shanghai #时区

# URL
url: http://yoururl.com   #用于绑定域名, 其他的不需要配置
root: /
#permalink: :year/:month/:day/:title/
permalink: posts/title.html
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 #新文章标题
default_layout: post #默认模板(post page photo draft)
titlecase: false #标题转换成大写
external_link: true #新标签页里打开连接
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight: #语法高亮
  enable: true
  line_number: true #显示行号
  auto_detect: true
  tab_replace:

# Category & Tag #分类和标签
default_category: uncategorized #默认分类
category_map:
tag_map:

# Date / Time format #日期时间格式
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination #分页
per_page: 10 #每页文章数, 设置成 0 禁用分页
pagination_dir: page

# Extensions #插件和主题
## 插件: http://hexo.io/plugins/
## 主题: http://hexo.io/themes/
theme: next

# Deployment #部署, 同时发布在 GitHub 和 GitCafe 上面
deploy:
- type: git
  repo: git@gitcafe.com:username/username.git,gitcafe-pages
- type: git
  repo: git@github.com:username/username.github.io.git,master

# Disqus #Disqus评论系统
disqus_shortname: 

plugins: #插件,例如生成 RSS 和站点地图的
- hexo-generator-feed
- hexo-generator-sitemap

其它设置,可参考:这篇博文

Hexo Yilia Bug修改

修改参考这里基本所有的问题都能在这里解决了,所以啊,一个项目的issue真的很具有参考价值,少走不少弯路,通过这里的代码博主添加了 Hexo文章统计 功能,没有动画,头像设置有null的问题以及点击小房子没反应的bug。

>

Hexo添加文章目录

我们首先要编辑文章显示页面的模板,也就是

themes/landscape/layout/_partial/article.ejs

文件。为了将目录生成在正文之前,我们首先在这个文件中找到

<%- post.content %>

并在这一行之前加入如下代码:

<!-- Table of Contents -->
<% if (!index && post.toc){ %>
<div id="toc" class="toc-article">
<strong class="toc-title">文章目录</strong>
<%- toc(post.content) %>
</div>
<% } %>

这段代码的含义清晰明了,if语句中有两个条件,!index是为了不在首页的文章摘要中生成目录,post.toc确保了只在显式地标记了toc: true的文章中生成目录。若这两个条件满足,则创建一个目录的div。

修改完这个文件之后,找一篇包含了多个子标题的文章,并在文章开头的front-matter中添加一句toc: true,在浏览器中访问这篇文章,应该可以看到文章的开头处已经有了带链接的目录。但是这样的目录实在太难看,我们还需要添加相应的CSS来将其指定为我们想要的样式。

要指定目录的样式,我们要修改的文件是

themes/landscape/source/css/_partial/article.styl

在文件的最后,添加如下代码:

/*toc*/
.toc-article
    background #eee
    border 1px solid #bbb
    border-radius 10px
    margin 1.5em 0 0.3em 1.5em
    padding 1.2em 1em 0 1em
    max-width 28%

.toc-title
    font-size 120%

#toc
    line-height 1em
    font-size 0.9em
    float right
.toc
    padding 0
    margin 1em
    line-height 1.8em
    li
    list-style-type none

.toc-child 
    margin-left 1em

由于Hexo使用的是stylus预处理器,所以CSS代码要注意缩进,不然就报错了,这种目录要是不满意完全可以按照自己意愿写一个。

Hexo 多说评论框

链接:多说社会化评论框核心脚本embed.js本地化方法
链接:多说社会化评论框添加 站长回复 标记
链接: 多说回复后显示浏览器及操作系统信息(Useragent)

后记

有任何问题请在评论中回复,博主会在评论中解答。

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Jizhen_Tan/article/details/52451193

Hexo个人博客搭建问题之 './build/Release/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND'

搭建hero 完整教程:博客完整教程 在搭建hexo的时候: 出现了如下图的问题: { [Error: Cannot find module './build/Release/DTracePr...
  • zhonggaorong
  • zhonggaorong
  • 2016-05-19 11:43:15
  • 4686

使用hexo时deploy部署网站到github或gitcafe的gitpages时重复输入用户名密码的解决办法

前言 在Windows上使用git来deploy到gitcafe服务器上的时候,每次都要填写用户名/邮箱、密码,灰常烦人有木有。关键是我的电脑上已经设置了SSH了。使用SSH 后面发现,是hexo...
  • yongf2014
  • yongf2014
  • 2015-11-24 18:37:01
  • 1300

利用github-pages建立个人博客

前言 Github很好的将代码和社区联系在了一起,于是发生了很多有趣的事情,世界也因为他美好了一点点。Github作为现在最流行的代码仓库,已经得到很多大公司和项目的青睐,比如jQuery、Twit...
  • GarfieldEr007
  • GarfieldEr007
  • 2015-12-08 21:37:58
  • 3357

手把手教你用github pages搭建博客 最新版

本文来自于我的个人博客,转载请注明 http://www.woaitqs.cc/2016/06/08/blog-seo-baidu 如果给你40分钟,可以搭建一个如下图所示的网站,你愿意吗?如果你...
  • superjimmy
  • superjimmy
  • 2016-06-10 12:23:31
  • 19015

基于Hexo+GitHub Pages 搭建博客详细教程

摘要 :这是一篇有关如何使用Github Pages和Hexo搭建自己独立博客的详尽教程,里面介绍了如何使用和配置Hexo框架,如何将Hexo部署到自己的Github项目中,域名注册,以及域名的绑定等...
  • u011974987
  • u011974987
  • 2016-05-06 17:13:55
  • 7887

hexo-github安装过程记录

本地文件自己备一下: 我用的是next主题主站文件_config.yml:# Hexo Configuration ## Docs: https://hexo.io/docs/configurati...
  • paincupid
  • paincupid
  • 2016-12-25 23:44:54
  • 812

hexo+github搭建博客折腾记

这是我用hexo+GitHub搭建的个人博客 历时两天,趟了无数次坑,终于搭好了,所以这是一篇详细的记录下搭建博客的整个流程的笔记。以下是正题首先,什么是hexo?什么是GitHub? hexo是...
  • MayMayJn
  • MayMayJn
  • 2017-01-09 16:30:24
  • 210

博客折腾记(HEXO+Github)

闲着就要折腾!因为个人在搭建的过程中遇到了一些流程上的问题诸如hexo 和 node的关系,hexo和github的关系等,所以该文主要是讲解一下搭建博客的整个流程,为后来者提供一下经验,仅供参考!首...
  • zhangnanok1
  • zhangnanok1
  • 2016-06-29 10:54:51
  • 283

手把手教你用Hexo+Github 搭建属于自己的博客

欢迎关注我的微信公众号,扫一扫下方二维码或搜索微信号 stormjun,即可关注。 目前专注于 Android 开发,主要分享 Android开发相关知识和一些相关的优秀文章,包括个人总结,职场经验等...
  • gdutxiaoxu
  • gdutxiaoxu
  • 2016-12-11 22:04:12
  • 70858

hexo+github搭建个人博客

v 转载请注明原博客地址:手把手教你用Hexo+Github 搭建属于自己的博客 大概可以分为以下几个步骤 搭建环境准备(包括nod...
  • shouldnotappearcalm
  • shouldnotappearcalm
  • 2018-01-28 12:47:37
  • 132
收藏助手
不良信息举报
您举报文章:Hexo+Github pages折腾记
举报原因:
原因补充:

(最多只允许输入30个字)