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

发表于 更新于 分类于 ， 阅读次数：
本文字数： 3k 阅读时长 ≈ 3 分钟

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

最初的诞生

我采用的搭建博客的方式是使用 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 name和Your'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的配置后，会逐步优化博客样式。

相关文章
点击刷新