[关闭]
@52fhy 2016-03-06T14:40:50.000000Z 字数 4642 阅读 497

搭建hexo博客

hexo 博客


hexo 是一款快速、简单、并且强大的博客博客模板框架 - 基于nodejs 。

特点

要用到的模块

安装Nodejs

下载地址: http://nodejs.org/download/

验证node和npm是否安装成功(由于新版的NodeJS已经集成了npm),在cmd中输入

  1. node -v
  2. npm -v

出现版本号就是正确安装了。

安装hexo

安装hexo,-g表示全局安装。

  1. npm install -g hexo

如果有warn可以不用管。

初始化一个博客

选择一个常用的目录(不要有中文或者空格),初始化一个博客应用:

  1. hexo init

文件夹自动生成建网站所需的文件。

  1. cd blog
  2. npm install

会在文件夹下安装node_modules依赖。

本地测试

  1. hexo server

然后就可以http://localhost:4000/ 中打开了
记得关server是ctrl+c

此时文件目录为:

  1. .deploy_git
  2. node_modules nodejs 相关依赖
  3. public 自动生成的静态html目录
  4. scaffolds 脚手架 - 也就是一个工具模板
  5. source 存放markdown文章目录
  6. themes 存放皮肤的地方
  7. _config.yml 配置文件
  8. CNAME github域名绑定文件
  9. db.json 数据
  10. package.json 配置依赖

新建文章

在blog根目录下我们可以通过 hexo new <title> 命令来实现新建文章。

例如我们想新建一篇主题为hello的blog:

  1. hexo new hello

hexo会在 source/_posts/ 下新建hello.md 文件。

编辑 hello.md 就是编辑你的blog内容了 — markdown语法

hello.md 的文档和目录可以这样添加:

  1. title: hexogithub、多说、搭建免费博客
  2. date: 2014-10-19 12:56:58
  3. tags:
  4. - tag1
  5. - tag2
  6. - tag3
  7. categories:
  8. - 目录
  9. ---
  10. // 你的内容
  11. <!--more--> // 以上为摘要

我们也可以手动在source/_posts/ 下新建md 文件。

更换主题

主题目录:themes/
在此目录放置主题,并在根目录的_config.yml更改

  1. theme: landscape

即可。

部署到github

初步准备
安装git :
下载地址:http://msysgit.github.io/

github上创建账号
https://github.com/注册账号,并建立repository
建立仓库名必须是XXX.github.io。每个用户可以建立一个与用户名一致的XXX.github.io特殊仓库。

部署
部署到github 非常简单。因为hexo已经为你集成好了发布到github的配置。

我们只需要 修改 blog 目录下的 _config.yml 文件。

打开 _config.yml 找到如下配置:

  1. # 部署配置
  2. deploy:
  3. type: git
  4. repo: git@github.com:xxx/xxx.github.io.git
  5. branch: master

回到 blog 目录 执行

  1. hexo g
  2. hexo d

你会发现public 目录下的页面已经发布到github gh-pages 分支了。往后我们要做的就是用自己的域名指向 github。

设置独立域名

默认的域名是xxx.github.io。自己如果有域名,可以绑定。

例如 我的域名为 blog.me

1 我们要在github blog项目下新建一个CNAME文件 内容为 blog.me
2 将我们得域名A 记录到 207.97.227.245 这个ip

域名解析完成后我们 blog.me 就是我们的blog了。支持子域名。207.97.227.245为github指定绑定的域名。

插件安装

多说

评论插件多说为hexo量身打造了一套解决方案。
查看教程
站点创建地址

rss

rss的安装非常简单 ,已经有人做好了插件,安装只需一步。

  1. npm install hexo-generator-feed

启动服务器,用浏览器打开 http://localhost:4000/atom.xml, 就可以看到RSS已经生效了。

sitemap

同样是一条命令,就可以完成。

  1. npm install hexo-generator-sitemap

启动服务器,用浏览器打开 用浏览器打开 http://localhost:4000/sitemap.xml 发现site已经生效。

命令概览

清除缓存,解决很多奇怪问题

  1. hexo clean

hexo安装升级

  1. npm install hexo -g #安装
  2. npm update hexo -g #升级
  3. hexo init #初始化

简写

  1. hexo n "我的博客" == hexo new "我的博客" #新建文章
  2. hexo p == hexo publish
  3. hexo g == hexo generate#生成
  4. hexo s == hexo server #启动服务预览
  5. hexo d == hexo deploy#部署

