使用Github Page和Hexo快速构建个人博客,以及插件安装及主题优化总结
来源:互联网 发布:淘宝无线装修入口 编辑:程序博客网 时间:2024/06/02 02:34
前言
自从学习使用github后,了解到可以使用github page搭建个人博客,就一直梦想着自己有一天能够也能够搭建拥有自己的博客,记得高中时候还经常看一些美文之类的书,喜欢一些唯美的语句,甚至还曾经梦想着能做个作家,好吧,扯远了,经过这两天的摸索,终于成功构建了自己的博客!下面介绍一下搭建过程。第一次发文,有错误之处还希望大神们批评指正。
搭建前提:
既然你能找到这篇博文相信你至少对github有一定了解,对于github如何注册之类在这里就不在赘述了!
使用github创建一个UserName.github.io版本库文件,UserName是你的github登录名。
安装node.js
安装git,或安装github客户端,自我感觉github客户端很好用,界面很友好,同样操作起来也比git好用的多!我用的是window10系统,在官网下载数次都未安装成功,最后在知乎上终于找到安装包,链接: http://pan.baidu.com/s/1eS2mHxS 密码: yatq ,有需要的同学可以点击下载。
安装步骤
安装Hexo
使用git shell,依次输入以下代码命令:
1. cd / 2. npm install hexo-cli -g
命令解释:
cd和/之间要有空格,这条指令的作用是返回根目录,也可以在cd /后加入一个文件名,例如下文要用到的cd /Hexo 就可以指向这个文件夹,再输入代码行就默认在在此文件下执行。
安装博客所需文件
1. cd /2. hexo init Hexo3. cd /Hexo4. npm install5. hexo generate(可简写为hexo g)6. 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
如果你不想翻墙,可以采用这种方法:http://blog.netpi.me/%E5%AE%9E%E7%94%A8/hexo/
如果你想成功在http://localhost:4000/
下看到了博客原型,那么再进行一些简单的操作之后就可以马上拥有自己的博客了,是不是很激动!
行百里者半九十
不到成功的那一刻,一切欣喜若狂都是不值得的!如果你已经迫不及待,我们继续:
部署博客到服务器
也就是把博客部署到github page提供的服务器上。
步骤
- 首先回到git shell按ctrl+c,之后输入y即可,如下图所示:
- 修改Hexo文件夹下_config.yml文件,如下图所示修改,repository后的地址要改成你自己的地址:
继续回到git shell输入命令:
1. hexo clean2. hexo g3. hexo s4. 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。
可能会遇到的问题
标签书写格式(如果分类有多个,也要按照标签的格式来写):
优雅的在博客上插入图片
看到很多博客上说使用七牛,但是这种方法可能是用着最爽的,我们来看一下如何使用:
- 首先确认 _config.yml 中更改 post_asset_folder:true 。
回到git shell,输入
npm install https://github.com/CodeFalling/hexo-asset-image --save
继续执行
1. hexo clean2. hexo g3. hexo s4. hexo d
- 重新创建一个博客名字,然后发现Hexo\source_posts下多了一个与博客名字相同的空文件夹
- 然后就可以把我们博客中要用到的图片存放在这个文件夹下,需要时直接引用即可,是不是特别方便?
提醒:
写一篇博文时尽量只使用一种markdown编辑器,如果同时使用两个编辑器,我感觉不同编辑器对markdown语法的编译还是有一些差别的,用这个编辑器写好的格式用另一个编辑器打开却乱了!
预览和发表
继续重复以下命令即可实现预览和发表,恭喜你已经在自己建设的博客网站上发表了第一篇博文!
1. hexo clean2. hexo g3. hexo s4. hexo d
更高大上的发表博文的方法
使用Travis CI自动部署你的Hexo博客到Github,请参考手把手教你使用Travis CI自动部署你的Hexo博客到Github上
使用could9在线更新博客,这样的话即使更换了电脑,也能优雅的更新博客了。详细请参考:用c9.io实现在线更新博客
安装主题
如果你跟我一样觉得原始的博客主题很low,想更换一个高逼格的,那我们继续往下进行:
选择主题
你可以在Themes·Hexo上选择你喜欢的主题,我使用的Next主题
安装Next主题
参考Next官方文档,内容十分详尽!
可能会遇到的问题
在此列举我所遇到的问题,及解决方法:
构建新页面
如上图那些小图标都是一个新页面,需要手动创建,那么如何创建?
回到git shell,
hexo new page "页面名称"
比如你要创建一个about页面,就输入hexo new page “about”
正确显示各页面内容
发表博文后发现点击上面建立的页面后发现是空白页,比如,打开标签页面,发现是空白,或者提示找不到!
解决方法:以标签页为例,打开Hexo\source\tags下index.md文件,修改如下:
comments: false即关闭此页面的评论功能
type: “tags”这里的值根据你想更改的页面决定
更改过后,在重新部署到github上,你就可以点击各个页面查看,发现一切都是那么美好!
安装插件
hexo支持的插件:Plugins | Hexo
想安装什么插件,按照相关README.md中介绍操作即可。
安装多说评论、不蒜子(或LeanCloud)和分享插件,参考:第三方服务集成,介绍非常全面!好好用来装饰你的博客吧!
安装sitemap和feed插件时,如果遇到问题,可以参考:博客搬迁记 - 从WordPress到Hexo,安装sitemap后要到百度站长提交你的网站,首先要添加站点,然后在链接提交你的sitemap.xml,详细操作参考:为Hexo博客生成sitemap
安装swiftype插件,如果遇到问题,可以参考利用swiftype为hexo添加站内搜索
主题优化
Next主题很美观,个人也非常喜欢,但是一点令我们烦恼的就是主题加载的特别缓慢,那怎么优化呢?请参考一下两篇博文,作者已经总结的非常详细了,有需要的可以拜读一下,受益匪浅!
提升Hexo的NexT主题加载速度
使用gulp精简hexo博客代码
绑定域名
购买域名,我是在万网购买的,可以申请到国际域名,免去了备案的繁杂过程,我居然申请了两个,由于自学前端,所以就构建了一个网站来展示自己写的一些demo,【至于如何快速的构建一个网站,从购买域名,云空间到上传文件,你可以试一下这个网站,但是现在可以用github page做服务器,也可以构建多个项目主页来展现demo,是我马上要研究的方向,自己上传云服务器感觉步骤好繁琐,看一下在github建立项目主页能否得到改善!】还一个正好闲置着,所以就拿来解析到github page上,以后就可以通过自己的域名访问自己的博客了!
如何操作:在 Hexo\source 文件夹里新建一个名为 CNAME 的文件,用文本编辑器打开,添加内容 yourwebsite.com (你的个人域名 )。保存后,部署你的博客即可。如果这步遇到问题,也可手动在万网上解析,github page提供的IP:
192.30.252.153
192.30.252.154
制作ICO图标
- favicon.ico一般用于作为缩略图的网站标志,在线制作网站
关于是否绑定域名
经过这几天的试用,关于是否绑定域名,发表一下自己的看法,如果你仅仅是使用个人主页来托管个人博客。绑定与否看你自己的想法,如果你还想使用github的项目主页来展示平时写的一些小练习demo,那我劝你不要绑定个人域名了,关于如何使用github的项目主页,请参考单个GitHub帐号下添加多个GitHub Pages的相关问题,这样你就可以直接在需要展示的项目下添加gh-pages分支,然后通过访问“用户名。github.io/项目名/*.html”来查看页面展示效果了。这多方便,不用自己在上传云空间了,省去了一堆麻烦事!
参考文献
如何利用GitHub Pages和Hexo快速搭建个人博客
hexo + github + 多说 来搭建免费博客
利用swiftype为hexo添加站内搜索
博客搬迁记 - 从WordPress到Hexo
在 hexo中无痛使用本地图片
手把手教你使用Travis CI自动部署你的Hexo博客到Github上
用c9.io实现在线更新博客
为Hexo博客生成sitemap
提升Hexo的NexT主题加载速度
使用gulp精简hexo博客代码
单个GitHub帐号下添加多个GitHub Pages的相关问题
- 使用Github Page和Hexo快速构建个人博客,以及插件安装及主题优化总结
- 使用Github Page和Hexo快速构建个人博客,以及插件安装及主题优化总结
- 使用Github Page和Hexo搭建个人博客
- 关于hexo + github快速构建个人博客
- 使用Hexo和Github快速搭建个人博客
- Hexo+github构建个人博客
- 【Hexo】Hexo+Github构建个人博客入门
- 基于github page和hexo搭建个人博客
- 【Hexo】Hexo+Github构建个人博客 (三):添加皮肤主题
- 用Hexo+github Page搭建个人博客
- Github Pages 搭建HEXO主题个人博客
- 使用GitHub + Hexo搭建个人博客(九)- 切换 Hexo 主题
- 使用GitHub Pages + Hexo 快速搭建个性化博客(四)-博客菜单和侧边栏优化
- 使用Hexo+GitHub搭建及配置个人博客
- hexo+github快速搭建个人博客
- 使用GitHub + Hexo搭建个人博客(一)- 安装
- 【Hexo】Hexo+Github构建个人博客 (一):环境配置
- 【Hexo】Hexo+Github构建个人博客 (五):错误集
- mybatis 批量插入
- 数据结构(C++语言版)笔记(向量)
- 好想建立自己的博客网站
- java web开发第一篇记录
- 2016程序设计实习期末考试07题上机(dp)
- 使用Github Page和Hexo快速构建个人博客,以及插件安装及主题优化总结
- Adapter类型控件之AutoCompleteTextView(自动完成文本框)&MultiAutoCompleteTextView(多提示项的自动完成文本框)
- Ubuntu16.04 UltraEdit 安装&破解&使用
- 第一篇博文,记录学习的点滴
- <<联盟>>:雇主与员工的新型关系笔记
- Mac下添加java环境变量
- Jquery联表
- 练习四 1012
- Object-Oriented Analysis and Design Using UML 翻译与学习 (一)