如何搭建独立的博客

发表于 2015-04-15   |   分类于 技术分享   |  

写在前面的话

上个星期的某一天早晨醒来，突然琢磨着想搭建一个自己的博客。什么是自己的博客呢？就是单独的、独立的、属于自己的博客，不是在新浪上写博客，也不是QQ空间里的发日志，当然更不是微信里的发条朋友圈状态。

在脑中迅速勾勒了一下，打算用PHP来写个简单的网页，和MySQL数据库连接，后台直接把写好的文章放进数据库，然后在网页上读取并显示出来，仅此而已。至于域名和服务器，都是打算在Godaddy上完成。

有了想法，便迅速起床，打开Mac查了起来。不一会儿，便发现有更好的方法——利用GitHub Pages和Hexo来搭建博客。

捣腾了四五天，不断改进，终于搭建得有模有样了。因为自己是站在巨人的肩膀上，所以也想着写一篇自己这个博客的完整搭建过程，以方便后人。

Git

什么是Git？

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. （引自Git官网）

译：Git是一个免费开源的分布式版本控制系统，用于快速高效地处理大大小小的各种项目。

学习Git的各种命令，推荐Try Git。

GitHub

首先，我们要注册一个GitHub账号，并登录。

注册username和邮箱，邮箱十分重要，GitHub上很多通知都是通过邮箱传递的。

GitHub的配置（特别是SSH keys的配置）可参考链接https://help.github.com/articles/generating-ssh-keys/或文章《使用Github Pages建独立博客》中的相关内容。

关于GitHub的学习，推荐观看Coursera上的The Data Scientist’s Toolbox课程的Week 2视频，并结合视频所提到的资料和网站帮助文档来学习如何使用。

Mac上除了网页版，还可以下载GitHub for Mac来管理自己的GitHub，下图是其用户界面，第一次打开时设置关联到自己的GitHub账号上，之后使用就十分方便了。

看到这里，也许你会困惑，Git和GitHub之间是什么关系？

Git = Local (on your computer)

GitHub = Remote (on the web)

即Git是在本地使用，而GitHub支持远程访问及同他人协同工作。

GitHub很好地将代码和社区联系在了一起，于是发生了很多有趣的事情，世界也因为它变得更美好了一点点。

GitHub Pages

GitHub Pages是什么？

GitHub Pages本用于介绍托管在GitHub的项目，不过，由于它的空间免费稳定，用来搭建一个博客再好不过了。

GitHub Pages可以被认为是用户编写的、托管在GitHub上的静态网页（何为静态网页，请参看《用静态页面生成静态博客》一文）。

为什么选择GitHub Pages？

  • 1、轻量级的博客系统，没有麻烦的配置，无需自己搭建服务器，且GitHub Pages有300M免费空间，资料自己管理，保存可靠；

  • 2、学着用GitHub，享受GitHub的便利，上面有很多大牛，眼界会开阔很多；

  • 3、顺便看看GitHub工作原理，最好的团队协作流程；

  • 4、GitHub是趋势；

  • 5、可以绑定自己的域名；

  • 6、可以使用标记语言Markdown来写博客文章，注重内容，而不是繁琐的排版；

  • 7、就算GitHub被墙了，我们的独立博客还可以搬到国内的GitCafe中去。

使用GitHub Pages建立博客

在与GitHub建立好连接之后，就可以方便地使用它提供的Pages服务，GitHub Pages分两种，一种是以你的GitHub用户名建立的username.github.io这样的用户或组织网站，另一种是依附项目的Pages。

建立个人博客用Pages的第一种服务，即建立形如xmuxiaomo.github.io这样的可访问的网站，每个用户名下面只能建立一个。

在GitHub上建立仓库

登录系统后，点击自己GitHub里的Repositories标签，然后点击右侧绿色的New按钮，最终建立的Repo如下图。

这里要注意的是，GitHub Pages的Repo名字是特定的，比如我的GitHub账号用户名是xmuxiaomo，那么我的GitHub Pages Repo名字就是对应的xmuxiaomo.github.io。

建立仓库的详细过程还可参看文章：《一步步在GitHub上创建博客主页(2)》。

