如何搭建静态博客

今天给大家说说如何才能搭建一个属于自己的静态博客。首先要理解什么叫静态博客？静态博客指通过模板引擎动态生成HTML、CSS、JS所组成的页面。静态博客的特点：

页面没从服务器获取
需要主题，即页面风格
不用自己手写Html页面

搭建静态博客有多种方式，如：FarBox、Jekyll、Octopress、Ghost、Marboo、Hexo、Medium、Logdown、Prose.io

我使用的是Hexo，用Hexo搭建静态博客的条件有：

拥有自己的Github或Gitcafe账号
下载Node.js
下载Git
扩展账号如：多说评论、百度统计、Google统计、多享

简要说下上面几个条件分别是做什么的？

Github和Gitcafe拥有代码托管服务，可以把生成的静态文件放在上面。 Git工具是让你的电脑与Github、Giecafe关联起来，然后使用ssh、git命令进行资源上传和修改。 Node.js是为了能够使用npm命令所搭建的环境，然后使用npm命令安装下载hexo库。扩展账号是方便博主能够使用评论和统计及其他第三方功能。

下面请看详细步骤：

1. 去Github或Gitcafe官网注册账号

2. 使用Git工具搭建与电脑之间的关联

a.创建SSH

ssh-keygen -t rsa -C "youremail@example.com"

b.创建SSH后找到.ssh文件夹下面的id_rsa.pub,将id_rsa.pub文件的内容拷贝并粘贴到登录的Github账号"Account settings"里面的"SSH Keys"里

c.关联远程库

git remote add origin git@github.com:yourname/name.git

d.检查是否关联远程库

ssh -T git@github.com || git@gitcafe.com

e.推送远程库

git push -u origin master //远程库是空的
git push origin master //远程库不是空的

补充说下Gitcafe相关命令：

因为Github的分支是master，而Gitcafe使用的分支必须是gitcafe-pages，因此从上面的c步骤里面需要补充

git checkout -b gitcafe-pages //在本地创建gitcafe-pages分支并切换到该分支
git push origin gitcafe-pages //将gitcafe-pages分支推送到GitCafe

补充说下Git相关命令：

git init //初始化仓库
git config --global user.name [username] //配置log查看显示的用户名
git config --global user.email [email] //配置log查看显示的邮箱
git add  XXX.txt //单个添加
git add -A //多个添加
git commit -m "XXXXX" //提交到仓库
git status //查看仓库状态
git diff XXX.txt //查看文件状态
git log --pretty=oneline //查看命令历史记录
git reflog //查看提交历史记录
git reset --hard HEAD^ || commit_id //返回到上个版本
git branch //查看当前分支
git push origin 分支名 //将仓库上传到Github上
git clone "url" //克隆远程库

3.下载Nodejs

去Nodejs官网或Nodejs中文网进行下载安装

4.安装Hexo库

npm install -g hexo

5.配置及初始化Hexo

Hexo库已经下载到本地后，需要开始真正的编写博客了。在编写博客前需要在你电脑的任意目录下进行Hexo的初始化及主题相关功能的配置。

a.初始化Hexo

cd C:\需要写博客的文件名
hexo init //初始化Hexo相关文件
npm install //安装Hexo相关功能 放在node_modules文件夹下面
npm install hexo-deployer-git --save //安装支持_config.yml文件里deploy属性
npm install hexo-server --save //安装支持在本地使用localhost://4000能访问生成的博客页面
npm install hexo-generator-feed —save //支持rss
npm install hexo-generator-sitemap —save //支持sitemap收录

b.配置Hexo

在初始化的Hexo文件夹下面有个_config.yml配置文件，该配置文件目录如下：

# Hexo Configuration
## Docs: http://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site #整站的基本信息
title: #网站标题
subtitle: #网站副标题
description: #网站描述，给搜索引擎用的，在生成html中的head->meta中可看到
author:  #网站作者，在下方显示
language: #联系邮箱
timezone: #语言

# URL #域名和文件结构
url: #你的域名
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:

#写文章选项
new_post_name: :title.md # File name of new posts
default_layout: post #默认layout方式
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: true
  tab_replace:

#分类与标签
default_category: uncategorized
category_map:
tag_map:

#日期显示格式
date_format: YYYY-MM-DD
time_format: HH:mm:ss

#分页设置
per_page: 10
pagination_dir: page

#插件
theme: landscape #主题

# 开启RSS功能
rss: /atom.xml #rss地址  默认即可

#部署
deploy:
  type: git
  repository: #git相关项目的连接
  branch: master #分支名

c.更换主题

可以去Hexo主题官网或Github牛人写的主题进行下载，将下载好的主题文件放在themes文件夹下面，找到初始化的Hexo文件夹下面有个_config.yml配置文件里的theme属性，将默认主题名landscape更换成你下载的文件名即可使用。

补充说下使用npm install下载东西慢的解决办法：

npm config set registry http://registry.npm.taobao.org  npm info underscore

6.使用Hexo命令生成静态页面

Hexo相关命令：

hexo generate //生成静态页面 可以缩写成：hexo g
hexo server //启动本地服务 可以缩写成：hexo s
hexo deploy //上传到github或gitcafe 可以缩写成：hexo d
hexo new "postName" //创建新的日志 可以缩写成：hexo n "postName"

剩下的只有靠你们自己去理解了哈，比如可以用复合命令hexo g -d，在mac电脑需要在前面加上sudo才能使用命令...