博客搭建历程————————Github和Hexo

我的博客搭建历程,使用github pages + hexo,域名解析,配置插件

前言

       其实从去年开始我就想搭建一个自己的个人网站了,主要用于记录自己的技术积累和重点知识。但由于自己太懒,能力也太渣,所以就一直没有行动。直到今年,突然发现随着知识积累的增加,有好多重要的内容脑袋都记不下了,有的网页就直接存个标签,但是标签越存越多,但却很少再次去浏览,最后知识还是会淡忘,所以今天痛下决心,还是自己搭个博客吧,以挽回知识的流失,同时也可以向外部分享自己的一些见解。
       博客搭建过程也是一波三折,遇到各种坑爹问题,还好我没那么轻易放弃,最终在无数次失败之后终于成功了。


正文

1. github配置

1)首先需要有一个github账号,没有的话就得申请一个。
然后新建一个代码仓库,注意,仓库名一定要是:你的github账号名字.github.io,比如我的是windrunnerlihuan.github.io。
2)clone到本地,比如我的就是如下命令:
git clone https://github.com/windrunnerlihuan/windrunnerlihuan.github.io.git
cd 进文件夹,我们先建个index.html用于测试:
cd windrunnerlihuan.github.io
vi index.html
然后编辑:

1
2
3
4
5
6
<!DOCTYPE html>
<html>
<body>
<h1>github pages测试</h1>
</body>
</html>

然后按esc,再输入“:wq”回车保存。然后提交上去:
git add .
git commit -m “测试github pages”
git push
此时需要输入你的github账号和密码,输入就是了,成功后我们验证一下。
然后打开浏览器,输入地址,比如我的就是:http://windrunnerlihuan.github.io
如果能正确显示“github pages测试”字样,说明我们成功了。


2. hexo安装

       Hexo 是一个简单地、轻量地、基于Node的一个静态博客框架。通过Hexo我们可以快速创建自己的博客,仅需要几条命令就可以完成。

Hexo的官方网站:http://hexo.io/ ,也是基于Github构建的网站。

       不过要使用hexo必须装node.js,这个easy,直接在官网https://nodejs.org/en/ 上下一个,首页就是下载页面,选一个你自己电脑平台对应的,比如我的是windows x64。如果不想看英文呢,还有个中文网站http://nodejs.cn/ ,几乎是把英文网站翻译了一遍,套路都一样。下载下来之后文件名叫node-v4.4.4-x64.msi,双击,一路next,傻瓜式安装。

接着安装hexo:
1)打开控制台(按下win + r,输入cmd,回车)或者直接在git bash界面。
输入 npm install -g hexo,然后开始安装hexo。
成功后再输入 npm install hexo-deployer-git –save,安装发布工具。

2)接着进入我们从github上克隆下来的windrunnerlihuan.github.io文件,再次git bash here。
输入 hexo init,初始化hexo。
完成后我们测试一下:
输入hexo server
bash控制台会打印出 “[info] Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.”
这时端口4000被打开了,我们能过浏览器打开地址,http://localhost:4000/

hexo首页默认图片

出现了默认的网页界面,是不是很容易呢!!


3. hexo配置

我们先看一下文件结构

hexo文件结构图图片

  • scaffolds 脚手架,也就是一个工具模板
  • scripts 写文件的js,扩展hexo的功能
  • source 存放博客正文内容
  • source/_drafts 草稿箱
  • source/_posts 文件箱
  • themes 存放皮肤的目录
  • themes/landscape 默认的皮肤
  • _config.yml 全局的配置文件
  • db.json 静态常量

在这里,我们每次用到的就是_posts目录里的文件,而_config.yml文件和themes目录是第一次配置好就行了。

_posts目录:Hexo是一个静态博客框架,因此没有数据库。文章内容都是以文本文件方式进行存储的,直接存储在_posts的目录。Hexo天生集成了markdown,我们可以直接使用markdown语法格式写博客,例如:hello-world.md。新增加一篇文章,就在_posts目录,新建一个xxx.md的文件。

