最适合新手的 GitHub + Hexo 「大话」博客搭建教程

2017-04-28 本文已影响1351人 smartbeng

为什么要搭建博客，写博客呢？

先简单说一下，首先不管你是不是做开发的，自己动手来搭建一个博客，这本来就是一件很酷的事情，在程序员的世界里都很酷，更别说其他行业的了，本篇教程在发至公众号前做了很多整理优化。

自己搭建的才是真正属于自己的东西，我的底盘我做主，不用受限于各种约束。在学习成长的路上，记录下来，真的很有意义，记录不仅会大幅度提高你的写作水平，还会间接提高你的语言表达能力，还可以帮助他人，就比如有一天我 Google 搜有关的材料，我自己写的博客竟然出来了，当然现在有了点击率，我的这些文章都可以在百度，Google 上输入关键字搜索到。

现附上搭建成功的，堪称简洁优雅的博客效果！

我的博客效果

点击进去的效果

看我博客点这里

网上关于搭建博客教程的数不胜数 , 那为什么我还要重复「造轮子」呢！

Google 和百度上的种种教程 , 我简直是无力吐槽。对于有从业经验的朋友们来说这些教程足矣 , 因为我们有一定解决问题和克服难题的能力 , 解决的大部分问题都源于我们的经验。

所以这篇教程仅对于新手做一个正确引导 , 简单粗暴 , 浅显易懂。初心 - 为的是让新入门的兄弟看到一个不会被误导的良心教程。

开始搭建 , 请细心做好每步

安装Node.js

关于软件的安装我真的是一句废话都不愿意说 , 你一路点击 next 就 ok 了 , 以下不再解释。
windows 32 位安装包下载地址
 windows 64 位安装包下载地址
 官网下载地址各种系统以及版本都可以找到

安装Git

Git 下载地址
安装 Git 后打开 git bash 界面 , 也就是 git 命令窗口 , 以下的所有命令操作全部在此窗口进行 , 别一会儿 cmd 一会儿 git。

注册GitHub

关于账号的注册简直不宜多说 , 只要你注册过微信 qq
自行登录GitHub官方网站注册账号 (https://github.com)

点击 Sign up 注册

GitHub 官网

检查 SSH key 设置

首先我们需要检查你本机的ssh key 秘钥

$ cd ~/. ssh

如果提示：No such file or directory 说明你是第一次使用git。
生成新的 SSH key
注意1: 此处的邮箱地址，你要输入自己的邮箱地址
注意2: 此处的「-C」的是大写的「C」

$ 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):<回车就好>

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

-- 注意：输入密码的时候没有*字样的 , 也就是你输入了而命令行窗口上什么都没有，直接输，不用管。
Enter passphrase (empty for no passphrase):<输入加密串>Enter same passphrase again:<再次输入加密串>

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

最后如果没有异常信息出现 , 就成功设置ssh key了

添加 SSH key 到 GitHub

打开本地C:\Documents and Settings\Administrator.ssh\id_rsa.pub文件

此文件里面内容为刚才生成人密钥。如果看不到这个文件，你需要设置显示隐藏文件。准确的复制这个文件的内容，才能保证设置的成功。

登陆github系统。

点击右上角头像处的下拉列表 Settings--->SSH and GPG keys ---> 右上角 New SSH key
把你本地生成的密钥复制到里面（key文本框中），点击 add key 就ok了

我的 GitHub 截图

测试

可以输入下面的命令 , 看看设置是否成功，git@github.com的部分不要修改：

$ ssh -T git@github.com

如果是下面的反馈：

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就好 , 然后会看到：

Hi cnfeat! You've successfully authenticated, but GitHub does not provide shell access.

####设置用户信息

现在你已经可以通过SSH链接到GitHub了 , 还有一些个人信息需要完善的。

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

$ git config --global user.name "userName"//你的用户名
$ git config --global user.email "userName@163.com"//填写自己的邮箱
-- 查看用户名密码去掉后面的双引内容

