Hexo配合github搭建网站

96
编程之乐
2016.08.19 17:31* 字数 2448

参考文章:
https://xuanwo.org/2014/08/14/hexo-usual-problem/
https://hexo.io/zh-cn/docs/server.html
http://www.jianshu.com/p/ffcdc4fec6ec

安装问题 (mac)

执行如下命令安装Hexo:
sudo npm install -g hexo
修改为
sudo npm install --unsafe-perm --verbose -g hexo(完装完成发现什么都木有)

github上的安装说明
$ npm install hexo-cli -g

npm install hexo --no-optional (或试试这个)

安装git发布插件

Install hexo-deployer-git.
$ npm install hexo-deployer-git --save
插件的配置在 _config.yml中

Paste_Image.png

部署步骤

部署步骤

** hexo clean**
** hexo generate** 重新生成静态文件
** hexo deploy** Deploy to remote sites

常用命令

一些常用命令:
hexo new"postName" #新建文章
hexo new page"pageName" #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口(默认端口4000,'ctrl + c'关闭server)
hexo deploy #将.deploy目录部署到GitHub
hexo help # 查看帮助
hexo version #查看Hexo的版本
hexo d 部署 可与hexo g合并为 hexo d -g

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

常见错误

  • github配置问题


    Paste_Image.png
  • Hexo命令失效
    检查_config.yml中的内容,特别注意:后面需要有一个空格。
    检查`package.json’中的内容,注意添加hexo信息用来标识这是一个hexo目录:
{
  "hexo": {
    "version": ""
  }
}

如果还是有问题,可以更新hexo之后,在新的文件夹中重新进行hexo init。

  • 输入hexo g 后,报错如下:
Paste_Image.png

主题目录下所有yml文件中所有有空格的字段都用双引号括起来,尤其注意languages下面的yml文件

Paste_Image.png
  • 修改主题文件之后,网页不更新
    hexo clean
    并且删除.deploy_git
    文件夹之后,hexo d -g。为了强制浏览器更新资源文件,可以采用’Ctrl+F5’来刷新。

  • 更新至3.0.0版本后,文件渲染时卡死

问题出在Highlight.js
在判断语言类型时,会因为-
这个符号导致卡死。
解决方案:
在使用代码块时,明确使用类型,或者全部使用plain
类型,如下:
undefined

Hexo版本回退

有时候更新之后发现新版本的Hexo不能按照预期的方式工作,这时候就需要使用版本回退功能。打开命令行,输入npm install -g hexo@版本号
就可以回退到没有出现问题的版本上来。
这个命令适用于所有Node.js模块
少数情况下会出现Node.js版本问题,可以使用nvm install 版本号
来安装报错信息中需要的版本。

推荐使用nvm来管理Node.js版本

跳过渲染skip_render

不处理source目录的个别文件
有时候我们要写一些Demo一起放到博客上去,默认情况下,Hexo也会将这部分Demo进行处理,导致这些Demo页面渲染上了博客主题,如何不处理这些Demo页面呢?
假设你的Source文件夹里面有个Demo目录,要忽略Demo目录下的所有html页面,可以通过在_config.yml设置skip_render来忽略的目录,具体如下:
skip_render: Demo/*.html

文件匹配是基于正则匹配的,更复杂的情况如下
1.单个文件夹下全部文件:skip_render: demo/*
2.单个文件夹下指定类型文件:skip_render: demo/.html
3.单个文件夹下全部文件以及子目录:skip_render: demo/
*
4.多个文件夹以及各种复杂情况:
skip_render: - 'demo/.html' - 'demo/*'

小技巧

那就是利用主题的source目录,也就是themes/themes-name/source。因为这个文件夹里面的所有文件都会被复制到网站的根目录中去,也就是说,如果在里面放上README,就可以正常的存在于网站的主目录了。

注意

在source文件夹下的所有md文件都会被hexo渲染成html文件

如何在不同电脑(系统)上使用Hexo

使用Git来管理自己的Blog文件夹,需要注意一下几点。

  1. 如果主题是通过git管理的,需要将主题文件夹下的.git文件夹删除或者使用git submodule的形式进行管理,才能同步Blog文件夹。

  2. Blog目录下自带的.gitignore文件,node_modules文件夹是不会同步的,所以同步之后需要自己再次进行npm install(应该是为了再次初始化node_modules文件夹),但是注意,不要进行hexo init了,否则_config.yml会被覆盖。

会被同步的目录展示


Paste_Image.png

本机hexo目录展示

Paste_Image.png

杂项说明

文章都保存在source/_posts, 文章支持Markdown语法。
如果想修改头像可以直接在主题的_config.yml文件里面修改,友情链接... 都在这。
theme:yilia
改成theme: yilia,theme:后面接你自己的主题名字就行了
,然后分别执行
部署 hexo g
提交 hexo d
你的主题,和名字就修改成功了

网站存放在子目录如果您的网站存放在子目录中,例如 http://yoursite.com/blog,则请将的 url 设为http://yoursite.com/blog 并把 root 设为 /blog/

根据模板建立文章
$ hexo new photo "My Gallery"

Paste_Image.png
Paste_Image.png
Paste_Image.png

hello.md文件内容

title: hello
date: 2016-08-19 14:47:35
tags:


Paste_Image.png

配置git

Paste_Image.png

主题推荐

这里有大量的主题列表使用方法里面
都有详细的介绍,我就不多说了。
我这里有几款个人认为不错的主题,免去你们,一个一个的选了,欢迎吐槽我的审美,😄
Cover- A chic theme with facebook-like cover photo
Oishi- A white theme based on Landscape plus and Writing.
Sidebar- Another theme based on Light with a simple sidebar
TKL- A responsive design theme for Hexo. 一个设计优雅的响应式主题
Tinnypp- A clean, simple theme based on Tinny
Writing- A small and simple hexo theme based on Light
Yilia- Responsive and simple style 优雅简洁响应式主题,我用得就是这个。
Pacman voidy- A theme with dynamic tagcloud and dynamic snow

我的版本

Paste_Image.png

Hexo 有三种默认布局:post,page 和 draft. 它们分别对应不同的路径,而您自定义的其他布局和post 相同,都将储存到 source/_posts 文件夹。

Paste_Image.png

配置永久链接

您可以在 _config.yml
配置中调整网站的永久链接或者在每篇文章的 Front-matter (每个.md文件的---区域)中指定

Paste_Image.png

**下图中的这些都是变量,是在_config.yml中配置,然后hexo生成相应的值到xx.md中 **


Paste_Image.png

default_category: uncategorized(默认安装时候的值)

您可在 permalink_defaults 参数下调整永久链接中各变量的默认值
permalink_defaults:
lang: en
year: 2000 //实际中这里肯定不会写死了,举个例子而已

如图,3中不同的配置生成的链接效果

Paste_Image.png

Paste_Image.png

如按照 语种生成的链接

Paste_Image.png

给文章md文件夹标签和分类

Paste_Image.png

替换Google的js库 和字体 (因为墙的缘故,如果更换主题,下面的步骤省略)

我们要修改的是themes/landscape/layout/_partial/after-footer.ejs这个文件,将17行的
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

<script src="http://apps.bdimg.com/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof jQuery == 'undefined') {
document.write(unescape("%3Cscript src='/js/jquery-2.0.3.min.js' type='text/javascript'%3E%3C/script%3E"));
}
// ]]>
</script>

这里不但将Google的jQuery替换成了百度的,随后还进行了一个判断,如果获取百度的jQuery失败,则使用本网站自己的jQuery。为了让这段代码有效,我们要去jQuery官方下载合适版本的jQuery并将其放到themes/landscape/source/js/目录下,我将其命名为jquery-2.0.3.min.js。

还有一点需要特别注意,那就是jQuery这个文件在hexo生产博客时会被解析,因此一定要将jQuery文件开头处的//@ sourceMappingURL=jquery-2.0.3.min.map这一行代码删去,否则会导致博客无法生成。

跨平台字体优化
修改themes/landscape/source/css/_variables.styl这一文件

将其中第22行

font-sans = "Helvetica Neue", Helvetica, Arial, sans-serif

改成如下内容:

font-sans = "Helvetica Neue", "Helvetica", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans CN", "WenQuanYi Micro Hei", Arial, sans-serif

代码等宽字体优化

font-mono = "Source Code Pro", Consolas, Monaco, Menlo, Consolas, monospace

改为

font-mono = Consolas, Monaco, Menlo, monospace

最后我们要删除引用Google字体的代码

要编辑的文件是themes/landscape/layout/_partial/after-footer.ejs,将其中的下列代码删除。

<link href="http://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">

草稿功能

草稿
草稿相当于很多博客都有的“私密文章”功能。

============================

$ hexo new draft "new draft"

会在source/_drafts目录下生成一个new-draft.md文件。但是这个文件不被显示在页面上,链接也访问不到。也就是说如果你想把某一篇文章移除显示,又不舍得删除,可以把它移动到_drafts目录之中。

如果你希望强行预览草稿,更改配置文件:

render_drafts: true

或者,如下方式启动server:

$ hexo server --drafts

下面这条命令可以把草稿变成文章,或者页面:
$ hexo publish [layout] <filename>

hexo主题推荐

https://www.zhihu.com/question/24422335

source文件夹

资源文件夹,除了模板以外的 Asset,例如 CSS、JavaScript 文件等,都应该放在这个文件夹中。文件或文件夹开头名称为 _
(下划线线)或隐藏的文件会被忽略。
如果文件可以被渲染的话,会经过解析然后储存到 public
文件夹,否则会直接拷贝到 public
文件夹。

Paste_Image.png
Paste_Image.png
编程之道
Web note ad 1