如果你喜欢拥有自己的博客域名,如果你喜欢折腾,可以先点击luckykun.com,看看效果,再选择要不要进来看看~~~

之前一直都在博客园写博客,不过最近在逛园子的时候不小心看到了hexo,简直有种相见恨晚的感觉呀!在github上创建自己的开源博客,维护方便,主题多多,更重要的是,终于找到只属于自己的小窝啦!也希望自己能坚持写文_

为了引起读者的兴趣,先介绍一下,搭建完成之后,只需这几个简单常用的命令,就能够轻松维护自己的博客了:

$ hexo new(n)    //写文章
$ hexo generate(g) //把文章生成页面
$ hexo server(s) //启动本地服务调试
$ hexo deploy(d) //部署到github 可与hexo g合并为 hexo d -g

折腾了大半天,终于搭建好了自己的博客点这里去看看。不过在这中途,也是历经了九九八十一难呀,所以,我怀着激动心情,把我在这个过程中遇到的坑作为第一篇博客一一记录下来,希望能帮到后面的学者。

  • 备注1:如果喜欢以官方教程为主的,点这里hexo官方文档
  • 备注2:网上大多教程是都是hexo2.x版本的,所以有很多坑。因此以下教程是针对hexo的版本为3.x以上的,大家放心使用。

准备工作

  • 安装node

    Node.js官网下载相应平台的最新版本,一路安装即可。

  • 安装git

    根据系统不同安装相应的git环境。mac系统不多说,windows一般安装msysgit。下面是我本地msysgit的截图,也还是挺好用的:

  • 安装hexo

    使用以下命令安装hexo到全局

    $ npm install -g hexo

    然后输入命令hexo -v输入hexo的版本号即为安装成功。

  • github准备

    • 博客是在github上托管维护的,所以当然需要一个github的账号了。然后创建一个名为jarson7426.github.io的仓库。

    • 其中‘jarson7426’是我的账户名,下文同理。

    • 除此之外,相信大多数人都知道,要想使用git命令来和github进行提交部署等操作,需要进行一些配置,大概就是下面一些命令,如不明白请自行搜索。

      git config --global user.email xxx@163.com
      git config --global user.name xxx
      ssh-keygen -t rsa -C xxx@163.com(邮箱地址) // 生成ssh
      找到.ssh文件夹打开,使用cat id_rsa.pub //打开公钥ssh串
      登陆github,settings - SSH keys - add ssh keys(把上面的内容全部添加进去即可)

初始化

ok,环境都准备好了,开始激动人心的步骤了,搭建博客。

在某个地方新建一个项目文件夹(比如Blog),然后进入Blog目录,以下所有的命令行操作都是在这个文件夹下进行的。

$ hexo init

生成静态页面

初始化完成之后,就已经生成一篇“hello word”的文章了,现在执行以下命令把文章编译为静态页面:

$ hexo generate

本地启动

把文章变为页面之后,可以执行以下命令,本地启动服务,在浏览器中输入http://localhost:4000/查看生成的页面效果。

$ hexo server

如果你看到了下面这个画面,恭喜你,你成功了!

更换主题

上面的博客效果是hexo自己默认的主题landscape,如果你满足与它,可以跳过这个步骤,直接进行下一步。但是我却还不够满足,因为我发现了一个页面交互人性化,并且完美兼容不同终端显示的主题yilia,貌似这个主题受欢迎程度很高呀,说明我的审美还是不错啊,哈哈~~

下面贴出github上star数量最多的前10个主题:

1.iissnan/hexo-theme-next, 3510个star。

2.litten/hexo-theme-yilia, 1703个star。

3.TryGhost/Casper, 679个star。

4.wuchong/jacman, 503个star。

5.A-limon/pacman, 431个star。

6.daleanthony/uno, 416个star。

7.orderedlist/modernist, 367个star。

8.AlxMedia/hueman, 336个star。

9.kathyqian/crisp-ghost-theme, 303个star。

