Hexo+Github pages 创建一个属于自己的博客

写在前面

什么是Hexo？

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

适合人群

• 喜欢写博客
• 有MarkDown语法基础
• 会使用版本控制Git
• 了解使用Github

预览效果

我的博客也是用Hexo+Github搭建的，主题用的是Next
前往我的博客

环境准备

安装Git

下载Git并执行安装就好了

由于众所周知的原因，国内下载很慢，Hexo官方文档很体贴的给出了这个页面，里面有收录百度云下载地址。我的做法是将下载地址复制到迅雷

安装Node.js

在windows下安装Node.js十分简单，只需要下载并安装就好了

安装Hexo

利用npm命令即可安装

 npm install -g hexo-cli

注意
建议挂上代理
问题

• 一些旧的文章使用
  npm install -g hexo
  会出现错误，最新指令请参考Hexo官方文档
• npm ERR! registry error parsing json 错误
  可能需要设置npm代理,执行命令
  npm config set registry http://registry.cnpmjs.org
• hexo:command not found
  删除刚刚安装的npm目录，重新执行命令npm install -g hexo-cli安装hexo

创建hexo文件夹

安装完成后，在自己喜欢的目录下（例如：E:\Myblog\Hexo）执行如下命令(在E:\Myblog\Hexo目录空白处右键选择Git Bash),Hexo就会自动生成所需要的文件

hexo init

安装依赖包

npm install

此步建议挂代理

本地预览

现在已经在本地搭建了Hexo博客了，执行如下命令(在E:\Myblog\Hexo)，然后到浏览器输入localhost:4000即可查看

hexo generatehexo server

到现在为止，本地hexo博客已经搭建完成，接下来就是部署到Github
问题

• 执行hexo server提示找不到该指令
  解决办法：
  在Hexo 3.0 后server被单独出来了，需要安装server，安装的命令如下：

  npm install hexo -server –save

github创建博客

• 注册账号
  地址:https://github.com/
  输入账号、邮箱和密码点击Sign up for Github

• 创建github pages仓库
  这个仓库的名字需要和你的账号对应，格式: yourname.github.io
  输入基本信息，然后点击创建仓库.
  帮助
  例如我的github名字是zhaoweihaoChina,那么我的仓库名字就是zhaoweihaoChina.github.io

生成SSH密钥

ssh-keygen -t rsa -C “你的邮箱地址”，按3个回车，密码为空。

在C:\Users\Administrator.ssh下，得到两个文件id_rsa和id_rsa.pub。

在GitHub上添加SSH密钥

打开id_rsa.pub，复制全文。打开 https://github.com/settings/ssh ，Add SSH key，粘贴进去。

Hexo使用

目录结构

.├── _config.yml#网站配置信息├── package.json#应用程序信息├── scaffolds#模板├── source|   ├── _drafts#草稿|   └── _posts#文章└── themes#主题

更详细说明：Hexo官方文档-建站篇

全局配置 _config.yml

# Hexo Configuration## Docs: http://hexo.io/docs/configuration.html## Source: https://github.com/hexojs/hexo/# Site #站点信息title:  #标题subtitle:  #副标题description:  #站点描述，给搜索引擎看的author:  #作者email:  #电子邮箱language: zh-CN #语言timezone: Asia/Shanghai#时区# URL #链接格式url:  #网址root: / #根目录permalink: :year/:month/:day/:title/ #文章的链接格式permalink_defaults:# Directory #目录tag_dir: tags #标签目录archive_dir: archives #存档目录category_dir: categories #分类目录code_dir: downloads/codesource_dir: source #源文件目录public_dir: public #生成的网页文件目录# Writing #写作new_post_name: :title.md #新文章标题default_layout: post #默认的模板，包括     post、page、photo、draft（文章、页面、照片、草稿）titlecase: false #标题转换成大写external_link: true #在新选项卡中打开连接filename_case: 0render_drafts: falsepost_asset_folder: falserelative_link: falsehighlight: #语法高亮  enable: true #是否启用  line_number: true #显示行号  tab_replace:# Category & Tag #分类和标签default_category: uncategorized #默认分类category_map:tag_map:# Archives2: 开启分页1: 禁用分页0: 全部禁用archive: 2category: 2tag: 2# Server #本地服务器port: 4000 #端口号server_ip: localhost #IP 地址logger: falselogger_format: dev# Date / Time format #日期时间格式date_format: YYYY-MM-DD     #参考http://momentjs.com/docs/#/displaying/format/time_format: H:mm:ss# Pagination #分页per_page: 10 #每页文章数，设置成 0 禁用分页pagination_dir: page# Disqus #Disqus评论，替换为多说disqus_shortname:# Extensions #拓展插件theme: landscape-plus #主题exclude_generator:plugins: #插件，例如生成 RSS 和站点地图的- hexo-generator-feed- hexo-generator-sitemap# Deployment #部署deploy:  type: git  repo: 刚刚github创库地址.git  branch: master

更详细说明:Hexo官方文档-配置篇

注意

• 这里的格式很重要！很重要！很重要！（重要的事情说三遍）
• 每个”:”冒号后面都有一个空格
• repo: 刚刚github创库地址.git

Hexo命令的使用

常用命令:

hexo help #查看帮助hexo init #初始化一个目录hexo new "postName" #新建文章hexo new page "pageName" #新建页面hexo generate #生成网页，可以在 public 目录查看整个网站的文件hexo server #本地预览，'Ctrl+C'关闭hexo deploy #部署.deploy目录hexo clean #清除缓存，**强烈建议每次执行命令前先清理缓存，每次部署前先删除 .deploy 文件夹**

简写：

hexo n == hexo newhexo g == hexo generatehexo s == hexo serverhexo d == hexo deploy

更详细的命令:Hexo官方文档-命令篇

写文章

新建文章

hexo new "标题"

在 _posts 目录下会生成文件标题.md

title: 标题date: 2017-04-29 07:56:29 #发表日期，一般不改动categories: hexo #文章文类tags: [hexo,github] #文章标签，多于一项时用这种格式---正文，使用Markdown语法书写

Markdown编辑器推荐：Cmd Markdown
Markdown基础语法：Cmd Markdown 简明语法手册

编辑完后保存,hexo server预览

Hexo部署

执行下列指令即可完成部署。

hexo generatehexo deploy

以下提示说明部署成功

[info] Deploy done: git

打开https://yourname.github.io就可以看到你的博客了

Hexo主题

这里以配置next主题为例

1. 打开Hexo官方主题

2. 找到next主题

3. 点击NexT蓝色字体进入进入next的github界面，在介绍里可以找到next使用文档

4. 下载主题

执行如下命令(在E:\Myblog\Hexo)

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

5. 启用主题

打开_config.yml，找到theme字段，，并将其值更改为next。

theme: next

现在next主题已经配置完成了，执行如下命令(在E:\Myblog\Hexo)

hexo cleanhexo server

然后到浏览器输入localhost:4000即可查看

更加详细的next主题配置请到next开始使用和next主题配置查看

6. 部署到github

设置满意后，执行

hero generatehero deploy

然后到yourname.github.io即可查看效果（会有一点延迟）

写在最后

昨天折腾了一晚上得出来的经验，汇总给大家

如果大家觉得本文对你有帮助，可以请我喝杯咖啡[微信支付码]