Hexo博客搭建记录

Hexo是一款优秀的静态博客,本文主要记录了在搭建Hexo博客时的一些安装配置。通过Hexo配置了自己的个人博客,采用了Next主题。
访问域名:http://yaohuiye.com
github源码:https://github.com/yaohuiye/yaohuiye.github.io

环境安装

  1. 安装NodeJs

  2. 为防止网络问题导致下载卡顿.NoteJs配置为使用淘宝镜像,输入如下的命令:
    npm install -g cnpm --registry=https://registry.npm.taobao.org

  3. 通过如下的命令安装hexo:
    cnpm install -g hexo-cli
    cnpm install hexo --save

  4. 验证hexo版本,此刻安装的最新版本是3.2.2
    hexo -v

  5. 安装Git,并在Github上拥有一个账号。因为项目是部署在Github中,利用到了其提供的Pages功能

Hexo指令熟悉

  • 清理生成文件
    hexo clean
  • 新建文章
    hexo new "postName" == hexo n "postName"
  • 新建页面
    hexo new page "pageName"
  • 生成静态页面至public目录
    hexo generate == hexo g
  • 开启预览访问端口(默认端口4000,'ctrl + c'关闭server)
    hexo server == hexo s
  • 将.deploy目录部署到GitHub
    hexo deploy == hexo d
    备注:命令可以联结使用,如:hexo clean && hexo generate && hexo deploy。如hexo s -g

生成博客

  1. 创建一个博客目录blog
  2. 在blog文件夹中进入git的控制台
  3. 进行Hexo博客的初始化
    hexo init
    cnpm install
  4. 运行博客
    hexo s -g
  5. 在浏览器中输入:http://localhost:4000 ,则会展示博客内容

配置博客

主要的配置文件是blog目录下的_config.yml。在这个配置文件中可以修改博客的标题title,简介description,语言lang,主题theme

  1. 博客采用了NexT主题,安装步骤如下:
    (1)进入blog目录下,打开git的控制台,输入如下的命令:
    git clone https://github.com/iissnan/hexo-theme-next themes/next
    (2)在blog根目录下的_config.yml中修改theme的值,修改为next
    (3)重新运行博客,在浏览器中即可看到效果
    备注:next提供了非常完整的帮助文档,具体可参考虑链接:
    http://theme-next.iissnan.com/getting-started.html
  2. 设置站点的图标favicon.ico
    (1)制作一个favicon.ico文件,将其放到blog/source目录下
  3. 设置404页面
    (1)这里主要引用的是腾讯的公益找人404.html
    (2)参考链接:http://theme-next.iissnan.com/theme-settings.html#volunteer-404
  4. 设置分类页面categories
    (1)运行命令:hexo new page categories
    (2)此时在source目录下会生成categories文件夹,categories文件夹中会有一个index.md
    (3)打开index.md,完善如下的内容。type: "categories"一定要添加,不然页面上不会生成tag列表。如果有评论功能,则添加上comments: false来禁止。
 ---
title: 分类
date: 2017-02-12 15:25:57,
type: "categories"
comments: false
 ---
  1. 设置标签页面tags
    (1)运行命令:hexo new page tags
    (2)此时在source目录下会生成tags文件夹,tags文件夹中会有一个index.md
    (3)打开index.md,完善如下的内容。type: "tags"一定要添加,不然页面上不会生成tag列表。如果有评论功能,则添加上comments: false来禁止。
    --- title: 标签 date: 2017-02-12 15:25:30 type: "tags" comments: false ---

  2. 设置评论
    (1)这里设置的是多说的评论
    (2)参考链接:http://theme-next.iissnan.com/third-party-services.html#duoshuo

  3. 设置分享
    (1)这里设置的是JiaThis
    (2)参考链接:http://theme-next.iissnan.com/third-party-services.html#share-jiathis

  4. 设置站内搜索
    (1)这里设置的是Local Search。需要安装hexo-generator-searchdb插件
    (2)参考链接:http://theme-next.iissnan.com/third-party-services.html#local-search

  5. 设置about页面
    (1)运行命令:hexo new page about
    (2)此时在source目录下会生成about文件夹,about文件夹中会有一个index.md
    (3)在index.md中进行个人介绍内容的编辑

  6. 设置统计分析
    (1)这里设置的是百度统计
    (2)参考链接:http://theme-next.iissnan.com/third-party-services.html#analytics-baidu

  7. 设置社交账号展示
    (1)参考链接:http://theme-next.iissnan.com/theme-settings.html#author-sites

  8. 设置页面文章的篇数
    (1)安装相关插件
    cnpm install --save hexo-generator-index cnpm install --save hexo-generator-archive cnpm install --save hexo-generator-tag
    (2)在_config.yml配置文件中添加上如下的配置