10.xiangming/landscape-plus, 287个star。

  • clone主题代码

    在目录下执行下面的命令clone主题代码:

    $ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia
  • 修改配置文件

    修改Blog/_config.yml文件:

    theme: yilia    //默认为landscape

    修改themes/yilia/_config.yml文件:

    # Header
    menu:
    主页: /
    所有文章: /archives
    丝茉茉: /categories/simomo/
    相册: /photos
    # SubNav
    subnav:
    github: "https://github.com/jarson7426"
    weibo: "http://weibo.com/u/2732624311"
    zhihu: "#"
    rss: /atom.xml
    # Content
    excerpt_link: 阅读全文
    fancybox: true
    mathjax: true
    top: true
    # 是否开启动画效果
    animate: true
    # 是否在新窗口打开链接
    open_in_new: false
    # Miscellaneous
    google_analytics: ''
    favicon: /favicon.ico
    #你的头像url
    avatar: /img.png
    #是否开启分享
    share_jia: true
    share_addthis: false
    #是否开启多说评论,填写你在多说申请的项目名称 duoshuo: duoshuo-key
    #若使用disqus,请在博客config文件中填写disqus_shortname,并关闭多说评论
    duoshuo: jarson7426
    #是否开启云标签
    tagcloud: true
    #是否开启友情链接
    #不开启——
    friends: false
    #开启——
    #friends:
    # 百度一下: http://www.baidu.com
    # 淘宝商城: http://www.taobao.com
    #是否开启“关于我”。
    #不开启——
    #aboutme: false
    #开启——
    aboutme: true
  • 查看效果

    更改主题之后可以使用命令hexo server打开本地服务,查看效果。

部署到github

上面所有的操作完成之后,你就可以将你的Blog项目部署到github上了。

  • 部署之前先修改Blog/_config.yml文件。

    deploy:
    type: git
    repository: https://github.com/jarson7426/jarson7426.github.io.git //jarson7426替换为你自己的用户名
    branch: master

    备注:在hexo3.x版本下,这里的type应该填git,不是github;另外冒号后面都有一个英文的空格,不然会报错的。

  • 然后使用以下命令进行部署。

    $ hexo deploy

    备注:如果执行上述命令报错,你可以试试下面这个命令再试。

    $ npm install hexo-deployer-git--save

部署成功后,你在浏览器中输入jarson7426.github.io,就能看到和本地一样的效果了。

结语

好了,到这里搭建github博客的步骤就结束了。enjoy it!!!

使用hexo搭建属于自己的博客的更多相关文章

  1. 利用Github和Hexo搭建独立的个人博客--基础篇

    利用Github和Hexo搭建独立的个人博客--基础篇 摘要:本文主要参考了使用hexo和Github上创建自己的博客.如何搭建一个独立博客--简明Github Pages与Hexo教程和使用GitH ...

  2. 使用Hexo搭建一个简单的博客(一)

    搭建好简洁的博客框架后,回看时发现,简洁之中透露着一丝丝简陋,好的,网上关于丰富hexo的文章也很多 记录一下自己的一些瞎操作. 在你的hexo目录下,你可以看到themes文件夹里有个默认的land ...

  3. 使用Hexo搭建一个简单的博客(二)

    昨天想着用Hexo和github搭一个自己简单的博客,记录一下自己踩过的坑,具体的流程就不重复了,主要参考了一下几篇文章 GitHub+Hexo 搭建个人网站详细教程 使用Hexo+Github一步步 ...

  4. Hexo搭建 github.io 静态博客使用指南

    What? Hexo 是一个快速.简洁且高效的博客框架.可以使用markdown 解析成文章,在几秒内,即可利用靓丽的主题生成静态网页. Why? 笔记需要整理 How? github 创建 char ...

  5. 使用Hexo+Github搭建属于自己的博客(进阶)

    主题的配置:这里以NexT主题作为题材 1.安装NexT,在其文件夹中鼠标右键,点击Git Base Here.输入命令:git clone https://github.com/iissnan/he ...

  6. 使用Hexo+Github搭建属于自己的博客(基础)

    前言 hexo是一个台湾人做的基于Node.js的静态博客程序,优势是生成静态文件的速度非常快,支持markdown, 我最终选定它的原因是它速度快而且不容易出错,并且可以一键部署到github或者其 ...

  7. Hexo+GitHub+Netlify一站式搭建属于自己的博客网站

    喜欢的话请关注我的个人博客我在马路边https://hhongwen.cn/,此文为博主原创,转载请标明出处. 更好的阅读体验请点击查看:Hexo+GitHub+Netlify一站式搭建属于自己的博客 ...

  8. 使用 Hexo 在 GitHub 上建立博客 · Utopia's Daily Note

    使用 Hexo 在 GitHub 上建立博客 # 写在前面 其实我在一月份的就开始写了三篇博客文章,你没有看错,只是写了三篇,然后,就没有然后了.我还在其中一篇文章中写着,不知道自己能够坚持多久.事实 ...

  9. 使用hexo和coding建立静态博客站点

    背景 由于工作性质的原因,做技术的总想记录和分享一下自己的学习和成长历程,向这世界证明我来过.写文章,发博客,一开始使用51cto,广告太多,看起来让人很痛苦:接着试用了博客园,广告少一些,但感觉还是 ...

