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

为什么要搭建博客,写博客呢?

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

自己搭建的才是真正属于自己的东西,我的底盘我做主,不用受限于各种约束。在学习成长的路上,记录下来,真的很有意义,记录不仅会大幅度提高你的写作水平,还会间接提高你的语言表达能力,还可以帮助他人,就比如有一天我 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

启用主题

从Hexo的根目录进入你复制的主题目录

$ 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 样式什么的 , 哈哈你懂得!如果感觉本教程不错欢迎大伙儿推荐给没搭建的朋友们来踩 , 感谢!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,607评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,047评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,496评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,405评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,400评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,479评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,883评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,535评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,743评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,544评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,612评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,309评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,881评论 3 306
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,891评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,136评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,783评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,316评论 2 342

推荐阅读更多精彩内容