使用hexo在github pages上搭建博客详细教程

本教程仅适用于window用户


github

github是什么?


github可以托管项目,团队协作利器,同时网站上还有很多优秀的开源项目可以供我们学习,全球有相当多的程序员都活跃在上面,包括一些业界有名的大神。因此它还被赋予了一个神圣的称号全球最大的同♂性交友网站。学会使用github对我们好处多多~~

github pages


GitHub Pages用于介绍托管在GitHub的项目, 我们可以这个功能来做搭建一个博客。

github pages

准备工作


参考资料(PS慕课网up主这么卖力难道不给点广告费吗︿( ̄︶ ̄)︿)

1.注册github

打开github官网 https://github.com/ 注册一个账号

注册github

2.创建名字用username.github.io的仓库,其中username是你注册github的时候的用户名
3.下载github客户端 并登陆

4.安装node.js

开始搭建hexo博客


直接使用下载github window 客户端时附带的

客户端

gitshell的客户端,可以免去了我们配置SSH的麻烦,以后也不用每次使用时都输入密码,打开Git shell客户端
接下来我们开始在这个蓝色的对话框输入我们的命令
Git shell

安装hexo


在蓝色对话框输入命令

npm install -g hexo

创建hexo文件夹


在你想放置博客的文件夹的地方比如(D:\hexo 在D盘新建一个文件夹名字为hexo)
此时你应该注意UP主在上面贴出的Git shell客户端蓝色框框光标闪烁前面的路径问题,此路径应该是在C盘的某个文件夹\Documents\Github
但是我们是想在D:/hexo放置我们的博客文件,所以我们需要把路径修改一下。输入

cd D:hexo
Git shell

如图所示,光标闪烁的前面的路径改变了!!接下来我们很多操作都需要在D:\hexo这个路径下进行。请对路径多多注意,重要的事情说三遍!!
成功进入该路径之后,输入

hexo init

成功初始化hexo这个文件夹,此时如果你打开hexo这个文件夹你会发现多了很多东西

安装依赖包


npm install

本地查看


现在我们已经搭建起本地的hexo博客了,执行以下命令(在D:\hexo),然后到浏览器输入localhost:4000看看。

hexo generate
hexo server

好了,至此,本地博客已经搭建起来了,只是本地哦,别人看不到的。下面,我们要部署到Github。

部署


编辑_config.yml(在D:\hexo下)尽量不要用window自带的文本编辑器打开,因为全都压缩在一起了,你会很混乱。你在部署时,在这个文件的最下面修改如下代码,其中username都换成你的github用户名。

deploy: 
type:  git
repository:  git@github.com:Username/Username.github.io.git
branch: master

注意:每个冒号”:”后边需要有一个”空格”
修改之后保存即可

由于
hexo现在支持更加简单的命令格式了,比如:

hexo g == hexo generate
hexo d == hexo deploy
hexo s == hexo server
hexo n == hexo new
所以UP主接下来都会使用简写的命令

回到我们的Git shell客户端
执行下列指令即可完成部署。

hexo g
hexo d

如果在执行hexo d之后出现提示

ERROR Deployer not found: github

请先检查一下__config.yml的配置文件有没有出错,若纠正之后还是出现那个提示,请继续往下看
这个问题是由Hexo 2.0过渡到Hexo 3.0出现的问题。
执行命令:

npm install hexo-deployer-git --save

如此,便可以像往常一样使用hexo d命令了。
最后,提几个Hexo 3.0版本的几个坑。
一个是无法生成feed.xml文件。
一个是无法生成sitemap.xml文件。
执行:

npm install hexo-generator-feed --save
npm install hexo-generator-sitemap --save

随后在__config.yml配置文件中追加信息:

# Extensions
Plugins:
- hexo-generator-sitemap
- hexo-generator-feed
#sitemap
sitemap:
  path: sitemap.xml
#Feed Atom
feed:
  type: atom
  path: atom.xml
  limit: 20

更换主题(非必须)


1. 安装主题

也许你会不喜欢你现在的那个默认的主题,那么你可以到WIKI挑选一款你喜欢的
在D:\hexo这个路径下执行

git clone <repository> themes/<theme-name>

其中<repository>是你选用的主题的github地址 <theme-name>是主题的名字

举个例子:UP主现在使用的主题yilia
UP主需要执行的操作为

git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

这个命令的意思是在D:\hexo\themes这个路径上创建一个文件夹yilia(主题名字)并把从 github上克隆https://github.com/litten/hexo-theme-yilia.git 的这个项目内容放在该文件夹下

2. 配置主题

编辑hexo根目录下的 _config.yml 这个文件把其中**theme: **的变更为theme: yilia注意冒号后面后空格