####SSH 配置成功
本机已成功连接到github
如有问题 , 请重新设置 , 常见错误参考 
[http://help.github.com/articles/generating-ssh-keys](http://help.github.com/articles/generating-ssh-keys)
[http://help.github.com/articles/error-permission-denied-publickey](http://help.github.com/articles/error-permission-denied-publickey)
####使用GitHub 建立博客
登录后系统，在github首页，点击页面右下角「New Repository」
填写项目信息：
**Repository name：**userName.github.io 注意：userName为你的用户名
**Description (optional)：**  --描述

注：Github Pages的Repository名字是特定（两个要一致）的，比如我Github账号是cnfeat，那么我Github Pages Repository（GitHub仓库）名字就是cnfeat.github.io。

每个帐号只能有一个仓库来存放个人主页，而且仓库的名字必须是username.github.io，这是特殊的命名约定。完了你可以通过[http://username.github.io]
(http://username.github.io/) 来访问你的个人主页。

点击「Create Repository」 完成创建。

####安装Hexo

Hexo的作者是[tommy351](https://github.com/tommy351/hexo)，根据[官方介绍](http://hexo.io/docs/index.html)，Hexo是一个简单、快速、强大的博客发布工具，支持Markdown格式。

在「我的电脑」中任意选择一个盘新建「Hexo」文件夹 , 比如我在 D 盘建的 , 打开 git 窗口输入以下命令

打开 git , 运行Hexo 安装命令
``` 
$ npm install -g hexo

进入到 Hexo 目录下

 $ cd D:/Hexo

运行如下命令 , Hexo随后会自动在目标文件夹建立网站所需要的所有文件。

$ hexo init

现在已经搭建起来一个本地博客了 , 输入以下命令验证

$ hexo g

生成

$ hexo s

启动服务本地预览（预览完要停止键盘按下 Ctrl + C 停止本地预览）
然后到浏览器输入localhost:4000看看 , 一个初始博客映入眼帘

默认博客主题

更换博客主题

注意：以下每更换一次主题运行 hexo g 之前运行如下命令

$ hexo clean --因为主题换了 你需要clean以下老主题生成的缓存

运行了此命令之后再 hexo g（生成）和 hexo s（启动本地服务）进行预览

复制主题
这里推荐我的主题 , 先搭起来 , 可根据你的喜好另行设置，我是挺喜欢这个主题的，够简洁

$ git clone https://github.com/smartbeng/hexo-scribble

配置复制的主题

修改Hexo目录下的config.yml配置文件中的theme属性，将其设置为jacman

启用主题

$ cd themes/hexo-scribble
$ git pull  -- 推送
$ hexo g   -- 生成
$ hexo s   -- 启动本地预览

1.操作完之后浏览器输入 localhost:4000 看一下有没有

2.这里我说一点 , 调主题样式后面再调 , 先把博客搭建起来 , 别瞎搞

3.切记如果没有 hexo clean 一下 , 再去 hexo g 和 hexo s

4.注意：为避免出错，请先备份你的_config.yml 文件后再升级

这里有必要提下Hexo常用的几个命令：

hexo generate (hexo g) 生成静态文件，会在当前目录下生成一个新的叫做public的文件夹

hexo server (hexo s) 启动本地web服务，用于博客的预览

hexo deploy (hexo d) 部署播客到远端（比如github, heroku等平台）

另外还有其他几个常用命令：

$ hexo new "postName" #新建文章
$ hexo new page "pageName" #新建页面
postName 是你自己起的文章名字 , 内容就在这里面写

注意：重点来了

生成的文章会存在于 Hexo\source_posts 目录下

文章默认是一个.md的格式 , 意思它用的是 Markdown 语法 , 不知道的百度 , 关于语法的问题不知道的完了学 , 先下载一个 Markdown编辑器
Markdown 编辑器我喜欢用 Typora , 自行搜索下载

如果不知道Markdown 的语法写作 , 先随便在上面写点东西为了测试，之后再学习，就几个标记，很简单

写完之后 Ctrl + S 保存

那怎么在本地预览自己写的博客或者增加后的博客呢

首先在命令窗口切换回 Hexo 目录下 , 而不是你复制的主题目录下

$ cd Hexo

然后再 hexo g（生成网页）接着hexo s（启动本地服务） , 浏览器查看效果（ localhost:4000 ）
常用简写

$ hexo n == hexo new       --新建文章
$ hexo g == hexo generate   --生成页面
$ hexo s == hexo server     --启用本地浏览器预览（localhost:4000）
$ hexo d == hexo deploy     --部署博客```
常用组合

$ hexo d -g #生成部署$ hexo s -g #生成预览


重头戏 , 将你复制的主题以及所写文章成功关联到 GitHub 链接 , 就可以通过 username.github.io 访问啦
 在这里教大家一个快捷方式 , **一键部署**博客到 GitHub
进入 Hexo 的根目录 接着操作以下命令

$ cd Hexo

######注意 1：现在我们需要clone我们自己的GitHub仓库了
######注意 2：切记下面是**你自己的仓库名** , 把名字都改过来 , 下面我用的是我的仓库名字

$ git clone https://github.com/storm/
strom.github.io.git .deploy/storm.github.io```
翻译下这条命令的意思
1.将我们之前创建的GitHub 仓库克隆到本地 , 命令会新建一个目录叫做.deploy用于存放克隆的代码。
2.然后会在.deploy文件夹下生成一个 你的名字.github.io 的文件夹用于存放文件
3.接着在 Hexo 根目录下创建一个 .txt 文件 , 把下面的命令复制进去
4.注意：你的GitHub名字是什么就把你的名字全部改到下面 , 细心点

hexo generate
cp -R public/* .deploy/jacman.github.io
cd .deploy/jacman.github.io
git add .
git commit -m “update”
git push origin master```
4.将这个 ***.txt 文件的后缀改成 .sh*** , 它就变成了脚本文件 , 我们就将文件改成 ***deploy.sh*** 吧！意思就是部署

5.从此以后需要部署本地博客到 GitHub , 直接可以双击这个文件 , 他会弹出提示 , 需要输入 GitHub 的用户名跟密码 , 是不是很高大上

####见证奇迹的时刻

你的主题改完还没有推送到GitHub , 所以你需要在 git 命令窗口先进入主题目录 Hexo/themes/jacman , 运行如下命令

$ cd themes/jacman$ git pull $ hexo g --生成本地（主题）

切记这里不要用 hexo d 命令 , 好了 , 往下看

现在切回到Hexo的根目录下 , 我的在 D 盘 , 我就输入以下命

$ cd D:/Hexo

如果你想改博客内容 , 随时都可以 , 进入 D:\Hexo\source_posts 目录下 , 右键你所创建的文件用Markdown编辑器打开 , 编辑完 Ctrl + S 保存关掉窗口就行了 , 紧接着往下走就OK
接着输入下面的生成命令

$ hexo g


**最后一步 , 发布博客**（发布之后访问会有延迟 , 别着急）

双击我们刚在Hexo 目录下编辑的 deploy.sh 脚本文件 , 然后默默的输入 GitHub 用户名和密码 , 完了之后就去访问你的个人博客网页吧！就是你的 GitHub 仓库名 [https://username.github.io](https://username.github.io) (username 是你的用户名呀哥 , 别搞错) 

也就是说：以后你发布博客只需要两步 , Hexo 根目录下 运行 hexo g , 之后点击 depploy.sh 脚本！
**以后如果你第二次**修改了新的主题 , 在修改完 Hexo 下的 _config.yml 之后请进行以下操作

$ cd Hexo/themes/jacman -- 当然是先进入主题的目录了
$ hexo clean --然后clean一下老主题
$ git pull
$ hexo g -- 生成
此时再进入 Hexo 的根目录下
$ hexo g```
然后直接双击 Hexo 下的 deploy.sh 脚本吧！等着输入用户名密码就OK

如果不出意外，你会看到一个跟我博客一样主题的你的专属博客映入你的眼帘，这句话有点长，哈哈

请注意这里有个大坑

_confing.yml 下 timezone 配置不能错
timezone: zh-CN #能配置成 +08:00 类似的

上面那个也有不对的，如果设置cheng +08:00 后 momentjs解析会报异常
需要将timezone配置成时区名称
timezone: Asia/Shanghai

关于域名的绑定看我解释 , 不需要域名的 , 比如我的用户名是 smartbeng , 就可以通过 (https://smartbeng.github.io) 来访问我的博客了。绑定自己的域名买域名都是后话了 , 等你富裕了可以完全买一个绑定在这里 , 比如我去买一个 www.smart.com , 完了绑定在GitHub , 以后就可以访问这个链接来到我的博客了 , 绑定很简单 , 自行网上搜索。为了不对新手造成误导 , 就把这个省略了 , 因为有人问我是不是一定要绑定域名 , 可见某些教程误导了新上手的同学。
基于Hexo 的我的博客主题地址 https://github.com/smartbeng/hexo-scribble
欢迎 Fork , 欢迎 Pull requests , 感觉这个教程有帮助的起码别忘了给我的 GitHub Star 哈 , 感谢！
祝愿大家在这条路上越走越远 , 不断突破自己 , 让自己变得更加出众！

最后说两句 , 关于本主题的配置百度一搜就有 , 比如我们用的jacman的主题 , 你就搜jacman 的主题配置, 关于样式的调整 , 如果你是一个追求完美的人 , 那你就要在这上面用点心思了 , 比如说调 CSS 样式什么的 , 哈哈你懂得！如果感觉本教程不错欢迎大伙儿推荐给没搭建的朋友们来踩 , 感谢！