×

如何在5小时内搭建具有个人域名又具备Geek属性的个人博客

96
大爽兔
2016.04.06 13:22* 字数 3124

前言

个人博客是个人持续性的日记或评论, 它成为了一种反映生活的方法或艺术创作, 编写博客可以记录生活,也可以帮助他人。相信很多人都写过Blog, 但我们总是希望有更加简洁,便捷的写作方式。Hexo就是其中之一,使用MarkDown语法,让你更注重文章内容。

在网上看见过这样一段话,准确的概述了一个有追求的个人博客发展过程。

第一阶段,刚接触Blog,觉得很新鲜,试着选择一个免费空间来写。
第二阶段,发现免费空间限制太多,就自己购买域名和空间,搭建独立博客。
第三阶段,觉得独立博客的管理太麻烦,最好在保留控制权的前提下,让别人来管,自己只负责写文章。

我们曾经也用过很多博客:

  1. 百度空间 (停止服务)
  2. 点点 (停止html的diy功能,处于半残状态)
  3. 博客大巴 (广告遍地)

稳定和简洁成为了博客最后的定位,于是相应的诞生了很多博客源码服务。

作为普通的博客用户,免费和稳定也是另外一个要求,于是采用Hexo + Github Pages 搭建博客成为了一个不错的选择。

最终成果

首先得看看做出来的东西是啥样的不是么,www.6a6.me是本人搭建的个人博客,主要有以下几点:

  1. 个人域名: 6a6.me
  2. 无需购置服务器,本站同时挂载在Github Pages 和 GitCafe Pages上,免服务器费的同时还能做负载均衡
  3. 在GitHub上同时管理你的博客和相应代码,再也不用担心博客遗失

工欲善其事,必先利器

本文仅讲解基于Windows下的Hexo环境搭建,基于Linux的教程请自行百度。

需要准备的东西:

  1. 个人域名。学生可在腾讯云1元获得 .cn 域名。
  2. Node.js
  3. Git
  4. GitHub账号。用以申请GitHub Page。

如果你没有遇见过这几个东西,那么你的计算机需要安装Git,Node.js这俩软件。安装简单,在此不做详细介绍。


1. GitHub Page 是什么?

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

GitHub Pages可以被认为是由使用者编写,寄放在Github上的可以被互联网访问的静态网页

2. 为什么要选择 GitHub Page

  1. 无需购置服务器。
  2. GitHub pages有300M免费空间,资料自己管理,保存可靠。
  3. 上面有很多大牛,眼界会开阔很多。

注册 GitHub Page

  1. 你需要拥有一个GitHub账号,去完成新手任务吧。
  2. 进入GitHub Pages,一步步按照提示完成注册。
  3. 完成后就能在浏览器打开http://royrs.github.io 加粗的royrs换成你注册的用户名。

至此,我们已经利用GitHub Pages搭建好了个人静态网页空间了。下面要做的,就是配置本机与GitHub联系。

配置和使用GitHub

使用前提:你的计算机里必须安装了Git软件。
下面的步骤照做就行:

1. 配置SSh key:

在任意文件夹右键,选择其中的“Git Bash Here”,出现黑窗,以下指令均在该窗口完成。
首先我们需要检查你电脑上现有的ssh key:

$ cd ~/.ssh

如果提示:“No such file or directory” 说明你是第一次使用git。

2. 生成新的SSH Key:

$ ssh-keygen -t rsa -C "you@youremail.com"

引号中的 you@youremail.com 替换为你注册github的邮箱。

注意:Enter file in which to save the key (/Users/your_user_directory/.ssh/id_rsa):(回车就好),
Enter passphrase (empty for no passphrase): (回车,不需要输入密码)
Enter same passphrase again: (回车不需要输入密码)
因为Hexo的自动部署如果有密码的话会部署失败

SSH-KEY
SSH-KEY

当出现如图所示的时候就是成功了。

3. 添加SSH Key到GitHub

