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

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

最初的诞生

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

注册Github账号

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

安装必备软件

1. 安装Git客户端

2. 安装Node.js

搭建博客

1. 新建博客
   配置GitHub，步骤如下:

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

   • 配置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中。

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

     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账户名和对应邮箱地址。

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

     npm install -g hexo-cli
     hexo version

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

     hexo init
     npm install
     hexo g
     hexo s

   • 配置Hexo到GitHub，在hexo文件夹下存在一个配置文件_config.yml，打开后可看到文件最后部分为：

     deploy:
      type:

   将其修改为以下内容，其中yourname为GitHub账号名：

   deploy:  
    type: git
    repository: http://github.com/yourname/yourname.github.io.git
    branch: master

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

   hexo g
   hexo d

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

   npm install hexo-deployer-git --save
   hexo g
   hexo d

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

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

2. 使用已有的博客模板

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

   

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

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

   

   • 修改仓库名

   点击settings进入设置

   

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

   

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

   你将会看到如下界面

   

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

   若是出现

   

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

修改博客配置

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

点击修改

然后编辑_config.yml的内容

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

基础设置说明

# 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. 本文博客搭建的目录结构如下，相关博客搭建及优化教程中涉及的路径参照此目录树：

   # 博客根目录
   |-- hexo
   |   |-- _config.yml
   |   |-- node_modules
   |   |-- public
   |   |-- scaffolds
   |   |-- source
   |   `-- themes
   
   # 主题根目录
   |-- themes
     `-- next
       |-- LICENSE.md
       |-- README.md
       |-- _config.yml
       |-- docs
       |-- languages
       |-- layout
       |-- scripts
       `-- source

3. Hexo卸载方式，在git bash执行以下命令：

   npm uninstall hexo-cli -g
   npm uninstall hexo -g

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

结束

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

---

1. 1.博客雏形安装 ↩