index_generator:
per_page: 5
archive_generator:
per_page: 20
yearly: true
monthly: true
tag_generator:
per_page: 10

13. 添加RSS
(1)安装插件
    `cnpm install hexo-generator-feed --save`
(2)在_config.yml修改配置:

feed
type: atom
path: atom.xml
limit: 20


14. 添加sitemap
(1)安装插件
    `cnpm install hexo-generator-sitemap --save`
(2)在_config.yml修改配置:

sitemap:
path: sitemap.xml


15. 标题栏展示字数统计以及阅读时长
(1)安装插件
(2)找到themes/next/layout/_marcro文件夹中的post.swig文件
(3)定位到__post-time__的元素,在元素后面追加如下的代码:

<span class="post-time">
|
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">字数统计:</span>
<span class="post-count">{{ wordcount(post.content) }}(字)</span>

</span>

<span class="post-time">
|
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">阅读时长:</span>
<span class="post-count">{{ min2read(post.content) }}(分)</span>

</span>

(4)参考链接:http://www.joryhe.com/2016-06-06-hexo_wordcount_setting_your_post.html

 16.  加载google字体缓慢的解决
(1)打开next/_config.xml文件,在font属性下修改host为//fonts.css.network

font:
enable: true

Uri of fonts host. E.g. //fonts.googleapis.com (Default)

host: //fonts.css.network


### 部署到github,使之可以通过username.github.io来进行站点的访问
(1)参考链接:http://blog.csdn.net/u3d_ysj/article/details/50525820

### 部署到coding
(1)参考链接:http://www.jianshu.com/p/7ad9d3cd4d6e#

### 域名申请以及域名解析
(1)域名是在godaddy中购买,省去了备案的手续
(2)域名解析是在dnspod中配置的


### 写博客
1. 如写一个test文章,输入如下的命令
`hexo n "test"`
2. 在_post中就生成了一个test.md文件
3. 指定分类,在categories中添加上分类,如
`categories: 测试`
4. 指定标签,在tags中添加上标签,如

tags:
-test
-测试

5. 编写一段简介,然后换行添加上一行 <!--more-->,这部分简介就会有列表页面展示
6. 编写文章内容
7. 重新生成页面,启动服务
`hexo s -g`
8. 确定文章写好后,将其提交到github中
`hexo clean && hexo generate && hexo deploy`  

### 参考链接
Maupassant主题:https://www.haomwei.com/technology/maupassant-hexo.html
Hexo搭建Github-Pages博客填坑教程:http://www.jianshu.com/p/35e197cb1273
Next主题:https://github.com/iissnan/hexo-theme-next
Next主题使用文档: http://theme-next.iissnan.com/
关于Github的配置、域名申请、图床:http://ibruce.info/2013/11/22/hexo-your-blog/
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,445评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,889评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,047评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,760评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,745评论 5 367
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,638评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,011评论 3 398
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,669评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,923评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,655评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,740评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,406评论 4 320
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,995评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,961评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,023评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,483评论 2 342

推荐阅读更多精彩内容