hexo是一个基于Node.js的静态博客程序,优势是生成静态文件的速度非常快,支持markdown,速度快而且不容易出错,并且可以一键部署到github或者其它静态服务器上去
环境准备
1.安装brewhome
1 | ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)” |
2.安装nodejs
1 | brew install node |
3.安装git
1 | sudo brew install git |
4.安装hoxo
1 | npm install -g hexo-cli |
1 | hexo常用代码: |
- 验证安装命令:
1 | $ node -v : 验证 node 安装版本 |
5.检查并添加ssh key
1 | cd ~/.ssh |
6.设置个人信息
1 | git config --global user.name "xxx" |
初始化 Blog
- 安装 Hexo 完成后,进入到存放Blog文件夹执行下列命令,会在文件夹中新建所需要的文件。
1 | hexo init |
- 执行下列命令,可以查看在本地预览
1 | hexo g // 生成静态页面 |
打开浏览器,在地址栏输入 localhost:4000,就可以查看本地博客了
注册Github帐号
已经有Github帐号跳过此步,首先进入Github进行注册,用户名、邮箱和密码之后都需要用到,自己记好。
创建Github Pages
- repository相当于一个仓库,用来放置你的代码文件。首先,登陆进入Github,并进入个人页面,选择Repositories,然后New一个repository
- 完成上述步骤后,会跳转到一个新的页面,此时你需要创建一个username.github.io格式的仓库,然后点击 Creat repository,如下图所示
- 完成上述步骤后,便可以得到刚才新建的仓库地址,如下图所示。
仓库设置:
- 在GitHub上打开你的仓库首页,单击设置(Settings)页签 打开左侧Pages
使用自动生成器生成GitHub Pages:
- 下拉设置页面到GitHub Pages,单击Launch automatic page generator
选择主题:
部署本地文件到github
- 既然Repository已经创建了,当然是先把博客放到Github上去看看效果。打开之前初始化好的Hexo Blog文件夹中的_config.yml文件修改以下配置:
1 | deploy: |
- 配置好_config.yml并保存后,执行以下命令部署到Github上。如果你是第一次使用Github或者是已经使用过,但没有配置过SSH,则可能需要配置一下
1 | hexo g |
执行上面的第二个命令,可能会要你输入用户名和密码,皆为注册Github时的数据,输入密码是不显示任何东西的,输入完毕回车即可。
此时,我们的博客已经搭建起来,并发布到Github上了,在浏览器访问huangjunhui.github.io就能看到自己的博客了。第一次访问刚地址,可能访问不了,您可以在几分钟后进行访问,一般不超过10分钟。
hexo的配置文件
hexo里面有两个常用到的配置文件:
- 整个博客的配置文件hexo/_config.yml
- 主题的配置文件hexo/themes/light/_config.yml
替换主题:
hexo官方提供了12个主题供你自己选择,使用方法很简单,点击自己想要的主题,进入该主题的Repository,使用Git将主题clone到本地
然后将整个文件夹复制到themes文件夹下,将hexo/_config.yml里的theme名字改为自己下载的主题的文件夹名即可
接下来介绍整个博客的配置文件:
# Hexo Configuration
## Docs: http://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site 这下面的几项配置都很简单,你看我的博客就知道分别是什么意思
title: Chillax blog #博客名
subtitle: Goals determine what you are going to be #副标题
description: Goals determine what you are going to be #用于搜索,没有直观表现
author: huangjunhui #作者
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
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: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
plugins:
- hexo-generator-feed
theme: light #使用的主题
feed: #之后配置rss会用,此处先不配置这个
type: atom
path: atom.xml
limit: 20
# Deployment 用于部署到github,之前已经配置过
## Docs: http://hexo.io/docs/deployment.html
deploy:
type: git
repository: http://github.com/huangjunhui/huangjunhui.github.io.git
branch: master
按照自己的意愿修改完后,执行hexo g,hexo s,打开localhost:4000看看效果
接下来介绍整个博客主题的配置文件:
menu: #博客右上角的菜单栏,暂时使用默认值
首页: /
归档: /archives
关于: /about
#该类对应于E:\hexo\themes\light\layout\_widget下的文件
widgets: #站点右边栏,可以参照我的博客看,暂时使用默认值
- intro #简介
- search #搜索
- category #分类
- tagcloud #标签云
- weibo #微博
- blogroll #友情链接
excerpt_link: Read more #文章下的Read more,可以改为'阅读全文'
plugins: #插件,暂时使用默认值
twitter: #twitter
username:
show_replies: false
tweet_count: 5
addthis: #SNS分享,暂时使用默认
enable: true
pubid:
facebook: true
twitter: true
google: true
pinterest: true
fancybox: true #图片效果,使用默认值
google_analytics:
rss: #生成RSS,暂时使用默认值
使用macdown发布文章
在hexo/source/_post中创建my-new-post.md文件,打开开始编辑
hexo中写文章使用的是Markdown,没接触过的可以看下Markdown语法说明,一分钟学会Markdown
1 | title: my new post #可以改成中文的,如“新文章” |
在之前的内容会显示在首页,之后的内容会被隐藏,当游客点击Read more才能看到。
写完文章后你可以使用:
- 1.hexo g生成静态文件。
- 2.hexo s在本地预览效果。
- 3.hexo d同步到github,或者(hexo g -d)快捷同步
- 然后使用https://ruixiaoguo.github.io/Grx.github.io进行访问。
- 本文作者: Grx
- 本文链接: https://ruixiaoguo.github.io/Grx.github.io/Grx.github.io/2014/05/01/Hexo搭建/
- 版权声明: 本博客所有文章除特别声明外,均采用 MIT 许可协议。转载请注明出处!