关闭

Hexo建站:部署到github

标签: Hexo建站github-ioindigo博客
1553人阅读 评论(0) 收藏 举报
分类:

前言

本文主要讲述如何使用Hexo建站,以及如何将网站部署到github.io域名。Hexo建站的具体效果,请查看:MichaelX’s Blog

本文作者MichaelX(xiong_it),博客链接:http://blog.csdn.net/xiong_it ,转载请注明出处。

笔者的电脑环境为MacOS 10.12,其他OS其参考:https://hexo.io/zh-cn/docs/


Hexo建站步骤

Hexo可以兼容部署到github pages,WordPress等。
由于笔者使用的是github pages,本文就以笔者博客的建站历程为栗子。

使用整体建站流程为:

  1. 下载和本地配置Hexo
  2. 下载和本地配置Hexo主题
  3. 部署Hexo到github.io
  4. 发布新博文

安装和配置Hexo

安装Hexo的前提是本地已安装Node.js和git环境,如果已安装可忽略以下前两步。

安装Node.js

// 安装nvm以安装Node.js
$ curl https://raw.github.com/creationix/nvm/master/install.sh | sh

// 重启终端,使用nvm安装node.js
$ nvm install stable

安装git

git是用来将代码push到github用的,Hexo程序会自动调用,不用手动使用git命令和gui.

// 安装Homebrew以安装git
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

// 使用Homebrew安装git
$ brew install git

安装Hexo程序

$ npm install -g hexo-cli

配置Hexo站点

以上只是安装了Hexo程序到本地,现在开始使用命令生成hexo站点。

使用以下命令生成一个hexo站点文件夹

$ hexo init <folder>

进入刚刚生成的目录,假设为myblog

$ cd myblog

使用如下命令安装Heox站点到本地

$ npm install

如果上述命令出现安装Hexo站点失败,那就使用root权限再试试

$ sudo npm install

我当初就是这么安装Hexo成功的。

hexo本地站点目录结构是这样的

├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

配置Hexo站点
_config.yml是整个站点的配置文件,具体配置最后来讲,不影响下一步。


下载和配置Hexo主题

Hexo默认自带主题,但是你也可以自定义主题,需要自行下载配置
这里以笔者使用Material Design设计风格的indigo主题为例。
依旧在myblog目录下执行以下命令

$ git clone git@github.com:yscoder/hexo-theme-indigo.git themes/indigo

不要离开该目录,继续安装indigo主题的依赖
Less
主题默认使用 less 作为 css 预处理工具。

$ npm install hexo-renderer-less --save

Feed
用于生成 rss。

$ npm install hexo-generator-feed --save

Json-content
用于生成静态站点数据,用作站内搜索的数据源。

$ npm install hexo-generator-json-content --save

QRCode
用于生成微信分享二维码。

可选,不安装时会请求 jiathis Api 生成二维码。

$ npm install hexo-helper-qrcode --save

这时,myblog/themes下就多一个indigo目录了,说明indigo主题就下载好了,下面来配置indigo主题

$ cd myblog/themes/indigo/
$ ls

可以看到主题配置文件_config.yml,具体配置依旧最后来讲,此时不影响继续下一步操作。


部署Hexo到github.io

配置Hexo站点
hexo配置中文文档
配置indigo主题
indigo主题安装&配置文档

配置git环境

参考链接:初次运行 Git 前的配置

解决多个git账号冲突问题

如果之前电脑上已经有了git账号,那么请参考:Mac多个Git账户配置

登陆github创建项目

注:该项目名称只能是你的用户名作为辨别域名。

举个例子,笔者的github主页是:https://github.com/xiong-it/,那么我的用户名就是xiong-it,所以新建项目名称是必须为xiong-it.github.io,而我的giuhub pages网站就是:https://xiong-it.github.io

参考hexo配置中文文档,填写好你刚创建的项目git地址,以下命令一键即可部署到github.io上

$ hexo deploy
// 以上命令可简写为
$ hexo d

具体部署文档:Hexo部署中文文档
部署完成后,然后就可以通过:https://xiong-it.github.io访问网站了。


Hexo发布新文章

由于hexo是静态网站,所以没有普通cms带的后台管理,所有操作均在本地完成,然后生成静态界面,再git推送到github上,在github pages上展现。

下面我想发表一篇博文,名称就叫:《Hexo建站:部署到github》,那么我可以在终端命令中做如下操作

$ cd myblog
// 新建文章,后面跟标题名称
$ hexo new post "Hexo建站:部署到github"
// 以上命令可简写为
$ hexo n post "Hexo建站:部署到github"

这时,会在myblog/source/_post/中生成一个 Hexo建站:部署到github.md文件,不要移动它的所在路径,你可以依照Markdown语法编写该文件,编写完成后,保存文件,使用以下命令生成静态界面

$ hexo generate
// 以上命令可简写为
$ hexo g