3. 应用主题

cd themes/yilia
git pull

配置

主题配置文件在主目录下的_config.yml:(此时是themes/主题名字/_config.yml)这个文件

# Header
menu:
  主页: /
  所有文章: /archives
  # 随笔: /tags/随笔

# SubNav
subnav:
  github: "https://github.com/litten"
  weibo: "http://weibo.com/litten225"
  rss: "http://feed.feedsky.com/litten"
  # facebook: "/"
  # google: "/"
  # twitter: "/"
  # linkedin: "/"

rss: /atom.xml

# Content
excerpt_link: more
fancybox: true

# Miscellaneous

favicon: /favicon.png

avatar: "https://avatars2.githubusercontent.com/u/2024949?v=2&s=150"
share: true
duoshuo: true

此时我们已经把主题配置好了,看看效果
执行

hexo g
  hexo s

在浏览器中输入:localhost:4000 查看主题效果

把新主题部署到github pages上去


hexo g
hexo d

最后在浏览器中输入: username.github.com username换成你自己的github用户名,查看效果

每一次对博客进行改动之后都需要执行

hexo g
hexo d

才能把改动部署到网页上去

Hexo--使用多说评论插件(非必须)


多说是一款追求极致体验的社会化评论框,可以用微博、QQ、人人、豆瓣等帐号登录并评论。下面简单说说如何在Hexo的博客中使用多说。

1.创建多说帐号

打开下面的页面

http://duoshuo.com/create-site
多说

填入个人信息,点击创建。
其中 多说域名 填入的信息就是short_name,在后面要用到。

2.复制通用代码保存到博客模板
代码

将通用代码中的:
请将此处替换成文章在你的站点中的ID 替换为 <%= page.path %>
请替换成文章的标题 替换为 <%= page.title %>
请替换成文章的网址 替换为 <%= page.permalink %>
效果如下:

<div class="ds-thread" data-thread-key="<%= page.path %>" data-title="<%= page.title %>" data-url="<%= page.permalink %>"></div>

将themes/你的主题目录/layout/_partial/comment.ejs文件替换为:

<% if ( page.comments){ %>
<section id="comment">
<!-- 多说评论框 start -->
    <div class="ds-thread" data-thread-key="<%= page.path %>" data-title="<%= page.title %>" data-url="<%= page.permalink %>"></div>
<!-- 多说评论框 end -->
<!-- 多说公共JS代码 start (一个网页只需插入一次) -->
<script type="text/javascript">
var duoshuoQuery = {short_name:"这里填入你的short_name"};
    (function() {
        var ds = document.createElement('script');
        ds.type = 'text/javascript';ds.async = true;
        ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
        ds.charset = 'UTF-8';
        (document.getElementsByTagName('head')[0] 
         || document.getElementsByTagName('body')[0]).appendChild(ds);
    })();
    </script>
<!-- 多说公共JS代码 end -->
</section>
<% } %>
3.在主题中加入多说

在themes/你的主题目录/_config.yml文件中加入:
duoshuo_shortname: 你的short_name
注意在 :冒号后面有个空格。

发表新文章


好了,站点配置好了,我想发表一篇文章,怎么做呢?

hexo new "my new post"

在D:\hexo\source_posts中打开这个文件,配置开头。

title: my new post #可以改成中文的,如“新文章”
date: 2013-05-29 07:56:29 #发表日期,一般不改动
categories: blog #文章文类
tags: [博客,文章] #文章标签,多于一项时用这种格式
-这里是正文,用markdown写.markdown的语法可以去网上搜

hexo s

访问localhost:4000预览效果。(退出server用Ctrl+c)

hexo d

同步到github。访问网站看看效果。
到这里为止,我们的网站的基本模型就算是搭建好了

参考链接


1.http://zipperary.com/categories/hexo/
2.http://ogeeker.com/2015/03/14/Hexo-Deployer-not-found-github/
3.http://xring.org/2015/02/17/Hexo-%E4%BD%BF%E7%94%A8%E5%A4%9A%E8%AF%B4%E8%AF%84%E8%AE%BA%E6%8F%92%E4%BB%B6/

总结

--
这次搭建这个博客在网上搜了很多教程。因为之前完全不了解hexo就直接按照教程来做了。踩了很多坑。自己总结出来,对于一个完全不了解的东西,在动手实践之前还是要大概过一遍官方文档,然后对这个事物的框架有个大概的认知。能避免许多坑。很多教程很简单。但是每个人的运行环境都不太一样,有的同学按照教程过一遍很快就做好了。不是每个人都那么幸运。所以不能太依赖教程,要多看文档。

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

推荐阅读更多精彩内容