码迷,mamicode.com
首页 > 其他好文 > 详细

利用hexo和github建立个人博客 适合小白的~

时间:2016-04-24 18:40:31      阅读:292      评论:0      收藏:0      [点我收藏+]

标签:

 


 

因为我自己用的是window 7系统,所以下面的教程是针对window系统的 首先需要准备的有

 

 

安装Git

 

作用:把本地的hexo提交到github上面去;

 

一路点击“Next”就好了

 

在这里选择对应的window选项

 

技术分享

 

安装Node.js

 

Node也是一样简单,也是一路“Next”就好,然后就等待安装完成

 

技术分享

 

接下来就要验证软件是否正确的安装了

 

在运行里面输入“cmd”

 

然后输入如图所示的命令,如果结果和图中的不一样,就要卸载软件重新的安装

 

?

 

git --version
node -v
npm -v

 

技术分享

 

申请Github

 

点击-》Github官网 注册一个账号,然后点击"setting"验证邮箱

 

选择Free技术分享

 

然后点击“New repository”,新建一个仓库,存放你的博客

 

输入Respository name:yourname.github.io(yourname是你的github的名字,然后这个就是博客的域名了)

 

技术分享

 

## 启用Github page

 

进入你创建的仓库,点击"setting"进入设置==>点击"Launch automaic page generator"==>点击底部的"Continue to layouts"

 

最后点击"Publish page",发布github默认生成的静态站点技术分享

 

安装Hexo

 

hexo是基于node.js的静态博客,其官网也是搭建在github上的

 

  1. 在电脑新建一个文件夹,该文件夹存放你的博客文件,然后右键点击选择“Git Bash”,如建立一个blog文件夹。

  2. 然后输入命令”npm intall -g hexo“

    技术分享

    有时候可能会被”墙“,可使用淘宝镜像安装,若以上正常不用执行这一步。技术分享

    安装完成后,输入命令hexo -v验证是否正常安装

    技术分享

 

初始化hexo

 

输入hexo init

 

技术分享

 

安装插件

 

输入npm install hexo-deployer-git --save

 

生成静态页面

 

输入hexo generate(hexo g也可以),生成静态页面到public目录下

 

预览

 

输入hexo s,开启本地预览(hexo s -g是预览并生成静态页面)技术分享

 

打开浏览器输入localhost:4000,就可以看到激动人心的一幕了!!,这是你的个人博客

 

技术分享

 

然后在Git中ctrk+c 停止预览

 

这个时候,我们建的博客只是可以在本地预览,我们要让它变成在浏览器地址栏输入一行URL就可以访问的那种,听起来好像很厉害的样子?哈哈

 

这个时候就要轮到我们的github出场了,我们把博客部署在刚刚在github建的仓库里面,怎么部署呢?

 

首先我们需要添加S-S Key密钥到github上面,来让我们的电脑跟github建立连接,这样我们才能把博客部署到git上

 

我用的是TortoiseGit关于TortoiseGit的安装包找度娘就有了,然后打开其中的

 

Puttygen.exe生成密钥,点击Generate按钮

 

技术分享

 

1、然后复制密钥(后面要在github中添加密钥),然后点击Save privete key按钮,选择一个地址保存。

 

2、双击TortoiseGit目录下的Pageant.ext使用密钥,导航栏出现图标,双击它。

 

技术分享

 

3、点击Add key按钮,打开之前保存的密钥文件,关闭窗口。

 

技术分享

 

如果不想下载TortoiseGit,也可以利用Git命令来生成秘钥参考链接

 

配置Github

 

1、登录Github,点击Setting.

 

技术分享

 

2、点击Add SSH key,添加密钥信息。把之前复制的密钥黏贴在其中,title可以随便写,然后点击保存。

 

技术分享

 

 

 

配置博客信息

 

配置好密钥后,我们就可以把博客部署到github上啦,编辑blog/_config.yml文件

 

#博客名称
title: 我的博客
#副标题
subtitle: 一天进步一点
#简介
description: 记录生活点滴
#博客作者
author: lxq
#博客语言
language: zh-CN
#时区
timezone:

#博客地址,与申请的GitHub一致
url: http://elfwalk.github.io
root: /
#博客链接格式
permalink: :year/:month/:day/:title/
permalink_defaults:

source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: true
  tab_replace:

default_category: uncategorized
category_map:
tag_map:

#日期格式
date_format: YYYY-MM-DD
time_format: HH:mm:ss

#分页,每页文章数量
per_page: 10
pagination_dir: page

#博客主题
theme: landscape

#发布设置
deploy: 
  type: git
  #elfwalk改为你的github用户名
  repository: https://github.com/elfwalk/elfwalk.github.io.git
  branch: maste

 

配置好_config.yml并保存后,输入一下的命令部署到github上。

 

$hexo g           //生成静态页面
$hexo d           //部署到github

 

第二个命令中,会让你输入密码和账户名,跟你在github上的一致。 在浏览器中访问yourname.github.io(yourname是你的git用户名)就可以看到自己的博客了。

 

哈哈,到了这个时候,我们的博客已经大功告成了,是不是瞬间觉得自己超厉害的~

 

总结

 

一些常用命令:

 

hexo new"postName" #新建文章

 

hexo new page"pageName" #新建页面

 

hexo generate #生成静态页面至public目录

 

hexo server #开启预览访问端口(默认端口4000,‘ctrl + c‘关闭server)

 

hexo deploy #将.deploy目录部署到GitHub

 

hexo help # 查看帮助

 

hexo version #查看Hexo的版本

 

每次部署的步骤,按以下三步:

 

hexo clean

 

hexo generate(hexo g)

 

hexo deploy(hexo d)

 

博客的文章建议利用Markdown语法来写

 

参考:地址

 

 

 

 

 

 

 

 

 

利用hexo和github建立个人博客 适合小白的~

标签:

原文地址:http://www.cnblogs.com/KnowLXQ/p/5427555.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!