使用如下命令进行本地localhost:400 预览

$ hexo server
// 以上命令可简写为
$ hexo s

预览没有问题,使用如下命令进行重新部署,上传到github

$ hexo deploy
// 以上命令可简写为
$ hexo d

这是github.io网页也就更新了,每次发布新博文均重复这几步

  1. hexo n post “blogName”
  2. hexo g
  3. hexo s
  4. hexo d

Hexo想要修改Hexo博文的话,只要打开相应的source/_post/下的md文档,修改再生产,在部署就是了。


结语

以上就是Hexo从安装到部署,再到发文的步骤,希望能够帮助到一些人。
hexo搭配github可以让你忘记域名,主机和复杂的后台管理,专注于博客写作即可,作为使用过多种cms建站的笔者来讲,hexo真的很棒!

2
0
查看评论

Hexo系列教程(三):Hexo部署到github(Coding也差不多)

一、前言      这篇文章完成后,你就可以让别人访问你的hexo博客了。 二、GitHub 设置      1.github 账号注册        访问GitHub官网地址: http://w...
  • U3D_YSJ
  • U3D_YSJ
  • 2016-01-15 20:52
  • 2932

hexo上传到GitHub

hexo上传到GitHub
  • zhy421202048
  • zhy421202048
  • 2017-09-07 09:56
  • 405

用Hexo + github搭建自己的博客 --- 再也不用羡慕别人了!

每次Google自己不会的问题时,总会发现有很多的人都有自己的博客,不由自主的羡慕起来,于是按捺不住自己的躁动的心,说干就干。 前言每次写博客之前都喜欢做一些科普啊巴拉巴拉的,写之前还想分析一波Hexo和jekyll,掰扯掰扯github,漫谈一下gitblog啥的。讲道理,我这个人比较浮躁,写那些...
  • Hoshea_chx
  • Hoshea_chx
  • 2017-12-17 18:27
  • 685

Hexo+GitHub 建站最详细教程

博客雏形可以先看这里 http://summerxx.com 或者这个完整版是作者的博客站 http://litten.github.io吐槽: 下载软件耽误时间, 还可能遇到各种问题, 不想折腾就算了吧. next主题最简单我觉得.1. 搭建环境:1.1 Node.js https://...
  • sinat_30162391
  • sinat_30162391
  • 2016-09-11 15:42
  • 1536

使用github page + hexo3.0 搭建个人博客,加绑定域名。

一、前言 最新好奇如何搭建个人博客网站,由于之前买过一台vps,本打算自己写页面的,但是想想还是算了吧,毕竟hexo已经有很多酷炫的主题了,之后有空再自己撸。。。 由于此类教程在网上已经有很多人发布了。我就根据我在搭建环境,配置参数的情况,做一点小总结: 二、总结: 主要用的node.js是4.4...
  • guin_guo
  • guin_guo
  • 2016-04-07 23:49
  • 3094

使用hexo搭建一个博客并部署到Github

本文是记录我通过Hexo搭建一个博客,将其部署到Github上以及写出第一篇博客的过程。使用的系统为Rhel7.0。希望可以帮助到大家。 此次,我们默认你已经学会初步使用GIthub。 安装及测试Node.js 安装 wget http://nodejs.org/dist/...
  • tongyijia
  • tongyijia
  • 2016-09-21 00:27
  • 1218

GitHub hexo搭建个人博客

  • 2017-06-10 23:53
  • 1.37MB
  • 下载

Hexo在Github中搭建博客系统(2)Hexo一键发布文章到Github

一、一键部署到Github(1) 配置Github在blog目录,打开_config.yml $ vim _config.yml修改配置文件_config.yml中deploy下的内容 68 # Deployment 69 ## Docs: https://hexo.io/docs/deploy...
  • chwshuang
  • chwshuang
  • 2016-08-29 09:47
  • 4927

hexo无法上传到github

本文仅仅记录hexo g && hexo s命令可以在本地运行 但 hexo d上传出现的失败的情况 各种自己遇到的栗子 出现No such device or address 和 could not read Username 的情况。尝试修改_config.yml文件中r...
  • chrislanbo
  • chrislanbo
  • 2017-05-04 14:19
  • 673

如何发布新文章到hexo搭建的个人博客

用github+hexo搭建完个人博客后,朋友们应该很想知道怎么在上面写博文吧,这里介绍一个很简单的方法你可以使用CSDN网上面提供的MarkDown编辑器 http://write.blog.csdn.net/mdeditor (在csdn博客写新文章的时候能切换到这种编辑器),写好文章后,找到菜...
  • qq_36099238
  • qq_36099238
  • 2017-01-16 17:45
  • 6336
    个人资料
    • 访问:351848次
    • 积分:3497
    • 等级:
    • 排名:第11284名
    • 原创:60篇
    • 转载:5篇
    • 译文:3篇
    • 评论:171条
    我的Github
    博客专栏
    最新评论