搭建个人博客(Hexo+Next+Github)

在经过多个教程摸索和尝试后,发现手把手有时候挺坑人的,毕竟经验还是要自己攒,不然没踩的坑迟早要踩到,最终我的个人博客林深时见璐搭建完成,这篇教程会从本地博客建立到实现美观的网络博客进行记录分享,这篇博客也就会随着本博客的每一次升级完善而补充,希望能给想自建博客的朋友们提供帮助。

最初的诞生

我采用的搭建博客的方式是使用 GitHub Pages + Hexo 的方式,这个应该是我摸索之后认为的对新手最友好也最优质的方式,只需要投入时间学习和运营,就能拥有美观的个人博客。以下的1 - 3小点是博客的雏形构建[1]

注册Github账号

要使用 GitHub Pages,首先你要注册一个GitHub账号。

GitHub注册页☆ GitHub注册页

安装必备软件

1) 安装Git客户端

2) 安装Node.js

搭建博客

  1. 新建博客

配置GitHub,步骤如下:

1) 登录GitHub后新建项目(new repository),项目名由两部分组成即GitHub账号名和固定后缀.github.io,比如我的项目就是linwhitehat.github.io,填写完点击创建项目(create repository)。

2) 配置GitHub SSH密钥,本地打开git bash,输入ssh-keygen -t rsa -C "your's emaill address",其中your’s email address换成GitHub账号的邮箱地址,第一次点击回车键(Enter)会显示存储位置,第二次点击回车键会显示输入密钥,按照要求输入密钥两次(输入过程是看不到密钥的),之后在第一次显示的存储位置打开文件id_rsa.pub,复制文件内所有内容,在GitHub中点击头像可看的setting选项,在setting选项中可看到SSH and GPG keys选项,点击new SSH,然后输入title(方便密钥管理的名字),将刚才复制的内容粘贴到key中。

3)创建本地仓库,在本地选择不包含中文的文件路径,新建一个文件夹,进入文件夹并点击右键选择git bash,输入以下命令进行设置:

1
2
3
git init
git config --global user.name "Your's name"
git config --global user.email "Your's email address"

其中Your's nameYour's email address替换为GitHub账户名和对应邮箱地址。

4) 安装Hexo,按照之前方式进入git bash终端,输入node检测Node.js是否安装成功,若出现>则表示正常,退出node模式,输入以下命令安装Hexo:

1
2
npm install -g hexo-cli
hexo version

看到输出版本号等信息表示安装Hexo成功,在当前新建的文件夹下新建一个hexo文件夹,在hexo文件夹中进入git bash,输入以下命令配置hexo,完成之后,在浏览器输入http://localhost:4000,正常则可看到初始化的博客,到此便完成本地博客的建立。

1
2
3
4
hexo init
npm install
hexo g
hexo s

5)配置Hexo到GitHub,在hexo文件夹下存在一个配置文件_config.yml,打开后可看到文件最后部分为:

1
2
deploy:
type:

将其修改为以下内容,其中yourname为GitHub账号名:

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

保存后,在当前文件夹打开git bash并输入:

1
2
hexo g
hexo d

若出现错误显示ERROR Deployer not found: git,则输入以下命令:

1
2
3
npm install hexo-deployer-git --save
hexo g
hexo d

若弹出填写GitHub账号用户名和密码则正常填写,完成之后在浏览器输入https://yourname.github.io,yourname替换为GitHub账户名,即可通过互联网访问博客。

6)如果不想自己新建,可以使用现有的他人博客项目进行改建,见第2小节

  1. 使用已有的博客模板

1) 注册完成后搜索 linwhitehat.github.io 进入我的仓库

GitHub项目☆ GitHub项目

点击右上角的 Fork 将我的仓库拉倒你的账号下

稍等一下,点击刷新,你会看到Fork了成功的页面

Fork项目☆ Fork项目

2) 修改仓库名

点击settings进入设置

项目设置修改☆ 项目设置修改

修改仓库名为 你的Github账号名.github.io,然后 Rename

修改项目名☆ 修改项目名

这时你在在浏览器中输入 你的Github账号名.github.io 例如:linwhitehat.github.io

你将会看到如下界面

博客首页☆ 博客首页

说明已经成功一半了😀当然,还需要修改博客的配置才能变成你的博客。

若是出现

访问出错☆ 访问出错

则需要 检查一下你的仓库名是否正确

修改博客配置

来到你的仓库,找到_config.yml文件,这是网站的全局配置文件。

博客配置文件☆ 博客配置文件

点击修改

修改配置文件☆ 修改配置文件

然后编辑_config.yml的内容

配置文件内容修改☆ 配置文件内容修改

接下来我们来详细说说以下配置文件的内容:

基础设置说明

1
2
3
4
5
6
7
8
9
# Site settings
title: Your Blog #你博客的标题
SEOTitle: 你的博客 | Your Blog #显示在浏览器上搜索的时候显示的标题
header-img: img/post-bg-rwd.jpg #显示在首页的背景图片
email: You@gmail.com
description: "You Blog" #网站介绍
keyword: "L1n, L1n Blog" #关键词
url: "https://linwhitehat.github.io" # 这个就是填写你的博客地址
baseurl: "" # 这个我们不用填写

至此,一个初具形态的博客便生成了。

进阶

  1. 本文中新建仓库建立博客的方式,在本地建立仓库后,又再新建一个hexo文件,且将hexo配置托管到GitHub之后,GitHub项目便被hexo文件夹下的.deploy_git覆盖,之后修改博客维护项目只需要在hexo文件夹下的git bash进行hexo处理即可。
  2. 本文博客搭建的目录结构如下,相关博客搭建及优化教程中涉及的路径参照此目录树:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 博客根目录
|-- hexo
| |-- _config.yml
| |-- node_modules
| |-- public
| |-- scaffolds
| |-- source
| `-- themes

# 主题根目录
|-- themes
`-- next
|-- LICENSE.md
|-- README.md
|-- _config.yml
|-- docs
|-- languages
|-- layout
|-- scripts
`-- source
  1. Hexo卸载方式,在git bash执行以下命令:
1
2
npm uninstall hexo-cli -g
npm uninstall hexo -g

博客相应的文件目录需要手动删除。

结束

博客搭建基本完成,但是博客中有很多地方可以自定义设计,这也是自建博客的初衷,熟悉Hexo和Next.Mist的配置后,会逐步优化博客样式。

点击刷新