HEXO+Github,搭建博客流程

发表于   |   分类于   |     |   阅读次数

五天时间建起了这个博客，说起来也是故事了。GitHub早有耳闻对它的了解一直都是不明觉厉的样子，对于我这看不懂英文的人来说支撑我了解它的就是我的好奇心，好奇心来自 全栈开发者 网站上的文章他用github做HTML页面演示，随后我就研究起来。整个过程是在无数次尝试和折腾中进行的，完全是现学现用。我也是从多个博文和网站上学来的，需要的东西都能查到但是不够全面对于初学者很容易入坑，下面对整个过程做一个完整的总结。

GitHub Pages是什么？

github Pages可以被认为是用户编写的、托管在github上的静态网页。

注册GitHub

GitHub：http://www.github.com/

建立Github个人主页

详细步骤 《建立Github个人主页》

配置环境

  • Node.js - 官网 下载相应平台的最新版本，直接安装。
  • Git - Git官网 下载安装 Git电子书籍《Pro Git简体中文版》

    Git安装过程中全部选中第一项进行安装。安装后会有Git Bash和Git Gui在右键菜单显示。

Git的使用以及GitHub的配置自行百度：参考 GitHub与Git的配置

我的环境：

  • hexo: 3.2.2
  • os: Windows7 x64
  • node: 6.6.0

安装Hexo

Node和Git安装好后,在任意盘根目录创建一个文件夹,如blog,也就是博客的文件目录,然后进入blog文件夹里安装Hexo。

打开Git Bash，输入命令安装

$ npm install -g hexo-cli
$ npm install -g hexo
$ npm update hexo -g #升级hexo

也许你发现没反应，不要急，命令输出后要等待一会安装完毕再进行下面的操作。

安装完成之后，在 /Blog 下继续依次输入如下命令，注意顺序

$ hexo init
$ npm install

至此，安装工作已经完成！blog就是你的博客根目录，所有的操作都在里面进行。

如何查看你的文件版本

npm -v #查看npm安装的版本
node -v #查看nodejs安装的版本
hexo -v #查看Hexo安装的版本

在本地预览Hexo

hexo generate #生成静态页面至public目录
hexo server #开启服务

开启成功显示如下
INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.
我们也可以在命令行工具中用 Ctrl+C 来终止服务

现在打开浏览器访问 http://localhost:4000/ 试试吧！

hexo generate命令是将 md 文件转换为 Html 静态页面，hexo默认给了一个页面用于我们预览下面会讲到如何新建文章

没错Hexo内创建的页面是Markdown文件格式，文章书写好后通过命令转换成静态页面。

所有新建文章都在 \source\_posts 目录显示，所有生成的静态页面都在 \public 目录显示也就是项目文件。

是不是发现页面很丑，没错这是Hexo默认主题，下面我们会讲到如何更换主题

创建博文/文章

同样在你的博客跟目录下,如 blog 打开 Git Bash 

hexo new "输入文章标题" #新建文章

建好文章后我们回到 Blog\source\_posts 目录编辑 .md 文本 -
请阅读《Markdown 语法说明》

在这之前你要有一个Markdown编辑器我用的是MarkdownPad

文章编辑好后就可以 hexo generate 生成静态页面到 \public 目录

hexo generate

NexT主题的使用

详情请进入 NexT官网 点击开始使用，根据指示一步步来配置你的站点文件和主题文件
关于主题的下载我们直接在 blog 目录下执行命令安装主题 $ 

git clone https://github.com/iissnan/hexo-theme-next themes/next

发布到GitHub

在站点配置文件 _config.yml 最后配置你的 github 信息

deploy:
  type: git
  repository: https://github.com/username/username.github.io.git
  branch: master

修改好配置文件后再次打开命令行工具 Git Bash 部署

hexo deploy

打开浏览器 输入 http://username.github.io/ 查看你的博客。

username是你自己的用户名

域名绑定

  1. 首先在你有域名的前提下，新建一个无文件后缀的 CNAME 文本在里面写入域名，例如 simo666.cn 前面不可以输入www，保存后放入 Blog\source 目录中然后部署到Github。
  2. 到域名服务商添加 CNAME 解析。

常见问题

文件乱码：在用记事本编辑配置文件时，请选择另存为->选择UTF-8编码后保存

参考文章

《Hexo免费静态博客安装和使用方法》

《HEXO搭建属于自己的博客》

《Hexo常用命令笔记》

《NexT主题使用文档》

《Markdown 语法说明》

微博：哎呀哎呦哎呀呦