利用Gitpage+hexo开发自己的博客
该篇文章首发于我的个人博客:http://cherryblog.site/ 使用github+coding+hexo搭建的静态博客,更多hexo教程请移步至我的个人博客
进入程序员这个坑之后就开始自己在网上扒资料,然而资料太多,情况太复杂,主要是看见别人的博客,感觉好高大上,并且感觉在茫茫的互联网有自己的小天地感觉也是极好的。不是为了给别人看,而是为了 记录自己的成长,记录自己的每一个脚印。
Gitpage+hexo
想要实现拥有一个独立的私有博客,我们需要两个东西,一个是可供浏览器访问的静态网页存储空间,这个我们选择gitPage,一个是一个静态网页生成工具,Octopress也好,Hexo也罢,这里我选择的是Hexo。
环境准备
1 安装Node
到Node.js官网下载相应平台的最新版本,一路安装即可。我用的是node-v0.10.22-x86.msi
2 安装Git
安装git,或安装github客户端,自我感觉github客户端很好用,界面很友好,同样操作起来也比git好用的多!我用的是window10系统,在官网下载数次都未安装成功,最后在知乎上终于找到安装包,链接: http://pan.baidu.com/s/1eS2mHxS 密码: yatq ,有需要的同学可以点击下载。
安装步骤
1 安装Hexo
使用git shell,依次输入以下代码命令:
cd /
npm install hexo-cli -g
命令解释:
cd和/之间要有空格,这条指令的作用是返回根目录,也可以在cd /后加入一个文件名,例如下文要用到的cd /Hexo 就可以指向这个文件夹,再输入代码行就默认在在此文件下执行。
2 安装博客所需文件
cd /
hexo init Hexo
cd /Hexo
npm instal
hexo generate(可简写为hexo g)
hexo sever(可简写为hexo s)
命令解释:
cd /这里返回的根目录取决于你在github客户端的设置,我设置的是F盘,所以返回得也是F盘,所以下面创建的Hexo文件夹也在F盘。
Hexo这个文件名可以随便命名,存放的是构建博客所要用到的所有文件。
指向Hexo目录
安装依赖文件
编译
开启本地服务(第5、6步的操作可以合并成hexo s -g)
此时打开浏览器,在地址栏输入http://localhost:4000/
即可查看博客的原型,是不是看到了胜利的曙光;但是如果“显示无法访问此网站”也不要沮丧,我这步是直接看到页面的,你无法访问的原因可能你没有翻墙,因为页面中默认使用了ajax.google.com 下的js包。
那么如何翻墙呢? 下面提供我所知道的两种方法:
这种方法比较简单,下载安装运行Lantern,可以官网下载的吧!这里提供一下安装包吧,链接: http://pan.baidu.com/s/1c2x7eRu
密码: z3kw
这种方法需要修改hosts文件,我的 hosts 文件路径:C:\Windows\System32\drivers\etc ,详细攻略:http://blog.my-eclipse.cn/host-google.html
如果你不想翻墙,可以采用这种方法:
进入你刚新建好的 blog根目录
themes/landscape/layout/_partial
1,找到 after-footer.ejs把
<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js“ > </script>
替换成
<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js“ > </script>
2,找到 header.ejs
注释掉或者删掉 下面这句css引用
<link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel=”stylesheet” type=”text/css”>
hexo server 之后。访问 http://localhost:4000 就会看到blog主页了。
如果你成功在http://localhost:4000/
下看到了博客原型,那么再进行一些简单的操作之后就可以马上拥有自己的博客了,是不是很激动!
行百里者半九十
不到成功的那一刻,一切欣喜若狂都是不值得的!如果你已经迫不及待,我们继续:
3 部署博客到服务器
也就是把博客部署到github page提供的服务器上。
步骤
首先回到git shell按ctrl+c,之后输入y即可
修改Hexo文件夹下_config.yml文件,如下图所示修改,repository后的地址要改成你自己的地址:deploy: type: github repo: https://github.com/yourname/blog.git
继续回到git shell输入命令:
hexo clean
hexo g
hexo s
hexo d
命令解释:
清除public,当 source 文件夹中的部分资源更改过之后,特别是对文件进行了删除或者路径的改变之后,需要执行这个命令,然后重新编译。
编译,一般部署上去的时候都需要编译一下,编译后,会出现一个 public 文件夹,将所有的md文件编译成html文件
开启本地服务,
部署博客到github上,如果一切顺利,你就通过访问usename.github.io访问你的博客了!
是的,现在你拥有了自己的博客!
发表博文
千辛万苦建立了博客,那么我们来学习一下如何发表博文。
新建博文
继续回到git shell输入:
hexo new “新博文的名字”
即可在 Hexo\source_posts 目录中找到”新博文的名字.md”这个文件。你就可以使用maekdown编辑器打开进行编写博客内容了。
Markdown编辑器
推荐两款我所使用的markdown编辑器:
MIU,据说是仿mac版的mou,界面相当友好,非常喜欢,官网都下载不了,挺小众,可能我就是典型的少说派,我也是偶然间得到,在此提供下载地址:
链接: http://pan.baidu.com/s/1slMPeTR
密码: 2pnk
正在使用的Atom:更为先进的文本代码编辑器 ,由 Github 打造的下一代编程开发神器,其中支持markdown。
可能会遇到的问题
hexo new [layout] “postName”
#新建文章
其中layout是可选参数,默认值为post。有哪些layout呢,请到scaffolds目录下查看,这些文件名称就是layout名称。当然你可以添加自己的layout,方法就是添加一个文件即可,同时你也可以编辑现有的layout,比如post的layout默认是hexo\scaffolds\post.md
title: { { title } }
date: { { date } }
tags:
---
大括号与大括号之间我多加了个空格,否则会被转义,不能正常显示。
我想添加categories,以免每次手工输入,只需要修改这个文件添加一行
title: { { title } }
date: { { date } }
categories:
tags:
---
postName是md文件的名字,同时也出现在你文章的URL中,postName如果包含空格,必须用”将其包围,postName可以为中文。
注意,所有文件:后面都必须有个空格,不然会报错。
看一下刚才生成的文件hexo\source_posts\postName.md
title: postName #文章页面上的显示名称,可以任意修改,不会出现在URL中
date: 2013-12-02 15:30:16 #文章生成时间,一般不改,当然也可以任意修改
categories: #文章分类目录,可以为空,注意:后面有个空格
tags: #文章标签,可空,多标签请用格式[tag1,tag2,tag3],注意:后面有个空格
---
始使用markdown格式输入你的正文。,你就可以用喜爱的编辑器尽情书写你的文章。关于markdown语法,可以参考我的文章Markdown简明语法。
fancybox
可能有人对这个Reading页面中图片的fancybox效果感兴趣,这个是怎么做的呢。
很简单,只需要在你的文章*.md文件的头上添加photos项即可,然后一行行添加你要展示的照片:
layout: photo
title: 我的阅历
date: 2085-01-16 07:33:44
tags: [hexo]
photos:
- http://bruce.u.qiniudn.com/2013/11/27/reading/photos-0.jpg
- http://bruce.u.qiniudn.com/2013/11/27/reading/photos-1.jpg
经过测试,文件头上的layout: photo可以省略。
不想每次都手动添加怎么办?同样的,打开您的hexo\scaffolds\photo.md
layout: { { layout } }
title: { { title } }
date: { { date } }
tags:
photos:
-
---
然后每次可以执行带layout的new命令生成照片文章:
hexo new photo "photoPostName" #新建照片文章
description
markdown文件头中也可以添加description,以覆盖全局配置文件中的description内容,请参考下文_config.yml的介绍。
title: hexo你的博客
date: 2013-11-22 17:11:54
categories: default
tags: [hexo]
description: 你对本页的描述
---
hexo默认会处理全部markdown和html文件,如果不想让hexo处理你的文件,可以在文件头中加入layout: false。
文章摘要
在需要显示摘要的地方添加如下代码即可:
以上是摘要
<!--more--></
利用Gitpage+hexo开发自己的博客相关推荐
- 【基础】利用 hexo + Gitpage 开发自己的博客
原文作者:cherry 原文地址:[基础]利用 hexo + Gitpage 开发自己的博客 进入程序员这个坑之后就开始自己在网上扒资料,然而资料太多,情况太复杂,主要是看见别人的博客,感觉好高大上, ...
- github page hexo博客gitee_利用Github和hexo搭建个人免费博客
利用Github和hexo搭建个人免费博客详细过程: 概述: 详细的介绍了利用github和hexo搭建免费的博客,内容详细,浅显易懂,容易上手,大家一起进来看看吧! 1.配置Github相关操作: ...
- Hexo+github搭建个人博客-环境搭建篇
一.概述 我们使用Hexo + Github搭建个人博客,我们自然不能错过,事不宜迟,我们现在立马来认识一下,他们究竟是何方神圣吧. 1.1 关于 GitHub 1.1.1 Github 接触编程一段 ...
- vsphere通用配置_Mac环境下如何用Hexo+Github搭建个人博客
一个爱折腾的人,总是忍不住去自己动手尝试新鲜事物.就拿写博客来说,虽然网上已经提供了很多博客平台,但是总有一些个性化的需要得不到满足.所以就抽空去网上找了下如何使用Hexo+Github 搭建自己博客 ...
- 使用 Hexo + Next 搭建静态博客
欢迎移步我的博客阅读:<使用 Hexo + Next 搭建静态博客> 前言 Github 为广大开发者提供了一个非常好的平台,不仅是代码的开源,同时Github还提供了开发者可以在 Git ...
- [Hexo]Hexo+github搭建静态博客
1.简介 Hexo 是一个快速.简洁且高效的博客框架.Hexo 使用 Markdown(或其他渲染引擎)解析文章(经常玩CSDN上的人都知道),在几秒内,即可利用靓丽的主题生成静态网页.通过Hexo我 ...
- Hexo+Github搭建个人博客和个人主页
Hexo+Github搭建个人博客和个人主页 在自己的个人主页搭建起来之前,看到网上其他人酷炫的个人主页,而且有自己专属的域名,羡慕的不行.现在自己的个人主页也做出来了,在这里做一个总结,给也想做个人 ...
- Hexo+github搭建个人博客-博客发布篇
通过 Hexo+github搭建个人博客-环境搭建篇 以及 Hexo+github搭建个人博客-博客初始化篇 ,我们了解到了利用Hexo搭建个人博客需要的环境以及配置,下面这篇文章将会介绍如何把我们的 ...
- Hexo+github搭建个人博客-博客初始化篇
文章推荐 精选java等全套学习资源 精选java电子图书资源 精选大数据学习资源 java项目练习精选 上一篇博文 [<Hexo+github搭建个人博客-环境搭建篇>](http:// ...
最新文章
- 【怎样写代码】复杂对象的组装与创建 -- 建造者模式(一):问题案例
- 安卓的自定义的DemoApplication 出现的问题。
- spring mvc中filter的设计与实现
- Kafka在Spring项目中的实战演练
- 2016/7/29作业
- oracle中出现会话被锁
- hexo博客添加暗色模式_我如何将暗模式添加到我的网站
- java 小于10 自动补零_java 位数自动补0处理
- 预科阶段:快速实战入门
- 解决eeglab无法读取.mat文件(读取mat文件报错cannot read .mat file,eeglab error in function pop_editset()at line 445)
- nnie yolov3 svp
- 【Large Scale Adversarial Representation Learning 大规模对抗学习(BigGAN) 】学习笔记
- 使用git命令提交远程github仓库的时候提示rejected(拒绝)解决办法
- www是什么,http是什么,到底什么区别?
- 信息学奥赛一本通 1197 山区建小学(区间DP)
- A. Diverse Team
- 自定义圆角的ImageView 还可以实现图片的圆形、椭圆形展示。
- 标梵微信小程序开发价格之做一个小程序要多少钱?
- ISP图像处理—紫边Purple Fringing
- TCP拥塞控制算法BBR源码分析
热门文章
- Python:实现factorial阶乘算法(附完整源码)
- python爬虫实战——轻松学会电脑桌面壁纸爬取
- 网络层-B类地址子网划分
- B1016 	部分A+B
- 每日词根——pact(固定->紧实->意见达成一致->和平->条约)
- C语言中,指针p[i]为什么等同于数组p[i]?
- TLS/SSL 协议详解(6) SSL 数字证书的一些细节1 证书验证
- 【2】中断方式和查询方式的区别
- 第七讲:7.物联网土壤湿度远程监控+自动花浇水
- 洛谷 1119 灾后重建 Floyd