themes目录:是存放皮肤的,包括一套Javascript+CSS样式和基于EJS的模板设置。通过在themes目录下,新建一个子目录,就可以创建一套新的皮肤,当然我们也可以直接在landscape上面修改。

我们主要改的就是_config.yml全局配置文件,以及新建文章时要增加或者修改文章在source/-posts/目录下的md文件。

1)修改_config.yml全局配置文件

_config.yml是全局的配置文件:很多的网站配置都在这个文件中定义。

  • 站点信息: 定义标题,作者,语言
  • URL: URL访问路径
  • 文件目录: 正文的存储目录
  • 写博客配置:文章标题,文章类型,外部链接等
  • 目录和标签:默认分类,分类图,标签图
  • 归档设置:归档的类型
  • 服务器设置:IP,访问端口,日志输出
  • 时间和日期格式: 时间显示格式,日期显示格式
  • 分页设置:每页显示数量
  • 评论:外挂的Disqus评论系统
  • 插件和皮肤:换皮肤,安装插件
  • Markdown语言:markdown的标准
  • CSS的stylus格式:是否允许压缩
  • 部署配置:github发布
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site 站点信息
title: this way, little boy
subtitle: 無限大な夢のあとの 何もない世の中じゃ
description:
author: Huan Li
language:
timezone:

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://windrunnerlihuan.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
auto_detect: false
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
pagination_dir: page

# Markdown Markdown语法
## https://github.com/chjj/marked
markdown:
gfm: true
pedantic: false
sanitize: false
tables: true
breaks: true
smartLists: true
smartypants: true

# Deployment 部署配置
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: https://github.com/windrunnerlihuan/windrunnerlihuan.github.io.git

       其他没啥改动的,就改个Site 站点信息URL,还有Deployment 部署配置,前两个没啥难度,这个Deployment 部署配置很重要:

  • 其中type一定要填git,因为以前低版本的hexo是github,不过现在早就废弃了。
  • 其次repo填你github项目的clone地址,http/https/ssh类型都行,我的是
    https://github.com/windrunnerlihuan/windrunnerlihuan.github.io.git 和git@github.com:windrunnerlihuan/windrunnerlihuan.github.io.git ,我填的是第一个,因为填第二个后期发布时会验证公钥,需要用git bash生成公钥,然后贴到项目的Deploy keys里,比较麻烦,所以为了省事,我填了第一个。

2) 新建博客

接下来,我们开始新博客了,创建第一篇博客文章。Hexo建议通过命令行操作,当然你也可以直接在_posts目录下创建文件。

通过命令创建新文章,在bash 里输入 hexo new “新的开始”
在source/_posts目录下就会生成文件:”新的开始.md”。

然后我们编辑 新的开始.md

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
---
title: 新的开始
date: 2016-05-27 18:44:12
tags:
- 开始
categories: 日志
---

这是**新的开始**,我用hexo创建了第一篇文章。

