Hexo建站:部署到github

标签: Hexo 建站 github-io indigo 博客
1685人阅读 评论(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真的很棒!

查看评论

Hexo搭建个人博客网站详细流程

过年回家前在公司的最后一天,说实话有点心不在焉了。整个2017也就这样恍然过去,很多事都来不及回想。在这最后的时间里,想起把自己使用Hexo搭建个人博客网站的流程整理成篇,前段时间为了这个也是找了好多...
  • DreamcoffeeZS
  • DreamcoffeeZS
  • 2018-02-28 15:23:00
  • 905

Hexo+GitHub 建站最详细教程

博客雏形可以先看这里 http://summerxx.com 或者这个完整版是作者的博客站 http://litten.github.io吐槽: 下载软件耽误时间, 还可能遇到各种问题, 不想折...
  • sinat_30162391
  • sinat_30162391
  • 2016-09-11 15:42:39
  • 1690

半小时教你使用hexo建立一个漂亮的个人博客

动机 前些天,自己刚刚接触hexo,并用hexo搭建了自己的博客,对hexo的强大搭建博客能力感到赞叹。用我的实际体验来说,你只要是有点计算机基础的人,完全可以轻松的使用hexo搭建起自己的博客。你要...
  • v123411739
  • v123411739
  • 2015-04-09 19:14:50
  • 26562

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

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

可能是最详细的 Hexo + GitHub Pages 搭建博客的教程

前言:博主目前大三,Web 前端爱好者。写博客的好处,不是为了写而写,而是一个记录思想的过程。不要考虑它能带给你什么,而是你自己从中收获了什么。最近刚好有空,于是就参照网上的各种教程,搭建了一个博客。...
  • QQ80583600
  • QQ80583600
  • 2017-06-01 09:12:52
  • 3589

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

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

hexo搭建blog并部署到github

Hexo是一个可以快速搭建静态网站的框架,结合git,我们可以把本地项目部署到github上,就可以通过外网访问。这里介绍如何一步一步通过hexo来搭建个人博客,并部署到github。...
  • feinifi
  • feinifi
  • 2017-04-24 18:15:39
  • 478

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

一、一键部署到Github(1) 配置Github在blog目录,打开_config.yml $ vim _config.yml修改配置文件_config.yml中deploy下的内容 68 # D...
  • chwshuang
  • chwshuang
  • 2016-08-29 09:47:39
  • 5353

使用Hexo建立个人博客

个人博客是程序员的名片之一,今天,我们来看怎么使用Hexo快速建立个人博客.一.完工效果http://www.lingyv.cn/ 这是本人建立好的个人网站. 有以下特点: - 使用个人申请的特色...
  • xielingyv
  • xielingyv
  • 2016-04-29 23:29:38
  • 2019

【Hexo】Hexo+Github构建个人博客 (三):添加皮肤主题

一、选择主题 选择你自己喜欢的主题 参考: 1.Hexo官网主题 2.知乎:有哪些好看的 Hexo 主题?   二、配置主题 1.我选择了hexo-theme-yilia这个主题,简洁大方,功能齐全;...
  • arvin0
  • arvin0
  • 2017-05-07 17:25:01
  • 629
    个人资料
    专栏达人
    等级:
    访问量: 37万+
    积分: 3643
    排名: 1万+
    博客专栏
    最新评论