Hexo博客部署

前些天使用wordpress程序搭建了个人网站，但感觉太重比较适合个人空间，所以这次介绍Hexo搭建免费博客，先提供官网给大家英文版的请点击这里，中文版的请点击这里，在安装一个Git，再是github上要有个账号，还要安装一个Node.js（下载点击链接）。

• npm install hexo-cli -g

• hexo g #完整命令为hexo generate，用于生成静态文件 

• hexo s #完整命令为hexo server，用于启动服务器，主要用来本地预览 

• hexo d #完整命令为hexo deploy，用于将本地文件发布到github上 

• hexo n #完整命令为hexo new，用于新建一篇文章

    在安装hexo前先完成以上步骤：在桌面右击鼠标选择Git Bash Here打开终端输入第一行命令npm install hexo-cli -g全局安装Hexo，如果之后在使用的过程中，遇到错误，就运行以下命令npm install hexo-deployer-git –save。

现在建个文件夹，名字随意，在刚才建的文件夹里打开git之后按照官网上的命令下载个初始包，

右击鼠标选择Git Bash Here打开终端输入hexo init，在输入安装依赖包npm install之后会有一大堆数据别管他就好，在hexo g打包静态html，最后hexo s本地运行，现在可以发现终端显示了http://localhost:4000，在任意浏览器下输入localhost:4000就可以看到博客了 。现在我们要上传到github上运行起来，首先我们登入到github建一个管理仓库，点击之后进入如下界面，这里需要注意一块就是仓库名必须是你的github名.github.io,例如我在github上的名字是rotate720deg，那么这个仓库名就是rotate720deg.github.io，建好之后要将本地文件部署到github，进入你刚建的Hexo博客文件夹，找到并打开_config.yml文件，在底部输入下面的代码：

• deploy:  type: git repository: http://github.com/rotate720deg/rotate720deg.github.io.git branch: master

如图：

好了这里注意，hexo的配置中冒号（:）后都有一个空格，不能省略掉，配置好后，hexo g然后hexo d，如果这里我们出现ERRER问题,那就运行npm install hexo-deployer-git –save命令解决，如果没什么问题，我们访问https://rotate720deg.github.io,就已经能够看到我们的博客了，接下来重点来了hexo的配置文件，hexo有两个常用的配置文件：博客的配置文件E:math\_config.yml和博客主题的配置文件E:math hemeslandscape\_config.yml，什么意思呢？是这样的在我们刚安装的hexo文件夹，点击进去会看见_config.yml这个文件，这个文件是属于这个hexo的博客首页配置，还有一个在themes文件夹里，这个themes文件夹是专门放主题的，每个主题一个文件夹，每个文件夹里都有个和hexo博客首页一样的_config.yml文件，这个文件是专门配置主题的页面，就是博客首页之类的，这里是重点了，换主题之类的要改的文件是hexo框架的_config.yml文件，而要美化主题/博客首页之类的如：分享、评论、登录之类的微链接改的就是themes主题里的_config.yml文件了，到这里大概大家已经清楚了，

如何新建文章呢？也很简单在文件夹math里面右击鼠标选择Git Bash Here打开终端输入hexo new “这里是文章的名字” 回车后找到source\_posts下找到后缀为.md的文件，这个后缀的文件是属于markdown的文件格式，这里你可以用任何的编辑器打开编辑，也可以在线上使用markdown编辑器编辑，也可以下载markdown编辑器编辑，写完文章后，照之前的步骤上传：

• hexo g >>创建静态文档
• hexo s >>本地预览
• hexo d >>上传github

到这里就算是完美收工了。

    

这里再给个福利：可以对照看配置信息 => 

首先是博客配置

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site
title: Hexo >>博客名
subtitle: >>副标题
description: >>描述
author: John Doe >>作者
language: zh-CN >>语言
timezone: >>时区，此处不填写，hexo会以你目前电脑的时区为默认值
# 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 >>每页显示的文章数，0表示不分页
pagination_dir: page
# Extensions >>插件配置，暂不配置
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape
# Deployment >>用于部署到github，已配置过
## Docs: https://hexo.io/docs/deployment.html
deploy: 
type: git
repository: http://github.com/rotate720deg/rotate720deg.github.io.git
branch: master

然后是博客主题配置

# Header >>博客的菜单栏
menu: 
Home: /
Archives: /archives
rss: /atom.xml
# Content >>文章下的Read more，可以改为’阅读全文’
excerpt_link: Read More
fancybox: true
# Sidebar >>侧边栏配置
sidebar: right
widgets:
– category
– tag
– tagcloud
– archive
– recent_posts
# display widgets at the bottom of index pages (pagination == 2)
index_widgets:
# – category
# – tagcloud
# – archive
>>其他的一些配置
# widget behavior
archive_type: ‘monthly’
show_count: false
# Miscellaneous
google_analytics:
favicon: /favicon.png
twitter:
google_plus:
fb_admins:
fb_app_id: