基于hexo和github搭建个人博客

首页摘要:

本身对CCS和HEXO完全没有接触过,在知乎上搜索发现很多人都是用hexo结合github来搭建个人博客,这种方式可以在不购买域名的情况下直接搭建,只需要安装一些特定的软件和注册github账号就可以,我了解其中大概的原理花了3个晚上,之后重新搭建十分钟就可以独立搭完一个博客的,所以现在来一步步介绍怎么搭建,同时我也会说明为什么要有这些步骤。

当然我的博客也还没完全搭好,毕竟对博客一些CSS文件不了解,今后慢慢完善评论功能以及添加域名

环境准备

  1. 安装Node.js 这个可以编译Javascript代码 ,也就是处理网页文件需要的工具
  2. Github 注册Github网站账号,用来存储Node.js生成的文件,这样就能在网站中看到内容了
  3. 安装Git 一款上传Node.js生成的文件到Github的工具

注册Github

1. 点击“+”注册,首先得有一个账号

preview

2. 注册完之后就需要创建repository,这个就是我们保存Node.js生成文件的地方了

img

填写地址,这个就是以后博客的地址了,一般是username.github.io,username是英文名,这个随意

img

配置和使用Github

1. 开始—所有应用—找到git bash

img

2. 接下来是配置SSH keys,SSH keys是一个包含了保存在你本地文件地址等信息的密码,需要复制到githu里面,这样本地文件和github就达成了联系但是又具有保密性

首先要检查自己电脑上现有的 SSH key :

在Git bash中输入cd ~/. ssh

img

如果显示“No such file or directory”,说明这是你第一次使用 git

这个时候就需要生成心的SSH key

1
2
3
4
5
`$ ssh-keygen -t rsa -C "邮件地址@youremail.com"`

Generating public/private rsa key pair.

`Enter file in which to save the key (/Users/your_user_directory/.ssh/id_rsa):<回车就好>`

【提示1】这里的邮箱地址,输入注册 Github 的邮箱地址;

【提示2】「-C」的是大写的「C」

然后系统会要你输入密码:

1
2
Enter passphrase (empty for no passphrase):<设置密码>
Enter same passphrase again:<再次输入密码>

在回车中会提示你输入一个密码,这个密码会在你提交项目时使用,如果为空的话提交项目时则不用输入。这个设置是防止别人往你的项目里提交内容。

注意:输入密码的时候没有输入痕迹的,不要以为什么也没有输入。

最后看到这样的界面,就成功设置ssh key了:

img

3. 添加SSH Key到GitHub

在本地文件夹找到id_rsa.pub文件,看上面的图片第四行的位置告诉你存在哪里了

没找到的勾选一下文件扩展名 隐藏的项目

img

.ssh文件夹里记事本打开这个文件复制全部内容到 github相应位置。

img

具体位置是:

img

img

Title最好写,随便写。网上有说不写title也有可能后期出现乱七八糟的错误

Key部分就是放刚才复制的内容啦 点击Add SSH key

4. 测试是否完成

git bash 里

输入以下代码 不要改任何一个字 我就是自作聪明以为代表的是自己注册时候的邮箱然后…

1
$ ssh -T git@github.com

如果得到以下反馈

1
2
3
The authenticity of host 'GitHub.com (207.97.227.239)' can't be established.
RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.
Are you sure you want to continue connecting (yes/no)

输入yes回车,出现

1
`Enter passphrase for key '/f/Github_manage/TanBendong.github.io/.ssh/id_rsa':`

输入刚才设置的密码回车就可以了(注意在git bash里面输入密码是不可见的),结果如图

img

5. 设置用户信息

现在已经可以通过 SSH 链接到 GitHub 啦!当然还需要完善一些个人信息:

1
2
$ git config --global user.name "wuyalan"//输入注册时的username
$ git config --global user.email "alan.wyl@foxmail.com"//填写注册邮箱

GitHub 也是用这些信息来做权限的处理,输入下面的代码进行个人信息的设置,把名称和邮箱替换成你自己的,名字必须是你的真名,而不是GitHub的昵称。

6. SSH Key配置成功

本机已成功连接到 github。

利用hexo搭建博客

利用npm命令安装hexo,这些命令都是在git bash里面输入的

1
2
$ cd
$ npm install -g hexo
1. 创建独立博客项目文件夹

