Hexo搭建

Hexo

Hexo是一种快速的、简单的、强大的、静态的博客框架，开发环境基于Node . js，支持MarkDown，支持Github部署。了解更多hexo请到官网地址：Hexo官网。

友情提示：很多大神都在用哦！

准备

node.js（必须安装），下载安装地址到：nodejs官网。
git（必须安装），mac下安装Xcode即可。
github账号（必须申请），用于hexo服务管理部署。

安装hexo

Hexo 安装，全局安装，加-g参数
npm install -g hexo
查看hexo版本
hexo version
使用hexo创建项目
hexo init nodejs-hexo

创建hexo项目（部分截图）.png
启动Hexo服务器
cd nodejs-hexo
hexo server

Paste_Image.png
浏览器打开地址
http://localhost:4000/

默认的网页界面.png

Hexo的使用

目录和文件

目录和文件.png

.idea 没啥用
node_modules 也没啥用
scaffolds 模板工具
source 存放博客正文内容
- source/_drafts 草稿箱
- source/_posts 文件箱
themes 存放皮肤的目录
- themes/landscape 默认的皮肤
_config.yml 全局的配置文件
db.json 静态常量

每次写文章是在_posts目录里操作，_config.yml文件和theme目录是第一次配置好就可以了。这里先主要介绍这三个文件的意义：

_posts目录：Hexo是静态博客框架，没有数据库。所有的文章都已文件方式进行存储，就存在_posts目录下。Hexo集成了MarkDown，所有在写博客可以使用Markdown语法格式写博客。文件格式以.md形式存在，例如：hello-world.md。
_themes目录：存放皮肤（博客样式），里面包含一套Javascript+CSS样式和基于EJS的模板设置。例如：themes目录下的landscape，这个是默认的皮肤。

_config.yml是全局配置文件
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

  # Site 站点信息:定义标题,作者,语言
  title: 这里是你博客的标题
  subtitle: 不经一番彻寒骨，怎得梅花扑鼻香！
  description: blog.fens.me
  author: 笔名
  language: zh_CN
  timezone:
      
  # URL Url访问路径
  ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
  url: http://yoursite.com
  root: /
  permalink: :year/:month/:day/:title/
  permalink_defaults:
      
  # Directory 文件目录:正文的存储目录
  source_dir: source
  public_dir: public
  tag_dir: tags
  archive_dir: archives
  category_dir: categories
  code_dir: downloads/code
  i18n_dir: :lang
  skip_render:
      
  # Writing 写博客配置:文章标题,文章类型,外部链接
  new_post_name: :title.md # File name of new posts
  default_layout: post
  titlecase: false # Transform title into titlecase
  external_link: true # Open external links in new tab
  filename_case: 0
  render_drafts: false
  post_asset_folder: false
  relative_link: false
  future: true
  highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:
      
  # Category & Tag   目录和标签:默认分类,分类图,标签图
  default_category: uncategorized
  category_map:
  tag_map:
      
  # Date / Time format 时间和日期格式:
  ## Hexo uses Moment.js to parse and display date
  ## You can customize the date format as defined in
  ## http://momentjs.com/docs/#/displaying/format/
  date_format: YYYY-MM-DD
  time_format: HH:mm:ss
      
  # Pagination   分页设置:每页显示数量
  ## Set per_page to 0 to disable pagination
  per_page: 10
  pagination_dir: page
      
  # Extensions   插件和皮肤:换皮肤,安装插件
  ## Plugins: https://hexo.io/plugins/
  ## Themes: https://hexo.io/themes/
  theme: landscape
      
  # Deployment   部署配置:github发布,type类型为git
  ## Docs: https://hexo.io/docs/deployment.html
  deploy:
  type:

创建新文章

接下来我来开始创建博客的第一篇文章，可以通过hexo命令创建，也可以在_posts文件目录下创建。

通过命令行创建
hexo new 新的一天

新的一天截图.png
在_posts目录下

Paste_Image.png

这里我们可以用Markdown语法写文章，

    ---
    title: 新的一天
    date: 2016-06-28 15:20:20
    tags:
    - 第一天
    - 日记
    ---
    
    这是**新的一天**，我用hexo创建了第一篇文章。
    
    通过下面的命令，就可以创建新文章
    ```{bash}
    laoniede-MacBook-Pro:my_hexo xuxianmei$ hexo new 新的一天
    INFO  Created: ~/my_hexo/source/_posts/新的一天.md
    laoniede-MacBook-Pro:my_hexo xuxianmei$
    ```
    
    感觉非常好。

在命令行，启动hexo服务器，

    laoniede-MacBook-Pro:my_hexo xuxianmei$ hexo server
    INFO  Start processing
    INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

在浏览器打开，http://localhost:4000/

新的修改.png

部署github

静态化处理（将文件转换成html，javascript，css）
hexo generate

静态化处理.png
发布到github
在github中创建my_hexo项目，项目地址：https://github.com/nfl404/my_hexo 。配置全局文件_config.yml，找到deploy部分，修改,
deploy:
repo: git@github.com:nfl404/my_hexo.git
type: git
然后，通过命令部署，
npm install hexo-deployer-git --save

保存hexo-deployer-git.png
```
hexo deploy
```

部署hexo.png

静态网站就被部署到了github上，

Paste_Image.png

点击项目的Settings，找到Github Pages，打开网页https://nfl404.github.io/my_hexo/，就是刚刚发布的站点。

站点显示内容.png

设置域名
我们可以看到访问通过部署github上的站点，和我们在本地浏览的样式不一样，原因是因站点访问的css和js的加载路径不对，我们绑定好域名后就可以正常显示了。域名注册可以在万网或新网注册，或者其他。
域名注册成功后，我们开始解析域名，并且配置DNS。这个地方会有一些坑，下说下本人注册的域名是在万网注册的，解析是在DNSPod解析的，为什么不在万网解析，那就是因为万网解析遇到了太多坑。
添加域名，注册登录DNSPod，选择域名解析->添加域名

DNSPod域名添加.png

登录万网访问域名控制平台，修改DNS如下
f1g1ns1.dnspod.net
f1g1ns2.dnspod.net

万网修改DNS.png

在DNSPod添加记录，设置主机记录，填写记录值（主机ip地址，如何获取ip地址，注意：如ip地址设有防火墙，请尝试其他地址），主机记录可以添加@和www两种即可。添加好后，点击开始解析。

Paste_Image.png

最后，在github中创建一个CNAME的文件，文件中写出你要绑定的域名如niefuling.com

CNANME添加域名.png

查看项目Settings查看GitHub Pages，观察站点地址变化（注意：如果没有变化，原因是修改了DNS，DNS生效需要在48小时内完成），正确显示如下，

站点地址变化.png

通过浏览器访问http://niefuling.com ，既可以看到你自己的博客了。

NiePlus的博客.png