我的第一篇博客：GitHub+Hexo搭建博客过程

发表于   |   分类于

背景

大四理工科学生，精力旺、时间多。觉得有一个自己的空间，写点自己感兴趣的东西这事挺酷的。

我为什么要搭建个人博客

博客是一个很酷的产品。虽然博客辉煌的年代已经过去，但我认为在这个后博客时代的博文会更纯粹也更精髓。

我要搭建一个怎么样的博客

  • 免费
    莫名其妙的原因，就是不想买域名，买空间。
  • 独立
    独立的才是自己的。
  • 简洁
    内容是博客的灵魂，所以博客界面必须足够简洁。我想搭建的博客看不到胡里花哨的东西，能让人只专注到内容上面。这也是我不用新浪博客、网易博客等现成博客的原因之一。

    怎样去实现它

    在知乎上面瞎逛的时候，碰巧看到这样一个回答。你见过最棒的个人博客是什么？温柔的回答。

刚好满足我对个人博客的一些幻想。所以确定了用GitHub+Hexo+Next主题的思路。

正题

以上是背景，接下来进入正题。

准备：配置开发环境

依次下载安装：

怎样打开Git？

  1. 开始界面点击Git Bash

开始界面打开.jpg

  1. 进入目标文件夹鼠标右键打开Git Bash

文件夹内鼠标右键打开.jpg
推荐使用第二种方法。

一. 注册访问Github

Github为广大开发者提供了一个非常好的平台，不仅是代码的开源，同时Github还提供了开发者可以在Github上建立自己的站点。这个功能的局限是只能创建静态的网站。

注册完成后，需要验证邮箱。我第一次平时用的163邮箱，不过没有收到验证邮件。发现很多同学都遇到跟我一样的问题，换成QQ邮箱之后OK。

接下来：

  1. 新建Repository

    • 页面右上角，新建Repository
      新建repository.jpg
    • 创建yourname.github.io，打勾表示名称可用
      新建repository名称.jpg

  2. 配置SSH-Key

    • 检查是否已经有SSH Key：打开Git Bash
      $cd ~/.ssh　
      如果说没有这个目录，就直接看第三步。
    • 备份
    • 生成一个新的SSH。
      $ssh-keygen -t rsa -C "your e-mail"
      之后直接回车，不用填写东西。然后就生成一个目录.ssh ，里面有两个文件：id_rsa , id_rsa.pub。
      成功之后是这样的：
      SSH-Key成功结果.jpg
  • 把这个SSH放到github上：进入account-setting ，把id_rsa.pub的内容复制进去就可以了。

二. Hexo

关于Hexo

  • 快速，简单而高效的静态博客框架

Hexo初始化博客框架

1.安装Hexo

$ npm install -g hexo-cli

2.初始化框架

$ hexo init <yourFolder>
$ cd <yourFolder>
$ npm install

初始化完成后，指定文件夹的目录如下

.
├── _config.yml //网站的配置信息，您可以在此配置大部分的参数。
├── package.json
├── scaffolds //模版文件夹。当您新建文章时，Hexo 会根据 scaffold 来建立文件。
├── source //资源文件夹是存放用户资源的地方。
| ├── _drafts
| └── _posts
└── themes //主题文件夹。Hexo会根据主题来生成静态页面。

3.新建文章（创建一个hello world）

$ hexo new "Hello World"

会在/source/_post里添加hello-world.md文件，之后新建的文章都将存放在此目录下。编辑hello-world.md文件可修改内容。

4.生成网站

$ hexo generate

此时会将/source的.md文件生成到/public中，形成网站的静态文件。

5.本地服务器

$ hexo server

输入http://localhost:4000 即可查看网站。
可修改：

$ hexo server -p 3000

此时，输入http://localhost:3000 查看网站。

6.部署网站

$ hexo deploy

部署网站之前需要生成静态文件。
可以用$ hexo generate -d直接生成并部署。此时需要在_config.yml中配置你所要部署的站点：

部署网站.jpg

  • 到此为止完成网站的雏形。输入yourname.github.io可访问博客主页。例如：http://moyatao.github.io/ 。
    绕坑：
    部署的时候有可能会出错，别急，加这一步操作就ok了

    $ npm install hexo-deployer-git --save

    在此感谢知友“温柔”的帮助，这是他的博客：http://ursocute.github.io/

附：

三. Next主题

NexT 主旨在于简洁优雅且易于使用，所以首先要尽量确保NexT的简洁易用性。

这是一个扩展主题，由一个台湾学生iissnan开发。主题秉承精于心，简于形的理念。

  1. 下载Next主题 
    $ cd your-hexo-site
$ git clone https://github.com/iissnan/hexo-theme-next themes/next
  2. 启用Next主题
    下载完成后，打开站点配置文件，找到theme字段，并将其值更改为 next。
    # Extensions
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
theme: next
  3. 验证是否可用
    运行hexo s –debug，并访问http://localhost:4000 ，确保站点正确运行。

附：

四. Markdown语法

Markdown 是一种「电子邮件」风格的「标记语言]，Hexo支持Markdown。

打开之前生成的Hello World.md文件，惊奇地发现，就是用Markdown语法写的。
Hello World.jpg

Markdown 编辑器

网上搜索一下，网友推荐的Markdown编辑器很多，看个人选择。我对简书这个产品比较有好感，用的是简书的Markdown在编辑器。效果就是酱紫滴：
简书在线编辑器效果.jpg
备注：

  • 正在学习Markdown基础语法，第二篇博客内容就整理Markdown语法。

附：

感悟

从想要搭建一个独立免费的个人博客开始，网上搜索各种资料。用过一个国外的傻瓜式软件，生成的界面太粗糙，而且不稳定。这点与我的初心不符直接放弃。

瞎逛了几天之后，终于确定了用本文的方法，然后开始摸索。什么都不懂的小白，用了三天时间，终于搭建了我的第一个个人博客Mr H’s Blog。过程中遇到了一些问题，但我这人就喜欢和自己死磕到底。感谢网友的分享和热情帮助。