安装完成后,关掉前面那个 Git Bash 窗口。在本地创建一个与 Repository 中博客项目同名的文件夹(如E:[http://username.github.io](https://link.zhihu.com/?target=http%3A//username.github.io))在文件夹上点击鼠标右键,选择 Git bash here;

【提示】在进行博客搭建工作时,每次使用命令都要在 H:[http://username.github.io](https://link.zhihu.com/?target=http%3A//username.github.io) 目录下。

执行下面的指令,Hexo 就会自动在 H:[http://username.github.io](https://link.zhihu.com/?target=http%3A//username.github.io) 文件夹建立独立博客所需要的所有文件啦!

1
$ hexo init
2. 安装依赖包
1
$ npm install
3. 确保git部署
1
$ npm install hexo-deployer-git --save
4. 本地查看

现在已经搭建好本地的 Hexo 博客了,执行完下面的命令就可以到浏览器输入 localhost:4000 查看到啦

1
2
$ hexo g
$ hexo s

hexo g 每次进行相应改动都要hexo g 生成一下,这一步是对本地文件用Node.js解析的过程,只要你的本地文件发生改动就必须用这个命令

hexo s 启动服务预览,这个命令可以将生成好的文件离线在本地浏览器查看,这时还没有上传到github

5. 用Hexo克隆主题

执行完 hexo init 命令后会给一个默认的主题:landscape

你可以到官网找你喜欢的主题进行下载 hexo themes 知乎:有哪些好看的 Hexo 主题?

找到它所在的 Github Repository )

找到之后通过git命令下载

在主题的repository点击clone 复制一下那个地址

preview

1
$ git clone +复制的地址+themes/black-blue

后面就是clone之后放到你本地的博客文件夹themes文件夹下,black-blue就是我clone的主题,生成了一个文件夹。landscape是hexo默认生成的,这个时候当然用自己喜欢的啦。black-blue里面有Readme,作者一般会告诉你怎么改主题

img

6. 修改整站配置文件

自己把 http://blog.io 中文件都点开看一遍,主要配置文件是 _config.yml(注意是username.github.io文件夹下的 _config.yml),可以用记事本打开,推荐使用 sublime 或者nodepad++打开。

img

修订清单如下,文档内有详细注释,可按注释逐个修订

  • 博客名字及作者信息:_config.yml
  • 个人介绍页面:about.md
  • 代表作页面:milestone.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
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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
# Hexo Configuration

## Docs: http://zespia.tw/hexo/docs/configure.html

## Source: https://github.com/tommy351/hexo/

# Site 这里的配置,哪项配置反映在哪里,可以参考我的博客

title: My Blog #博客名
subtitle: to be continued... #副标题
description: My blog #给搜索引擎看的,对网站的描述,可以自定义
author: Yourname #作者,在博客底部可以看到
email: yourname@yourmail.com #你的联系邮箱
language: zh-CN #中文。如果不填则默认英文

# URL #这项暂不配置,绑定域名后,欲创建sitemap.xml需要配置该项

## 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/
tag_dir: tags
archive_dir: archives
category_dir: categories

# Writing 文章布局、写作格式的定义,不修改

new_post_name: :title.md # File name of new posts
default_layout: post
auto_spacing: false # Add spaces between asian characters and western characters
titlecase: false # Transform title into titlecase
max_open_file: 100
filename_case: 0
highlight:
enable: true
backtick_code_block: true
line_number: true
tab_replace:

# Category & Tag

default_category: uncategorized
category_map:
tag_map:

# Archives 默认值为2,这里都修改为1,相应页面就只会列出标题,而非全文

## 2: Enable pagination

## 1: Disable pagination

## 0: Fully Disable

archive: 1
category: 1
tag: 1

# Server 不修改

## Hexo uses Connect as a server

## You can customize the logger format as defined in

## http://www.senchalabs.org/connect/logger.html

port: 4000
logger: false
logger_format:

# 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-M-D
time_format: H:mm:ss

# Pagination 每页显示文章数,可以自定义,贴主设置的是10

## Set per_page to 0 to disable pagination

per_page: 10
pagination_dir: page

# Disqus Disqus插件,我们会替换成“多说”,不修改

disqus_shortname:

# Extensions 这里配置站点所用主题和插件,暂时默认

## Plugins: https://github.com/tommy351/hexo/wiki/Plugins

## Themes: https://github.com/tommy351/hexo/wiki/Themes

theme: landscape
exclude_generator:
plugins:

- hexo-generator-feed
- hexo-generator-sitemap

# Deployment 站点部署到github要配置

## Docs: http://zespia.tw/hexo/docs/deploy.html

deploy:
type: git
repository:
branch: master
7. 启用新下载的主题

在刚打开的的_config.yml 文件中,找到“# Extensions”,把默认主题 landscape 修改为刚刚下载下来的主题名:

【提示】http://username.github.io 里有两个 config.yml 文件,一个在根目录,一个在 theme 下,现在修改的是在根目录下的。

8. 更新主题

git bash 里执行

1
2
$ cd themes/主题名
$ git pull
10. 本地查看调试

每次修改都要hexo g 生成一下

1
2
$ hexo g #生成
$ hexo s #启动本地服务,进行文章预览调试,退出服务用Ctrl+c

浏览器输入

localhost:4000 预览效果

将博客部署到http://username.github.io

1. 复制SSH码

进入 Github 个人主页中的 Repository,复制新建的独立博客项目:http://username.github.io 的 SSH 码

img

2. 编辑整站配置文件

打开 H:\username.github.io_config.yml,把刚刚复制的 SSH 码粘贴到“repository:”后面,别忘了冒号后要空一格。

1
2
3
4
deploy:
type: git
repository: git@github.com:username/username.github.io.git
branch: master
3. 执行下列指令即可完成部署

【提示】每次修改本地文件后,需要 hexo g 才能保存。每次使用命令时,都要在你的博客文件夹目录下

1
2
$ hexo g
$ hexo d

【提示】如果在配置 SSH key 时设置了密码,执行 hexo d 命令上传文件时需要输入密码进行确认,会出现一个小框框,这个密码“配置和使用Github”步骤中设置的,输入即可。

img

输入密码之后在浏览器输入:

username.github.io

如果得到你想要的效果,那么恭喜你,博客已经搭建好啦!

参考文献

[1] https://zhuanlan.zhihu.com/p/32957389

#
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×