个人博客是程序员的名片之一,今天,我们来看怎么使用Hexo快速建立个人博客.
一.完工效果
http://www.lingyv.cn/ 这是本人建立好的个人网站.
有以下特点:
- 使用个人申请的特色域名
- 代码托管在github和coding上
二.需要使用的工具
- Hexo (Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。) github链接 hexo帮助文档
- 主题icarus(更多主题)
- github
- coding(国内coding访问速度更快)
三.开始
1. github pages, coding pages
-
github创建个人站点
lingyv.github.png
设置站点主题
进入资源-setting
选择主题并发布,我的已经设置过一次了.所以会跟你的有所不同
github
-
coding pages
coding创建项目
coding.png
设置pages
codingpages.png
2. 安装Hexo博客框架
- 安装git
$ sudo apt-get install git
- 安装Node.js
$ wget -qO- https://raw.github.com/creationix/nvm/master/install.sh | sh
$ nvm install 4
nvminstall4.png
- 安装Hexo
$ npm install -g hexo-cli
installhex0.png
- 新建blogs文件夹,克隆项目
git clone git@github.com:lingyv/lingyv.github.io.git
- 执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件
$ hexo init lingyv.github.io
$ cd lingyv.github.io
$ npm install
新建出的各种文件信息查看帮助文档
4. 配置Hexo
查看配置文档
我的配置文件信息
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site 网站
title: 漫步太虚
subtitle: lingyv
description: coding
author: lingyv
language: zh-CN
timezone:
avatar: /images/touxiang.png
# URL 网址
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://www.lingyv.cn
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:
# Archives
archive: 1
category: 1
tag: 1
# 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: icarus
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repository:
github: git@github.com:lingyv/lingyv.github.io.git
coding: git@git.coding.net:lingyv/lingyv.git
branch: master
5. 配置主题
Hexo主题很多,查看主题
- 下载icarus主题到本地
$ git clone https://github.com/ppoffice/hexo-theme-icarus themes/icarus
- 启用主题
打开 站点配置文件,找到 theme字段，并将其值更改为icarus. - 配置主题配置文件
menu:
首页: .
归档: archives
# Categories: categories
# 标签: tagcloud
关于: /about
# Customize
customize:
logo:
enabled: true
width: 40
height: 40
url: images/logo.png
profile:
enabled: true # Whether to show profile bar
avatar: css/images/touxiang.png
gravatar: # Gravatar email address, if you enable Gravatar, your avatar config will be overriden
author: 凌宇
author_title: Java & Python
location: Shanghai, China
follow: https://github.com/lingyv
highlight: monokai
sidebar: right # sidebar position, options: left, right
thumbnail: true # enable posts thumbnail, options: true, false
favicon: # path to favicon
social_links:
github: https://github.com/lingyv
weibo: http://weibo.com/5051531692/profile?topnav=1&wvr=6&is_all=1
linkedin: http://cn.linkedin.com/in/lingyv
# twitter: /
# facebook: /
# dribbble: /
# rss: /
# Widgets 小工具
widgets:
- recent_posts
- category
- archive
- tag
- tagcloud
- links
# Search
search:
insight: true # you need to install `hexo-generator-json-content` before using Insight Search
swiftype: # enter swiftype install key here
baidu: true # you need to disable other search engines to use Baidu search, options: true, false
# Comment
comment:
# disqus: hexo-theme-icarus # enter disqus shortname here
#使用多说评论
duoshuo: lingyv
# youyan: # enter youyan uid here
# Share
share: default # options: jiathis, bdshare, addtoany, default
# Plugins
plugins:
fancybox: true # options: true, false
google_analytics: # enter the tracking ID for your Google Analytics
google_site_verification: # enter Google site verification code
baidu_analytics: # enter Baidu Analytics hash key
# Miscellaneous
miscellaneous:
open_graph: # see http://ogp.me
fb_app_id:
fb_admins:
twitter_id:
google_plus:
links:
# Hexo: http://hexo.io
6. 购买域名
去万网或相关域名购买网站,挑选一个自己喜欢的域名吧
7. 域名解析
yumingjiexi.png
8. Hexo使用指南
hexo n "博客"== hexo new "博客"#新建文章
hexo p == hexo publish
hexo g == hexo generate#生成
hexo s == hexo server #启动服务预览
hexo d == hexo deploy#部署
