使用GitHub搭建Blog

发表于 | 分类于
| 字数统计 1,747

Blog （网络日志）

  • 网络日志，外语全名weB LOG，后来缩写为BLOG。

  • 它是继Email、BBS、IM之后出现的第四种网络交流方式，是网络时代的个人“读者文摘”，是以超级链接为武器的网络日记，是代表着新的生活方式和新的工作方式，更代表着新的学习方式。

  • 简言之，网络日志就是以网络作为载体，简易迅速便捷地发布自己的心得，及时有效轻松地与他人进行交流，再集丰富多彩的个性化展示于一体的综合性平台。

免费易用的Blog层出不穷，使用者亦多有各自见解。

现将在Linux环境下搭建GitHub博客相关内容作以回顾：

Step1 检查系统是否安装必要组件

安装前必须检查是否安装git、nodejs以及npm
直接在命令行输入即可：

1
2
3
4
5
6
m87@m87:~$ git
usage: git --version -C <path>
		  [--exec-path[=<path>]] [--html-path] [--man-path] [--info-path]
           [-p | --paginate | --no-pager] [--no-replace-objects] [--bare]
           [--git-dir=<path>] [--work-tree=<path>] [--namespace=<name>]
           <command> [<args>]
1
2
m87@m87:~$ npm
bash:npm not found

Step2 安装Nodejs

1
$ wget -qO- https://raw.github.com/creationix/nvm/master/install.sh | sh

安装完成后，重启终端并执行下列命令即可安装 Node.js。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$ nvm install stable

m87@m87:~$ nvm install stable

Downloading and installing node v8.1.3...

Downloading https://nodejs.org/dist/v8.1.3/node-v8.1.3-linux-x64.tar.xz...

######################################################################## 100.0%

Computing checksum with sha256sum

Checksums matched!

nvm is not compatible with the npm config "prefix" option: currently set to "/usr/local"

Run nvm use --delete-prefix v8.1.3 to unset it.

m87@m87:~$

执行以下命令即可使用nodejs，并在当前用户下使用npm

1
m87@m87:~$ nvm use --delete-prefix v8.1.3
1
2
3
4
5
6
7
8
9
10
11
12
m87@m87:~$ npm
Usage: npm <command>
where <command> is one of:
access, adduser, bin, bugs, c, cache, completion, config,
ddp, dedupe, deprecate, dist-tag, docs, doctor, edit,
explore, get, help, help-search, i, init, install,
install-test, it, link, list, ln, login, logout, ls,
outdated, owner, pack, ping, prefix, prune, publish, rb,
rebuild, repo, restart, root, run, run-script, s, se,
search, set, shrinkwrap, star, stars, start, stop, t, team,
test, tst, un, uninstall, unpublish, unstar, up, update, v,
version, view, whoami

如此，则nodejs、npm、git相应都已安装。

Step3 安装hexo

1
m87@m87:~$ npm install hexo-cli -g
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/home/m87/.nvm/versions/node/v8.1.3/bin/hexo -> /home/m87/.nvm/versions/node/v8.1.3/lib/node_modules/hexo-cli/bin/hexo

> fsevents@1.1.2 install /home/m87/.nvm/versions/node/v8.1.3/lib/node_modules/hexo-cli/node_modules/fsevents
> node install

> dtrace-provider@0.8.3 install /home/m87/.nvm/versions/node/v8.1.3/lib/node_modules/hexo-cli/node_modules/dtrace-provider
> node scripts/install.js

> hexo-util@0.6.0 postinstall /home/m87/.nvm/versions/node/v8.1.3/lib/node_modules/hexo-cli/node_modules/hexo-util
> npm run build:highlight

> hexo-util@0.6.0 build:highlight /home/m87/.nvm/versions/node/v8.1.3/lib/node_modules/hexo-cli/node_modules/hexo-util
> node scripts/build_highlight_alias.js > highlight_alias.json

+ hexo-cli@1.0.3
added 218 packages in 21.617s

如此，hexo已经安装完成。

Step4 创建并部署Blog根目录

在本地～目录下创建Blog文件夹

1
m87@m87:~$ mkdir Blog

在Blog文件夹目录下执行生成静态页面命令：

1
$ hexo generate        或者：hexo g