## 引用
# Swig语法
{% blockquote Seth Godin http://sethgodin.typepad.com/seths_blog/2009/07/welcome-to-island-marketing.html Welcome to Island Marketing %}
Every interaction is both precious and an opportunity to delight.
{% endblockquote %}
# Markdown语法
> Every interaction is both precious and an opportunity to delight.

## 链接
# Swig语法
{% link gank日志 http://gank.io/ true 粉丝日志 %}
# Markdown语法
[gank日志](http://gank.io/)

## 图片
# Swig语法
{% img /images/新的开始/meizi.jpg 400 600 这是一张图片 %}
# Markdown语法
![这是一张图片](http://o7xxrho8u.bkt.clouddn.com/img/windrunnerlihuan%E5%8D%9A%E5%AE%A2/%E6%96%B0%E7%9A%84%E5%BC%80%E5%A7%8B/meizi.jpg)


## 公式
$$J\_\alpha(x)=\sum _{m=0}^\infty \frac{(-1)^ m}{m! \, \Gamma (m + \alpha + 1)}{\left({\frac{x}{2}}\right)}^{2 m + \alpha }$$
感觉非常好。

文章使用markedonw语法写的,还有很多普通或者高级的语法,这个可以问度娘或者谷歌,找找别人的帖子学学。

用命令行启动本地server:hexo server
通过浏览器打开, http://localhost:4000/ ,就出现了我们新写的文章。

新的开始文章预览图


4. 发布到Github

1) 静态化处理
       写完了文章,我们就可以发布了。要说明的一点是hexo的静态博客框架,那什么是静态博客呢?静态博客,是只包含html, javascript, css文件的网站,没有动态的脚本。虽然我们是用Node进行的开发,但博客的发布后就与Node无关了。在发布之前,我们要通过一条命令,把所有的文章都做静态化处理,就是生成对应的html, javascript, css,使得所有的文章都是由静态文件组成的。

输入静态化命令 :hexo generate
在本地目录下,会生成一个public的目录,里面包括了所有静态化的文件。

2) 发布到github
接下来,我们把这个博客发布到github。
现在检查我们上次填好的_config.yml文件,找到deploy的部分,设置github的项目地址。

1
2
3
deploy:
type: git
repo: https://github.com/windrunnerlihuan/windrunnerlihuan.github.io.git

然后执行部署命令:hexo deploy
中间过程会让你再次输入github账号和密码,输入就行了
成功后验证,浏览器里输入上次的地址:http://windrunnerlihuan.github.io

新的开始文章预览图
说明我们成功了


5. 独立购买域名与绑定

       有时候我们想做个人博客,想让自己的博客拥有自己的域名,那就得去买个域名了。这里我们可以通过万网申请购买:https://wanwang.aliyun.com/ 。流程很简单,基本上一路next。
我也斥资45块买了个.com结尾的域名 windrunnerlihuan.com

域名列表图片

然后就是解析域名了,不过解析之前你得知道你的gihub pages个人主页的ip:
首先ping 一下个人主页地址 ,控制台里输入 ping www.windrunnerlihuan.github.io,然后会返回一个ip,然后用这个ip设置我们刚才买的域名解析,也是轻车熟路

域名解析图片

最后最重要的是:
1)在github项目中,新建一个文件CNAME,文件中写出你要绑定的域名windrunnerlihuan.com。通过浏览器,访问http://windrunnerlihuan.com,就打开了我们建好的博客站点。
2)由于每次执行deploy的时候,github代码仓库所有的文件都会被覆盖,所以我们最好在source目录下创建这个CNAME文件,这样每次部署就不用动手创建了。


6. 个性化功能配置

1) 替换皮肤
博客系统流行的原因,是因为他的个人性,而皮肤正式个性化的一种体现。
利用hexo替换皮肤,还是比较简单的,3步完成。

No.1 找到一个皮肤或者自己开发一个皮肤
打开hexo的皮肤列表页面,你可以找到很多的皮肤,网页地址: https://github.com/tommy351/hexo/wiki/Themes

No.2放到themes目录下
比如,我觉得pacman( https://github.com/A-limon/pacman )这个皮肤还不错,我就可以下载皮肤到themes目录下面。
通过git命令下载皮肤
git clone https://github.com/A-limon/pacman.git themes/pacman

No.3在_config.yml指定皮肤
编辑文件_config.yml,找到theme一行,改成 theme: pacman
本地启动hexo服务器,打开浏览器 http://localhost:4000

替换了皮肤的博客

新皮肤的效果还不错吧,然后静态化处理,再发布到github,就完成了站点的改版。

这里只介绍换皮肤,当然还有其他很多功能,不过对于我来说暂时没多大卵用,如果其他人有需求可以再google或者baidu搜,也都不难,很easy。


结语

       因为这是我第一次搭建个人博客,水平实在比较差,流程写的很粗燥,很多细节都没有涉及,望大家体谅,以后我会努力完善的,将后续文章做的更好。

坚持技术分享,您的支持将鼓励我继续创作!