Hexo

什么是Hexo？

Hexo的作者是台湾大学生tommy351。进入Hexo官网，我们可以看到如下页面：

Hexo是一个快速、简单、而强大的博客框架，它有如下特性：

  • 快速生成文件；

  • 支持Markdown语法；

  • 仅用一条命令即可部署；

  • 丰富的插件。

Hexo的安装及使用

使用Hexo之前，我们需要先安装：

  • Node.js

  • Git（前文已有介绍）

安装Node.js

Node.js最好的安装方法是使用nvm。

打开Terminal，用以下两种方法的任意一种来安装nvm。

使用cURL：

$ curl https://raw.githubusercontent.com/creationix/nvm/v0.24.1/install.sh | bash

或者Wget：

$ wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.24.1/install.sh | bash

nvm安装好之后，退出Terminal，再重新打开，运行以下命令来安装Node.js：

$ nvm install 0.12

安装Hexo

Node.js和Git都安装好后，就可以安装Hexo了，运行如下命令：

$ npm install -g hexo-cli

新建一个名为“Hexo”的文件夹，然后在Terminal里输入cd命令，进入该文件夹：

$ cd Hexo

进入Hexo文件夹后，输入命令：

$ hexo init

随后，Hexo会自动在该文件夹中建立网站所需要的所有文件。

现在我们已经搭建起本地的Hexo博客了，执行以下命令（执行所有hexo命令必须在我们所建立的Hexo文件夹下）：

$ hexo g
$ hexo s

hexo g是hexo generate的缩写；hexo s是hexo server的缩写。

然后到浏览器输入localhost:4000，可以看到所搭建的博客效果（默认主题为landscape）。

博客的主题及个性化配置

进入Hexo官网的THEMES寻找你感兴趣的主题，我用的主题是简约优雅的NexT。

以下内容为我安装及使用NexT主题并进行个性化配置的详细过程。

NexT主题介绍

精于心，简于形。

有两款界面，默认主题如下：

Mist风格主题（我用的是这个主题）如下：

安装和使用Next主题

安装

先从GitHub下载：

$ cd Hexo
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

这时候，在Hexo/themes目录下就会发现除了landscape文件夹外的，还多了一个新的next文件夹。

使用

更改站点_config.yml中的theme字段，设置为next：

theme: next

编辑主题的_config.yml，将scheme: Mist前的注释符号去掉。

这样，再启动本地服务器，进入浏览器，就可以看到博客已经换上了新的主题Mist。

站点配置

现在，我们可以根据自己的喜好来对站点进行配置了，要实现对整个站的配置，只要修改Hexo目录下的_config.yml文件就可以了（建议用Sublime Text 2来编辑）。以下附上我的配置和说明，供大家参考：

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

# Site
title: 小默的博客 #网站标题
subtitle: 用自由自在的态度，过随遇而安的生活。 #在Mist主题下不显示
description: 匆忙世间的闲人。 #显示在侧边栏的描述信息
author: xmuxiaomo #网站作者，显示在侧边栏头像下方和网页底部
language: zh-Hans #语言为简体中文
timezone: #默认为系统的时区

# 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:
  lang: en

# 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 #1为小写字母，2为大写字母
render_drafts: false #是否显示草稿
post_asset_folder: false #在新建一篇博客的时候是否同时创建资料文件夹
relative_link: false #是否创建关联到根文件夹的链接
future: true
highlight: #代码高亮设置
  enable: true #是否启用
  line_number: false #是否显示代码的行号
  tab_replace:

# Category & Tag
default_category: uncategorized
category_map: # Category slugs
tag_map: # Tag slugs

# 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: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
theme: next

# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy: #部署在GitHub上
  type: git
  repo: https://github.com/xmuxiaomo/xmuxiaomo.github.io
  branch: master

# Social links
social: #其他的社交链接，会显示在侧边栏
  github: https://github.com/xmuxiaomo
  weibo: http://weibo.com/u/2457084784
  #zhihu: http://www.zhihu.com/people/your-user-name

# Duoshuo comments（启用多说评论系统）
duoshuo_shortname: your-duoshuo-shortname

