Hexo|快速搭建自己(Github)博客

此方案的教程网上一搜一大把,这篇仅简单记录一下我的博客搭建过程、主题设置,以及遇到的一些问题,供参考与对比。
demo在这里

一、准备工作

二、安装Hexo

$ npm install hexo-cli -g

1. 初始化

$ hexo  init blog
$ cd blog
$ npm install

2. 开启服务

$ hexo server

会看到提示INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop. 代表博客已经正常运行,在浏览器打开http://0.0.0.0:4000/ 即可预览博客的初始状态

3. 新建文章

$ hexo new "Hello-Hexo"

会在根目录下source/_posts/ 生成Hello-Hexo.md文件,使用markdown编辑器非常方便

4. 生成静态文件

$ hexo generate

静态文件的目录在public/ 下

三、更换主题

在知乎上有个话题:有哪些好看的Hexo主题?在里面有很多不错的主题。
我挑选了风格简洁的NexT主题,里面配置教程已经非常详细了,以下仅记录一下过程用到的点。

下载主题
$ git clone https://github.com/iissnan/hexo-theme-next themes/next
启动主题

克隆完成以后打开站点配置 _config.yml,找到theme字段,值改为next。
运行hexo server --debug,访问http://0.0.0.0:4000/ 查看主题是否生效。

主题设置
  • 选择scheme
    NexT 通过 Scheme 提供主题中的主题。Mist 是 NexT 的第一款 Scheme。启用 Mist 仅需在 主题配置文件 中将#scheme: Mist前面的#注释去掉即可。
    设置语言
    编辑站点配置文件,将language设置成你所需要的语言。例如选用简体中文,则配置为:
language: zh-Hans

可用的语言如下列出:

语言 代码 设定值
English en language: en
简体中文 zh-Hans language: zh-Hans
正体中文 zh-hk/zh-tw language: zh-hk

更多的设置可在 这里 查看。

  • 菜单设置
    菜单配置示例:
menu: 
    home: / 
    archives: /archives 
    #about: /about 
    #categories: /categories 
    tags: /tags 
    #commonweal: /404.html
  • 侧栏设置
    默认情况下,侧栏仅在文章页面(拥有目录列表)时才显示。可以通过修改 主题配置文件 中的sidebar字段来控制侧栏的行为。
    支持的选项有:

  • post默认行为,在文章页面(拥有目录列表)时显示

  • always在所有页面中都显示

  • hide在所有页面中都隐藏(可以手动展开)

  • 头像设置
    编辑 站点配置文件,新增字段avatar, 值设置成头像的链接地址。
    链接的地址可以是完整的路径,也可以是相对路径,如:
    avatar: https://avatars1.githubusercontent.com/u/32269?v=3&s=460
    或者avatar: /images/avatar.jpg

  • 作者名称
    编辑 站点配置文件,设置author为你的昵称。

  • 站点描述设置
    编辑 站点配置文件,设置description字段为你的站点描述。站点描述可以是你喜欢的一句签名:)

第三方服务
  • 多说评论系统
    ** 注意 **:duoshuo_shortname不是你的多说登录的 id
    使用多说前需要先在 多说 创建一个站点。具体步骤如下:
    1. 登录后在首页选择 “我要安装”。
    2. 创建站点,填写站点相关信息。多说域名 这一栏填写的即是你的duoshuo_shortname,如图:

      多说设置示例:
duoshuo_shortname: iissnan-notes
标签云页面

Step1:
新建一个页面,命名为tags。命令如下:

hexo new page "tags"

Step2:
编辑刚新建的页面,将页面的类型设置为tags,主题将自动为这个页面显示标签云。页面内容如下:

title: Tagcloud
date: 2014-12-22 12:39:04
type: "tags"
---

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

title: Tagcloud
date: 2014-12-22 12:39:04
type: "tags"
comments: false
---

Step3:
在菜单中添加链接。编辑 主题配置文件 ,添加tagsmenu中,如下:

