MyException - 我的异常网
当前位置:我的异常网» 开源软件 » Hexo + GitHub Pages筹建博客

Hexo + GitHub Pages筹建博客

www.MyException.Cn  网友分享于:2013-10-27  浏览:0次
Hexo + GitHub Pages搭建博客

搭建 Node.js 环境

为什么要搭建 Node.js 环境? – 因为 Hexo 博客系统是基于 Node.js 编写的

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境,可以在非浏览器环境下,解释运行 JS 代码。

在 Node.js 官网:https://nodejs.org/en/下载最新安装包LTS版

Hexo + GitHub Pages搭建博客

保持默认设置即可,一路Next,安装很快就结束了。

然后打开命令提示符,输入

node -v

npm -v

出现版本号则说明 Node.js 环境配置成功,第一步完成!!!

Hexo + GitHub Pages搭建博客

搭建 Git 环境

为什么要搭建 Git 环境? – 因为需要把本地的网页和文章等提交到 GitHub 上。

Git 是一款免费、开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目。

在 Git 官网:https://git-scm.com/下载适合自己系统的安装包

Hexo + GitHub Pages搭建博客

保持默认设置即可,一路Next,安装很快就结束了。

开始菜单Git Bash

Hexo + GitHub Pages搭建博客或桌面右键打开Git Bush HereHexo + GitHub Pages搭建博客输入

git --version

出现版本号则说明 Git 环境配置成功,第二步完成!

Hexo + GitHub Pages搭建博客

GitHub 注册和配置

GitHub 是一个代码托管平台,因为只支持 Git 作为唯一的版本库格式进行托管,故名 GitHub

Github注册:https://github.com/

创建仓库:Repository name 使用自己的用户名,仓库名规则:

注意:yourname必须是你的用户名。

yourname/yourname.github.io

例如我的是:mdd1991.github.io

Hexo + GitHub Pages搭建博客

访问 yourname.github.io,如果可以正常访问,那么 Github 的配置已经结束了。

到此搭建 Hexo 博客的相关环境配置已经完成,下面开始讲解 Hexo 的相关操作。

安装配置 Hexo

Hexo 是一个快速、简洁且高效的博客框架,使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

强烈建议你花20分钟区读一读 Hexo 的官方文档:https://hexo.io/zh-cn/

Hexo + GitHub Pages搭建博客

使用 npm 安装 Hexo

在命令行中输入:

npm install hexo-cli -g

通常会卡住一会,耐心等待,然后你将会看到下图,可能你会看到一个WARN,但是不用担心,这不会影响你的正常使用。

Hexo + GitHub Pages搭建博客

查看Hexo的版本

hexo version

Hexo + GitHub Pages搭建博客

安装 Hexo 完成后,请执行下列命令来初始化 Hexo,用户名改成你的,Hexo 将会在指定文件夹中新建所需要的文件。

hexo init mdd1991.github.io

Hexo + GitHub Pages搭建博客

cd mdd1991.github.io

npm install

Hexo + GitHub Pages搭建博客

出现警告,在网上搜索忽略警告即可:

Hexo + GitHub Pages搭建博客

新建完成后,指定文件夹的目录如下:

Hexo + GitHub Pages搭建博客

├── .deploy        #需要部署的文件

├── node_modules    #Hexo插件

├── public          #生成的静态网页文件

├── scaffolds      #模板

├── source          #博客正文和其他源文件,404、favicon、CNAME 都应该放在这里

| ├── _drafts      #草稿

| └── _posts        #文章

├── themes          #主题

├── _config.yml    #全局配置文件

└── package.json    #npm 依赖等

运行本地 Hexo 服务

hexo server

或者

hexo s

若出现防火墙点击确定。

Hexo + GitHub Pages搭建博客

您的网站会在http://localhost:4000下启动。如果http://localhost:4000能够正常访问,则说明 Hexo 本地博客已经搭建起来了,只是本地哦,别人看不到的。下面,我们要部署到Github。

Hexo + GitHub Pages搭建博客

在浏览器中访问一直打不开怎么办?原因是端口被另一个程序占用,也没提示,换个端口比如:4001就可以了。

hexo server --port=<other port>

Hexo + GitHub Pages搭建博客

注意1:执行hexo server提示找不到该指令