# Baidu analytics（启用百度统计）
baidu_analytics: your-analytics-id #百度统计ID，此ID是百度统计提供脚本中hm.js?后面那串字符，非百度统计帐号

# Swiftype website search（启用Swiftype站内搜索）
swiftype_key: your-swiftype-key

# Creative commons（启用Creative Commons）
creative_commons: by-nc-sa

主题配置

#菜单配置，开启`首页`、`分类`、`归档`、`标签`和`关于`这五个页面。
menu:
  home: /
  categories: /categories
  archives: /archives
  tags: /tags
  about: /about

# Favicon
# 从`Next 0.2`起，favicon将不再放置于主题之内。
# 请将你的favicon放置在`hexo-site/source/`目录下。
favicon: /favicon.ico

# Set default keywords (Use a comma to separate)
keywords: "Hexo,next"

# 设置为`false`不显示`rss`链接
# 留空，并且通过`hexo-site-feed`插件配置使用默认的feed
# 设置成特定的`url`，适用于通过第三方服务定制feed的情况。
rss: 

# Icon fonts
# Place your font into next/source/fonts, specify directory-name and font-name here
# Avialable: default | linecons | fifty-shades | feather
#icon_font: default
#icon_font: fifty-shades
icon_font: feather
#icon_font: linecons

# Code Highlight theme
# Available value: normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: night


# MathJax Support
# 开启数学公式渲染支持，默认关闭。设置为true开启。
mathjax: true


# Schemes
scheme: Mist


#`阅读全文`按钮跳转之后是否自动滚动页面到设置`<!-- more -->`的地方。
scroll_to_more: true


#是否为侧边栏文章的目录自动添加索引，默认开启。设置为false关闭。
toc_list_number: true


## DO NOT EDIT THE FOLLOWING SETTINGS
## UNLESS YOU KNOW WHAT YOU ARE DOING

# Use velocity to animate everything.
use_motion: true

# Fancybox
fancybox: true

# Static files
vendors: vendors
css: css
images: images

# Theme version
version: 0.4.2

以上的配置都是针对Mist这个主题特性而进行的，该主题有如下特性，可供大家自行添加、配置。

注：配置过程中有疑问或出错的地方，推荐的解决途径如下（大部分问题都可以得到解决）：

如果还有解决不了的问题，可以向作者留言和提问。因为每个事物都是不断发展和改进的，没有一下子就完美的东西，我们在自己方便使用的过程中，也别忘了给出自己的宝贵意见，促进这个主题的修正和改进。

至此，博客已经搭建完成！^_^Y

Markdown

博客搭建好之后，接着就是如何在博客上写文章了。

写新文章

首先，在Terminal上通过cd命令进入Hexo文件夹，然后输入以下命令：

$ hexo n "postName"

其中，hexo n是hexo new的缩写，新建一篇文章，postName为文章标题，写在双引号中。

执行命令后，在Hexo/source/_posts中会生成postName.md文件，用编辑器打开编写即可。

Mou

.md文件为Markdown文件，推荐使用Mou进行编辑。

以下为Mou的界面：

Markdown语法

Markdown是一种标记语言，其语法十分简洁。

推荐阅读：

当然，最快的掌握方法是读Mou Help，并动手用Markdown写一两篇文章。

发表新文章

写完后，推送到服务器上，执行如下命令：

$ hexo d -g

hexo d是hexo deploy的缩写，hexo d -g是先生成静态页面然后将本地的博客相关文件部署到GitHub上。

404 NOT FOUND页面

在本地创建404.html文件，直接在GitHub上创建新文件，将本地404.html的内容拷贝上去，即可。（每次部署后，我都得手动在GitHub上重新创建404页面，目前还没有找到解决的好方法。）

推荐：

其他小建议

图床

推荐使用七牛（10G空间，免费）。

ico图标制作

推荐使用比特虫，图片转换很方便。

好啦，到这里整个独立博客就已步入正轨了。接下去就可以不断书写自己的故事了。PS: 已经连续第三天快要凌晨2点睡觉了，整理得乐在其中。哈哈，晚安！

#GitHub Pages #Hexo #Markdown
亲爱的，你真美！
《大师》之罗家伦