放一张比较喜欢的背景图镇楼,伪文艺一波。因为刚刚抱着四个快递从公司大门走到宿舍,快递都比我高,坐电梯的时候电梯里面的灯一闪一闪,电梯还摇晃,上演了一波鬼吹灯,惊魂未定。。。

说正题:我喜欢的博客应该是比较简约的风格,然后自己可以在里面为所欲为的。所以我弄得大概是这一种样子的。

手机电脑都可以访问:https://sulishibaobei.github.io。查看效果。

如果要查看我的源码,可以去我的github上看,访问:https://github.com/sulishibaobei/hexo-github-nodejs.git

(1)假装你已经安装了node.js,再假装你已经安装过git,再假装你注册了github账号。然后创建一个repositories。记住名字要和github用户名一致。比如我的账户名是:sulishibaobei  那么仓库名就是sulishibaobei.github.io  一定要这样哟

(2)安装Hexo .  npm install -g hexo   准备工作就就绪啦

(3)在本地创建一个文件夹,我的文件夹名叫blog  ,切换到blog内,运行hexo init 。会生成许多文件,大概有:

(4)然后运行hexo generate,生成静态页面,相对于上次生成的就会多一个public文件,所以我们就知道静态页面在public文件里啦:

(5)开启本地服务  hexo server  ,此时访问本地localhost:4000就可以查看了。但是目前还是本地,如何和我们的github连起来呢?

(6)看上面有一个_config.yml文件,打开找到最后的 deploy   将下面这段替换它:

deploy:
  type: git
  repository: https://github.com/sulishibaobei/sulishibaobei.github.io.git

注意:repository记得写成你自己的仓库地址哟

(7)然后运行 npm install hexo-deployer-git --save  命令,使用git部署。

(8)运行hexo deploy 部署项目,然后在浏览器输入https://sulishibaobei.github.io 就可以查看啦。

(9)现在看到的页面还是比较原始的hexo默认生成的,接下来就可以自己动手来改动你想要的样子了。

首先换成你想要的文件:source 文件里后缀为md的文件,将你想要的内容复制进去就可以啦。想做出别人的那种效果,或者放置图片什么的,推荐大家去看看md语法。就会啦。

http://www.kuqin.com/shuoit/20141125/343459.html  此网友写的不错。

如果想一个页面显示多条文章,那么再创建一个xxx.md文件就可以,显示几个创建几个

更换个主题,让博客换成左右的样子,我用的是yilia,这是由博主litten制作的,还有许多精美主题可以使用。yilia文件在我的源代码的themes路径下,默认的是 landscape,你将下载下来的yilia放在themes路径下,接下来还是打开_config.yml文件 将theme改成如图所示。

(10)查看效果,记住每次运行的步骤都一样:hexo clean  ,hexo generate,hexo deploy 三步。

其实可以先在本地查看,开启hexo server服务,打开Localhost可以看到一样的效果,因为上面上步效果比较慢。

(11)最后在换换头像,换换其他的信息。让你的每个空间看起来都可以点击。

主要是修改根目录下的_confit.yml文件和themes下的yilia里面的_config.yml文件。

可以对照我的源码里面的内容进行改动。

还有许多博主搭建的都不错,我不过是在前人得大树下乘凉而已,谢谢哟