服务器

  1. hexo server #Hexo 会监视文件变动并自动更新,您无须重启服务器。
  2. hexo server -s #静态模式
  3. hexo server -p 5000 #更改端口
  4. hexo server -i 192.168.1.1 #自定义 IP
  5. hexo clean #清除缓存 网页正常情况下可以忽略此条命令
  6. hexo g #生成静态网页
  7. hexo d #开始部署

监视文件变动

  1. hexo generate #使用 Hexo 生成静态文件快速而且简单
  2. hexo generate --watch #监视文件变动

平时发布文章

  1. hexo g
  2. hexo d

配置参考

配置文件使用#注释,注意有空格。

根目录_config.yml配置:

  1. # Hexo Configuration
  2. ## Docs: http://hexo.io/docs/configuration.html
  3. ## Source: https://github.com/hexojs/hexo/
  4. ## 空一格
  5. # Site
  6. title: 飞鸿影~的blog
  7. subtitle:
  8. description: 开拓不止,路才无尽。
  9. author: 飞鸿影
  10. email:
  11. language: zh-CN
  12. timezone:
  13. # URL
  14. ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
  15. url: 'http://52fhy.github.io/'
  16. root: /
  17. permalink: :year/:month/:day/:title/
  18. # permalink: archives/:id/
  19. permalink_defaults:
  20. # Directory
  21. source_dir: source
  22. public_dir: public
  23. tag_dir: tags
  24. archive_dir: archives
  25. category_dir: categories
  26. code_dir: downloads/code
  27. i18n_dir: :lang
  28. skip_render:
  29. # Writing
  30. new_post_name: :title.md # File name of new posts
  31. default_layout: post
  32. titlecase: false # Transform title into titlecase
  33. external_link: true # Open external links in new tab
  34. filename_case: 0
  35. render_drafts: false
  36. post_asset_folder: false
  37. relative_link: false
  38. future: true
  39. highlight:
  40. enable: true
  41. line_number: true
  42. auto_detect: true
  43. tab_replace:
  44. # Category & Tag
  45. default_category: uncategorized
  46. category_map:
  47. tag_map:
  48. # 归档设置
  49. ## 2: Enable pagination
  50. ## 1: Disable pagination
  51. ## 0: Fully Disable
  52. archive: 1
  53. category: 2
  54. tag: 2
  55. # 服务器设置
  56. ## Hexo uses Connect as a server
  57. ## You can customize the logger format as defined in
  58. ## http://www.senchalabs.org/connect/logger.html
  59. port: 4000
  60. ## server_ip: 0.0.0.0
  61. logger: false
  62. logger_format:
  63. # Date / Time format
  64. ## Hexo uses Moment.js to parse and display date
  65. ## You can customize the date format as defined in
  66. ## http://momentjs.com/docs/#/displaying/format/
  67. date_format: YYYY-MM-DD
  68. time_format: HH:mm:ss
  69. # Pagination
  70. ## Set per_page to 0 to disable pagination
  71. per_page: 10
  72. pagination_dir: page
  73. # 插件和皮肤
  74. ## Plugins: https://github.com/tommy351/hexo/wiki/Plugins
  75. ## Themes: https://github.com/tommy351/hexo/wiki/Themes
  76. theme: yilia ## landscape,yilia,pacman,coney
  77. exclude_generator:
  78. # RSS
  79. rss: /atom.xml #rss地址 默认即可
  80. # Markdown语法
  81. ## https://github.com/chjj/marked
  82. markdown:
  83. gfm: true
  84. pedantic: false
  85. sanitize: false
  86. tables: true
  87. breaks: true
  88. smartLists: true
  89. smartypants: true
  90. # CSS的stylus格式
  91. stylus:
  92. compress: false
  93. # Deployment
  94. ## Docs: http://hexo.io/docs/deployment.html
  95. # 部署配置
  96. deploy:
  97. type: git
  98. repo: git@github.com:xxx/xxx.github.io.git
  99. branch: master
  100. # 评论
  101. ## disqus_shortname:
  102. duoshuo_shortname: fhyblog

主题目录下也有个配置,大家根据作者说明进行配置。

参考

1、hexo + github + 多说 来搭建免费博客 // Netpi 日志
http://blog.netpi.me/%E5%AE%9E%E7%94%A8/hexo/
2、使用hexo和Github上创建自己的博客其它其它语言-ITnose
http://www.itnose.net/detail/6231502.html
3、hexo常用命令笔记 - SegmentFault
http://segmentfault.com/a/1190000002632530

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注