在本机设置SSH Key之后,需要添加到GitHub上,以完成SSH链接的设置。
在之前的命令提示中继续输入以下命令。

$ cd ~/.ssh/ && ls

可以看到此目录下的文件:id_rsa , id_rsa.pub

$ cat id_rsa.pub

将文件内容(命令下面的5行代码)全部复制下来:
登陆GitHub官网: https://github.com/settings/ssh 进行添加 SSH Keys
导航: Account Settings —> SSH keys —> Add SSH keys
在下方title随便填入key的名字
key值中填入刚刚复制的key。

4. 测试是否成功

$ ssh -T git@github.com

如果是以下提示:“Hi royrs! You’ve successfully authenticated, but GitHub does not provide shell access.”
证明你配置成功了。

5. 设置用户信息

$ git config --global user.name "iyannik0215"   #GitHub用户名
$ git config --global user.email  "iyannik0215@gmail.com"   #填写自己的邮箱

至此配置GitHub就已经完成了,接下来我们就要把博客Hexo的框架架设好。

什么是Hexo

Hexo 是一个轻量的静态博客框架。通过Hexo可以快速生成一个静态博客框架,仅需要几条命令就可以完成,相当方便。

安装Hexo博客框架

经过上面步骤,我们已经拥有了一个初步域名:http://username.github.io 加一个免费网络空间了。但是仅仅有了放置网页的空间,没有内容是不行的。
首先,在你的电脑中(除了C盘外的其他盘符)中为你的blog建立一个存放blog源码的文件夹。比如叫“myblog”啊之类的,但是不能有汉字=。=
在刚刚建好的“myblog”文件夹中,右键,选择其中的“Git Bash Here”,出现黑窗,输入下面的命令,安装Hexo。

$ npm install -g hexo-cli

执行该命令后,会自动从Hexo服务器上下载源码到“myblog”文件夹。完成Hexo安装后,我们需要新建一个存放blog的文件夹,通过以下命令来完成。

$ hexo init <folder>
$ cd <folder>
$ npm install
//注意上面的<folder>要换成你建立的“myblog”的路径。

完成该命令后,在myblog的文件中可以看到下面的文件结构。

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

此时,blog的源码已经安装好了,我们需要经行blog的diy配置。
打开myblog下的 _config.yml 文件,该文件为hexo的站点配置文件,该文件对格式要求严格,所以编辑的时候请注意符号的圆角和半角,以及空格的个数,不能多也不能少,否则接下来你会看到很多错误信息。

_config.yml
# 配置信息:后必须有一个空格
# Site
title: 大爽兔's Blog            # 网站标题
subtitle: 思考 随笔             # 简介
description: 思考 随笔          # 描述
author: 大爽兔                  # 网站作者
language: zh-Hans               # 网站语言
timezone: Asia/Hong_Kong        #时区

# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:
    type: git     # 部署的位置  写git
    repository: git@github.com:royrs/royrs.github.io.git
    # 这里填写项目的地址 git@github.com:Git用户名/Git用户名.github.io.git 参照上面
    branch: master    # 分支选择 master

使用Hexo

经过上面的配置后,一个最基本的blog已经成形了,下面我们开始将本地的(也就是你刚刚建立的myblog)博客源码发布到github上。
首先需要安装一个发布必须的插件,依然是右键的“git bsah here”的黑窗口中输入。

npm install hexo-deployer-git --save # 安装部署所需要的插件

安装完成后我们就发布本地源码至GitHub上。输入以下代码。

$ hexo clean && hexo g && hexo deploy && hexo clean

在这里对这一串代码进行简单的讲解。

  • hexo clean : 清理 database 和 /public目录, /public目录里是生成的静态文件数据。
  • hexo generaet : 简写是 “hexo g” 命令是用来生成静态页面的 会创建 /public目录静态页面数据都在这个文件夹里。
  • hexo deploy : 一键部署命令上面在 _config.yml文件中配置了部署信息。这个命令会帮助你一键部署。

