Home

smartbeng

做好今天的自己！

Blog About Email Github
‹
›

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

网上关于搭建博客教程的数不胜数 , 那为什么我几天还要重复「造轮子」呢！关于 Google 和百度上的种种教程 , 我简直是无力吐槽 。对于有从业经验的朋友们来说这些教程足矣 , 因为我们有一定解决问题和克服难题的能力 , 解决的大部分问题都源于我们的经验。所以这篇教程仅对于新手做一个正确引导 , 简单粗暴 , 浅显易懂。初心 - 为的是让新入门的兄弟看到一个不会被误导的良心教程。

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

安装Node.js

关于软件的安装我真的是一句废话都不愿意说 , 你一路 next 就 ok 了 , 以下不再解释。

windows 32 位安装包下载地址

windows 64 位安装包下载地址

官网下载地址 各种系统以及版本都可以找到

安装Git

Git 下载地址

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

注册GitHub

关于账号的注册简直不宜多说 , 只要你注册过微信 qq

自行登录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了

测试

可以输入下面的命令 , 看看设置是否成功，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/error-permission-denied-publickey

​

使用GitHub 建立博客

登录后系统，在github首页，点击页面右下角「New Repository」

填写项目信息：

Repository name：userName.github.io 注意：userName为你的用户名

Description (optional)： Writing 1000 Words a Day Changed My Life –描述

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

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

点击「Create Repository」 完成创建。

安装Hexo

Hexo的作者是tommy351，根据官方介绍，Hexo是一个简单、快速、强大的博客发布工具，支持Markdown格式。

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

  1. 打开 git , 运行Hexo 安装命令

​ $ npm install -g hexo

  1. 进入到 Hexo 目录下

​ $ cd D:/Hexo

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

    $ hexo init

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

    $ hexo g -生成

    $ hexo s -启动服务本地预览 （预览完要停止键盘按下 Ctrl + C 停止本地预览）

    然后到浏览器输入localhost:4000看看 , 一个初始博客映入眼帘

更换博客主题

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

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

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

  1. 复制主题

    这里推荐一个靠谱主题 , 先搭起来 , 发现好的再另行设置

    $ git clone https://github.com/wuchong/jacman.git themes/jacman

  2. 配置复制的主题

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

  3. 启用主题

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

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

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

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

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

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

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

  1. hexo generate (hexo g) 生成静态文件，会在当前目录下生成一个新的叫做public的文件夹
  2. hexo server (hexo s) 启动本地web服务，用于博客的预览
  3. hexo deploy (hexo d) 部署播客到远端（比如github, heroku等平台）

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

$ hexo new "postName" #新建文章
$ hexo new page "pageName" #新建页面

postName 是你自己起的文章名字 , 内容就在这里面写

注意：重点来了

  1. 生成的文章会存在于 Hexo\source_posts 目录下
  2. 文章默认是一个.md的格式 , 意思它用的是 Markdown 语法 , 不知道的百度 , 关于语法的问题不知道的完了学 , , 先下载一个 Markdown编辑器
  3. Markdown 编辑器我喜欢用 Typora , 自行搜索下载
  4. 如果不知道Markdown 的 语法写作 , 先随便在上面写点东西为了测试

  5. 写完之后 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

  1. 进入 Hexo 的根目录 接着操作以下命令

    $ cd Hexo

    注意 1：现在我们需要clone我们自己的GitHub仓库了

    注意 3：切记下面是你自己的仓库名 , 把名字都改过来 , 下面我用的是我的仓库名字

    $ git clone https://github.com/storm/

    strom.github.io.git .deploy/storm.github.io

    翻译下这条命令的意思

    将我们之前创建的GitHub 仓库克隆到本地 , 命令会新建一个目录叫做.deploy用于存放克隆的代码。

    然后会在.deploy文件夹下生成一个 你的名字.github.io 的文件夹用于存放文件

    2.接着在 Hexo 根目录下创建一个 .txt 文件 , 把下面的命令复制进去

    3.注意 ：你的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 (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

    • 关于域名的绑定看我解释 , 不需要域名的 , 比如我的用户名是stormzha , 就可以通过 https://stormzha.github.io 来访问我的博客了。绑定自己的域名买域名都是后话了 , 等你富裕了可以完全买一个绑定在这里 , 比如我去买一个 www.storm.com , 完了绑定在GitHub , 以后就可以访问这个链接来到我的博客了 , 绑定很简单 , 自行网上搜索。为了不对新手造成误导 , 就把这个省略了 , 因为有人问我是不是一定要绑定域名 , 可见某些教程误导了新上手的同学。

    • 基于Hexo 的帅张博客主题地址 https://github.com/smartbeng/hexo-scribble

      欢迎 Fork , 欢迎 Pull requests , 感觉这个教程有帮助的起码别忘了给我的 GitHub Star 哈 , 感谢！

    • 祝愿大家在这条路上越走越远 , 不断突破自己 , 让自己变得更加出众！

      ​

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

    ​

    微信公众号「smartbeng」,吐血版珍藏持续更新，一个会爱上的公众号。

    webwxgetmsgimg.jpg


smartbeng

scribble

Blog About Email Github