menu: 
  home: / 
  archives: /archives 
  tags: /tags
分类页面

添加一个 分类 页面,并在菜单中显示页面链接。
Step1:
新建一个页面,命名为categories。命令如下:

hexo new page categories

Step2:
编辑刚新建的页面,将页面的类型设置为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
---

Step3:
在菜单中添加链接。编辑 主题配置文件 ,将menu中的categories: /categories注释去掉,如下:

menu: 
  home: / 
  categories: /categories 
  archives: /archives 
  tags: /tags
代码高亮主题

NexT 使用 Tomorrow Theme 作为代码高亮,共有5款主题供你选择。
默认使用的是白色的 normal。

站点建立时间

这个时间将在站点的底部显示,例如© 2013 - 2015编辑 站点配置文件,新增字段since
since: 2013

数学公式显示

NexT 借助于 MathJax 来显示数学公式,此选项默认关闭。
编辑 主题配置文件,将mathjax设定为true即可。

# MathJax Support
mathjax: true

ProTip: 使用七牛 CDN 来加速 MathJax 脚本的加载

侧边栏社交链接

编辑 站点配置文件,新增字段social,然后添加社交站点名称与地址即可。例如:

#Social linkssocial: 
  github: https://github.com/your-user-name 
  twitter: https://twitter.com/your-user-name 
  weibo: http://weibo.com/your-user-name 
  douban: http://douban.com/people/your-user-name 
  zhihu: http://www.zhihu.com/people/your-user-name 
  # 等等
About页面

新建一个 about页面:

hexo new page "about"

菜单显示about链接,在 主题配置文件 设置中将menuabout
前面的注释去掉即可。

menu: 
  home: / 
  archives: /archives 
  tags: /tags 
  about: /about

友情链接编辑 站点配置文件 添加:

# title, chinese available
links_title: Links
# links
links: 
  MacTalk: http://macshuo.com/
腾讯公益404页面

简体中文增加腾讯公益404页面,寻找丢失儿童,让大家一起关注此项公益事业!效果如下http://www.ixirong.com/404.html
使用方法,新建 404.html 页面,放到主题的source目录下,内容如下:

<!DOCTYPE HTML><html><head>
 <meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 <meta name="robots" content="all" />
 <meta name="robots" content="index,follow"/>
</head>
<body>

<script type="text/javascript" src="http://www.qq.com/404/search_children.js" charset="utf-8" homePageUrl="your site url " homePageName="回到我的主页"></script>
</body>
</html>

四、常见问题

首页显示文章摘录

NexT 支持三种方式来控制首页文章的显示方式。若需要在首页显示摘录,可以通过以下方法:

  1. 在文章中使用``手动进行截断
  2. 在文章的 front-matter 中添加description,并提供文章摘录
  3. 自动形成摘要,在 主题配置文件 中添加:
auto_excerpt: 
  enable: true 
  length: 150

默认截取的长度为150字符,可以根据需要自行设定

设置 favicon

favicon放置到站点的 source目录下即可

标签和分类页面的统计数据不正确

按照以下步骤更新数据:

  1. 删除站点目录下的db.json文件
  2. 执行hexo clean
  3. 重新生成hexo g

更详细的安装配置说明:
hexojs/hexo
NexT主题

常用命令:

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

常用复合命令:

hexo deploy -g
hexo server -g

简写:

hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

部署到git
编辑 站点配置 你在部署时,要把下面的zippera都换成你的账号名。

deploy: 
  type: git
  repository: http://github.com/Beckjiang/beckjiang.github.com.git
  branch: master

此处需要注意hexo在3.0版本以后,做如下改动:

  1. 安装 npm install hexo-deployer-git --save
  2. 将deploy 的 type由github改为git
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,847评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,208评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,587评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,942评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,332评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,587评论 1 218
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,853评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,568评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,273评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,542评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,033评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,373评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,031评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,073评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,830评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,628评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,537评论 2 269

推荐阅读更多精彩内容