搭建hexo博客-白红宇

搭建hexo博客

阅读量：6266 次

发布时间：2019-06-22

本文共 5110 字，大约阅读时间需要 17 分钟。

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

特点

基于nodejs

使用Markdown书写文章

无需数据库

可以使用GitHub Pages发布

要用到的模块

node.js

hexo

多说

git需要提前安装，hexo init的时候用到。

安装Nodejs

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

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

node -vnpm -v

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

安装hexo

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

npm install -g hexo

如果有warn可以不用管。

初始化一个博客

选择一个常用的目录（不要有中文或者空格），初始化一个博客应用：

hexo init

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

cd blognpm install

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

本地测试

hexo server

然后就可以http://localhost:4000/ 中打开了

记得关server是ctrl+c。

此时文件目录为：

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

新建文章

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

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

hexo new hello

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

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

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

title: hexo、github、多说、搭建免费博客date: 2014-10-19 12:56:58tags:- tag1- tag2- tag3categories:- 目录---// 你的内容
     // 以上为摘要

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

更换主题

主题目录：themes/

在此目录放置主题，并在根目录的_config.yml更改

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 找到如下配置：

# 部署配置deploy:  type: git  repo: git@github.com:xxx/xxx.github.io.git  branch: master

回到 blog 目录执行

hexo ghexo 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的安装非常简单，已经有人做好了插件，安装只需一步。

npm install hexo-generator-feed

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

sitemap

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

npm install hexo-generator-sitemap

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

命令概览

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

hexo clean

hexo安装升级

npm install hexo -g #安装  npm update hexo -g #升级  hexo init #初始化

简写

hexo n "我的博客" == hexo new "我的博客" #新建文章hexo p == hexo publishhexo g == hexo generate#生成hexo s == hexo server #启动服务预览hexo d == hexo deploy#部署

服务器

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

监视文件变动

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

平时发布文章

hexo ghexo d

配置参考

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

根目录_config.yml配置：

# Hexo Configuration## Docs: http://hexo.io/docs/configuration.html## Source: https://github.com/hexojs/hexo/## 空一格# Sitetitle: 飞鸿影~的blogsubtitle: description: 开拓不止，路才无尽。author: 飞鸿影email: language: zh-CNtimezone: # URL## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'url: 'http://52fhy.github.io/'root: /permalink: :year/:month/:day/:title/# permalink: archives/:id/permalink_defaults:# Directorysource_dir: sourcepublic_dir: publictag_dir: tagsarchive_dir: archivescategory_dir: categoriescode_dir: downloads/codei18n_dir: :langskip_render:# Writingnew_post_name: :title.md # File name of new postsdefault_layout: posttitlecase: false # Transform title into titlecaseexternal_link: true # Open external links in new tabfilename_case: 0render_drafts: falsepost_asset_folder: falserelative_link: falsefuture: truehighlight:  enable: true  line_number: true  auto_detect: true  tab_replace:# Category & Tagdefault_category: uncategorizedcategory_map:tag_map:# 归档设置## 2: Enable pagination## 1: Disable pagination## 0: Fully Disablearchive: 1category: 2tag: 2# 服务器设置## Hexo uses Connect as a server## You can customize the logger format as defined in## http://www.senchalabs.org/connect/logger.htmlport: 4000## server_ip: 0.0.0.0logger: falselogger_format:# 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-DDtime_format: HH:mm:ss# Pagination## Set per_page to 0 to disable paginationper_page: 10pagination_dir: page# 插件和皮肤## Plugins: https://github.com/tommy351/hexo/wiki/Plugins## Themes: https://github.com/tommy351/hexo/wiki/Themestheme: yilia  ## landscape,yilia,pacman,coneyexclude_generator:# RSSrss: /atom.xml #rss地址  默认即可# Markdown语法## https://github.com/chjj/markedmarkdown:  gfm: true  pedantic: false  sanitize: false  tables: true  breaks: true  smartLists: true  smartypants: true# CSS的stylus格式stylus:  compress: false# Deployment## Docs: http://hexo.io/docs/deployment.html# 部署配置deploy:  type: git  repo: git@github.com:xxx/xxx.github.io.git  branch: master# 评论## disqus_shortname:duoshuo_shortname: fhyblog

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