利用hexo+github+nodejs搭建自我博客的一天的更多相关文章

  1. 使用Hexo + GitHub Pages 搭建个人博客

    一.前言 之前是在CSDN上写博客的,但是无奈其广告满天飞,还有因为个人不太喜欢CSDN博客里的一些东西,加上看到很多技术大牛都有自己的个人博客,于是乎!便想着搭建一个自己的个人博客.其实之前写博客还 ...

  2. 基于 Hexo + GitHub Pages 搭建个人博客(一)

    前言:我的博客写作之路 15 年刚上大学,第一次接触公众号,就萌生了创建一个公众号写点东西,但最终不了了之. 很快到了 16 年,开始接触网上各大博客网站,接触最多的当属 CSDN,萌生了注册一个博客 ...

  3. 基于 Hexo + GitHub Pages 搭建个人博客(二)

    在 基于 Hexo + GitHub Pages 搭建个人博客(一) 这篇文章中,我们已经知道如何使用 Hexo + GitHub Pages 搭建一个个人博客,GitHub 为我们提供了免费的域名和 ...

  4. 基于 Hexo + GitHub Pages 搭建个人博客(三)

    一.添加扫描二维码关注功能 打开 themes 目录下的 next 主题配置文件,找到 Wechat Subscriber 标签,将该标签下的配置改成如下形式: # Wechat Subscriber ...

  5. 利用 Hexo 或者 hugo 搭建个人博客

    我们无法选择生活的样子,但我们可以记下来. 博客的开始 其实,一切都是为了更好的装逼.好吧,我着相了. 最开始想做一个自己博客,主要是因为看到了很多人都有,觉得自己没有太 Low 了.于是申请了 CS ...

  6. 基于Hexo+Github Pages搭建的博客

    概念 Github Pages可以被认为是用户编写的.托管在github上的静态网页.使用Github Pages可以为你提供一个免费的服务器,免去了自己搭建服务器和写数据库的麻烦.此外还可以绑定自己 ...

  7. Hexo + Github Pages 搭建个人博客

    之前一直想搭建自己的博客,由于自己的懒惰拖到现在.好了,废话不多说!直接上干货! 安装Node.js 安装Git Github Pages配置 安装Hexo及主题设置 进阶篇-高级定制 其它实用功能 ...

  8. HEXO与Github.io搭建个人博客

    HEXO与Github.io搭建个人博客 HEXO搭建    HEXO是基于Node.JS的一款简单快速的博客框架,能够支持多线程,支持markdown,可以将生成的静态网页发布到github.io以 ...

  9. 【一】Ubuntu14.04+Jekyll+Github Pages搭建静态博客

    本系列有五篇:分别是 [一]Ubuntu14.04+Jekyll+Github Pages搭建静态博客:主要是安装方面 [二]jekyll 的使用 :主要是jekyll的配置 [三]Markdown+ ...

随机推荐

  1. iOS 获取本地文件的各种坑

    1.无论:TXT,EPUB,PDF等各种格式的文件,保存到本地的时候,最好都保存成字母或者数字,不要保存成汉字,否则,在取文件的时候,由于编码的问题,各种瓦特 2.如果文件名真的保存成了汉字,那么进行 ...

  2. python 开发者 精品

    当 Python 和 R 遇上北京二手房 http://mp.weixin.qq.com/s?timestamp=1473262097&src=3&ver=1&signatur ...

  3. Ubuntu14.04下搭建VPN服务

    直接上步骤: 1.第一步需要安装PPTP,以用来提供VPN服务. sudo apt-get install pptpd 如果有问题的话比如提示找不到之类的,apt-get update 一下应该就可以 ...

  4. 阿里CEO张勇公开信:把眼光从股市回到客户身上

     8月25日消息,面对全球资本市场的剧烈波动,阿里巴巴集团CEO张勇今日发表致员工信,倡议全体阿里员工把眼光从股市回到客户身上,脚踏实地的服务帮助客户,为客户创造价值,继而为股东和自己创造价值.  张 ...

  5. AFNetWorking 之 网络请求的基本知识

    NSString *urlStr = @"http://api.openweathermap.org/data/2.5/forecast/daily"; AFHTTPRequest ...

  6. Java Me-List控件的用法案例

    /** * Java Me-List控件的用法案例 */package com.xushouwei.cn; import java.io.IOException;import javax.microe ...

  7. CSS中设置margin:0 auto; 水平居中无效的原因分析

    很多初学制作网页的朋友,可能会遇到的一个常见问题,就是在CSS中加了margin:0 auto;却没有效果,不能居中的问题,margin:0 auto;的意思就是:上下边界为0,左右根据宽度自适应,其 ...

  8. Everything开机自启

    第一步:关闭自动启动 在设置中关闭everything开机自动启动. 第二步:创建计划任务 点击“开始”—“任务计划程序”—“创建任务” 首先设置任务的名称等,注意一定要勾选“使用最高权限运行”. 然 ...

  9. MyBatis-Generator的配置说明和使用

    关于MyBatis: MyBatis Generator (MBG) 是一个Mybatis的代码生成器 MyBatis 和 iBATIS. 他可以生成Mybatis各个版本的代码,和iBATIS 2. ...

  10. redis内存占用说明

    执行info命令后,找到Memory这一栏,就可以看到内存的使用信息了,如下图: # Memory used_memory:13490096 //数据占用了多少内存(字节) used_memory_h ...