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

结束。

如有什么问题，可以在我的博客留言，点击这里。

---

你们的支持也是我前进的动力，非常感谢支持！

相关资料

• hexo —— 简单、快速、强大的Node.js静态博客框架
• Hexo在github上构建免费的Web应用
• HEXO+Github,搭建属于自己的博客
• Hexo博客
• hexo安装
• Hexo官网
• 升级hexo碰到“Deployer not found”问题及解决