此时若出现如下报错：

1
2
3
4
5
ERROR Local hexo not found in ~/blog
ERROR Try runing: 'npm install hexo --save'
则执行命令：
npm install hexo --save
若无报错，自行忽略此步骤。

部署博客：

1
$ hexo deploy            或者：hexo d

若执行命令hexo deploy仍然报错：无法连接git或找不到git，则执行如下命令来安装hexo-deployer-git：

1
$ npm install hexo-deployer-git --save

若你未关联Github，则执行hexo deploy命令时终端会提示你输入Github的用户名和密码，即

1
2
Username for 'https://github.com':
Password for 'https://github.com':

hexo deploy命令执行成功后，能看到和打开http://localhost:4000页面。

Step5 创建GitHub账号

访问https://github.com

点击Sing up进行注册，或已注册的点击Sing in登录。

登录你的Github帐号，新建仓库，名为用户名.github.io固定写法。

git

Step6 关联GitHub

检查SSH keys是否存在Github

执行如下命令，检查SSH keys是否存在。如果有文件id_rsa.pub或id_dsa.pub，则将SSH key添加到Github中，否则进入下一步生成SSH key。

1
$ ls -al ~/.ssh

生成新的ssh key

执行如下命令生成public/private rsa key pair，注意将your_email@example.com换成你自己注册Github的邮箱地址。

1
$ ssh-keygen -t rsa -C "your_email@example.com"

默认会在相应路径下（~/.ssh/id_rsa.pub）生成id_rsa和id_rsa.pub两个文件。

可以到用户根目录下使用快捷键“Ctrl+H”显示所有隐藏文件，进入“.ssh”文件，打开id_rsa.pub，复制其内所有内容。

本地blog目录如下：

1
2
3
4
5
6
7
_config.yml   
db.json
node_modules
package.json
scaffolds
source
themes

使用编辑器编辑“_config.yml”:

打开后往下滑到最后，修改成下边的样子：

1
2
3
4
deploy:
	type: git
	repository: https://github.com/wndkz/wndkz.github.io.git
	branch: master

你需要将repository后wndkz换成你自己的用户名　　

  • 切记：冒号后必须有一个空格!

Step7 GitHub上添加SSH

点击GitHub页面右上角头像—>Settings

在左边会出现”Personal settings”栏目

点击“SSH and GPG keys”

点击New SSH key，添加在本地id_rsa.pub中内容，标题可以随便填写。

Step8 发布文章

终端cd到blog文件夹下，执行如下命令新建文章：

1
hexo new "postName"

名为postName.md的文件会建在目录~/Blog/source/_posts下。

文章编辑完成后，终端cd到blog文件夹下，执行如下命令来发布: 

1
2
hexo generate             //生成静态页面
hexo deploy            //将文章部署到Github

Step9 安装Next主题

终端cd到 blog 目录下执行如下命令：

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

将blog目录下_config.yml里theme的名称landscape修改为next

终端cd到blog目录下执行如下命令(每次部署文章的步骤)：

1
2
3
$ hexo clean           //清除缓存文件 (db.json) 和已生成的静态文件 (public)
$ hexo g             //生成缓存和静态文件
$ hexo d             //重新部署到服务器

至于更改theme内容，比如名称，描述，头像等去修改blog/_config.yml文件和blog/themes/next/_config.yml文件中对应的属性名称即可，不要忘记冒号:后加空格。

注意

按照本文搭建博客，启动时必须先输入以下内容：

1
m87@m87:~$ nvm use --delete-prefix v8.1.3

其中，版本号按照安装版本号来修改。

报错总结

(来源于网络)

1.出现 error deployer not found:git 或者 error deployer not found:github 的错误
解决办法：执行 npm install hexo-deployer-git --save

2.出现类似 FATAL can not read a block mapping entry; a multiline key may not be an implicit key at line 70, column 1: … 错误
解决办法：_config.yml中配置项的冒号后面要用空格隔开，再跟内容

3.中文乱码问题
解决办法：将文件的内容编码改为UTF8格式

4.’hexo sever’能够成功运行，但是localhost:4000无法访问
解决办法：执行hexo s -p 5000，改用其他端口启动

------本文结束感谢阅读------