随机推荐

  1. Uiautomator 2.0之UiObject2类学习小记

    1. 基础动作 1.1. 相关API介绍 API 说明 clear() 清楚编辑框内的内容 click() 点击一个对象 clickAndWait(EventCondition<R> co ...

  2. 重温 w3cshool css3

    border-radius: 2em 1em 4em / 0.5em 3em;  兼容性IE9+.Firefox 4+.Chrome.Safari 5+ 以及 Opera 支持 border-radi ...

  3. ASP.NET MVC之Unobtrusive Ajax(五)

    前言 这一节我们来讲讲Unobtrusive中的Ajax提交,大部分情况下我们是利用JQuery来进行Ajax请求,当然利用JQuery来进行表单Ajax请求也不例外,但是相对于Unobtrusive ...

  4. DOM-Node类型

    DOM(文档队形模型)是针对HTML和XML文档的一个API(应用程序编程接口).DOM描绘了一个层次化的节点树,允许开发人员添加,移除和修改页面的一部分.DOM可以讲任何HTML和XML文档描绘成一 ...

  5. ASP.NET 5 单元测试中使用依赖注入

    相关博文:<ASP.NET 5 使用 TestServer 进行单元测试> 在上一篇博文中,主要说的是,使用 TestServer 对 ASP.NET 5 WebApi 进行单元测试,依赖 ...

  6. 使用SPIRE.XLS来创建Excel 工作簿

               使用SPIRE.XLS来创建Excel 工作簿     概要 最近在研究 .NET 控件,使用这些控件在程序中可以快速低成本实现功能. 在这一篇中我们使用的控件是Spire.XL ...

  7. IE6下的png透明图片的背景定位

    在IE6下PNG透明图片做背景,无法使用background-position进行定位.但是可以使用margin和绝对定位来进行. 另外,由于IE6下的 :hover 只对<a>支持,对其 ...

  8. Apple的LZF算法解析

    有关LZF算法的相关解析文档比较少,但是Apple对LZF的开源,可以让我们对该算法进行一个简单的解析.LZFSE 基于 Lempel-Ziv ,并使用了有限状态熵编码.LZF采用类似lz77和lzs ...

  9. CSS 巧用 :before和:after

    前几天的晚上较全面的去看了下css的一些文档和资料,大部分的样式运用都没什么大问题了,只是有些许较陌生,但是也知道他们的存在和实现的是什么样式.今天主要想在这篇学习笔记中写的也不多,主要是针对:bef ...

  10. Kafka0.10的新特性一览

    原文链接:http://kane-xie.iteye.com/blog/2301197 2016年5月Confluent官方宣布Apache Kafka 0.10正式发布.该版本包含了很多新功能和优化 ...