解决办法:在Hexo 3.0 后server被单独出来了,需要安装server,安装的命令如下:

sudo npm install hexo-server

或者

npm install hexo -server --save

关联 Hexo 与 GitHub Pages

我们如何让本地git项目与远程的github建立联系呢?用 SSH keys

生成SSH keys

输入你自己的邮箱地址

ssh-keygen -t rsa -C "donnymoving@gmail.com"

在回车中会提示你输入一个密码,这个密码会在你提交项目时使用,如果为空的话提交项目时则不用输入,我们按回车不设置密码。

Hexo + GitHub Pages搭建博客

添加 SSH Key 到 GitHub

打开上面提示的路径C:\Users\User\.ssh\id_rsa.pub,此文件里面内容为刚才生成的密钥,准确的复制这个文件的内容,粘贴到https://github.com/settings/ssh的new SSH key中

Hexo + GitHub Pages搭建博客

 

测试

可以输入下面的命令,看看设置是否成功,git@github.com的部分不要修改:

ssh -T git@github.com

如果是下面的反馈:

The authenticity of host ‘github.com (207.97.227.239)’ can’t be established.

RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.

Are you sure you want to continue connecting (yes/no)?

不要紧张,输入yes就好,然后会看到:

Hi mdd1991! You’ve successfully authenticated, but GitHub does not provide shell access.

Hexo + GitHub Pages搭建博客

配置Git个人信息

现在你已经可以通过 SSH 链接到 GitHub 了,还有一些个人信息需要完善的。

Git 会根据用户的名字和邮箱来记录提交。GitHub 也是用这些信息来做权限的处理,输入下面的代码进行个人信息的设置,把名称和邮箱替换成你自己的。

git config --global user.name "Donny"

git config --global user.email "donnymoving@gmail.com"

配置 Deployment

复制mdd1991.github.io路径

Hexo + GitHub Pages搭建博客

在_config.yml文件中,找到Deployment,然后按照如下修改,用户名改成你的:

需要注意的是:冒号后面记得空一格!

# Deployment

## Docs: https://hexo.io/docs/deployment.html

deploy:

type: git

repo: git@github.com:mdd1991/mdd1991.github.io.git

branch: master

Hexo + GitHub Pages搭建博客

本地文件提交到 GitHub Pages

// 删除旧的 public 文件

hexo clean

// 生成新的 public 文件

hexo generate

或者

hexo g

// 开始部署

hexo deploy

或者

hexo d
注意1:若上面操作提示ERROR Deployer not found: git,则需要安装一个扩展:
npm install hexo-deployer-git --save

然后再部署即可解决。需要注意的是yaml语法要求严格,注意空格。若一直不行,建议把github地址那条语句重新手写一遍,每个冒号后面要有一个半角的空格。

若最后显示INFO Deploy done: git,表示部署已经成功了,然后在浏览器中输入https://mdd1991.github.io(用户名改成你的)看到了 Hexo 与 GitHub Pages 已经成功关联了,哇哇哇哇哇哇,开心死你了,不要忘了回来给我点赞哟 ~

Hexo + GitHub Pages搭建博客

注意2:如果在执行hexo d后,出现error deployer not found:github的错误(如下),则是因为没有设置好 public key 所致,重新详细设置即可。

Permission denied (publickey).

fatal: Could not read from remote repository.

Please make sure you have the correct access rights

and the repository exists.

注意3:怎么避免 .md 文件被解析?

Hexo原理就是hexo在执行hexo generate时会在本地先把博客生成的一套静态站点放到public文件夹中,在执行hexo deploy时将其复制到.deploy_git文件夹中。Github的版本库通常建议同时附上README.md说明文件,但是hexo默认情况下会把所有md文件解析成html文件,所以即使你在线生成了 README. md,它也会在你下一次部署时被删去。怎么解决呢?

将README.md放在source文件夹,然后修改_config.yml,设置 skip_render: README.md选项就行了,将不需要渲染的文件名称加入的其选项下就行了。

Hexo + GitHub Pages搭建博客

GitHub Pages 地址解析到个人域名

Github Pages 是面向用户、组织和项目开放的公共静态页面搭建托管服 务,站点可以被免费托管在 Github 上,你可以选择使用 Github Pages 默 认提供的域名 github.io 或者自定义域名来发布站点。