命令完成后,你就可以访问http://你的Git用户名.github.io

小结

到这里,我们已经完成了hexo的配置,执行deploy操作后,刷新你的网页 http://username.github.io 你就能看到默认的内容了。
但此时还是默认主题,我们可以配置Next主题。

为什么是Next主题?

Next主题是由国内开发者iissnan开发的一款主题,深受广大网友的好评,同时基于该主题,也衍生了很多其他优秀的主题,成为了大多数Hexo用户的标配。

如何使用Next主题?

访问 http://theme-next.iissnan.com/ 即可以得到官方的说明文档,按照文档配置即可。

Next
Next

配置个性化域名

速速前往万网(也可以使用某宝),支付宝刷的一声,你就拥有由你自己定义的个人域名啦

域名解析

购买好域名以后,在域名解析中添加下面两条记录:

主机记录                  记录类型               记录值
   @                         A            192.30.252.153
   @                         A            192.30.252.154
  www                      CNAME          royrs.github.io.
  //最后一条的royrs依然要替换为你的github用户名。

GitHub Pages 的设置

去到你的royrs.github.io 仓库,点击 CNAME(没有自行创建) ,再点击右下角的 铅笔 编辑,将 blog.shijinrong.cn 改成你的域名
域名绑定成功,域名解析成功,因此你在浏览中输入royrs.github.io或者现在blog.shijinrong.cn均可以访问到主页。

至此,你已经完成了Hexo新手教学,得到了一个完全由自己diy的blog。

怎样发博

第一次接触markdown和hexo的新手可能不知道如何发博,下面给出一个简单的发博过程。

在哪新建博文

“myblog”文件夹中,右键,选择其中的“Git Bash Here”,出现黑窗,输入以下命令:

$ hexo new <title>
// <title> 即为你的新博文的名字

执行完改命令后,就新建了一篇博文。

怎么写博文

新建完博文怎么查看?
在你的“myblog”文件夹下有一个source目录,打开有一个 _post 文件夹,打开,里面就是你建立的新博。
格式为: ** 名称.md **

其中md后最就是markdown的文件。那么知道了博文位置,怎么写进去呢?
首先得知道markdown语法规则。

什么是markdown?

Markdown 是一种轻量级的「标记语言」,它的优点很多,目前也被越来越多的写作爱好者,撰稿者广泛使用。看到这里请不要被「标记」、「语言」所迷惑,Markdown 的语法十分简单。常用的标记符号也不超过十个,这种相对于更为复杂的HTML 标记语言来说,Markdown 可谓是十分轻量的,学习成本也不需要太多,且一旦熟悉这种语法规则,会有一劳永逸的效果。

怎样写具有markdown语法的文章?

看完markdown的定义,就可以知道这东西用系统自带的记事本就可以完成写作,可是新手往往记不住语法规则,所以推荐使用一款支持markdown语法的编辑器即可。

什么编辑器好用呢?

月光博客发表了一篇博文,推荐了一些各种平台的,在线的,离线的编辑器,可以自行观看并选取你喜欢的编辑器。
推荐阅读:好用的Markdown编辑器一览

怎么发布博文呢?

写完博文后,进入myblog文件夹,右键,选择其中的“Git Bash Here”,出现黑窗,输入以下命令:

$ hexo clean && hexo g && hexo deploy && hexo clean

是不是很熟悉呢?在上面介绍过这段代码的具体意思,这里就不赘述了。只要记住,每写完一篇新博文,都要执行上诉的命令喽。

总结

经过上面的步骤,我们已经能够通过访问自己的域名进入自己的博客了。本文的任务也就告一段落。怎样去diy自己博客,就看你慢慢学习写css和html啦。多以一点技能总不是坏事喽。

参考资料

  1. 如何使用10个小时搭建出个人域名而又Geek的独立博客?
  2. 认识与入门 Markdown
  3. 好用的Markdown编辑器一览
  4. Hexo官方文档
  5. 锤子便签Markdown用法与规则
日记本
Web note ad 1