Hexo建站:部署到github

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Xiong_IT/article/details/55193816

前言

本文主要讲述如何使用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真的很棒!

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页