看着博客的域名是二级域名,总有一种寄人篱下的感觉,为了让这个小窝看起来更加正式,我在阿里云上买了一个域名,打算将博客绑定自己的域名。进行该绑定过程,其实就是一个重定向的过程。

在 GitHub 仓库的根目录下建立一个CNAME的文本文件(注意:没有扩展名),文件里面只能输入一个你的域名,不能加http://

www.aboysblog.com

Hexo + GitHub Pages搭建博客注意:CNAME 一定是在你 Github 项目的 master 根目录下

进入阿里云域名解析地址,添加解析:

记录类型选择CNAME

主机记录填www

解析线路选择默认

记录值填yourname.github.io

TTL值为10分钟

再添加一个解析,记录类型A

主机记录填www

解析线路选择默认

记录值填你GitHub 的ip地址(在cmd中ping:)

ping mdd1991.github.com
Hexo + GitHub Pages搭建博客

点击保存,等 1 分钟,访问下你自己的域名,一切就ok了。

域名绑定成功,域名解析成功,因此你在浏览中输入www.aboysblog.com,或 aboysblog.com 就可以访问到博客了,输入 mdd1991.github.io 会重定向到www.aboysblog.com。过程:www 的方式,会先解析成http://xxxx.github.io,然后根据 CNAME 再变成 www

注意:CNAME文件在下次hexo deploy的时候就消失了,需要重新创建,这样就很繁琐

方法一:在hexo g之后,hexo d之前,把CNAME文件复制到 “\public” 目录下面,里面写入你要绑定的域名。

方法二:将需要上传至github的内容放在source文件夹,例如README.md、CNAME、favicon.ico、images等,这样在 hexo d 之后就不会被删除了。

注意1:每次生成的 CNAME 都是 yoursite.com 怎么解决?

修改 _config.yml

url: http://www.aboysblog.com

root: /

permalink: :year/:month/:day/:title/

permalink_defaults:

Hexo 的常用操作

发表一篇文章

hexo new "文章标题"

Hexo + GitHub Pages搭建博客

 

在本地博客文件夹source\_posts文件夹下看到我们新建的 markdown 文件。

当然,我们也可以手动添加Markdown文件在source->_posts文件夹下,其效果同样可以媲美hexo new

文章编辑好之后,运行生成、部署命令:

hexo clean

hexo g

hexo d

当然你也可以执行下面的命令,相当于上面两条命令的效果

hexo clean

hexo d -g

新建一个自定义页面

hexo new page folder

文章如何添加多个标签

有两种多标签格式

tags: [a, b, c]

tags:

– a

– b

– c

显示部分文章内容

如果在博客文章列表中,不想全文显示,可以增加 <!-- more -->, 后面的内容就不会显示在列表。

更改主题

官方主题库:https://hexo.io/themes/

Hexo主题非常,推荐使用Next为主题,请阅读 Next 的官方文档(http://theme-next.iissnan.com/),5 分钟快速安装。

再提示一点,大家可以hexo主题修改一步就hexo s看下变化,初次接触对参数不清楚。只有hexo s后在可以在本地浏览到效果,Ctrl+C 停止服务器。

文章评论

10个调试和排错的小建议
10个调试和排错的小建议
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
旅行,写作,编程
旅行,写作,编程
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
总结2014中国互联网十大段子
总结2014中国互联网十大段子
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
程序员都该阅读的书
程序员都该阅读的书
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
鲜为人知的编程真相
鲜为人知的编程真相
程序员和编码员之间的区别
程序员和编码员之间的区别
Java程序员必看电影
Java程序员必看电影
一个程序员的时间管理
一个程序员的时间管理
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
如何成为一名黑客
如何成为一名黑客
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
中美印日四国程序员比较
中美印日四国程序员比较
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
程序员的鄙视链
程序员的鄙视链
代码女神横空出世
代码女神横空出世
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
漫画:程序员的工作
漫画:程序员的工作
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
我是如何打败拖延症的
我是如何打败拖延症的
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
我的丈夫是个程序员
我的丈夫是个程序员
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
老程序员的下场
老程序员的下场
那些争议最大的编程观点
那些争议最大的编程观点
程序员必看的十大电影
程序员必看的十大电影
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
 程序员的样子
程序员的样子
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有